Should different states of an HTML element be represented in different properties?

Question

Let’s start with a problem-example: visually replace the element <input type="checkbox"> by images. In this case, three states have been defined for the element:

1. Natural, getting the gray edges and opacity 0.5;
2. Hover, getting the blue edges and opacity 0.8;
3. Selected, with green edges and opacity 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>

Given the implementation, it can be noted that:

• When giving Hover over an element in the natural state, the state Hover prevails, leaving the element with 0.8 opacity and blue edges;
• When giving Hover over an element in the selected state, the selected state prevails, leaving the element with 1.0 opacity and green edges;

I realized that the fact that the selected state prevails over the state Hover ends up causing a strange sensation, especially when only one of the elements is selected. Since the state Hover indicates that the element is ready to change its state between natural and selected, not applying it to the selected element makes it appear inert. Once selected, there is no changing. Considering the concepts of UX, making this impression on the user does not seem like a good idea.

However, if you reverse state priorities so that the state Hover prevails over the selected state, information losses will occur. Once the element is in the state Hover the user will not know if the element is selected or not until the mouse is moved out of the element. I also don’t see how it’s a good idea to force the user to do this.

After these considerations, I wondered if different states of the element should not be represented with different properties, so instead of overlapping they could increase. For example, represent the selected state with green edges and 1.0 opacity, as was already done, but represent the state Hover with the element scale:

.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>

Therefore, I ask if, considering the precepts of user experience (UX), we should always represent different states of an element with different properties, in order to minimize or eliminate situations of information loss?

Answer 1

In my view the problem is that you did not follow a hierarchy of classes, just as you put two states of .btn as the same style. What according to the laws of heuristics would be incorrect, because it does not give the feedback of the state of .btn clear to the user. Always indicating the state of the interaction and the element.

See that when the user does the hover in interactive element, vc must indicate that this element has an available interaction!

Law n° 1: Visibility of what state we are in the system
It is the system’s responsibility to inform what is happening in real team pro user.

Whenever users interact with a system, they need to know if the interaction has been successful. Did the system actually catch the event on that button or did it stick or skip, or is it processing something? Was the item added to the cart? The application was approved?

A very basic example is the double check of Whatsapp . Formerly Whatsapp did not have this well defined signaling, which left users confused about whether the message had been enviada/entregue/lida. The solution to this was to use 3 status feedback where, only one means sent message, two means delivered message, and two in blue means read message.

Think that for Btn the tb CSS has its states that should be used as natural/hover/focus/active and each a kind of feedback to the user

Law n° 5: Prevention of errors
It is not a good idea to let your user make a mistake without first explaining the reason for the error. Better than that, try to create an interface that allows the user not to err.

"Errors are conscious errors, and often (though not exclusively) arise when a user has incomplete or incorrect information about the task, and develops a mental model that does not correspond to how the interface actually works."

A button that does not represent all interaction states becomes an error factor in the interface, and harms the user in performing tasks.

In this example it is difficult to understand what is on or off

When you add a color you help the user to understand the state of the element and avoid that it misses when selecting the one you want.

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

---

Now about the CSS

On the CSS see this diagram I did to understand how it could work correctly and treating all the states of .btn

Applying the above diagram concept we have the following result. I used a pseudo element ::after to indicate the state of the .btn according to the interaction made. Note that besides the color you can use another visual artifice to accentuate the change of state of the element, in which case I put an edge on the element if it is checked, and kept the edge on checked:hover, but if you’re not checked has no edge.

Follow the image code above:

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="">

---

TIP:

Speaking of accessibility, always remember to make your element as semantic as possible and always accessible to screen readers. A good practice is to use the attributes role="checkbox" and aria-checked="false" to indicate the state of the .btn

More information here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role

Points to consider

It is always appropriate to build also the other states of the .btn, as :active and :focos, beyond the state disable. In case you’re thinking of a Design System more advanced is always good to treat all variants. Here is a very complete example suggested by Material Design by Google

Answer 2

I am not a UX professional, so it is as a personal, user opinion that I say that your concern is extremely relevant and yes, it is important to make visually clear the states of the objects.

In your first example, the selected image really looks inert and you can’t tell just by looking that clicking it will change state or do anything else.

Your solution in the second example is very cool, I’m glad you were able to think of an alternative, but I realized that in the first example, what you have is a question of specificity.

It turns out that

.option__input:checked + .option__image {

It is more specific than

.option__image:hover

And so it prevails. But you can easily bypass by adding !important or increasing the specificity of :hover in some other way.

See how cool it looks with the !important only in opacity:

.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>