Melhores Práticas de UX Design segundo o livro “101 UX Principles”

101 UX Principles: A definitive design guide (English Edition) — Amazon

Typefaces — Não use mais que duas typefaces

Photo by Brett Jordan on Unsplash

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

Photo by hannah joshua on Unsplash
Interface Microsoft Metro - Gizmodo
Testes de usuário indicam que botões que exibem affordances visuais como textura e sombras pseudo 3D(esquerda) tem um desempenho consistentemente melhor do que os que não as têm (direita) — 101 UX Principles: A definitive design guide (English Edition)

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

Exemplo de controle deslizante usando números — Controles deslizantes — Windows Apps | Microsoft Docs.

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.

Lista de ícones com um rótulo de texto descritivo próximo ao ícone — Bunin Blog | UX/UI Tips

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

Exemplo de formulário de pagamento simples e direto do Stripe— 101 UX Principles: A definitive design guide (English Edition)
  • 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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lucas Barbosa

Lucas Barbosa

More from Medium

UX Design | Figma Tricks

A web design screen 404 error page for a tailor, showing scissors, thread and needle illustrations.

(EN) Optimizing the shopping experience for school supplies

Helping clinical admins to produce reports on national cervical screening

There are ten squares on the screen, set in a parallel shape.

The innocent UX Designer

Did you know that suburban white males have over 100 words for lawn?