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

Question

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

Navigation

#1 by (1 votes)

7

Let's start with an example problem: Visually replace the <input type="checkbox"> element with images. In this case, three states have been defined for the element:

Natural, getting the gray edges and opacity 0.5;

Hover, getting blue edges and opacity 0.8;

Selected, leaving the green borders 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 may be noted that:

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

I noticed that the fact that the selected state prevails over the hover state ends up causing an odd feeling, especially when only one element is selected. As the hover state indicates that the element is ready to change state between natural and selected, not applying it to the selected element makes it look like it is inert. Once selected, there is no way to change. Considering UX concepts, making this impression on the user does not seem like a good idea.

However, if you reverse the priorities of the states, so that the hover state prevails with the selected state, you will lose information. Once the element in the hover state the user will not know whether the element is selected or not until you move the mouse out of the element. I also do not see it as 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 distinctly, so instead of overlapping they could increase. For example, representing the selected state with green borders and opacity 1.0, as already done, but representing the hover state with the scale of the element:

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

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

ux

asked by anonymous 28.12.2018 / 12:49

1 answer

How to create a simple markdown with PHP? How do I create automatic subdomains from a form?

score 1 · Answer 1

I'm not a professional UX, so it's like personal opinion, user, I say that your concern is extremely relevant, but it is important to make the states of objects visually clear.

In your first example, the selected image actually looks inert and you can not just see that clicking it will change state or do anything else.

Your solution in the second example is pretty cool, good that you could think of an alternative, however, I realized that in the first example, what you have is a matter of specificity.

It turns out that

.option__input:checked + .option__image {

More specific than

.option__image:hover

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

See how cool it is with !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>