Nesse artigo apresento algumas dicas de design de aplicativos que te ajudarão a criar layouts mobile mais fluídos, garantindo uma melhor usabilidade e experiência do usuário.

Novas tecnologias exigem novas experiências, por isso quero compartilhar com vocês as dificuldades e novidades quando o assunto é criação e usabilidade em layouts mobile.
Comecei minha carreira no universo Web e então há 3 anos recebi meu primeiro desafio, criar um layout Mobile, até então não fazia ideia de como e onde começar e como todo bom Designer recorri ao pai Google, pesquisei muito, fiz curso, olhei muita referencia e o principal para todos que estão começando a criar layout de apps ou versões responsivas de sites, LEIAM AS GUIDELINES da Apple, Google e Microsoft.
Pequenos detalhes em versões mobiles, como por exemplo: Botões de ações positivas ficarem a direita, textos e botões maiores, rolagem vertical sem limites, entre outros itens não faziam sentido para mim, tinha o conhecimento em usabilidade para websites e agora precisava entender como funcionava o mundo mobile.

Dicas de Design de Aplicativos e Usabilidade

 

Dica 1 – Área de toque

O Google (Android) pede que as áreas de toque em um botão, não sejam menores que 48px x 48px, eu particularmente adoto essa medida também no iOS, considero um tamanho confortável para o usuário pressionar os botões.

Dica 2 – Posicionamento dos botões

Uma das primeiras coisas que aprendi foi, a maioria dos seres humanos são destros, por isso, botões de ações positivas e outros tipos devem ser utilizados ao lado direito, facilitando então o usuário a utilizar seu Smartphone apenas com uma das mãos, essa dica é muito útil principalmente para aplicativos como o Waze (Mapas).

Dica 3 – Tamanho das fontes

Lembrem – se que os Smartphones as vezes são utilizados em distâncias maiores que computadores, utilize fontes em um tamanho grande (normalmente utilizo 14px para Web e 18 a 24px para Mobile de acordo com a fonte)

Dica 4 – Busca

Adicione sempre em seus layouts uma área de busca, principalmente em smartphones os usuários não possuem muito espaço para visualizar o que desejam, evite a perda de tempo do usuário, assim aumentamos o nível de experiência e praticidade em nosso layout.

Dica 5 – Tutorias

Caso você deseje que seu app tenha uma navegação ou um determinado gesto (gestures) que não é muito comum, crie um tutorial rápido em seu layout para ser exibido no primeiro acesso do usuário, aproveite esse mundo novo e não se limite na criação, os usuários ainda aceitam novas formas de utilizar sites e app via smartphones.

Dica 6 – Imagens

Essa dica é principalmente para sites responsivos, ao adaptar seu layout web para mobile enfrentamos um grande desafio, as imagens, infelizmente a qualidade de internet móvel (3g e 4g) no Brasil não são das melhores, por isso nem sempre os usuários possuem conseguem carregar muitas imagens, ou seja evitem imagens desnecessárias e comprima o máximo possível sem perder a qualidade, menos é mais! A velocidade no carregamento de seu layout também é um fator muito importante na usabilidade e experiência do usuário, abaixo separei um link de uma ferramenta online desenvolvida pelo Google para medir a velocidade do seu site web e mobile.
Google Developers – Page Speed Insights

Bom galera essas foram algumas das minhas dicas de usabilidade e experiência do usuário em layouts mobile, compartilhem conosco as suas experiências deixando comentários abaixo, aproveitando coloquei os links das guidelines, até a próxima.

Gostaria de conhecer melhor como funciona o desenvolvimento profissional de aplicativos, visite nossa página de Desenvolvimento de Aplicativos.

Guideline iOS

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Guideline Android

http://developer.android.com/intl/pt-br/design/index.html

Guideline Windows 10

https://dev.windows.com/en-us/design/design-basics

Autor: André Buccini

Autor: André Buccini

Gerente de criação e design

Pin It on Pinterest