Padrões de Design para Aplicativos Móveis

Hewerson Freitas
Apresentação

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

/hewerson.freitas
Sumário

Navegação
Formulários
Tabelas e listas
Busca, Ordenação e filtragem
Convites
Feedback
Ajuda
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]

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]

 Navegação
Springboard

Grades de 3x3, 2x3, 2x2, 1x2 e são os layouts mais comuns.

Grid layouts for springboards, Fonte: [1]
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]

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]

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]

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]

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]

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]

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]

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]

 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]

Navegação
Lista expandida

Permite que em uma

única tela seja
acessada para revelar
mais informações.

Android Call Log, Fonte: [1]

 Formulários
Forms

Sempre precisamos
utilizar formulários
para diversos tipos de
tarefas, desde Logins
à Buscas.
Form patterns, Fonte: [1]
 Formulários
Login
Logins devem ter
o menor número
de campos de
entrada, para
tornar intuitivo.

Photobucket and Groupon, Fonte: [1]

 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]

 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]

 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]

Tabelas e listas
Tabelas
Utilizados para
apresentar dados
em vários formatos
em aplicativos que
necessitem.

Table patterns, Fonte: [1]

 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]

 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]

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]

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]

 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]
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]

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]

 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]

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]

 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]

 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]

 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]

 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]

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]

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]

Perguntas?

? ? ?
?
? ? ? ?
 Agradecimentos!

Imagem: http://linux-blog.org/thank-you-dear-reader/
Bibliografia
[1] NEIL, THEREZA. Padrões de design para aplicativos móveis. São
paulo: Novatec Editora; Sebastopol, CA: O'Reilly,2012.