23

Comecemos com um problema-exemplo: substituir visualmente o elemento <input type="checkbox"> por imagens. Neste caso foram definidos três estados para o elemento:

  1. Natural, ficando com as bordas cinzas e opacidade 0.5;
  2. Hover, ficando com as bordas azuis e opacidade 0.8;
  3. Selecionado, ficando com as bordas verdes e opacidade 1.0;

.option {
  margin: 10px;
  float: left;
}

.option__input {
  display: none;
}

.option__image {
  padding: 3px;
  border: 1px solid lightgray;
  opacity: 0.5;
  cursor: pointer;
  transition: all .2s;
}

.option__image:hover {
  border-color: blue;
  opacity: 0.8;
}

.option__input:checked + .option__image {
  border-color: green;
  opacity: 1.0;
}
<p>Selecione as imagens desejadas:</p>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

Dada a implementação, pode-se notar que:

  • Ao dar hover sobre um elemento no estado natural, o estado hover prevalece, ficando o elemento com opacidade 0.8 e bordas azuis;
  • Ao dar hover sobre um elemento no estado selecionado, o estado selecionado prevalece, ficando o elemento com opacidade 1.0 e bordas verdes;

Percebi que, pelo fato que o estado selecionado prevalecer sobre o estado hover acaba causando uma sensação esquisita, principalmente quando apenas um dos elementos está selecionado. Como o estado hover indica que o elemento está pronto para alterar de estado entre natural e selecionado, não aplicá-lo ao elemento selecionado faz parecer que este está inerte. Uma vez selecionado, não há como mudar. Considerando os conceitos de UX, causar esta impressão no usuário não parece uma boa ideia.

Porém, se inverter as prioridades dos estados, de modo que o estado hover prevaleça perante o estado selecionado, acontecerá perdas de informação. Uma vez o elemento no estado hover o usuário não saberá se o elemento está selecionado ou não até mover o mouse para fora do elemento. Também não vejo como uma boa ideia forçar o usuário a isso.

Depois dessas considerações, questionei-me se diferentes estados do elemento não deveriam ser representados com propriedades distintas, assim ao invés de se sobreporem eles poderiam se incrementar. Por exemplo, representar o estado selecionado com bordas verdes e opacidade 1.0, como já era feito, mas representar o estado hover com a escala do elemento:

.option {
  margin: 10px;
  float: left;
}

.option__input {
  display: none;
}

.option__image {
  padding: 3px;
  border: 1px solid lightgray;
  opacity: 0.5;
  cursor: pointer;
  transition: all .2s;
}

.option__image:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.option__input:checked + .option__image {
  border-color: green;
  opacity: 1.0;
}
<p>Selecione as imagens desejadas:</p>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

Sendo assim, pergunto se, considerando os preceitos da experiência do usuário (UX), devemos sempre representar diferentes estados de um elemento com diferentes propriedades, de modo a minimizar ou eliminar as situações de perda de informação?

4
  • Admito que li por cima, mas a pergunta no final me faz ter uma ideia/opinião, o problema acaba se estendendo também ou além para o lado técnico da coisa, porque a perda de informação até aonde entendo seria um problema técnico que acarretaria a um problema para o usuário final, mas ainda sim seria mais puxado ao técnico. Posso ter entendido mal, o assunto é interessante, mesmo que eu ainda esteja com algum receio, vou acompanhar e pesquisar para ver se consigo colaborar com algo.
    – Syzoth
    1/01/2019 às 16:08
  • Acredito que não necessariamente deve ser usado sempre propriedades diferentes, deve ter uma aparencia diferente e que não sobreponha 100% do efeito. Usando a mesma e/ou outras propriedades, por exemplo, usar a borda de cores diferentes para diferenciar cada um dos três estados mas a opacidade determina se está selecionado ou não
    – Costamilam
    23/02/2019 às 17:34
  • @GuilhermeCostamilam Se está utilizando a borda para sinalizar um estado e a opacidade para outro estado você estará utilizando diferentes propriedades para representar diferentes estados, como perguntado xD
    – Woss
    23/02/2019 às 19:12
  • Nesse ponto de vista sim, mas há uma repetição de propriedade para estados diferentes, não tem problema repetir se ficar claro os diferentes estados
    – Costamilam
    23/02/2019 às 19:18

2 Respostas 2

11
+50

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. Repare que alem da cor vc pode usar outro artifício visual para acentuar a mudança de estado do elemento, nesse caso eu coloquei uma borda no elemento caso ele esteja checked, e mantive a borda no checked:hover, mas se não estiver checked não tem borda.

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;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 20px;
}
.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;
  border: 3px solid #fff;
  outline: 5px solid green;
}
.btn:checked:hover {
  background-color: blue;
  color: blue;
  border: 3px solid #fff;
  outline: 5px solid 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 do estado disable. Caso vc esteja pensando em um Design System mais avançado sempre é bom tratar todas as variantes. Aqui tem um exemplo bem completo sugerido pelo Material Design da Google

inserir a descrição da imagem aqui

8

Não sou profissional de UX, então é como opinião pessoal, de usuário, que afirmo que sua preocupação é extremamente relevante e sim, é importante deixar claro visualmente os estados dos objetos.

No seu primeiro exemplo, a imagem selecionada realmente parece inerte e não dá pra saber só de olhar que ao clicar ela mudará de estado ou fará qualquer outra coisa.

Sua solução no segundo exemplo é bem legal, que bom que conseguiu pensar em uma alternativa, porém, percebi que no primeiro exemplo, o que vc tem é uma questão de especificidade.

Acontece que

.option__input:checked + .option__image {

É mais especifico que

.option__image:hover

E por isso prevalece. Mas vc pode contornar facilmente acrescentando !important ou aumentando a especificidade do :hover de alguma outra maneira.

Veja como fica legal com o !important apenas na opacidade:

.option {
  margin: 10px;
  float: left;
}

.option__input {
  display: none;
}

.option__image {
  padding: 3px;
  border: 1px solid lightgray;
  opacity: 0.5;
  cursor: pointer;
  transition: all .2s;
}

.option__image:hover {
  border-color: blue;
  opacity: 0.8 !important;
}

.option__input:checked + .option__image {
  border-color: green;
  opacity: 1.0;
}
<p>Selecione as imagens desejadas:</p>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

2
  • 2
    Para clarificar, não aceitei nem votei na resposta por considerá-la, até certo ponto, incompleta. A pergunta em si é sobre o fato de utilizar diferentes propriedades para representar os diferentes estados, mas sua resposta foca muito mais em apenas adaptar o exemplo dado. A questão é muito mais teórica do que prática - um código deve ser apenas para exemplificar/embasar a resposta, não ser o núcleo dela. Nota: considero a solução com !important péssima, pois tende a gerar mais efeitos colaterais do que uma solução propriamente dita.
    – Woss
    21/02/2019 às 13:56
  • Obrigado pelo feedback 21/02/2019 às 22:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .