ENTENDA PORQUE SEU APP DE ANDROID NÃO DEVE SER IGUAL AO DE iPHONE
May 19, 2015
ENTENDA PORQUE SEU APP DE ANDROIDNÃO DEVE SER IGUAL AO DE iPHONE
QUEM SOU EUHenrique Perticarati Arquiteto de Informação e Designer de Interface
Você pode me encontrar… aqui: [email protected] ou aqui: [email protected]
Esse conteúdo é um oferecimento Taqtile.
http://taqtile.com.br
NÃO ENTRE EM PÂNICO!
76% dessa apresentação são figuras e gráficos legais!
Capítulo 1 “Quem é você?”
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.
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!
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”.
RESULTADO:RECEPÇÃO RUIM DE UM PRODUTO BOM
Isso parece familiar?
Ao prezar pela “consistência” entre produtos, a montadora se esqueceu de algumas regrinhas essenciais…
CONTEXTO DE
CONHECER O USUÁRIO
Quem é? O que pensa?
O que sabe? O que espera
do produto? Como interage com produtos semelhantes?
…
ENTENDER O CONTEXTO DE USO
Por quê, e em que situações o produto será usado? Como o usuário se comporta nesse momento? …
SER FAMILIAR
Se adequar ao modelo mental do usuário. Atender suas expectativas. Construir inovações em cima do conhecido.
Capítulo 2 “Isso é muito bom. O resto é lixo.”
Quando se desenvolve apps para smartphones, é muito comum:
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/
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).
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”.
Capítulo 3 “Ordem a partir do caos.”
PRAZER, ANDROID.
Primeiro, alguns números
Crescimento do Android na América Latina
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
Há alguns anos,a grande maioria dos smartphones no Brasil são Android.
Resumindo…
E por issoUsuários de Android já estão habituados aos modelos de interação da plataforma.
Ok, nem sempre foi assim…
As primeiras versões do Android não tinham um padrão forte de Design*
*Android 2.3 e anteriores
Mas desde Dezembro de 2011tudo mudou, com o lançamento do
Android 4.
Com novos princípios de Design e uma forte documentação, o Android agora oferece aos usuários uma experiência única.
Agora os usuários podem desfrutar de modelos de interação consistentes entre todos os aplicativos :)
E não foram só os apps daGoogle que aderiram!
Shazam
TuneIn Radio
Trip Advisor
BBC Weather
Capítulo 4 “O que há de diferente.”
≆
A experiência de uso em smartphones iPhone e Android é “aproximada, mas não exatamente igual”.
Eis o que há de diferente:
Alguns recursos do Android são próprios de seu modelo de interação.
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.
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
É possível fazer todo o caminho de volta usando o botão voltar…
…ou ir direto para o nível acima,usando o botão subir.
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.
Usando o botão voltar, o usuário pode fazer todo o caminho de volta entre apps diferentes, sem problemas.
Gaveta de navegação
(pode chamar de menu lateral, se quiser ;)
Permite a navegação entre diversos níveis superiores do app
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
Widgets
Trazem para a home do smartphone alguns recursos de dentro do app, sem a necessidade de abri-lo.
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 :)
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.
Completar tarefa usando outro app
Abrir um link de mapa no Google Maps ou no Waze? A escolha é do usuário :)
Ícones diferenciados possuem silhueta única e volume
iPhone Android
Splash screenNão se usa splash screen em Android. Ponto.
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
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.
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
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.
Capítulo 6 “Saber se adaptar.”
O Evernote contempla a maior parte dos recursos apresentados aqui.
10''
4''7''
Responsivo O mesmo app suporta smartphones e tablets.
1. Ícone apropriado
2. Funções e ícone adaptados nas notificações.
3. Widgets
No iPhone, segue os padrões do iPhone. No Android, segue os padrões do Android :)
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!
É o que diz o Skype…
… o Dropbox…
… o Foursquare…
… e todos os outros apps citados nessa apresentação.
Capítulo 7 “Quase acabando…”
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.
“O Hitler dos apps de celular”
“Pior app da História”
“Totalmente lixo”
HRS Hotel Search
Mas para tudo há solução! Após redesign (e re-lançamento)…
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.
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/