1.
ENTENDA PORQUE SEU APP DE ANDROID
NÃO DEVE SER IGUAL AO DE iPHONE

2.
QUEM SOU EU
Henrique Perticarati
Arquiteto de Informação e
Designer de Interface
Você pode me encontrar…
aqui: hperticarati@gmail.com
ou aqui: henrique.perticarati@taqtile.com
Esse conteúdo é um oferecimento Taqtile.
http://taqtile.com.br

3.
NÃO ENTRE EM PÂNICO!
76% dessa
apresentação são
figuras e gráficos
legais!

4.
Capítulo 1
“Quem é você?”

5.
Imaginemos…
uma MONTADORA JAPONESA
Proposta
Novo carro que traz todos os
valores da montadora, aliado
à autêntica experiência de se
dirigir um carro Japonês.

6.
APÓS O LANÇAMENTO, SUCESSO RÁPIDO!
Moderno,
estável,
econômico e
ecológico.
Confortável na
cidade, bom
desempenho
na estrada.
Vamos exportar!

7.
PARA REPLICAR O SUCESSO NO MUNDO TODO, QUEREMOS
A MESMA EXPERIÊNCIA EM TODOS OS LUGARES!
“Inclusive, com
o volante no
lado direito,
para ser
consistente
com o modelo
vendido no
Japão”.

8.
RESULTADO:
RECEPÇÃO RUIM DE UM PRODUTO BOM
Isso parece familiar?

9.
Ao prezar pela “consistência” entre
produtos, a montadora se esqueceu
de algumas regrinhas essenciais…

10.
CONTEXTO DE
CONHECER
O USUÁRIO
Quem é?
O que pensa?
O que sabe?
O que espera
do produto?
Como interage
com produtos
semelhantes?
…

11.
ENTENDER O
CONTEXTO DE USO
Por quê, e em
que situações
o produto será
usado?
Como o usuário
se comporta
nesse momento?
…

12.
SER
FAMILIAR
Se adequar ao
modelo mental
do usuário.
Atender suas
expectativas.
Construir
inovações em
cima do
conhecido.

13.
Capítulo 2
“Isso é muito bom. O resto é lixo.”

14.
Quando se desenvolve apps para
smartphones, é muito comum:

15.
1.Encomendar versões do app
somente para iPhone e Android
São as plataformas
com maior
representatividade no
mercado.*
Por enquanto, apps
de Windows Phone e
outras plataformas
ficam esquecidos.
*73,39%, mundialmente - maio de 2014.
Fonte: http://gs.statcounter.com/

16.
2.Iniciar o desenvolvimento
com a versão iPhone
Usuários de iPhone costumam
retornar mais lucro para o
serviço.
"
Clientes e stakeholders
costumam ter iPhones, e querem
ver o app funcionando em sua
plataforma preferida :)
"
O desenvolvimento para iPhone
é mais rápido (pois é menos
fragmentado).

17.
3.Solicitar que o app de Android
seja igual ao de iPhone
Quem encomenda o projeto não
costuma conhecer a fundo o
Android, por isso:
"
Julga-se que a experiência de uso
seja pior que a do iPhone.
"
Não se quer pagar duas vezes pela
“Arquitetura e Design do mesmo
app”.
"
Acredita-se que as duas versões do
app devam ser “consistentes, para o
usuário não se confundir”.

18.
Capítulo 3
“Ordem a partir do caos.”

19.
PRAZER,
ANDROID.

20.
Primeiro, alguns números

21.
Crescimento do Android
na América Latina

22.
Fonte: http://gs.statcounter.com/
Android 66,13%
iPhone 13,79%
Nokia Series 40 7,24%
Windows Phone 4,36%
Outros 8,17%
Mercado de
smartphones
no Brasil*
*Março de 2014

23.
Há alguns anos,
a grande maioria dos
smartphones no Brasil
são Android.
Resumindo…
E por isso
Usuários de Android já
estão habituados aos
modelos de interação da
plataforma.

24.
Ok, nem sempre foi assim…

25.
As primeiras versões do Android
não tinham um padrão forte de Design*
*Android 2.3 e anteriores

26.
Mas desde Dezembro de 2011
tudo mudou, com o lançamento do
Android 4.

27.
Com novos princípios de Design e uma forte documentação,
o Android agora oferece aos usuários uma experiência única.

28.
Agora os usuários podem desfrutar de modelos de
interação consistentes entre todos os aplicativos :)

29.
E não foram só os apps da
Google que aderiram!

30.
Twitter

31.
Whatsapp

32.
Shazam

33.
TuneIn Radio

34.
Trip Advisor

35.
BBC Weather

36.
Capítulo 4
“O que há de diferente.”

37.
≆
A experiência de uso em smartphones iPhone e Android é
“aproximada, mas não exatamente igual”.

38.
Eis o que há de diferente:
Alguns recursos do Android são
próprios de seu modelo de interação.

39.
Navegação
O botão voltar (fixo),
permite que o usuário
cancele qualquer processo
ou volte para telas
anteriores, semelhante à
um navegador de internet.
O botão subir (opcional)
permite a navegação por
níveis hierárquicos do
app, semelhante ao
Windows Explorer.

40.
Escolher um produto
a partir de um
catálogo
Escolher outro a
partir da lista de
semelhantes…
E mais outro…
E mais outro.
Navegando num mesmo app, o usuário
pode visitar diversas seções

