Lojinha Compre Fácil: Uma boa UI significa uma boa UX?

Será que ter uma UI bonita automaticamente torna seu produto usável?

Recentemente estava explorando o UX Collective e me deparei com um artigo interessante sobre “O que é bonito é usável”, escrito por João Crescioni.

O conceito deste artigo me fez lembrar de um projeto que paira pela internet há muitos anos no meio de UX, chamado User Inyerface: basicamente um site com péssima usabilidade e faz você querer jogar seu computador longe nas primeiras tentativas de realizar uma tarefa.

Refletindo sobre essas duas referências, comecei a pensar sobre isso:

Se temos uma interface bonita, temos um produto usável?

Apesar de óbvio, não há nada melhor do que entender a resposta na prática.

Pensando nisso, iniciei um pequeno projeto chamado Lojinha Compre Fácil, cujo objetivo é mostrar que uma boa UI não é sinônimo de uma boa UX.

­

A proposta

A Lojinha possui apenas um objetivo:

O usuário deve finalizar a compra do único produto disponível no valor de R$ 500.

Para isso, ele deve passar por todas as etapas do e-commerce fictício — feito no Figma — desde a home até a página de finalização da compra.

Caso você queira tentar atingir esse objetivo antes de ler os spoilers presentes neste artigo, interaja com o protótipo abaixo ou clique aqui.https://medium.com/media/9268771dde90c77b63796d8e23ed6add/href

­

Princípios de UX

Como mencionado anteriormente, o objetivo desse projeto é mostrar que nem sempre uma interface bonita significa que o usuário terá uma boa experiência com o produto.

Para isso, levei em conta princípios básicos de UX para fazer exatamente o contrário do que é recomendado.

­

Fácil acesso às informações relevantes

Para que um produto seja minimamente bom, é importante que as informações básicas, como por exemplo, o valor de um produto, estejam bem claras na interface.

É aí que a Lojinha entra com sua primeira gafe:

Valores escondidos como se fosse um dado sensível, dificultando o usuário de visualizar essa informação de maneira rápida e clara.

Além da questão do preço, também neste mesmo contexto, temos a questão de produtos indisponíveis.

Numa UX boa, para que o usuário saiba que um produto não está em estoque, o ideal seria mostrar essa informação já no card do produto em questão. Mas, como a Lojinha Compre Fácil quer dificultar tudo, o usuário precisa clicar no produto e ver uma modal que indica a indisponibilidade da peça.

Durante a jornada, você ainda conseguirá passar por diversas situações que quebram esse princípio de acesso facilitado a informações importantes.­

Expectativa x Realidade

Informação nunca é demais. Por isso, é importante destacar pontos de atenção para o usuário durante a jornada, e não apenas ao final, quando ele está quase finalizando uma compra, por exemplo.

Nessa categoria, muito parecida com o tópico anterior sobre o fácil acesso à informação, podemos tomar como exemplo da Lojinha a questão da compra pelo cartão de crédito.

No produto, temos a informação de que “é possível parcelar em 2x”, porém, no checkout, o usuário é avisado de que para usar a modalidade crédito ele precisa fazer uma compra de, no mínimo, R$ 600.

Numa experiência ideal, essa informação poderia estar em um ponto de mais destaque na tela e em outro momento da jornada, para não gerar frustração para aqueles usuários que queiram pagar no crédito.

­

Hierarquia da informação

Durante uma jornada, o UX Designer tem como objetivo diminuir o esforço para que o usuário tenha a melhor experiência possível ao alcançar um objetivo. Neste ponto, a hierarquia é de extrema importância, pois facilita o caminho feliz para o usuário cumprir sua meta.

No caso da Lojinha Compre Fácil (que acaba não sendo nada fácil…) temos a inversão do destaque de ações primárias e secundárias, como no exemplo abaixo.

Temos como botão primário a frase “não desejo visualizar”, quando, na verdade, o objetivo principal do usuário seria a visualização do produto, que só pode acontecer se ele clicar no link abaixo “sim, desejo visualizar”, quase imperceptível na tela.

­

Número de cliques

Para uma boa experiência, é ideal que o usuário alcance seu objetivo na jornada com o menor número de cliques possíveis. Ou seja, em qualquer oportunidade que temos, como designers, de diminuir o tamanho da jornada, melhor.

No caso do e-commerce fictício, todas as oportunidades de aumentar o número de cliques foram aproveitadas (risos).

Como exemplo, temos na própria home, na hora de selecionar um produto. Quando o usuário clica no botão “ver produto”, ao invés de ele ir para a página do produto imediatamente, ele passa pelo modal apresentado anteriormente no tópico acima, para confirmar sua ação. Algo completamente desnecessário nessa jornada. Confira esse exemplo completo no GIF abaixo:

E claro, para tornar a experiência ainda pior, adicionei mais alguns cliques desnecessários na hora de selecionar o tamanho da peça e também no checkout da compra. Não esqueçam de navegar pelo protótipo para conferir essa jornada.

Claro que esse projeto é apenas uma representação muito descarada do que seria uma UX mal pensada e sem foco no usuário. Esperamos que, na realidade, as jornadas já sejam pensadas para não dar dor de cabeça aos usuários e facilitar sua navegação ao máximo possível.

Porém, é interessante trabalhar esse processo inverso para entender as amarras que colocamos no nosso trabalho, em projetos pessoais, enfim, que serão um ponto de atrito para os nossos usuários.

E respondendo à pergunta levantada no início do artigo: não, uma UI bonita não significa que o produto está usável, como é possível perceber no protótipo da lojinha que foi criado.

Deixe nos comentários se você conseguiu concluir o objetivo da lojinha sem se estressar.

Referências

• CRESCIONI, João. “O que é bonito é usável”… Será mesmo?. UX Collective, 2023.

Lojinha Compre Fácil: Uma boa UI significa uma boa UX? was originally published in UX Collective