En design d’interface, les spécialistes vous le diront : il ne sert à rien de réinventer la roue.

En effet, les utilisateurs sont habitués à certains standards (boutons, menus, icônes, interactions). S’éloigner trop de ces conventions peut entraîner confusion et frustration.

Qu'ils soient visuels, sonores, comportementaux ou symboliques, les patterns sont partout. Notre cerveau est conçu pour les détecter et les interpréter afin de mieux comprendre le monde qui nous entoure. Ces repères servent de guides et accompagnent l’utilisateur dans sa navigation.

C’est pourquoi une règle essentielle en conception d’interface est : "Faites en sorte qu’un bouton ressemble à un bouton."

Un bouton peut remplir plusieurs rôles :

• Normal : Aucun rôle spécifique.

• Principal : Bouton par défaut, correspondant à l’action la plus probable.

• Annuler : Permet d’interrompre l’action en cours.

• Destructif : Déclenche une action impliquant une perte potentielle de données.

Dans notre cas, la création d’un bouton pour la suppression d’un message relève clairement de la dernière catégorie.

Nous allons maintenant voir comment rendre votre bouton "Supprimer" désirable, tout en respectant les principes essentiels du design.

Règle 1 : Le rendre cliquable

Il est essentiel de laisser suffisamment d’espace autour d’un bouton pour que les utilisateurs puissent le distinguer visuellement des autres éléments et l’activer facilement.

En règle générale, une zone interactive d’au moins 44x44 pt est recommandée pour garantir un confort d’utilisation optimal.

Règle 2 : Le rendre explicite et percutant

Dans le cas de notre bouton, il s'agit d'une action aux conséquences irréversibles. Supprimer un post sur lequel un utilisateur a passé du temps, sans une intention claire, pourrait le frustrer .

Le rouge est une couleur qui évoque instinctivement le danger, l’urgence et l’irréversibilité. C’est un moyen visuel puissant pour indiquer que cette décision n’est pas à prendre à la légère et que l’utilisateur doit être pleinement conscient de son impact.

De plus, le texte du bouton doit être clair et sans ambiguïté. Il doit décrire précisément l’action réalisée pour éviter tout doute dans l’esprit de l’utilisateur.

Règle 3 : Le rendre désirable

Si vous avez respecté les deux premières règles, vous avez déjà accompli 90 % du travail. Pour aller plus loin, l’ajout d’une animation subtile peut renforcer l’expérience utilisateur.

Les animations attirent l’attention, car notre système visuel est particulièrement sensible aux mouvements, en particulier ceux qui semblent avoir une intention. Elles ajoutent également une touche plus humaine au design.

Par exemple, lors du loading state, une micro-animation peut signaler que l’action est en cours de traitement, améliorant ainsi la perception de fluidité et de réactivité de l’interface.