Oficina Design de Interface para Dispositivos Moveis, de Paolo Passeri, ministradas em 2012.

1. Minicurso Design de Interfaces para Dispositivos Móveis

2. 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!”

3. Quem sou eu?
• Paolo Domenico Passeri
• Curioso por natureza!
• Engenheiro + Designer + MKT
• Pensar em soluções
• Antes: Aluno, Monitor e
Professor do Faber-Ludens
• Hoje: Gerente de
Desenvolvimento de Produtos
na Positivo Informática

4. ...e vocês?

5. O curso
40%
Conceitos
60%
Atividades

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

7. ...e o que eles
BUSCAM
• Facilidade
• Agilidade
• Intuitividade
• Algo “novo”
• Se surpreender
• “Transparência”

8. Entenda as LIMITAÇÕES
Usuários não têm um PONTEIRO nos dedos

9. Entenda as LIMITAÇÕES
Nem são AGUIAS, com super-visão

10. Entenda as LIMITAÇÕES
Geralmente vão interagir com UM aplicativos por vez

11. Você tem que ser O USUÁRIO!
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?

12. Não é um computador TRADICIONAL!

13. A interface tem que ser REPENSADA...
CTRL+C, CTRL+V
NÃO funciona!

14. ...para ATENDER ao dispositivo móvel
Somente os elementos
CHAVE se mantém!

15. PROCESSO de desenvolvimento
Conceito Design Desenvolvimento Distribuição Marketing Manutenção

16. Atividade vs. Tempo
Test
Debug
Desenvolvimento
Design
DESENVOLVIMENTO > DESIGN = RESUTADOS

17. Atividade vs. Tempo
Test
Desenvolvimento
Debug
Design
DESIGN > DESENVOLVIMENTO = RESUTADOS

18. Como vamos chegar lá?
Ideia Processo Interface
(Refinar) (Executar) (Desenhar)

19. X-Y: Tipo de Aplicativo
Sério
Mais função menos forma
Eficiência para Entreter
Um app de produtividade, como uma
O principal foco de um aplicativo de
Ferramenta Séria, cumpre uma tarefa bem
entretenimento sério, é permitir que o
específica. Seu aplicativo deve rapidamente
usuário consuma mídia. Usuários esperam
e de maneira fácil, realizar o que 80% das
uma interface com customizações porém
pessoas vão fazer com ele. Vá direto ao
fácil de navegar. A interface é o conteúdo.
ponto.
Entretenimento
Ferramenta
Jogar e se Divertir Elementos inovadores
Tipo de aplicativo que vai entreter o usuário resolvendo problemas
ou jogos. Seu foco deve ser somente um, Uma Ferramenta Divertida, têm o foco em
dar um momento de diversão. Vá direto ao resolver ou alcançar algo porém incentiva a
ponto e não use muito hierarquia. A história, exploração entregando informações
experiência e jogabilidade são cruciais. relevantes.
Divertido
Eixo X: uso Eixo Y: conteúdo

20. Refinando a sua Ideia
• 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?
“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”

21. A Declaração de Definição de Produto
Resuma a ideia em uma frase:
<<Diferenciação>> <<Solução>> para
<<Público>>
Exemplo:
<<Uma maneira rápida e fácil>> de se <<criar
ATA’s de reunião>> para <<profissionais de todas
as áreas>>

22. “ Desculpe porém não tive tempo de escrever
uma carta curta, então mandei uma longa.”
- Mark Twain

23. EXERCÍCIO: Criando a sua DECLARAÇÃO
• ESCOLHAM uma categoria de aplicativo
• DEFINAM o tipo do seu aplicativo (eixo x-y) e quem será o público alvo
• LEVANTEM todas as funcionalidades que consigam pensar (brainstorm)
• CORTEM funcionalidades que não fazem parte do core (menos importantes)
• JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES criando a declaração
• Post-It
1:30 horas • Papel
• Lápis/Caneta

24. Meetings for iPad
Paolo Domenico Passeri

25. DESIGN como um DIFERENCIAL

26. Por que ter DESIGN?
• 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!

