1) Uma “visualização recomendada” que limita como a pessoa deve usar a interface.
Web design responsivo consiste em projetar e desenvolver interfaces que se adaptem ao dispositivo da pessoa, considerando o tamanho da tela, a plataforma e a orientação .
Mas não neste site. Ele pede que a pessoa gire o dispositivo para a orientação horizontal, em vez de apresentar o conteúdo adequadamente na vertical.
Além de limitar a orientação, o site apresenta uma interface ruim depois que o smartphone é girado, claramente sem otimização para dispositivos móveis.
Solução
Não peça que a pessoa se adapte à sua interface: é a interface que deve se adaptar ao dispositivo dela.
Otimize a experiência para os diferentes dispositivos, orientações e plataformas que seu público utiliza.
2) Estilos de botões primários e secundários invertidos
Quando dois ou mais botões próximos têm prioridades diferentes, precisamos diferenciá-los. Duas abordagens comuns são:
- Usar a cor principal da interface no botão primário, normalmente mais marcante ou diferente dos demais elementos, e uma cor menos chamativa no secundário, inclusive cinza em alguns casos.
Dar uma cor de fundo ao botão primário e deixar apenas bordas no secundário. O uso de botões com contorno também merece cuidados, mas esse é um assunto para outro artigo.
Nesta interface, fizeram o contrário da segunda abordagem. O botão “finalizar”, que deveria ser o primário com preenchimento, tem apenas bordas. Já o botão “cancelar”, que deveria ser secundário, recebeu o preenchimento. A pessoa pode clicar em “cancelar” por engano, sem ler o rótulo com atenção, pensando que está finalizando.
Solução
Use boas práticas para deixar claro qual ação é primária e qual é secundária.
3) Conteúdo que aparece depois que a interface já está pronta
Às vezes precisamos carregar conteúdo depois que o restante do site já apareceu. Mas, se esse conteúdo empurra tudo para baixo, temos um problema de UX.
A pessoa pode já estar no meio de uma ação, como clicar ou arrastar um item. Deslocar o conteúdo nesse momento pode provocar um resultado inesperado se o clique coincidir com a mudança.
O exemplo abaixo mostra um carrinho depois da inclusão de um produto. O e-commerce carrega produtos relacionados acima do carrinho quando o restante do conteúdo já está disponível. Se a pessoa tentar alterar a quantidade do primeiro item exatamente nesse momento, pode acabar clicando em um produto relacionado e sendo levada para outra página. Isso interrompe a compra e gera frustração. Já aconteceu comigo várias vezes: esqueço de esperar pelos produtos relacionados. Mas essa espera não deveria ser uma responsabilidade de quem está comprando.
Solução
Carregue o conteúdo em conjunto ou reserve antecipadamente o espaço dos elementos que aparecerão depois, evitando deslocamentos.
4) Pedir que a pessoa não faça algo
Não dependa apenas do comportamento da pessoa para evitar erros. A própria interface deve ajudar a preveni-los.
Neste exemplo, um plugin de backup e restauração do WordPress pede que a pessoa não clique em um botão até a restauração terminar, mas mantém o botão disponível. Acioná-lo pode comprometer o site. A interface deixa a prevenção de um problema grave nas mãos de quem a utiliza: até um clique acidental pode causar transtornos. Uma pessoa sem conhecimento técnico talvez precise contratar um profissional para recuperar o site.
Solução
Mantenha a orientação para não fechar o navegador, mas remova ou desabilite os botões que podem causar problemas durante uma operação sensível. Mostre visualmente que estão desabilitados. Quando o navegador permitir, avise antes de sair da página que existe uma operação em andamento.
P.S.: navegadores limitam o controle que um site pode exercer sobre o fechamento da janela. Não é possível impedir isso em todas as situações, mas podemos avisar sobre os riscos.
Atualização: o Updraft lançou uma nova versão dessa interface, mais intuitiva, que evita esse erro removendo o botão da tela.
5) Induzir a pessoa a pagar mais
No Brasil, compras parceladas são comuns. A presença ou ausência de juros precisa ficar clara.
No aplicativo abaixo, uma compra de R$ 20 aparece inicialmente em três parcelas de R$ 7,37, totalizando R$ 22,11: R$ 2,11 de juros. A pessoa pode mudar para uma parcela sem juros. Porém, ao fazer outra alteração, como trocar o cartão ou adicionar um código promocional, a seleção volta para três parcelas de R$ 7,37. Se essa mudança passar despercebida, ela pagará mais do que escolheu.
Ao avançar para o pagamento, aparece uma oferta de serviço premium por R$ 9,99 mensais com a opção já selecionada. O exemplo original registra reclamações nas lojas de aplicativos sobre cobranças que as pessoas não perceberam ter aceitado.
Solução
Respeite as escolhas da pessoa. Não pré-selecione opções que aumentem o custo nem esconda taxas ou altere preferências já definidas para aumentar a receita.
Práticas de venda que confundem as pessoas podem prejudicar a reputação da empresa e custar mais do que a receita obtida com elas.
Bônus: setas confusas
UX também existe fora das telas: tudo o que comunica algo ao cliente faz parte da experiência.
Encontrei este exemplo em uma loja de departamentos.
Na entrada do provador, aparecem três opções: feminino, masculino e infantil. Mas as setas apontam para o chão. Uma cliente pode ficar em dúvida se deve seguir para a esquerda ou para a direita. Mesmo com a seta posicionada à direita de “provador feminino”, a direção não fica clara, principalmente porque as setas estão um pouco inclinadas para a esquerda.
Para piorar, ninguém estava usando os provadores naquele momento. Como os dois lados eram idênticos, não havia outra referência que ajudasse a escolher.
Solução
Não deixe que uma solução visual “diferente” comprometa a compreensão. Oriente as setas para a direção correta.
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.
Vamos conversar sobre uma Auditoria de UX e entender onde seu produto pode estar criando dificuldades para as pessoas.
