Mobile Design | User Interface

Leis do UX: 3 dicas práticas para a construção de interfaces mobile

Em 2018, Elon Musk disse em entrevista para o podcast JRE que nós, seres humanos, já somos essencialmente ciborgues — fazendo alusão ao uso e à dependência da tecnologia em nosso dia a dia:

“We are already cyborgs. Your phone and your computer are extensions of you, but the interface is through finger movements or speech”

Deixando o tema de ciborgues para um outro post — a fala de Musk não está tão longe da realidade -, de fato, a tecnologia está cada vez mais presente em nosso cotidiano, tanto em momentos de lazer quanto para o uso profissional, porém gostaria de focar a atenção em duas palavras específicas desta fala: phone (celular) e interface.

Segundo a GlobalStats, o mercado de tecnologia já é liderado pelo uso de celulares modernos (smartphones), que correspondem a cerca de 57% do segmento, enquanto computadores e tablets constituem 40% e 3%, respectivamente. Ou seja, estamos em um mundo cada vez mais versátil, com telas menores e que passa a maior parte do dia interagindo com interfaces não muito maiores que a palma de uma mão.

Porém, entrando no campo do design, ainda são pouco documentadas as diretrizes para a construção em dispositivos móveis, seja devido à rápida ascensão desse modal ou pelos desafios singulares que eles apresentam. Afinal, projetar para telas de celulares não é apenas diminuir o conteúdo do desktop, o que pode deixar designers e desenvolvedores sem muito repertório se desejarem explorar possíveis soluções para um determinado problema.

Pensando nisso, separei neste artigo três dicas valiosas, com base em heurísticas e diretrizes já bastante fundamentadas, para otimizar seu processo de criação ou ideação na hora de projetar experiências mobile. Vamos lá?

Mas, antes, que princípios são esses?

Quando o assunto é construção de interfaces, principalmente mobile, as documentações mais fundamentadas até hoje são o Material Design, elaborado pela Google, e o Human Interface Guidelines, da Apple. Ambas apresentam instruções práticas sobre os aspectos físicos da interface, como alinhamento, espaçamento, harmonia, dentre outros.

Entretanto, tais fontes são generalistas, não detalhando casos de uso ou especificidades que aparecem no dia a dia de quem projeta para essas interfaces. Por isso, se faz cada vez mais necessário entender conceitos ou diretrizes de usabilidade — seus princípios norteadores — para embasar tomadas de decisões. Mas, afinal, que princípios são esses?

Unindo premissas acerca de percepção estética (Gestalt), viés cognitivo e heurísticas de produto (Nielsen), as chamadas “ Leis do UX” são um panorama com 21 princípios norteadores. Tais diretrizes devem balizar o designer no processo de tomada de decisão, especialmente em situações inusitadas ou em desafios que parecem complicados demais para a telinha do celular.

Com isso, já vamos começando com a primeira dica:

Dica 1: Quebre a complexidade

Quando se trata de interfaces mobile, o caminho comum de muitos designers e desenvolvedores juniores é de compilar o máximo de informação possível nas telas. Cuidado!

As telas desktop apresentam, em média, 500% a mais de área navegável em comparação ao smartphone comum. Logo, é preciso reavaliar o tamanho de imagens e textos, assim como a quantidade de interações por seção de tela — como botões ou menus.

Um dos princípios interessantes nesse aspecto é a Lei de Hick, que diz:

“O tempo empregado para o usuário realizar uma tarefa é diretamente proporcional ao número de possibilidades e informações na tela.”

Ou seja: para que o usuário possa cumprir seu objetivo da maneira mais intuitiva e assertiva, quebre a complexidade. Tratando-se de interfaces mobile, menos é mais!

Dica 2: Corte caminhos — mas do jeito certo

Pegando carona na dica anterior, saiba como quebrar a complexidade e cortar caminhos — mas do jeito certo.

O que isso quer dizer? Bom, tarefas complexas geralmente são compostas por tarefas menores, que, quando cumpridas sucessivamente, levam o usuário ao sucesso esperado.

Portanto, mapeie a jornada do usuário, buscando encontrar qual é seu objetivo ou sua ação principal, para que você possa adaptar essa experiência e caso de uso ao mobile, entregando valor em doses “digeríveis” na telinha.

Um dos princípios interessantes nesse aspecto é conhecido como Navalha de Occam, que diz:

“Dentre duas hipóteses ou tarefas que competem entre si, aquela que requer o menor número de ações ou suposições será a selecionada.”

Ou seja: o trabalho do designer pode se resumir a cortar caminhos para o usuário, pois uma tarefa que apresenta baixo nível de complexidade tem maiores chances de ser realizada.

No contexto de uma tela de celular, lembrar deste princípio pode ser a diferença entre o usuário atingir o sucesso ou desistir de realizar a tarefa mapeada.

Dica 3: Explore seu arsenal

Para um designer de experiência, o arsenal para a construção de interfaces é vasto: cores, símbolos, tipografias, famílias de fontes, voz, efeitos de movimento, dentre outros elementos.

Quando o assunto é mobile, o maior desafio para distinguir ações principais de secundárias, tornando-as visualmente reconhecidas, é driblar o tamanho reduzido da tela. Por isso, lembre-se de seu arsenal e use-o com sabedoria.

Uma diretriz relevante nesse aspecto é o Efeito de Von Restorff, também conhecido como Efeito de Isolamento, que diz:

“Quando múltiplos elementos ou objetos estão presentes na interface, aquele que apresenta maior capacidade de diferenciação será o mais provável a ser lembrado ou reconhecido.”

Ou seja: use seu arsenal de designer para dar destaque às tarefas ou ações mais importantes ao usuário, mas sem se esquecer das primeiras dicas sobre como identificar o que é importante, hein?

Dica extra: Deixe a tela respirar

Não podemos deixar de nos lembrar da importância do espaço em branco, das áreas que envelopam o conteúdo e permitem que o usuário possa ter melhor foco.

Como já descrito nas dicas anteriores, é muito comum que designers e desenvolvedores se inclinem a adicionar o maior número possível de conteúdo em cada tela, comprometendo a experiência do todo. Não caia nessa armadilha!

O olho humano tem a tendência de buscar padrões. Quando conteúdos diversos estão desnecessariamente próximos, a sensação de ordem é comprometida, podendo levar o usuário à fadiga de informação.

Um dos princípios interessantes nesse aspecto é o Efeito Estética-Usabilidade, que alega:

“Usuários tendem a relacionar design esteticamente agradável a noções de melhor usabilidade e funcionamento”

Ou seja: não basta apenas o conteúdo ser de valor, mas precisa ser apresentado de maneira esteticamente agradável, com afastamentos e margens que façam a tela respirar — evitando a aglomeração de informação.

Conclusão

Nem sempre vamos conseguir encontrar exemplos prontos ou referências de telas para resolver um problema, ainda mais nesse modal que só cresce em complexidade e casos de uso.

Portanto, é sempre melhor dominar os preceitos para desbravar novos caminhos ou possibilidades com maior confiança — a confiança de quem sabe no quê consiste uma experiência agradável, mesmo nas telas menores.

Quer mais dicas e saber mais sobre Design e produto? Clique aqui e confira mais conteúdos em nosso blog :)

Originally published at https://ateliware.com/