27. Estudo de Caso: CONVERT
• Aplicativo para conversão de unidades • Unidades vendidas: 197,424
• Preço: U$0.99 • Faturamento bruto: $195,450
• Lançado em Agosto de 2009 • Faturamento liquido: $137,065
2 meses
Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!

28. 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

29. Antes de entrar no app você já o julga...

30. Qual destes você escolheria (deixe 8)?
1 2 3 4
5 6 7
8 9 10 11
12 13 14
15 16 17 18

31. Como?
• Foco em uma forma padrão, não
em diversos elementos que deixam
o icone “sujo”.
• Escolha cores com cuidado, use
cores da interface.
• Evite usar fotos e muito texto.
• Se usar uma marca, deixe somente
o necessário para dar
representatividade.

32. 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”
• Papel
1 hora • Lápis/Caneta
• Cores

33. 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

34. INTERAGINDO COM DISPOSITIVOS MÓVEIS

35. 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”

36. Exemplo de Aplicativo
Anotação Localização Lembrete

37. 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

38. Manipulação INDIRETA Manipulação DIRETA/Touch/Haptic
• É necessário aprender o • Não existe mapeamento pois
mapeamento das teclas as teclas são “virtuais”
• Deve ser muito consistente • Difícil aprender todos os meios
• Não são muito flexíveis de entrada
• São muito flexíveis
• Joystick Direcional • Toques curtos e longos
• Botões Alfa-numéricos • Arrastar
• Soft-keys • Deslizar
• Rodas • Girar
• Pinçar e Expandir
Manipulação por GESTOS
• Utilizada através de sensores
• Através do dispositivo por completo
• Inclinando
• Asoprando
• Chacoalhando

39. Botões ou Links Listas
ELEMENTOS
Indicadores de Espera
Entrada de Texto
Limpa texto

40. 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
TOOLS

41. Meetings for iPad
Paolo Domenico Passeri

42. EXERCÍCIO: Traçando seu DIAGRAMA
• LEIAM novamente a “Declaração de Definição do Produto” (DDP)
• 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
• Papel
2:00 horas
• Lápis/Caneta

43. INTERFACE DE USUÁRIO

44. 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!

45. Dispositivos Móveis

46. Entendendo cada dispositivo
3.5” / 9.7” / 2.6” → 10.1” /
Tela / 3.5” → 4.5” /
480x320 e 1024x768 e 240x320 → ?
Resolução 800x480
960x640 2048x1536 1280x800+
Auto-rotativa ✓ ✓ ✓ ✓ ?
Touchscreen Touchscreen Touchscreen Touchscreen Touchscreen
Acelerômetro Acelerômetro Acelerômetro Acelerômetro Acelerômetro
Microfone Microfone
Interface(s) Microfone Microfone Câmeras
Microfone Câmeras
Câmeras Câmeras GPS Câmeras GPS
GPS GPS RFID GPS RFID
Padronização ✓ ✓ ✗ ✓ ✗

47. iPhone (iOS) 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

48. Diferentes ESTILOS de aplicativos
Como ESCOLHER ?
• Comportamentos e USO • Qual a motivação do usuário para
usar este aplicativo?
• Características VISUAIS
• Qual a experiência de usuário que
• Modelo dos DADOS
você quer proporcionar?
• EXPERIÊNCIA de usuário
• Qual o seu objetivo para o aplicativo?

49. PRODUTIVIDADE UTILITÁRIOS
organizar informações de forma HIERÁRQUICA
UMA TAREFA com pouco input do usuário
• Usuários abrem o aplicativo e a informação já
é apresentada
• Pouca interação
TELA TODA, em ambientes ricos visualmente
IMERSIVA
• Muito peculiar
• Organizar listas
• Sem controles
• Adicionar ou remover itens
padrão
• Entrar até o nível de
• Diversão, como
informação desejada e realizar
jogos e rich-media
atividades com ela

50. INTERFACE de Usuário

51. Status bar
Navegation bar
ELEMENTOS
Tab bar
Toolbar

52. Ações e View Modal

