1) Mostrar opções indisponíveis como se estivessem disponíveis
Ao fazer uma busca, a pessoa não deveria precisar adivinhar quais opções estão disponíveis.
Veja este exemplo. O site da National Car Rental mostra unidades para reservar um carro nas datas selecionadas. Porém, ao escolher uma delas, surgem dois tipos de erro: a unidade não abre no horário informado ou não participa da promoção aplicada.
Várias unidades da região de São Paulo parecem disponíveis. O aviso em vermelho só aparece depois de tentar reservar. Após cerca de dois minutos de tentativas, apenas duas ou três aceitavam reservas com os filtros selecionados.
Uma situação diferente acontece quando uma opção indisponível é apresentada deliberadamente como parte da comunicação comercial. O Booking.com é um exemplo citado no artigo original.
Nesse caso, a indisponibilidade já aparece claramente, sem exigir um clique para descobrir. A apresentação também pode criar a sensação de que outras oportunidades acabarão em breve. É um exemplo de como as decisões de UX e marketing precisam ser avaliadas em conjunto. Leia mais no nosso artigo .
Solução
Uma busca já é uma ação de filtragem. Mostre resultados que atendam aos critérios ou deixe a indisponibilidade explícita, sem exigir tentativas frustradas.
2) Texto difícil de ler por causa do peso e da cor da fonte
Solução
Evite fontes de traço muito fino em textos pequenos. Use ferramentas de avaliação de acessibilidade e verifique contraste, legibilidade e os critérios WCAG aplicáveis. Ferramentas automáticas ajudam, mas não substituem uma avaliação completa.
3) Manter o botão ativo após o clique e não informar o estado da ação
Esse padrão pode causar dois problemas. Primeiro, manter o botão disponível antes de concluir a ação permite cliques repetidos, erros e operações duplicadas. Segundo, a ausência de feedback deixa a pessoa sem saber se o pedido foi recebido, se ainda está sendo processado ou se ocorreu uma falha.
Juntos, os problemas incentivam novas tentativas. A pessoa pode desistir frustrada ou executar a mesma ação várias vezes sem perceber. Um exemplo é uma compra concluída cuja confirmação não apareceu corretamente, como no caso da Tesla .
Solução
Depois do clique, informe que a solicitação está sendo processada e desabilite o botão enquanto a operação estiver em andamento, quando isso for adequado ao fluxo.
Ao terminar, apresente o resultado correto de forma clara e compreensível. Uma mensagem como “erro xxxx” não explica o que aconteceu nem o que a pessoa pode fazer.
4) Pouco contraste entre estados diferentes de um elemento
Se os estados de um elemento precisam ser diferenciados, a distinção deve ser perceptível. No exemplo abaixo, uma janela de acesso e cadastro usa um fundo azulado muito claro para indicar a aba selecionada. A cor se mistura ao restante do fundo e dificulta identificar a opção ativa.
Dependendo do brilho da tela e da visão de quem usa, talvez a diferença nem seja percebida. Nesse caso, cuidados básicos de acessibilidade não foram considerados adequadamente. A semelhança entre os conteúdos das abas torna a situação ainda mais confusa.
Solução
Diferencie os estados com clareza, usando contraste e outros indicadores adequados. Confira os critérios WCAG aplicáveis de acessibilidade .
5) Um processo confuso para cancelar a inscrição
Às vezes a caixa de entrada fica cheia de mensagens promocionais e queremos deixar de recebê-las. Alguns serviços tornam isso simples, permitindo cancelar pelo link no próprio e-mail.
Outros apresentam informações tão ambíguas que é difícil saber qual ação realmente cancela a inscrição.
O exemplo abaixo exige um texto explicando como assinar e como cancelar, porque a interface não deixa a escolha clara.
Sem ler as instruções acima da caixa de seleção, fica a dúvida: marcar “Web Hosting Talk Insider” cancela a inscrição ou significa continuar recebendo a lista? O botão “enviar” também não esclarece o resultado.
Um design compreensível orienta a pessoa durante o uso e oferece ajuda de forma natural.
Uma interface intuitiva permite seguir os passos sem ter de interpretar instruções longas para descobrir o que fazer.
Solução
Remova textos desnecessários e use controles e rótulos que expressem claramente a escolha e o resultado da ação.
Quando possível, crie uma página específica para o cancelamento. Se a pessoa clicou no e-mail para parar de receber mensagens, levá-la a uma tela genérica de preferências pode adicionar informações e decisões desnecessárias.
O design para web e o design de aplicativos móveis têm um papel importante na experiência digital. Os exemplos mostram como padrões de interface podem criar dificuldades e como mudanças pontuais podem tornar a interação mais clara.
Use esses exemplos para avaliar interfaces que sejam agradáveis visualmente e fáceis de compreender e utilizar.
Preocupado com padrões de interface problemáticos?
A Pengreen Design conta com uma equipe experiente para ajudar empresas a identificar e corrigir problemas de interface.
Descubra oportunidades de melhoria no seu produto com nossa Auditoria de UX ! Identifique dificuldades de design que podem estar prejudicando a experiência das pessoas e os resultados do produto.
