Mini Curso de Design de Interfaces para Dispositivos Móveis

Minicurso Design de Interfaces para Dispositivos Móveis

Saturday, August 21, 2010

Tópicos

• Entendendo Dispositivos Móveis e o Processo de Desenvolvimento de UI’s

• Definindo as Funcionalidades do seu Aplicativo

• Por que um “bom” Design é um diferencial?

• A apresentação começa com o Ícone

• Padrões de Interação e a Importância do Fluxo de uma Interface

• Guias (HIG’s) e a Interface de Usuário

• Prototipação Rápida

• Identidade Visual, criando seu próprio “Look and Feel!”


Quem vos fala?

• Paolo Domenico Passeri

• Curioso por natureza!

• Engenheiro + Designer

• Pensar em soluções

• Antes: Aluno e Monitor de UxD no Faber-Ludens

• Hoje: Desenvolvimento de Produtos na Positivo Informática


...e vocês?


O curso

50%50%AtividadesConceitos = 4 horas4 horas =


Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...


• Facilidade

• Agilidade

• Intuitividade

• Algo “novo”

• Se surpreender

• “Transparência”

...e o que eles BUSCAM


Aprenda TUDO sobre o dispositivo

• como ele funciona?

• é pesado ou leve?

• é confortável de segurar?

• como acesso suas funções?

• quais botões ele possui?

• quais aplicativos são “legais”?

• quais não são?

Você tem que ser O USUÁRIO!


Não é um computador TRADICIONAL!


A interface tem que ser REPENSADA...

CTRL+C, CTRL+V NÃO funciona!


...para ATENDER ao dispositivo móvel

Somente os elementos CHAVE se mantém!


PROCESSO de desenvolvimento

Conceito Design Desenvolvimento Distribuição Marketing Manutenção


Atividade vs. Tempo

DesenvolvimentoDesign

Debug

Test

DESENVOLVIMENTO > DESIGN = RESUTADOS


Atividade vs. Tempo

Desenvolvimento

Design

Debug

Test

DESIGN > DESENVOLVIMENTO = RESUTADOS


Como vamos chegar lá?

Ideia(Refinar)

Processo(Executar)

Interface(Desenhar)


Refinando a sua Ideia

“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”

• Quem é o seu PÚBLICO ALVO?• Pessoas de negócios ou usuários finais

• Jovens ou idosos

• Homens ou Mulheres

• Vão usar diariamente ou ocasionalmente

• Quais são as principais FUNCIONALIDADES?• Consumir ou produzir conteúdo?

• É necessário já possuir algum serviço?

• O que realmente o usuário vai querer?


Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.

- Mark Twain

“”


EXERCÍCIO: Criando a sua DECLARAÇÃO