53. Alertas e Notificações

54. Exemplo de “View Modal” MAL desenhada

55. Tabelas
Simples Indexada Agrupada

56. Controles
Busca Slider e Switch Segmentados Pickers

57. iPad
Toolbar
Pop-overs

58. Android: Design
• Seta as GUIAS para INTERAÇÕES e VISUAL
• Nova Versão para PHONES e TABLETS
CONTEMPLA
• Princípios de DESIGN
• Overview da UI
• Padrões para Android
• Elementos de UI

59. Muitos Devices

60. Dispositivos e Displays
• Seja FLEXÍVEL
• OTIMIZE layouts para diferentes telas
• Recursos para diferentes DPIs

61. Temas e Tipografia
Holo Light Holo Dark Holo Light/Dark

62. Iconografia
Icones Action Bar Notificações

63. Padrões de UI
Action Bar
Multi-pane
Selection

64. Exemplo: Navegação com Up vs. Back

65. Action Bar: Geral
• Talvez o elemento MAIS IMPORTANTE
• ADAPTÁVEL a rotação e diferentes telas
• Pode ser CONTEXTUAL (ex.seleção)
• COMPOSTA por:
• Top Action Bar
• Middle Action Bar
• Bottom Action Bar

66. Action Bar: Elementos
Spinners
Scrollable Tabs
Action
Fixed Tabs Overflow
Buttons

67. Layouts Multiplane
Phone Tablet

68. Elementos
http://developer.android.com/design/downloads/index.html

69. Web Apps
Conteúdo Web
Browser Aplicativo com
Web view

70. PDF

71. Links para os HIG’s
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://developer.android.com/design/index.html
UI Design and Interaction Guide for Windows Phone 7 v2.0
http://wiki.forum.nokia.com/index.php/Guidelines_for_Mobile_Interface_Design

72. 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!

73. Meetings for iPad
Paolo Domenico Passeri

74. EXERCÍCIO: Desenhando sua INTERFACE
• LEIAM novamente a “Declaração de Definição do Produto” (DDP)
• 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
• Papel
• Lápis/Caneta
2 horas
• Post-it’s
• Stencil

75. ALGUMAS DICAS

76. O que não fazer?
• Registro FORÇADO no primeiro uso
• Usar textos de DIFÍCIL LEITURA e evite
misturar diferentes FONTES
• Passar ALERTAS ambíguos ao usuário.
Use “labels” que representam o resultado
(Vizualizar vs. OK). Coloque afirmativa a
direita.
• Usar LINGUAGEM técnica que o usuário
não entende.
• Botões de voltar sem CONTEXTO

77. LOOK & FEEL

78. Sua IDENTIDADE visual
• 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!

80. Inspiração

81. Busque o LÚDICO...

82. ...e o REAL

83. PROTOTIPAÇÃO RÁPIDA

84. O que é 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

87. Ferramentas e Links

88. EXERCÍCIO: Protoripando a sua INTERFACE
• REVISEM as interfaces desenhadas
• LEVEM as interfaces uma a uma para o computador
• UTILIZEM formas padrão (circulos, quadrados, etc.) para representar
elementos como botões, caixas de texto, etc.
• CRIEM os links definidos no “Diagrama de Fluxo da Telas”
• TESTEM o protótipo para avaliar a usabilidade com outras equipes
2:00 horas • Coputador

89. ALGUMAS DICAS

90. O que não fazer?
• Registro FORÇADO no primeiro uso
• Usar textos de DIFÍCIL LEITURA e evite
misturar diferentes FONTES
• Passar ALERTAS ambíguos ao usuário.
Use “labels” que representam o resultado
(Vizualizar vs. OK). Coloque afirmativa a
direita.
• Usar LINGUAGEM técnica que o usuário
não entende.
• Botões de voltar sem CONTEXTO

91. LOOK & FEEL

92. Sua IDENTIDADE visual
• 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!

94. Inspiração

95. Busque o LÚDICO...

96. ...e o REAL

97. paolopasseri@gmail.com
@paolopasseri
paolopasseri
Muito Obrigado!