0

I'm using a dropdown select in my design. The user makes a selection, and the content below changes. The problem is the content below is very similar and isn't obvious that it has changed. I was thinking of adding in some sort of transition to make it more obvious the content below has changed.

A couple of questions: Is using a transition the best UI pattern? Are there other methods I should be using? If using a transition is the best pattern, I was thinking of using a loading animation for a short time. Is a loading animation the best UI component for this?

1

There is a special term - Change Blindness. According to Wikipedia:

Change blindness is a perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it.

So, your task is to prevent change blindness when a user makes a selection.

In the article Change Blindness in UX: Definition there are some tips:

To avoid change blindness, analyze your design for any competing changes that may happen at the same time and that may divert attention from each other. Here are some techniques for doing it:

  • Make one change at a time...
  • Group all elements that will change simultaneously in the same region of the screen, to make sure that the motion will draw attention to all of them...
  • Use animation to signal change, but avoid having too many competing animations on the screen to prevent a dilution of attention.
  • Dim the areas of the screen that do not change, in order to attract attention to changes.
  • If you are adding floating elements to the page as the user scrolls, display them next to the user’s focus of attention (for instance, towards the bottom of the page for Back to Top buttons) and use colours that contrast with the rest of the page.

Animation is the most powerful way to explain changes to a user because according to the same article Change Blindness in UX: Definition:

Change blindness occurs when movement as a cue for change is weak or completely absent.

In Animation for Attention and Comprehension there are useful principles of animation in UX. Applying to your task be sure that:

... to effectively convey a cause-and-effect relationship between UI elements, the effect must begin within 0.1 seconds of the initial user action. This 0.1-second response time maintains the feeling of direct manipulation and supports the perception that the user action caused the new element to appear.

Also in the article above, they say about frequency. If the scenario you described in the question is used very often then too much rich animation can become annoying for users.

And finally according to Animation for Attention and Comprehension your animation should be fast enough. In Functional Animation In UX Design: What Makes a Good Transition? they recommend keeping animation duration at or under 300ms.

To get inspiration to decide what kind of animation exactly to use see Creating Usability with Motion: The UX in Motion Manifesto. It contains motion principles that are appropriate for certain situations. In the assumption that the change of the content in your case looks like appearing of new UI controls, you can use, for example, Principle 11: Dimensionality that provides a spatial narrative framework when new objects originate and depart.

enter image description here

Regarding the loading animation. It's used when a task takes significant time to be done and we need to indicate a user that the system is working, that it hasn't crashed. Your task is different. Your task is to draw user's attention to changes. However, loading animation is still animation and so it will likely attract user's eyes, but again, it has a different purpose.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.