Palestra baseada no Livro Padrões de Design para Padrões de Design para Aplicativos Móveis. NEIL, THEREZA. Padrões de design para aplicativos móveis. São paulo: Novatec Editora; Sebastopol, CA: O'Reilly,2012.

1. Padrões de Design para Aplicativos Móveis
Hewerson Freitas

2. Apresentação
Hewerson Freitas
Estudante de Sistemas de Informação
hewerson.freitas@gmail.com
/hewerson.freitas

3. Sumário
Navegação
Formulários
Tabelas e listas
Busca, Ordenação e filtragem
Convites
Feedback
Ajuda

4. Navegação
Padrões primários de navegação
Aplicativos com boa
navegação
simplesmente são
intuitivos e facilitam a
realização de qualquer
tarefa
Primary Navigation Patterns, Fonte: [1]

5. Navegação
Springboard
Servem como
plataforma de partida,
que se utiliza como
ponto de partida para
as aplicações
Facebook Springboard and Ovi Maps, Fonte: [1]

6. Navegação
Springboard
Grades de 3x3, 2x3, 2x2, 1x2 e são os layouts mais comuns.
Grid layouts for springboards, Fonte: [1]

7. Navegação
Menu de lista
Menu de listas são
bastante similares ao
Springboard, contendo
suas variações de
menus com listas
avançadas,
personalizadas.
Enhanced list, Amazon MP3; grouped list, Stratus, Fonte: [1]

8. Navegação
Abas
A navegação não se
torna neutra em
termos de SO, uma
vez que cada Sistema
Operacional tem sua
forma de localização e
design de abas.
Jamie Oliver Recipes and Molome, bottom tabs, Fonte: [1]

9. Navegação
Galeria
Este padrão exibe
itens de conteúdo
individuais para
navegação. Funciona
melhor com conteúdo
atualizado
frequentemente, que
as pessoas desejam
navegar.
BBC and PULSE, Fonte: [1]

10. Navegação
Dashboard
Fornecem um resumo
de indicadores
principais de
desempenho. Cada
métrica pode ser
examinada para
informações
adicionais.
Mint and ego dashoards, Fonte: [1]

11. Navegação
Metáfora
Este padrão se
caracteriza por uma
landing page
modelada para refletir
a metáfora do
aplicativo. Utilizado
principalmente em
jogos.
DoItTomorrow and TripJournal, Fonte: [1]

12. Navegação
Megamenu
É um grande painel
sobreposto com
formatação e
agrupamento
personalizados das
opções de menu.
Facebook webOS and Walmart Android, Fonte: [1]

13. Navegação
Navegação secundária
Os padrões
primários de
navegação podem
ser combinados
para padrões
secundários de
navegação.
Secondary navigations patterns, Fonte: [1]

14. Navegação
Carrossel de páginas
Utilizado para uma
navegação
rapidinha em um
conjunto discreto
de paginas,
utilizando o
arrastar do dedo.
Nigella Quick Collection and Zappos, Fonte: [1]

15. Navegação
Carrossel de imagens
Utilizado em
dimensões 2D ou
coverflow (uma
interface
tridimensional
para navegação
em bibliotecas),
para exibir filmes,
imagens em
destaque.
Tap’n’Scrap, The Photo Cookbook, Fonte: [1]

16. Navegação
Lista expandida
Permite que em uma
única tela seja
acessada para revelar
mais informações.
Android Call Log, Fonte: [1]

17. Formulários
Forms
Sempre precisamos
utilizar formulários
para diversos tipos de
tarefas, desde Logins
à Buscas.
Form patterns, Fonte: [1]

18. Formulários
Login
Logins devem ter
o menor número
de campos de
entrada, para
tornar intuitivo.
Photobucket and Groupon, Fonte: [1]

19. Formulários
Registro
Igualmente ao
login o registro
deve ter o menor
número de
campos de
entrada, para
tornar intuitivo.
Ofereça feedback
para melhor
aproveitamento.
PageOnce and Gowalla, Fonte: [1]

20. Formulários
Checkout
Ofereça um
mecanismo para
um checkout mais
rápido em visitas
posteriores, com
informações de
login ou para
checkout.
Checkout: Apple and Zappos, Fonte: [1]

21. Formulários
Busca
Como outros
padrões de
formulário, os
critérios de busca
devem ser
limitados somente
a campos
essenciais.
Kayak and Open Table, Fonte: [1]

