Les 9 états à anticiper pour une navigation optimisée

« La vérité ne peut pas se transmettre par la parole, la vérité existe dans le vide entre les paroles, entre les lignes ». Hidéo Kamata  

Une bonne expérience utilisateur repose sur la prise en considération du “Ma” japonais. Le “Ma” est un intervalle, une pause, une respiration qui favorise l’harmonie entre tous les éléments. Percevoir le vide est la clé de succès de l’expérience utilisateur. Cela assure une expérience de visite fluide, avec des transitions et des cas de figure complexes. L’objectif est d’anticiper tous les moments de flottements. Les moments où l’utilisateur perd sa connection, oublie son mot de passe, ou bien lorsqu’un utilisateur génère un requête avec plus de 10 000 résultats par exemple.
Vince Speelman, designer et développeur, dans un article de Medium datant de novembre 2015, nous propose 9 cas de figure à garder en tête lors de la conception d’un écran.
Voici la traduction de son article :
Les équipes modernes UI (User interface) conçoivent d’abord des composants et qui sont ensuite assemblés au mieux dans une interface. Cette juxtaposition d’éléments est une porte ouverte vers le “chemin de la déception”. En effet, ce chemin est un endroit où un utilisateur peut, de manière plus ou moins intentionnelle, s’égarer d’un processus mûrement réfléchi. Plutôt que de considérer les composants, nous devrions nous concentrer sur tous les cas de figure complexes qu’un composant, une requête ou un problème extérieur peut engendrer. Voici les 9 états à systématiquement prendre en compte :

  1. La première fois

Que ce passe-t-il avant le déclenchement d’un composant ? C’est peut-être la première fois qu’un utilisateur le voit. Peut-être qu’il n’est pas encore activé. Le composant existe mais il n’a pas encore commencé.
10
 

  1. Chargement de la page

Il s’agit du cas de figure le plus redouté. Dans un monde parfait, personne ne voudrait voir ceci. Hélas, cela arrive. Heureusement, il y de nombreuses façons d’afficher subtilement et discretement un message de chargement.
20
 

  1. Vide

Le composant a été initialisé mais il est vide. Aucune donnée. Aucun article. C’est le parfait moment pour motiver l’utilisateur à effectuer une action (“Fais ceci!”), ou pour le recompenser (“Bien joué, tout est bien organisé à présent).
30
 

  1. Aucune donnée saisie

    Il y a au moins une donnée. L’utilisateur a effectué une première saisie. Il peut s’agir de la première frappe. Dans une liste, cela peut-être quand l’utilisateur a un article.
    40
     

    1. Plusieurs

    C’est le premier cas de figure qu’on conçoit. Quel est l’état idéal du composant/ de votre page ? Des données sont visibles et l’utilisateur est comprend le fonctionnement de la page.
    50
     

    1. Beaucoup trop

    Aïe, il manque de la  place. Il y a trop de résultats (peut-être faut-il faire une pagination), trop de signes ( faut-il agrandir un champ ?) …
    60
     

    1. Incorrect

    Le composant a un petit problème. Il y a une erreur.
    70
     

    1. Correct

    Parfait, la voie est libre! Ce composant est validé.
    80
     

    1. Réalisé

    L’activation d’un bouton a fonctionné. L’utilisateur est rassuré.
    90
     
    Ces 9 cas de figures sont intrasèques à une page, à une interaction, à un chargement de données et à un composant. Peu importe la navigation de l’utilisateur, ces états doivent prendre en compte tous les cas d’usages possibles et offrir une bonne expérience.
    La plupart de ces états sont souvent pensés sans être spécifiés, oubliés, ou simplement ignorés par les équipes. C’est une grande erreur. En les prenant en compte, on crée des applications avec une forte plus value. Intégrer systématiquement l’ensemble de ces états dans la conception des wireframes permet d’améliorer l’empathie avec l’utilisateur et de mettre en place un parcours de navigation stable.
    Ces 9 cas de figures s’appliquent à tous les designers et à tous les composants. A utiliser sans modération !

    Marina Wiesel , UX Designer @UX-Republic