Apresntação da palestra sobre Design Digital em Plataformas Móveis dada para o curso de Design da Universidade Positivo em Março de 2011.

1. Design Digital em Plataformas Móveis
Paolo Domenico Passeri

2. Para ENTENDER o design de dispositivos móveis é
importante primeiro entender os seus USUÁRIOS...

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

4. 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?

5. Não é um computador TRADICIONAL!

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

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

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

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

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

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

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

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

15. Como se dá este processo?
Ideia Processo Interface
(Refinar) (Executar) (Desenhar)

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

17. FUNCIONALIDADES
Cada nova funcionalidade têm um CUSTO:
• Peso para download
• Velocidade de operação
• A interface se torna mais complexa
• Você perde tempo desenhando o novo, ao invés de
refinar o essencial
• Aumenta o risco de potenciais problemas
• O usuário precisa de mais tempo para aprender e
entender o valor.
Em aplicativos móveis, uma ÚNICA funcionalidade
é permitido, e até recomendado.

18. PÚBLICO ALVO FUNCIONALIDADES
• Geralmente cozinham em casa ou preferem • Criação de listas
comidas prontas • Pegar receitas
• Gostam de buscar ingredientes exóticos ou • Comparar preços
dificilmente se aventuram além do básico
• Localizar mercados
• Usam receitas para se inspirar ou seguem
• Anotar receitas
receitas a risca
• Ver videos de cozinha
• Compram pouca quantidade, aos poucos
ou compram quantidades maiores, poucas • Aprender novas culinárias
vezes • Substituir ingredientes
• Querem manter diversas listas de compras
ou somente querem lembrar de comprar
algo à caminho de casa
“Uma ferramenta para criação de listas de compra, para
pessoas econômicas que amam cozinhar“

19. INTERAGINDO COM DISPOSITIVOS MÓVEIS

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

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

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

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

24. 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 seus
detalhes
• Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de
uma boa NAVEGAÇÃO
Crie o diagrama nos
ESTRÁGIOS INICIAIS
do processo de design

25. INTERFACE DE USUÁRIO

26. 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 bem DESENHADA!

27. Dispositivos Móveis

28. Aprenda sobre cada dispositivo
3.5” / 2.6” → 5.8” /
Tela / 9.7” / 3.5” → 4.5” /
480x320 e 240x320 → ?
Resolução 1024x768 800x480
960x640 480x548
Auto-rotativa ✓ ✓ ✓ ✓ ?
Touchscreen Touchscreen Touchscreen Touchscreen
Touchscreen Acelerômetro
Acelerômetro Acelerômetro Acelerômetro
Acelerômetro Microfone
Interface(s) Microfone
Microfone
Microfone Microfone Câmera
Câmera Câmera Câmera GPS
GPS
GPS GPS GPS RFID
Padronização ✓ ✓ ✗ ✓ ✗

29. iPhone HIG
• 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

30. Diferentes ESTILOS de aplicativos
São BASEADOS em: 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?

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

32. INTERFACE de Usuário

33. Status bar
Navegation bar
ELEMENTOS
Tab bar
Toolbar

34. Alertas, Ações e View Modal

35. Exemplo de interface MAL desenhada

36. Tabelas
Simples Indexada Agrupada

37. Controles
Busca Slider e Switch Segmentados Pickers

38. Android : User Interface Guidelines
• Ainda em DESENVOLVIMENTO
• Seta os GUIAS para INTERAÇÕES e VISUAL
• Focado TOTALMENTE para
DESENVOLVEDORES!
CONTEMPLA
• Criação de WIDGETS
• ATIVIDADES e TAREFAS
• Design de MENUS

39. 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
Tamanhos
WIDGETS
Moldura

40. ATIVIDADES
Teclado Contatos Detalhes Edição

41. MENUS
Menu de Opções
Menu de Contexto

42. INCONSISTÊNCIA

43. 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ê
deve passar para o COMPUTADOR para testar!

44. Meetings for iPad
Paolo Domenico Passeri

45. PROTOTIPAÇÃO RÁPIDA

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

49. DESIGN como um DIFERENCIAL

50. Por que um bom
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!

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

52. 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 COM DESIGN POBRE!

53. LOOK & FEEL

54. Sua IDENTIDADE visual
• Muitos dos CONTROLES e elementos
padrões 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 para chegar
no MELHOR
• Busque inspiração no MUNDO REAL!

57. Busque o LÚDICO...

58. ...e o REAL

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

60. ANEXOS

61. Ferramentas e Links de Design de UI

62. 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/guide/practices/ui_guidelines/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

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