Skip to main content
3 de 7
inclui novas instruções
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Ao meu ver o problema é que vc não seguiu uma hierarquia de classes, assim como colocou dois estados do .btn como o mesmo estilo. O que segundo as leis da heurística seria incorreto, pois ela não da o feedback do estado do .btn de forma clara para o usuário. Sempre indicando o estado da interação e do elemento.

Veja que quando o usuário faz o hover em elemento interativo, vc deve indicar que esse elemento tem uma interação disponível!

Lei n° 1: Visibilidade de qual estado estamos no sistema
É responsabilidade do sistema informar o que está acontecendo em real time pro usuário.

Sempre que os usuários interagem com um sistema, eles precisam saber se a interação foi bem-sucedida. O sistema realmente captou o evento nesse botão ou ficou ou ignorou, ou está processando algo? O item foi adicionado ao carrinho? O pedido foi aprovado?

Um exemplo bem básico é o check duplo do WhatsApp ✔✔. Antigamente o WhatsApp não tinha essa sinalização bem definida, o que deixava os usuários confusos sobre se a mensagem tinha sido enviada/entregue/lida. A solução para isso foi usar 3 status de feedback onde, apenas um ✔ significa mensagem enviada, dois ✔✔ significa mensagem entregue, e dois ✔✔ na cor azul significa mensagem lida.

inserir a descrição da imagem aqui

Pense que para o Btn o CSS tb tem seus estados que deve ser usados como natural/hover/focus/active e cada um da um tipo de feedback para o usuário

Lei n° 5: Prevenções de erros
Não é uma boa ideia deixar seu usuário errar sem explicar previamente o motivo do erro. Melhor do que isso, tente criar um interface que permite o usuário não errar.

"Erros são erros conscientes, e muitas vezes (embora não exclusivamente) surgem quando um usuário tem informações incompletas ou incorretas sobre a tarefa, e desenvolve um modelo mental que não corresponde à forma como a interface realmente funciona."

Um botão que não representa todos os estados de interação se torna um fator de erro na interface, e prejudica o usuário no execução de tarefas.

Nesse exemplo é difícil de entender o que está ligado ou desligado

inserir a descrição da imagem aqui

Já quando vc adiciona uma cor vc ajuda o usuário a entender o estado do elemento e evita que ele erre ao selecionar o que deseja.

inserir a descrição da imagem aqui

Fonte: https://www.nngroup.com/articles/ten-usability-heuristics/


##Agora sobre o CSS

Sobre o CSS veja esse diagrama que fiz para entender como poderia funcionar da forma correte e tratando todos os estados do .btn

inserir a descrição da imagem aqui

Aplicando os conceito do diagrama acima temos o seguinte resultado. Usei um pseudo elemento ::after para indicar o estado do .btn de acordo com a interação feita.

inserir a descrição da imagem aqui

Segue o código da imagem acima:

input {
  all: unset;
}

.btn {
  display: block;
  width: 50px;
  height: 50px;
  position: relative;
}
.btn::after {
  display: block;
  margin-left: 60px;
  content: "btn::after";
}

.btn {
  background-color: red;
  color: red;
}
.btn:hover {
  background-color: purple;
  color: purple;
}
.btn:checked {
  background-color: green;
  color: green;
}
.btn:checked:hover {
  background-color: blue;
  color: blue;
}

.btn:hover::after {
  content: "btn:hover::after";
}
.btn:checked::after {
  content: "btn:checked::after";
}
.btn:checked:hover::after {
  content: "btn:checked:hover::after";
}

  
<input class="btn" role="checkbox" aria-checked="false" type="checkbox" name="" id="">


DICA:

Falando em acessibilidade lembre sempre de deixar o seu elemento o mais semântico possível e sempre acessível para leitores de tela. Uma boa prática é usar os atributos role="checkbox" e aria-checked="false" para indicar o estado do .btn

Mais informações aqui: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role

Pontos a se considerar

Sempre é indicado construir também os demais estados do .btn, como :active e :focos, além da estado disable. Caso vc esteja pensando em um Design System mais avançado sempre é bom tratar todas as variantes.

inserir a descrição da imagem aqui

hugocsl
  • 66,9mil
  • 17
  • 88
  • 166