UX Audition: Análise na tela do site Sak (pop up)
Essa análise tem objetivo de indicar pontos de melhoria para usabilidade e experiência do usuário na página de configuração de pop-ups do site Sak,
utilizando as Heurísticas de Nielsen, As Leis de UX e boas práticas.
O desafio
Ao participar do processo seletivo para vaga de ux ui designer, fui convidado a mostrar o que eu alteraria na tela do app Sak. Dessa forma, fiz o que chamo de ux audition, que nada mais é que uma análise heurística, levando em consideração esses princípios:
1 As heurísticas de Nielsen: são diretrizes de design que orientam e podem ser aplicadas na criação da maioria das interfaces de produtos e serviços digitais, com o intuito de promover boas experiências de uso.
2 As 20 leis da UX: são heurísticas, princípios cognitivos, Gestalt, etc, documentada e organizada por Jon Yablonski.
3 Boas práticas de design: que nada mais é que contraste de cores, Hierarquia visual, legibilidade, visual affordance, entre outros.
Análise
1 - A Indicação de ajuda não está clara
Leis/heurísticas: Ajuda e documentação / Reconhecimento em vez de memorização.
Explanação: A página funciona da seguinte maneira: O usuário deve selecionar o componente dentro do pop up que deseja alterar, e dessa forma, ir na aba “configurações” a esquerda e alterar as propriedades.
Porém, não há indicativo algum de que a página funcione assim. Há uma ajuda em vídeo com a chamada no botão “ver vídeo” e um ícone de play. Mas isso não indica claramente que é uma ajuda.
Recomendação: Existem duas heurísticas que podem ser citadas aqui, ajuda e documentação, que consiste em fornecer auxílio ao usuário para realizar uma tarefa.
Isso está sendo feito em partes, visto que, a CTA de ajuda está escrito “ver vídeo”. Isso não é claro para o usuário, principalmente pelo símbolo de “play”, pois, é muito comum em outros sites que a ajuda venha com um símbolo de “interrogação” para indicar dúvida.
Aqui entra a heurística de Reconhecer em vez de memorizar. O usuário passa muito mais tempo em outros sites que utilizam essa indicação de interrogação como “Ajuda” ou “Dúvida”, então não tem porque usar um símbolo de vídeo. Trocar a CTA de “Ver vídeo” para algo como “Preciso de ajuda” ou “veja como funciona” seria mais claro.
2 - Não há indicação na tela sobre como ocorre a edição dos componentes
Leis/heurísticas: Visibilidade do status do sistema.
Explanação: Não há indicativo de dois status nessa página. A primeira é que a imagem é passível de alteração, mas não há qualquer indício que isso é possível. A segunda é na alteração do background e fonte.
Quando abre a página, já está selecionado a alteração do background, mas isso não é mostrado como um status como é nos outros componentes, que ficam indicado com o azul ao estar selecionado. Nada está indicado como selecionado. e isso é um problema.
Recomendação: Adicionar ao menos um hover na imagem que indique ao usuário que é possível clicar e altera-la. Deixar o background selecionado como padrão ao entrar na página, pois, como está agora, não há correlação visual entre as configurações disponíveis e o que está sendo alterado.
3 - Falta de auxilio na escolha das cores
Leis/heurísticas: Consistência do design / Contraste.
Explanação: Manter uma consistência de design é muito importante para todos os sites, inclusive para o site do cliente / usuário. CTA principal do pop up não tem recomendação de cor alguma, sendo que uma boa prática é utilizar cores complementares. E não há indicação sobre seguir um bom contraste entre cor da fonte e cor do background.
Recomendação: Seria interessante adicionar algumas “paletas de cores” recomendadas, ou então, fazer um pré cadastro das cores primárias e secundárias do site do usuário, e dessa forma, realizar a alteração de cor automaticamente em todas as opções baseada em cores primárias, secundárias e neutras do branding do usuário. No marketing, é importante que o CTA seja um botão que converta mais. Geralmente, essa cor está para o verde, pois passa mais segurança ao usuário pelo reconhecimento com outros sites. Ou então, seria bom indicar ao menos uma cor complementar para o botão ter mais destaque no pop up, seguindo um bom design e chamando a atenção do usuário para o botão que quer que ele clique.
4 - Área de Clique muito pequena para mudar cores
Leis/heurísticas: Lei de Fitts / Prevenção de erro / Quebra de expectativa.
Explanação: Para mudar a cor do componente, é necessário clicar na bolinha com a cor utilizada. Isso é terrível para a usabilidade, pois tem área de clique muito pequena. Quando se clica na área do código hexadecimal, não há nenhum feedback sobre porque não está abrindo a tela de cores. A Lei de Fitts diz “O tempo para interagir com um alvo é uma função da distância e tamanho do alvo.” Com a área de clique sendo tão pequena, ou seja, o “tamanho do alvo”, o usuário pode ter problemas para clicar corretamente.
Recomendação: Alterar a área de clique para abrir o modal de cores para o input inteiro, em vez de ser apenas a “bolinha com cor atual”. E dar feedback do erro para o usuário quando não abrir este modal.
5 - Botão Salvar não dá feedback quando não funciona
Leis/heurísticas: Prevenção de erro / Feedback.
Explanação: Ao clicar no botão salvar, simplesmente não acontece nada. Provavelmente é porque não estou logado, porém, não há certeza disso já que não há qualquer feedback sobre.
Recomendação: Adicionar um feedback para o usuário do porque o botão salvar não salva. Nã há nenhuma maneira do usuário se recuperar do erro, pois não se sabe qual é.
Conclusão
As heurísticas são um bom ponto de partida para qualquer interface. É importante te-las em mente ao projetar a interface. Claro, não deve ser levado como verdade absoluta, mas com certeza é uma ótima base para previnir erros em qualquer projeto.
Obrigado por ler até aqui!
Para saber mais sobre mim: https://linktr.ee/erichbraganca!
Até