• ESCOLHAM uma categoria de aplicativo dos Post-It`s

• DEFINAM quem será o público alvo para o seu aplicativo

• LEVANTEM todas as funcionalidades que consigam pensar

• CORTEM funcionalidades que não fazem parte do core (menos importantes)

• JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES

45 minutos

• Post-It

• Papel

• Lápis/Caneta


Meetings for iPadPaolo Domenico Passeri


DESIGN como um DIFERENCIAL


• Maior apelo aos usuários

• Mais atenção da mídia

• Diferencial vs. Concorrência

• Da vontade de “voltar”

• Incentiva a exploração

• VENDE MAIS!

Por que ter DESIGN?


Estudo de Caso: CONVERT

• Aplicativo para conversão de unidades

• Preço: U$0.99

• Lançado em Agosto de 2009

• Unidades vendidas: 197,424

• Faturamento bruto: $195,450

• Faturamento liquido: $137,065

Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!

2 meses


A importância dos ICONES

• É a porta de ENTRADA de seu aplicativo

• Se bem desenhado pode REPRESENTAR seu produto

• “Eu nem entro se o ICONE for RUIM”!

• Apresenta FUNÇÕES de maneira VISUAL para o usuário


Qual destes você escolheria (deixe 8)?

1

8

15

2

9

16

3

10

17

4

11

18

5

12

6

13

7

14


EXERCÍCIO: Desenhando o ICONE

• LEIAM novamente a “Declaração de Definição do Produto” (DDP)

• BUSQUEM elementos que possam inspirar o icone, considerando a DDP

• DESENHEM 5 conceitos de icone

• SELECIONEM 1 conceito

• DESENHEM o icone “final”

45 minutos

• Papel

• Lápis/Caneta

• Cores


Fontes de ícones

iOS Toolbar Icons

Glyphish’/>

iOS Toolbar Icon Set

iOS Toolbar Icons 2

30 Free Vector Icons

iconSweets

The Android Developer Common Icon Set II

30 Free Android Menu Icons

Free Android 2.x Monster Icons


http://www.glyfx.com/products/free_android2.html

http://www.glyfx.com/products/free_android2.html

http://www.androidicons.com/




INTERAGINDO COM DISPOSITIVOS MÓVEIS


Métodos de Interação

• Lembre-se que existem diferentes meios de interagir com o dispositivo

• Antes de desenhar a UI, é necessário avaliar qual destes estão disponíveis e serão utilizados

• Analise se não existe outra maneira de usuários entrarem com “dados”

• Seja criativo e não se limite ao “tradicional”


Padrões de Interação

• Definem alguns CONTROLES e ELEMENTOS padrões para o design de interfaces para dispositivos móveis

• É uma maneira de aprendermos com soluções que foram bem APLICADAS e DOCUMENTADAS por outros designers

• Ótimo ponto de PARTIDA para DESENHARMOS e entendermos partes específicas de um aplicativo


Manipulação INDIRETA

• É necessário aprender o mapeamento das teclas• Deve ser muito consistente• Não são muito flexíveis

• Joystick Direcional• Botões Alfa-numéricos• Soft-keys• Rodas

Manipulação DIRETA/Touch/Haptic

• Toques curtos e longos• Arrastar• Deslizar• Girar• Pinçar e Expandir

• Não existe mapeamento pois as teclas são “virtuais”• Difícil aprender todos os meios de entrada• São muito flexíveis

Manipulação por GESTOS

• Utilizada através de sensores• Através do dispositivo por completo

• Inclinando• Asoprando • Chacoalhando


ELE

ME

NT

OS

Limpa texto

ListasBotões ou Links

Indicadores de EsperaEntrada de Texto


Diagrama de FLUXO das telas

• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra

• Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os detalhes dela

• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de uma boa NAVEGAÇÃO

TO

OLS


EXERCÍCIO: Traçando seu DIAGRAMA


• CONSIDEREM as interações que você vai utilizar para navegação e inputs

• TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados

• DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a funcionalidade

1 hora• Papel

• Lápis/Caneta




INTERFACE DE USUÁRIO


Uma BOA interface de usuário

• Vai além : ENCANTADORA e ATRAENTE

• Boa anfitriã : CONVIDATIVA e CATIVANTE

• Te ajuda : FACÍL de usar

• Traz o novo : INOVADORA ... “Eu NUNCA fiz isso!”

• Não está atoa : entrega SOLUÇÕES e não somente FUNÇÕES

• É NOVA e DESENHADA!


Dispositivos Móveis


Entendendo cada dispositivo

Tela / Resolução

3.5” /480x320 e 960x640

9.7” /1024x768

2.6” → 5.8” /240x320 →

480x548

3.5” → 4.5” /800x480

?

Auto-rotativa ✓ ✓ ✓ ✓ ?

Interface(s)

TouchscreenAcelerômetro

MicrofoneCâmera

GPS


MicrofoneGPS


MicrofoneCâmera

GPS


MicrofoneCâmera

GPS


MicrofoneCâmera

GPSRFID

Padronização ✓ ✓ ✗ ✓ ✗


iPhone HIG : Introdução

• CARACTERÍSTICAS do iPhone

• Tamanho da tela é COMPACTA

• Memória é LIMITADA

• Usuários visualizam e interagem com UM APLICATIVO de cada vez.

• TIPOS de aplicativos

• NATIVO: desenvolvidos com o SDK

• WEB: abertos pelo browser

• HÍBRIDOS: tem como predominância uma webview, porém possuem controles de aplicativos natívos


Diferentes ESTILOS de aplicativos

São BASEADOS em:

• Comportamentos e USO

• Características VISUAIS

• Modelo dos DADOS

• EXPERIÊNCIA de usuário

Como ESCOLHER ?

• Qual a motivação do usuário para usar este aplicativo?

• Qual a experiência de usuário que você quer proporcionar?

• Qual o seu objetivo para o aplicativo?


PRODUTIVIDADE

orga

niza

r in

form

açõe

s de

form

a H

IER

ÁR

QU

ICA

• Organizar listas

• Adicionar ou remover itens

• Entrar até o nível de informação desejada e realizar atividades com ela

UTILITÁRIOS

UMA TAREFA com pouco input do usuário• Usuários abrem o aplicativo e a informação já

é apresentada

• Pouca interação

IME

RS

IVA TELA TODA, em ambientes ricos visualmente

• Muito peculiar

• Sem controles padrão

• Diversão, como jogos e rich-media


INTERFACE de Usuário


Status bar

Navegation bar

Toolbar

Tab bar

ELE

ME

NT

OS


Alertas, Ações e View Modal


Exemplo de “View Modal” MAL desenhada


Tabelas

Simples Indexada Agrupada


Controles

Busca Slider e Switch Segmentados Pickers


Android : User Interface Guidelines

• Ainda em DESENVOLVIMENTO

• Seta as GUIAS para INTERAÇÕES e VISUAL

• Focado TOTALMENTE para DESENVOLVEDORES!

CONTEMPLA

• Criação de WIDGETS

• ATIVIDADES e TAREFAS

• Design de MENUS


INC

ON

SIS

TÊ

NC

IA


WIDGETS

• Um WIDGET apresenta para o usuário as informações mais importantes na HOME SCREEN

• Os PADRÕES de criação dependem da funcionalidade

MolduraWIDGETS

Tam

anho

s


ATIVIDADES

Teclado Contatos Detalhes Edição


MENUSM

enu

de O

pçõe

s

Menu de Contexto


PDFSaturday, August 21, 2010

Links para os HIG’s

http://wiki.forum.nokia.com/index.php/Guidelines_for_Mobile_Interface_Design

http://developer.android.com/guide/practices/ui_guidelines/index.html

UI Design and Interaction Guide for Windows Phone 7 v2.0

http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html

http://developer.apple.com/iphone/library/documentation/general/conceptual/ipadhig/Introduction/Introduction.html






http://go.microsoft.com/fwlink/?LinkID=183218

http://go.microsoft.com/fwlink/?LinkID=183218









Desenhando Interfaces

• Importante iniciar com o NÍVEL mais BAIXO o possível

• NÃO se apegue a DETALHES : use círculos, quadrados, retângulos

• Capturar visualmente a lista de FUNCIONALIDADES considerando a ORDEM definida pelo DIAGRAMA

• Use ELEMENTOS conhecidos, e considere o HIG da plataforma escolhida

• SOMENTE após estes desenhos prontos você pode passar para o COMPUTADOR para testar!


EXERCÍCIO: Desenhando sua INTERFACE


• ANALISEM o diagrama de fluxo e ESCOLHAM as telas a serem desenhadas

• DESENHEM as interfaces das telas no stencil

• USEM Post-It’s para mostrar as interações

1 hora

• Papel

• Lápis/Caneta

• Post-it’s

• Stencil




PROTOTIPAÇÃO RÁPIDA


• Utilizada para PROTOTIPAR objetos, conceitos, serviços e interfaces

• Serve para se ter algo PALPÁVEL de maneira rápida que possam ser testados

• Visualizar as INTERFACES e USAR-LAS de maneira simples

• Traz RESULTADOS e agiliza o processo de ITERAÇÃO

• Podem ser utilizadas FERRAMENTAS físicas, computacionais ou uma combinação de ambas

• DETALHES são irrelevantes, ou até PROIBIDOS

O que é PROTOTIPAÇÃO Rápida?




Ferramentas e Links


http://www.uistencils.com/

http://www.uistencils.com/

http://gomockingbird.com/
































































































https://pidoco.com/en




http://www.balsamiq.com/products%23

http://www.balsamiq.com/products%23

http://iphonemockup.lkmc.ch/?id=hNjBWbdbmgHgHYQBENKCBhjEcbNBhLSbYNcFAShmL&style=pencil

http://iphonemockup.lkmc.ch/?id=hNjBWbdbmgHgHYQBENKCBhjEcbNBhLSbYNcFAShmL&style=pencil

http://mockapp.com/download/

http://mockapp.com/download/

http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

LOOK & FEEL


• Muitos dos CONTROLES e elementos padrão das plataformas, podem ser customizados

• Pequenas mudanças podem dar um POLIMENTO especial para sua interface

• EVITE mudar radicalmente os controles que fazem ações PADRÃO

• CRIE temas diferentes, com cores, texturas, e imagens e teste o MELHOR

• Busque inspiração no MUNDO REAL!

Sua IDENTIDADE visual



Busque o LÚDICO...


...e o REAL


Muito Obrigado!

paolopasseri

@paolopasseri

[email protected]


mailto:[email protected]

mailto:[email protected]