Identificando usabilidade em um site – Interfaces Móveis

As pessoas chegam ao mundo do “UX Design” de várias maneiras. Alguns são designers visuais, outros programadores e outros possuem experiência com design de interação. Não importa como você chegou até aqui, uma coisa é importante: você precisa ter algum conhecimento sobre psicologia. Como o próprio nome já diz, a experiência do usuário consiste em comportamento, por isso é tão importante entender as pessoas quando se desenvolve uma interface. Se você sabe como as pessoas leem, veem, e pensam, você vai poder guiá-las ao máximo a fazerem exatamente o que você quer.

Leia o último artigo dessa série: Identificando usabilidade em um site – Formulários

Use o teclado com sabedoria

Conteúdo é tudo, e reduzir o uso do teclado é essencial em dispositivos touchscreen. Claro, se você puder tirar vantagem dele, tire.

“input type=number”

Uma falha comum que constantemente vemos quando acessamos um site ou aplicativo mobile é ao preencher um formulário que contenha campos com inserção numérica. O que vemos é: ao preencher campos como “data de nascimento”, por exemplo, o teclado alfabético é disparado. Isso exige que o usuário troque a função do teclado alfabético para teclado numérico, para que ele possa inserir os números. Esse pequeno detalhe pode parecer bobagem, mas exatamente por isso, esse erro é tão cometido.

Com certeza você já passou pela situação de ter que preencher um extenso formulário e precisar alterar a função “letras” para “dígitos” ao preencher campos numéricos. São detalhes como esse que garantem um fluxo maior de navegação, mais agilidade e usabilidade.

Um simples input de HTML5 pode resolver seu problema. O “input type=number”. Ele é usado para campos de entrada que devem conter um valor numérico, e você também pode definir restrições sobre que números são aceitos.

HTML5 tem vários tipos de entrada para novas formas. Esses novos recursos permitem um melhor controle de entrada e validação.

Fique atento aos “dedos gordos”

Botões, links e alvos pequenos podem ser uma verdadeira pedra no caminho durante a navegação.  Eles exigem maior precisão, fazendo com que usuários trabalhem mais para realizar sua ação, até mesmo dando zoom in-out para acertar o alvo (isso quando não clicamos em um link por engano!).

Os dispositivos móveis são diferentes: se as pessoas estão usando um dispositivo touchscreen para pressionar botões e fazer seleções na tela, é preciso que os botões sejam grandes.

Por isso, quando projetar interfaces móveis, é melhor fazer áreas de toque grandes, de modo que elas sejam fáceis para o usuários tocar. As Guidelines Oficiais da Apple para iPhone recomenda um tamanho de área de toque mínima de 44 pixels de largura 44 pixels de altura. O Guia de Interação da Microsoft Windows para Smartphones sugerem um tamanho de área de toque mínima de 34px por 26px. Além disso, também é importante deixar um espaço de aproximadamente 10px em torno das áreas de toque.

Tamanho de fontes

Faça o seu tamanho de fonte padrão de pelo menos 14 px. Mesmo que pareça grande, é a coisa certa a fazer. A única vez que podemos diminuir drasticamente o tamanho de uma fonte (e apenas para um mínimo de 12 px) é quando usadas como rótulos precisos em formulários. Por exemplo, as indicações de hora e local em cada postagem no facebook.

Use e abuse da Geolocalização

Um grande passo na usabilidade de qualquer interface móvel  é não fazer com que seu usuário perca tempo digitando informações desnecessárias ou que você poderá conseguir em outro lugar. Por exemplo, ao invés de pedir que ele insira sua localização atual, use o recurso de geolocalização e faça o serviço por ele. Se ele vier a usar seu aplicativo novamente, você já terá esse dado armazenado.

Foque nas principais tarefas

Quando projetar para celular, foque nas principais tarefas. Nada é mais importante. Isso porque, até mesmo pelo campo de visão reduzido e mobilidade de um celular ou tablet, você simplesmente não pode querer ter a mesma diversidade de tarefas no aplicativo móvel como você tem na visualização em desktop. Se você tentar, seu site rapidamente se torna inutilizável, com longas rolagens e o uso constante de zoom.

Costumamos chamar de “rotas vermelhas” as áreas que contém as principais informações buscadas pelos usuários.Para desenvolver uma interface móvel, projete sua página como se ela só pudesse mostrar o mínimo de informação possível. Quais seriam essas informações? Dessas informações, reduza ainda mais e projete como ficaria essa página com informações mais reduzidas ainda. Vá fazendo isso até chegar a um número de informações que sejam essenciais e indispensáveis. Aí você terá suas “rotas vermelhas”.

Se liga então, que é hora da revisão

Desenvolver uma interface móvel pode não ser uma tarefa tão fácil, mas isso não significa que você deverá complicá-la. Quando falamos em dispositivos móveis, menos é mais, por isso, você deve apostar sempre no essencial e na praticidade. Nunca se esqueça que é bem provável que a maioria de seus usuários acessem sua página em momentos de correria ou em ambientes que não tenham tanto tempo ou paciência para ficar buscando por informações e tendo trabalhos desnecessários. Optar pela praticidade nem sempre é tornar seu projeto mais simples, pelo contrário. É saber usar ferramentas a seu favor. Faça bom uso de todos os recursos que seu dispositivo oferece e você certamente se sairá bem.

Bom trabalho a todos!                                                                        FONTE: CHOCO LA DESIGN