Entenda porque seu aplicativo de Android não deve ser igual ao de iPhone
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Entenda porque seu aplicativo de Android não deve ser igual ao de iPhone

  • 10,351 views
Uploaded on

Usuários de Android interagem com seu smartphone de outra forma. Ok, é parecido, mas não é nem de longe igual. ...

Usuários de Android interagem com seu smartphone de outra forma. Ok, é parecido, mas não é nem de longe igual.

Com 66% de mercado no Brasil e crescendo a cada mês, o Android possui um Design de Interação consistente e que é usado por Facebook, Evernote, Dropbox, Whatsapp e pelos apps mais bem avaliados na PlayStore.

Na hora de planejar seu app, tome corretamente a decisão que pode levá-lo à boa aceitação, ou ao fracasso total! Por que não aderir e oferecer ao seu usuário a melhor experiência?

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Muito boa iniciativa Henrique. Servirá para apresentar pra muito cliente usuário de iPhone.
    Are you sure you want to
    Your message goes here
  • Muito bacana a apresentação Henrique ;-)
    Are you sure you want to
    Your message goes here
  • A apresentação é bacana, mas apesar de defender o desenvolvimento para as outras plataformas, esqueceu de aprofundar no Windows Phone e citar o BlackBerry10. Outro dado importante, e sei porque pesquisei a respeito, é que o desenvolvimento em iOS é cogitado em primeiro lugar não pelo número de usuários, que é menor que o de Android, mas por que usuários de iOS estão mais dispostos a pagar por um app ou jogo que um usuário de Android, então dependendo do modelo de negócio adotado, compensa financeiramente começar pelo iPhone e construir a marca, aumentar seu valor e expandir. Agora compartilho com você a opinião de que tentar copiar visual e funcionalidades de apps de iOS para Android é uma coisa extremamente ruim. Mas sobre a splash screen, muitos apps ainda usam, e novamente, dependendo do intuito do app é válido desde que não atrapalhe a experiência final do usuário.

    http://blog.flurry.com/bid/99013/The-History-of-App-Pricing-And-Why-Most-Apps-Are-Free
    Are you sure you want to
    Your message goes here
  • Muito Bom....
    Are you sure you want to
    Your message goes here
  • Parabéns pelo material.. vou citar você em uma apresentação aqui :)
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
10,351
On Slideshare
10,186
From Embeds
165
Number of Embeds
10

Actions

Shares
Downloads
242
Comments
14
Likes
123

Embeds 165

http://www.gabrielamizarela.com.br 65
http://gabrielamizarela.com.br 51
http://appimobi.com.br 14
https://www.linkedin.com 10
http://www.linkedin.com 7
http://arquiteturadeinformacao.com 7
https://twitter.com 6
http://confluence.intranet 3
http://www.slideee.com 1
http://www.inoreader.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/