Tutoriel Vidéo Figma UI/UX : Comment gérer les actions ?

Télécharger la vidéo

Je vous propose aujourd'hui de nous pencher sur un problème d'ergonomie récurrent : le placement des actions liées à un contenu.

Pour cet exemple, on va s'imagine travailler sur l'administration des tutoriels sur Grafikart. L'administration présente l'ensemble des tutoriel dans un tableau et on souhaite pour chaque tutoriel avoir accès aux opérations de modification, suppression et duplication.

Une liste d'icônes

La première approche consiste à utiliser une liste d'icône qui vont représenter les différentes actions. Cette approche est intéressante mais peut-être problématique dans certaines situations.

  • La compréhension des icônes n'est pas forcément simple. Une même icône n'aura pas forcément la même signification suivant le contexte et il n'est pas toujours évident de comprendre les actions associées à certaines icônes. Par exemple quelle icône vas-t-on utiliser pour représenter l'action "dupliquer" ou encore "archiver" ?
  • L'espace disponible sur de petits écrans est limité, et l'espace alloué aux actions peut être trop important dans le cas de trop nombreuses actions.

De simples libellés

C'est la première solution à laquelle on pense en général. De simples libellés "éditer" ou "supprimer" peuvent parfois faire l'affaire (on pourra agrémenter ce libellé d'un code couleur particulier comme le rouge pour la suppression par exemple). Ils permettent de solutionner le problème de compréhension, mais tout comme notre série d'icônes la problématique de la place restera présente. On réservera donc cette solution si on a un très faible nombre d'actions ou que l'on n'a pas forcément d'icônes spécifiques.

Le menu déroulant "kebab menu"

Une autre approche consiste à mettre l'ensemble de nos actions dans un menu déroulant disponible via un simple bouton "action" ou via un kebab-menu (cette icône est relativement répandue aujourd'hui et est facilement reconnaissable par les utilisateurs). Cette approche permet de remédier aux deux problèmes que l'on a évoqués précédemment.

  • Le menu déroulant permet de mettre les actions en toutes lettres ce qui évite les problèmes de compréhension.
  • Il permet aussi de résoudre le problème de place vu qu'une seule icône peut maintenant donner accès à un plus grand nombre d'actions.

    En revanche, l'utilisation d'un tel menu rajoute une étape supplémentaire pour l'accès aux opérations courantes. Cette friction supplémentaire peut s'avérer frustrante pour l'utilisateur. On réservera donc cette approche pour des actions qui sont utilisées moins fréquemment par l'utilisateur. Pour notre exemple, la suppression d'un tutoriel et la duplication pourrait être placée dans un tel menu.

Combiner les solutions

Enfin, il ne faut pas hésiter à mélanger les différentes méthodes suivant les attentes des utilisateurs. Il est par exemple possible de mettre en avant les actions les plus utiles via un accès direct (soit par des icônes soit par des libellés), tout en plaçant les actions secondaires dans un menu déroulant.

De la même manière, ce mélange de solution peut permettre de rendre votre interface responsive. Les actions sont placées de manière adjacente par défaut, mais se combinent dans un kebab-menu lorsque la place vient à manquer sur de petits écrans.