May 19
Melhores Práticas de UX Design segundo o livro “101 UX Principles”
Will Grant é um especialista britânico em UI/UX, designer de produtos digitais e empreendedor com mais de 20 anos de experiência.
Em 2018, ele lançou o livro “101 UX Principles: A definitive design guide” (No Brasil foi lançado como “UX Design: Guia definitivo com as melhores práticas de UX”), que mostra 101 das melhores práticas de usabilidade e design para produtos digitais.
Neste post, irei trazer 1 exemplo de cada área a seguir: typefaces, botões, controles, ícones e formulários.
Typefaces — Não use mais que duas typefaces
Designers usam typefaces demais a seus produtos. Você deve tentar usar no máximo duas typefaces: uma para os cabeçalhos e títulos e a outra para o corpo de texto que será lido.
Se precisar dar ênfase, use pesos(weights) e itálico dentro da própria família de fontes.
O uso de muitas typefaces gera excesso de “ruído” visual e aumenta o esforço que o usuário precisa fazer para entender o que está sendo exibido.
Lições desta dica:
- Use no máximo duas typefaces.
- Use a mesma typeface para os cabeçalhos e os títulos.
- Use a outra typeface para o corpo do texto.
Botões — Faça seus botões parecerem botões
O Autor comenta sobre o estilo design plano(Flat Design) que dominou o mercado no final dos anos 2000 e fortemente divulgada pela Microsoft com a interface de usuário Metro.
Porém este estilo que é usado até hoje tem uma usabilidade horrível, pois valoriza o estilo em vez da substância e força os usuários a pensar mais sobre cada interação que fazem com seu produto:
Os botões devem seguir exemplos do mundo real, para serem familiares e óbvios.
O sistema visual humano está preparado para ver profundidade e, ao remover a ilusão de profundidade de sua interface, você ocultará do usuário toda a camada de informações. Will Grant
Will comenta que o inverso também acontece:
há botões no mundo real que não parecem poder ser pressionados — me vêm a mente os botões capacitivos das máquinas dos estacionamentos e de café, e com frequência esses botões vem acompanhados de uma nota manuscrita “pressione aqui para tirar o tíquete”.
Por fim, o autor comenta também que não devemos criar elementos que não são botões parecerem botões.
Lições desta dica:
- botões tem que parecerem botões.
- Não faça elementos que não são botões parecerem botões.
- Busque ideias de experiências do mundo real para sua UI.
Controles — Controles deslizantes só devem ser usados para valores não quantificáveis
Você já deve ter se frustrado tentando selecionar um número específico em um controle deslizante, seja em um smartphone ou desktop. Estes controles não devem ser usados para selecionar números específicos, pois dificultam a usabilidade.
No entanto, ele é ótimo para exemplos em que o número exato não importa como: alterar volume e dados qualitativos como brilho e cor.
Lições desta dica:
- Use controles deslizantes para ajustar dados qualitativos.
- Nunca use controles deslizantes para números específicos.
- Use um tamanho adequado ao seu controle deslizante para que seja facilmente capturado pelo dispositivo apontador do usuário.
Ícones — Forneça sempre um rótulo de texto para os ícones.
Will comenta que a finalidade original do ícone é:
Fornecer um resumo visual pelo qual o usuário reconheça instantaneamente um controle, e proporcionar um alvo para o usuário clicar ou tocar.
O ícone não tem por objetivo descrever um botão na primeira vez que o usuário o encontrar — o usuário precisará de um rótulo de texto para isso.
No entanto se o ícone for claro e reconhecível, o usuário localizará o controle e se lembrará de sua finalidade com mais rapidez com um ícone.
Outro fator importante para afirmar a necessidade de rótulos em ícones é que um ícone individualmente nunca transmite um significado definitivo.
Você pode estar procurando um ícone para um recurso de “histórico” e se deparar com uma grande variedade de pictogramas de relógios, setas, ampulhetas e rolos de pergaminho para escolher.
Este ícone, neste contexto, sem um rótulo não será entendível para o usuário.
Por fim, não devemos ocultar, nem negligenciar os ícones com rótulos em dispositivos móveis, pois todos usuários precisam entender o contexto deste ícone.
Lições desta dica:
- Use rótulos de texto com os ícones.
- Exiba também os ícones com rótulos em versões mobile.
- É uma grande frustração para os usuários lidarem com ícones individualmente sem rótulos.
Formulários — Colete poucas informações ao solicitar detalhes de cartão de pagamento
Em muitos sites e apps, o objetivo final do negócio é vender, porém o processo de pagamento pode ser difícil e frustrante.
Como UX Designers, devemos facilitar este processo para o usuário:
- Colete apenas o necessário: o número do cartão, a data de expiração e o código CV2.
- Disponibilize um único campo para o usuário digitar o número do cartão, porém divida visualmente em grupos de quatro digitos. Isso auxilia a detecção de erros e evita que o usuário tenha de se mover entre quatro campos separados.
- Caso o usuário pressione a barra de espaço sem querer, remova esse espaço silenciosamente.
- Inclua um texto de ajuda para auxiliar o usuário encontrar o código de segurança do cartão ou o CV2. Não podemos perder um cliente somente porque algumas pessoas usam termos diferentes para este código.
- Somente colete os detalhes de cartão por uma conexão segura(HTTPS). Os navegadores alertam o usuário quando ele está inserindo informações em uma página não segura.
Lições desta dica:
- Obtenha apenas informações necessárias para a realização da transação.
- Seja complacente: absorva espaços acidentais e torne os números legíveis.
- Somente colete os detalhes de cartão por uma conexão segura.
