Porque investir na Experiência do Usuário? O que é uma boa interface? Devemos projetar diferente para cada plataforma? Através de alguns comparativos procurei apresentar o motivo da escolha de trabalhar com elementos nativos e focar na experiência indiviudal de cada plataforma em nossos aplicativos

1. Android vs. iOS
Relatório de diferenças na abordagem de interface
visual e usabilidade nas plataformas
Rafael Burity
UX Designer Specialist
ATECH.COM.BR

2. Porque investir
na Experiência
do Usuário?
UX ou Experiência do Usuário existe
desde sempre.
Nossa experiência independe do
produto ser digital. Qualquer produto
possibilita ao usuário uma
experiência.
Experiência do Usuário é como uma
pessoa se sente ao usar um produto.

3. Ilustração do Blog.Testr com base na “User
Experience Honeycomb”, criada por Peter Morville.

4. O que é uma
boa interface?
1. Clear
2. Concise
3. Familiar
4. Responsive
5. Consistent
6. Attractive
7. Efficient
8. Forgiving
Aquela que segue os princípios de design de
interface humana baseado na forma como os
usuários pensam e trabalham, e não sobre
as capacidades do dispositivo.

5. Devemos projetar
diferente para cada
plataforma?

6. Como decidir?
1. Este componente é familiar
para um usuário da
plataforma?
2. O que eu ganho se eu
personalizar este elemento?
3. Preciso explicar isso com
uma ajuda visual, ou posso
resolver de outra forma?

7. “Android e iOS são duas plataformas
extremamente diferente. Não é simplesmente
clonar seu app iOS para o Android. O Android
tem uma série de considerações inteiramente
únicas quanto a programação, design e interface
do usuário (UX – user experience).”
Andrew Thomas, SkyBell Video Doorbell

8. Exemplos comparados
iOS Android

9. Vueling
Neste primeiro exemplo podemos
reparar de primeira que a arquitetura de
informação é basicamente a mesma e os
elementos visuais quase os mesmo,
porém com a utilização da base de cada
plataforma.
O foco é a hierarquia da informação.

10. A hierarquia se mantém, porém com
pequenas diferenças na navegabilidade
em decorrência das particularidades de
cada plataforma.
O que cada tela tem de especial é o
trabalho do espaçamento que tem
relação com o aparelho em si e a
resolução.
Vueling

11. Mais uma vez fica claro que a mudança,
discreta, se deve a estrutura da
navegabilidade padrão da plataforma
em si.
Vueling

12. Nesta tela vemos ligeira mudança na
arquitetura de informação,
provavelmente fruto do sistema
operacional que utiliza outro app para
gerenciar o boarding pass.
Vueling

13. Facebook
Neste caso vemos que a arquitetura de
informação é basicamente a mesma,
com exceção da hierarquia de menu.
Neste app começamos a ver a
particularidade do iOS se apresentando
com os menus fixos sempre no rodapé
do celular. Podemos reparar que sempre
temos elementos da interface utilizando
o padrão de cada sistema.

14. Facebook

15. Facebook
Nesta tela podemos ver, claramente, a
questão da navegabilidade e do botão
voltar que são muito particulares de
cada plataforma.

16. Twitter
O app do twitter talvez seja um dos que
apresenta mais diferença na arquitetura
da informação.
Repare que o topo deles é muito
diferente, apesar de manterem o
procedimento de utilizar a estrutura e
padrão de cada plataforma para definir
elementos e posicionamentos. Como o
botão flutuante do android.

17. Twitter
Apesar da diferença clara na tela da
timeline, podemos ver que na tela de
perfil eles seguem o roteiro e mantém a
arquitetura e hierarquia. Apenas os
elementos que são personalizados para a
cognição de cada usuário da plataforma.
Reparem nas abas “Tweets - Media -
Likes” que seguem claramente o padrão
de seus sistema operacional.

18. Instagram
Talvez um dos apps que pode ser o
melhor exemplo de uniformidade e
utilização da natividade dos sistemas em
que funciona.
O que muda é apenas o estilo do mesmo
alfabeto iconográfico, provavelmente,
para indicar que o usuário está em um
sistema específico, porém o gestalt deles
permanece o mesmo.

19. Instagram
NEsta tela continuamos com uma
interface extremamente homogênea e
com pequenas diferenças quase
imperceptíveis.
Temos o campo de busca que segue o
padrão de cada sistema e no Android a
existência de uma adicionar que não
vemos no iOS.

20. Netflix
Outra interface extremamente
preocupada com o gestalt e possíveis
usuários que migrem de plataforma.
Arquitetura de informação e hierarquia
simplesmente impecável e idênticas.
Garantia de experiência igual para o
usuário de cada plataforma.

21. Netflix
Começamos a reparar diferenças apenas
em elementos visuais e posicionamento
que seguem a estrutura de cada
plataforma, além do espaçamento.

22. Whatsapp
O app do whatsapp é um que aproveita
e muito os elementos standard das
plataformas.
No caso da chamada de voz é
perceptível que poderiam ter fugido essa
regra para tornar a utilização das
funções auxiliares mais simples e fáceis
de ser percebidas.

23. Whatsapp
Percebam que as duas telas parecem de
aplicativos completamente distintos.
A utilização do padrão da plataforma é
um pouco exagerado na minha visão e a
unidade do app parece ser perdida. A
comçar pelas cores que levam a
identidade da marca.

24. Whatsapp
Chega a incomodar quando comparados
lado a lado e percebe-se a diferença na
arquitetura e hierarquia das
informações.
No caso da lista de conversas vemos
uma semelhança na arquitetura mas até
as cores dos elementos mudam. No iOS
o app parece completamente nativo.

25. Viber
Vemos o mesmo caso onde o iOS
mantém o padrão que os usuários estão
acostumados com menu no rodapé,
porém com todo resto da interface
seguindo o padrão do app.

26. Conclusão
O foco deve estar na hierarquia e
arquitetura da informação.
Tendo fechado a estrutura deve-se
seguir utilizando o máximo possível
de elementos padronizados
(bootstraps) de cada plataforma,
mantendo a similaridade, pelo fator
gestalt (memória cognitiva), mas ao
mesmo tempo deixando claro que é a
mesma solução, através de uma
identidade visual forte.