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: hperticarati@gmail.com ou aqui: henrique.perticarati@taqtile.com

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!

Twitter

Whatsapp

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/