41.
É possível fazer todo o caminho
de volta usando o botão voltar…

42.
…ou ir direto para o nível acima,
usando o botão subir.

43.
Buscar um filme
no Google
Visualizá-lo
no IMDb
Escolher onde quer
compartilhar
Enviar para um
grupo no Whatsapp
Um usuário pode começar uma tarefa em um
app e concluí-la em outro.

44.
Usando o botão voltar, o usuário pode fazer todo o
caminho de volta entre apps diferentes, sem problemas.

45.
Gaveta de navegação
(pode chamar de menu lateral, se quiser ;)
Permite a navegação
entre diversos níveis
superiores do app

46.
Barra de Ações
(pode chamar de menu superior, se quiser ;)
Permite acesso a
navegação principal
Exibe as ferramentas mais
importantes da tela atual

47.
Widgets
Trazem para a home do smartphone alguns recursos
de dentro do app, sem a necessidade de abri-lo.

48.
Compartilhamento
Compartilhe em qualquer app
instalado que permita essa ação.
"
Seu usuário poderá adicionar seu
produto a uma nota no Evernote ou
à uma conversa no Messenger.
"
O Android provê isso
automaticamente :)

49.
Notificações avançadas
A partir de uma notificação, é
possível interagir com o app
sem abri-lo…
…responder mensagens, visualizar
imagens recebidas, acompanhar
um andamento de download.

50.
Completar tarefa
usando outro app
Abrir um link de mapa no
Google Maps ou no Waze?
A escolha é do usuário :)

51.
Ícones diferenciados
possuem silhueta única e volume

52.
iPhone Android

53.
Splash screen
Não se usa splash screen em Android. Ponto.

54.
No iPhone, a splash screen é
uma imagem estática feita
para simular parte da interface
do app, enquanto o conteúdo
carrega.
"
Isso diminui o tempo de espera.
"
Começou a ser usada para
aplicação da marca, e então
passou a ser usada como
banner para publicidade,
mesmo que a Apple não
recomende*.
*https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html#//apple_ref/doc/uid/TP40006556-CH22-SW1

55.
VEJA ESSE (MAU) EXEMPLO
Após abrir o app, o
usuário vê o logotipo do
evento.
Dois segundos depois,
ele vê o logotipo do
patrocinador.
Mais dois segundos e
então o usuário é forçado
a criar uma conta.

56.
A não ser que muito conteúdo
relevante precise ser carregado
de uma só vez, vale a pena
transformar a sua marca num
obstáculo entre o usuário e o
conteúdo do app?
Até aqui, o usuário viu três telas
diferentes, das quais não podia
escapar, e ainda não acessou
conteúdo algum.
VEJA ESSE (MAU) EXEMPLO

57.
O melhor hábito é
carregar o app por
partes: a interface
primeiro, o conteúdo
depois.
!
Isso diminui o tempo de
espera :)
!
Sua marca pode ser
reforçada de outras
formas, dentro do app.

58.
Capítulo 6
“Saber se adaptar.”

59.
O Evernote contempla a maior parte
dos recursos apresentados aqui.

60.
10''
4''7''
Responsivo
O mesmo app suporta smartphones e tablets.

61.
1. Ícone apropriado
2. Funções e ícone adaptados
nas notificações.
3. Widgets

62.
No iPhone, segue os padrões do iPhone.
No Android, segue os padrões do Android :)

63.
E ele não está sozinho!
Para criar uma experiência familiar e agradável,
é importante integrar o app com a plataforma, e a
marca não pode ficar no caminho. Seja flexível!

64.
É o que diz o Skype…

65.
… o Dropbox…

66.
… o Foursquare…

67.
… e todos os outros apps
citados nessa apresentação.

68.
Capítulo 7
“Quase acabando…”

69.
1. Mão de obra adicional e
resultados não satisfatórios.
2. Manutenção mais difícil.
3. Afeta a estrutura de
navegação do app.
4. App instável, pesado e
propenso a bugs.
Tentar imitar o visual
do iPhone no Android
Consequências:
5. Economia em Arquitetura e Design.
Gastos com desenvolvimento.

70.
“O Hitler dos apps de celular”
“Pior app da História”
“Totalmente lixo”
HRS Hotel Search

71.
Mas para tudo há solução!
Após redesign (e re-lançamento)…

72.
Conclusão
1. Adaptar o app ao contexto do
usuário, e não o contrário.
2. Saber usar ao máximo os recursos
oferecidos pela plataforma.
Seu usuário espera isso.
3. A integração do app com a
plataforma é mais importante do
que a “consistência” entre apps
de diferentes plataformas.

73.
Os recursos mostrados aqui estão disponíveis em
Android 4 e versões mais atuais.
No entanto, existem bibliotecas de compatibilidade
para versões anteriores.
Para designers
Android Design Guidelines
http://developer.android.com/design/index.html
Device Art Generator
http://developer.android.com/distribute/promote/device-art.html
Android Asset Studio (desenvolvido por terceiros)
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Para desenvolvedores
Creating a Navigation Drawer
http://developer.android.com/training/
implementing-navigation/nav-drawer.html
Actionbar Sherlock (desenvolvido por terceiros)
http://actionbarsherlock.com/