The 9 states to anticipate for optimized navigation

“The truth cannot be transmitted by speech, the truth exists in the void between the words, between the lines”. Hideo Kamata  

A good user experience is based on taking into consideration the Japanese “Ma”. The “Ma” is an interval, a pause, a breath that promotes harmony between all the elements. Perceiving emptiness is the key to successful user experience. This ensures a smooth visit experience, with complex transitions and scenarios. The objective is to anticipate all the moments of wavering. The times when the user loses his connection, forgets his password, or when a user generates a request with more than 10 results for example.
Vince Speelman, designer and developer, in a November 2015 Medium article, offers us 9 scenarios to keep in mind when designing a screen.
Here is the translation of his article :
Modern UI (User interface) teams first design components and then best assemble them into an interface. This juxtaposition of elements is an open door to the “path of disappointment”. Indeed, this path is a place where a user can, more or less intentionally, stray from a carefully considered process. Rather than looking at components, we should focus on all the complex scenarios that a component, request, or external problem can cause. Here are the 9 states to systematically take into account:

  1. The first time,

What happens before a component triggers? This may be the first time a user sees it. Maybe it's not activated yet. The component exists but has not started yet.
10
 

  1. Page loading

This is the most dreaded scenario. In a perfect world, no one would want to see this. Alas, it happens. Fortunately, there are many ways to subtly and unobtrusively display a loading message.
20
 

  1. Vide

The component has been initialized but is empty. No data. No items. This is the perfect moment to motivate the user to perform an action (“Do this!”), or to reward him (“Well done, everything is well organized now).
30
 

  1. No data entered

    There is at least one data. The user has made a first entry. It may be the first strike. In a list, this can be when the user has an item.
    40
     

    1. Many

    This is the first scenario that we conceive. What is the ideal state of the component/your page? Data is visible and the user understands how the page works.
    50
     

    1. Too much

    Ouch, there is no space. There are too many results (perhaps a pagination should be done), too many signs (should a field be enlarged?)…
    60
     

    1. Incorrect

    The component has a small problem. There is a mistake.
    70
     

    1. Correct

    Perfect, the way is clear! This component is validated.
    80
     

    1. Website

    Pushing a button worked. The user is reassured.
    90
     
    These 9 scenarios are intraseques to a page, an interaction, a data load and a component. Regardless of the user's navigation, these states must take into account all possible use cases and provide a good experience.
    Most of these states are often thought of without being specified, forgotten, or simply ignored by the teams. It's a big mistake. By taking them into account, we create applications with a strong added value. Systematically integrating all of these states into the design of wireframes improves empathy with the user and establishes a stable navigation path.
    These 9 scenarios apply to all designers and all components. To use without moderation !

    Marina Wiesel, UX Designer @UX-Republic