Comment créer une modale optimisée ?

Aujourd’hui, je souhaite partager avec vous des astuces pour créer des modales.

Pour ceux qui découvrent ce mot, une modale c’est la fameuse fenêtre qui passe au-dessus de l’interface sur laquelle vous naviguez. Le contenu parent est désactivé au profit du contenu de la modale.

En général, pour continuer à naviguer, il vous est demandé de répondre à une question.

La modale permet d’obtenir l’attention de l’utilisateur à un endroit précis, à un instant T.

La modale est appelée pour différentes raisons :

●  Soit elle permet de récolter des informations de l’utilisateur.

●  Soit elle permet de transmettre une information à l’utilisateur.

●  Soit elle permet d’apporter des précisions sur le contenu parent.

Dans tous les cas, l’utilisateur doit interagir avec la modale pour la faire disparaître et continuer son parcours.

Lorsque je suis en mission, il est très rare que du temps soit planifié pour ce type d’interaction, mais il faut bien garder en tête qu’elles sont essentielles dans le parcours utilisateurs.

D’autant plus qu’une grande majorité des utilisateurs ne sont pas réceptifs aux modales et les ferment automatiquement dès qu’elles apparaissent.

Il suffit de prévoir des gabarits pour la partie graphique et de détecter les situations où une modale serait nécessaire. Pas la peine donc de toutes les désigner, mais en tout cas il est nécessaire d’anticiper leur utilisation. L’application appellera ensuite le gabarit pour telle ou telle information.

Même si cela peut vous paraître être des pages basiques, le développeur aura lui aussi besoin d’informations de votre part pour coder ces modales.

Dans cet article, je vous donne 6 conseils pour les concevoir :

#1 Pouvoir quitter facilement la modale

Tout d’abord, vu qu’on fait apparaître la modale automatiquement à l’utilisateur, il est important de lui apporter un chemin vers la sortie.

Il faut penser à l’accompagner pour poursuivre son voyage à travers le site et pas qu’il soit arrêté complètement après l’apparition de la modale.

L’apparition d’une modale est déjà considérée comme une frustration pour l’utilisateur. Il faut donc prévoir un bouton clair pour en sortir.

Ce bouton de sortie peut être :

  • un bouton d’action « fermer » ou « annuler »,
  • un bouton « retour » ou alors une icône « croix »,
  • un clic en dehors de la zone de la modale. Et tous ces éléments peuvent être combinés !

 

Ici, les zones bleues symbolisent toutes les options pour quitter la modale. Comme vous pouvez le voir, combiner les options permet de répondre à plusieurs schémas de pensée des utilisateurs.

Il faut aussi penser à l’accessibilité en prévoyant de pouvoir quitter avec la touche « echap » / « esc » du clavier.

 

#2 Éviter les longs paragraphes

Être concis dans son discours permet de ne pas casser le schéma de pensée initial de l’utilisateur.

Une modale apparaît suite à une action de l’utilisateur. Mais ce qu’il recherche est rarement inscrit dans la modale ! Il est donc impatient d’obtenir le résultat final.

C’est pourquoi votre message se doit d’être direct.

De plus, il ne faut pas écrire de longs paragraphes au risque de perdre l’attention de l’utilisateur (sauf cas très précis comme la lecture et la validation de mentions légales par exemple).

 

#3 Créer une hiérarchie pour les textes

Ce qui peut aider le point précédent, c’est de décomposer votre message.

Commencer par un titre qui résume la situation. Puis, si besoin, un paragraphe qui donne plus d’explications (par exemple, un contexte ou une marche à suivre).

Le titre permet de donner du contexte à l’utilisateur et lui faire comprendre ce qu’on attend de lui.

Pour cela, il faut accorder une importance au style typographique des éléments textuels mais également à la tournure des phrases.

●  Pour le style typographique, le titre sera mis en avant par rapport au paragraphe. Donc n’hésitez pas à utiliser des graisses, des couleurs et des tailles différentes.

●  Pour la tournure et le ton, essayer les phrases à l’infinitif qui permettent de faire passer le message sans sujet. Aller droit au but.

Sur ce dernier point, je vous partage une astuce pour les libellés des boutons : une bonne pratique est d’utiliser un terme similaire entre le titre de la modale et le bouton principal.

 

#4 Taille et placement

La modale ne doit être ni trop petite ni trop grande. Et elle ne doit pas prendre tout l’écran. L’utilisateur doit comprendre que c’est un élément qui passe par-dessus la page principale.

De plus, gardez en tête que ce n’est pas une page donc s’il y a trop de contenu dedans, optez pour une autre matérialisation. La modale doit être concise.

Pour le placement, l’idéal est de la centrer et de la positionner vers le haut de la page.

●  Cela captera l’œil de l’utilisateur.

●  Ce sera optimisé pour la version smartphone et empêchera la modale d’être cachée sous la ligne de flottaison.

 

#5 Focus l’utilisateur sur la modale

Une bonne pratique, simple à mettre en place, c’est d’isoler la modale du reste du contenu.

Le plus souvent, pour créer ce résultat, une opacité est ajoutée derrière la modale pour la mettre en avant et ainsi mettre en veille le contenu du site.

Je parle de mise en veille car l’opacité permet de garder un repère et de comprendre que la modale est liée au contenu précédemment consulté. Elle passe par-dessus le contenu parent.

Ce fond en arrière-plan montre à l’utilisateur que la page principale est désactivée et qu’il ne peut pas interagir avec elle.

 

Ici, j’ai matérialisé le focus par une opacité bleue et en ajoutant une ombre portée à la modale.

Le plus souvent, l’opacité est noire ou grise mais rien ne vous empêche d’utiliser une couleur de votre charte graphique. Par contre, je vous conseille d’appliquer une couleur sombre qui permet de montrer que le contenu derrière est éteint.

Pensez, ici aussi, à l’accessibilité en mettant le focus du clavier sur la modale.

 

#6 Ajouter des icônes ou des illustrations

Les icônes et les illustrations sont des éléments qui permettent à l’utilisateur de tout de suite comprendre le sens du message de la modale.

●  Si vous mettez une coche de validation verte, il va comprendre rapidement que le message est positif et que son action a été un succès.

●  Si vous mettez un petit nuage, il va très vite détecter qu’une erreur s’est glissée et que son parcours est stoppé. Le pouvoir des icônes et des illustrations est puissant et permet en même temps de créer une identité propre à votre marque.

 

# En conclusion

Réfléchissez si la modale est bien le composant qu’il faut dans votre parcours car :

●  elle stoppe l’avancée de vos utilisateurs dans l’interface,

●  elle ajoute un clic supplémentaire,

●  elle peut les perturber voire même les énerver.

Si ce n’est pas le cas, il y a d’autres processus qui permettent de faire passer des messages :

– Une alerte
– Un toast / une snack-bar – Une page dédiée

Si la modale répond au besoin et est nécessaire, les 7 clés partagées dans cet article vous seront utiles pour l’utilisabilité de vos modales et ainsi enrichir le parcours de vos utilisateurs.

 

Source image : https://undraw.co/illustrations

 

Alexa CUELLAR UX-UI Designer @UX-Republic


Nos prochaines formations