Tutoriel Vidéo Figma UI/UX : Hiérarchie de l'information

Télécharger la vidéo

Nous allons aujourd'hui discuter de la hiérarchie des informations. Un design n'est pas simplement une jolie page et il est important de réfléchir à la structure de l'information et à l'ergonomie de l'interface.

Ecouter l'utilisateur

Ne vous lancez pas dans la création d'une interface sans vous poser la question en amont de son utilisation. Les utilisateurs n'auront pas forcément tous les mêmes besoins et il est important de penser une interface pour qu'elle permette à l'utilisateur d'atteindre son objectif facilement. Il faudra donc réfléchir avec le client sur les besoins et la logique métier avant de se lancer dans la création d'une maquette.

  • Quel élément doit être mis en avant ?
  • Quelle information est la plus importante ?
  • Quelle action utilisez-vous le plus souvent ?

Ces questions vont vous permettre aussi de réfléchir en amont à la hiérarchie de l'information et à concevoir un produit qui est plus en harmonie avec les attentes des utilisateurs.

Soyez cohérent

Le second point important est d'être homogène au niveau des espacements / placements. Lors du premier coup d’œil, la personne va scanner rapidement la structure de l'interface et il est important de le guider pour mieux identifier les éléments importants.

On choisira un espacement avec un ratio spécifique et on adaptera la quantité d'espace en fonction du contexte. Par exemple, un espace basé sur une grille de 8px donne de bon résultat. On peut multiplier par 2 pour l'espacement entre 2 éléments de même contexte (16px) et par 3 ou 4 pour des éléments de contexte différent (24 à 32px).

Pensez au sens de lecture, tout en considérant le besoin

Par défaut les utilisateurs sur le web ont tendance à lire les informations en utilisant un motif de F. L'utilisateur commence par lire la première ligne puis regarde légèrement en dessous pour lire la suite en revenant à gauche systématiquement. Mais ce motif n'est pas forcément une règle d'or que vous devez adopter dans 100% des cas. Suivant les objectifs des utilisateurs la méthode et le sens de lecture peut changer :

  • Si un utilisateur parcourt une liste de produits similaires il va avoir tendance à regarder chaque produit méticuleusement avant de passer au produit suivant.
  • Si un utilisateur cherche un produit spécifique parmi une liste, son regard va scanner la page plus rapidement à la recherche d'un repère visuel fort (titre du produit ou visuel).

Comme précisé en début d'article il est donc important de comprendre le besoin afin de prendre la bonne décision lors du choix de la présentation.

  • Si l'utilisateur ne sait pas exactement quel produit choisir, lui afficher plus d'information sur les caractéristiques des produits peut être une aide importante dans son choix.
  • Si l'utilisateur est à la recherche d'un produit précis, réduire le bruit visuel et mettre en avant seulement les informations importantes (visuel et titre) sera plus adapté.