22. Tabelas e listas
Tabelas
Utilizados para
apresentar dados
em vários formatos
em aplicativos que
necessitem.
Table patterns, Fonte: [1]

23. Tabelas e listas
Tabela básica Está é só uma
tabela padrão com
cabeçalhos de
coluna fixos e um
layout em grade.
MicroStrategy Mobile and FanGraphs Baseball, Fonte: [1]

24. Tabelas e listas
Tabela sem cabeçalho
A tabela sem
cabeçalho é
caracterizada por
linhas de grossas
apresentam
múltiplas variáveis ​
sobre um objeto, e
não rótulos de
coluna.
REALTOR.com and Bank of America, Fonte: [1]

25. Tabelas e listas
Visão geral de dados
O padrão geral
mais dados
refere-se a um
resumo ou sumário
do conteúdo da
tabela exibida
acima das linhas
de dados
individuais.
Discover SpendAnalyzer, Fonte: [1]

26. Tabelas e listas
Listas agrupadas
O agrupamento de
linhas pode tornar
os dados de uma
tabela mais fáceis
de resumir.
Mint and MicroStrategy, Fonte: [1]

27. Tabelas e listas
Listas em cascatas
Por razões óbvias,
uma tabela de
árvore seria muito
complicado em
uma tela do
telefone, mas uma
lista em cascata
pode fornecer a
mesma estrutura
hierárquica
WineSpectator, Fonte: [1]

28. Buscas, ordenação e filtragem
Busca autocompletar
Digitar irá exibir
automaticamente
um conjunto de
resultados
possíveis,
bastando tocar em
um para
selecioná-lo, e a
busca será
realizada.
Android Marketplace and Netflix, Fonte: [1]

29. Buscas, ordenação e filtragem
Busca salvas e recentes
Para respeitar o
esforço dos
usuários utilizamos
salvas e recentes
fazem isso
tornando mais fácil
selecionar a partir
de buscas
anteriores.
eBay and Walmart, Fonte: [1]

30. Buscas, ordenação e filtragem
Formulário de ordenação
Utilizado para
“Refinar” as
pesquisas pode-se
tornar trabalhoso
pois requer
interação direta do
usuário,
confirmando sua
ação.
Target and Awesome Note, Fonte: [1]

31. Buscas, ordenação e filtragem
Filtragem na tela
A filtragem na tela
é exibida com os
resultados ou lista
de objetivos. Onde
o filtro é aplicado
com apenas um
toque.
HeyZap and Google, Fonte: [1]

32. Buscas, ordenação e filtragem
Formulário de filtro
Utilizado para
pesquisas mais
avançadas e
refinadas, onde
alguns aplicativos
podem se
beneficiar com isto.
Kayak and Zappos, Fonte: [1]

33. Convites
Dica
Dica pode ser
utilizada em
qualquer lugar da
tela, pode ser
exibida em
qualquer local da
tela não
necessariamente
no inicio.
eBay and Android OS, Fonte: [1]

34. Convites
Transparência
Normalmente visto
em tela inicial, uma
transparência é
uma camada a
qual pode-se ver,
com um diagrama
de uso posicionado
sobre o conteúdo
da tela real.
Pulse and Phoster, Fonte: [1]

35. Feedback
Mensagem de erro
Mensagens de erro
devem ser
expressas em
linguagens
simples, indicar
precisamente o
problema e sugerir
construtivamente
uma solução.
TaxCaster and Mint, Fonte: [1]

36. Feedback
Confirmação
A confirmação
deve ser fornecida
quando uma ação
é tomada. Procure
uma maneira de
fornecer feedback
sem interromper o
fluxo do usuário.
Android Marketplace, Fonte: [1]

37. Ajuda
Tour
Umas da melhores
soluções pois
oferecem um
contato ao primeiro
uso mostrando as
ferramentas e
utilidades do
aplicativo de forma
interativa.
Adidas miCoach, Fonte: [1]

38. Perguntas?
? ? ?
?
? ? ? ?

39. Agradecimentos!
Imagem: http://linux-blog.org/thank-you-dear-reader/

40. Bibliografia
[1] NEIL, THEREZA. Padrões de design para aplicativos móveis. São
paulo: Novatec Editora; Sebastopol, CA: O'Reilly,2012.