Pourquoi éviter d’utiliser des fenêtres modales sur des sites mobiles

Les fenêtres modales comptent parmi les expériences les plus frustrantes auxquelles les utilisateurs peuvent être confrontées sur des sites mobiles. Sur un ordinateur de bureau, les fenêtres modales s’affichent sans problème au vue de la taille de l’écran. Cependant, sur le petit écran d’un téléphone portable, elles se retrouvent généralement coupées : les utilisateurs ne voient qu’une partie de la fenêtre et ne peuvent pas la quitter ni l’afficher facilement.

La visualisation est encore plus compliquée en cas de recours à un clavier virtuel : le clavier apparaît, couvrant une portion de l’écran et contraignant les utilisateurs à faire défiler péniblement le texte pour voir ce qu’ils sont en train de taper. Si vous souhaitez que les utilisateurs puissent accéder facilement au contenu de vos fenêtres modales, évitez d’y avoir recours sur votre site mobile et privilégiez un menu vertical en accordéon.

Un tel format affiche le contenu au sein de la page, sans la recouvrir comme une fenêtre modale, ce qui permet d’éviter les problèmes de défilement et de positionnement que les utilisateurs rencontrent avec ces fenêtres. De plus, les utilisateurs ne perdent jamais leur contexte, car le menu en accordéon s’ouvre sur la même page. Avec les fenêtres modales, le contexte n’est plus accessible, puisque l’écran est recouvert.

Le fonctionnement du menu vertical en accordéon est le suivant : lorsque l’utilisateur appuie sur le bouton, un volet se déroule en dessous. Son contenu s’affiche entièrement sur l’écran du mobile. Les utilisateurs n’ont plus besoin de se préoccuper de problèmes d’affichage partiel ou de défilement difficile.

Le bouton doit être mis en évidence pour que les utilisateurs sachent sur quoi ils ont appuyé. Le volet doit quant à lui porter un titre correspondant au libellé du bouton et disposer d’une icône « X » dans le coin permettant de le fermer, de la même manière que pour une fenêtre modale.

modal-phone-bad-good

Ne laissez plus vos utilisateurs se débattre avec des fenêtres modales : remplacez-les par un menu vertical en accordéon sur votre site mobile. Si les utilisateurs sont en mesure de lire les informations sur leur écran aisément, ils utiliseront votre site mobile avec beaucoup moins de frustration.

Vous avez aimé ? Partagez !

Newsletter

Recevez gratuitement notre newsletter mensuelle. Désinscription en 1 clic.

Ces articles peuvent vous intéresser

Classé dans : , ,

A propos de l'auteur
Rodolphe
Responsable UX chez Testapic
Twitter Site Web

3 comments

leo

Court clair et ça soulève une problématique de fond sur l’UI/UX Mobile. Y’a vraiment quelque chose à faire là dessus, une suite d’articles sur les problèmes récurrents qu’on rencontre tous sur mobile par exemple.

Ce qui est intéressant c’est de voir que c’est souvent les OS eux même qui proposent des solutions (je pense au remplissage automatique login/mdp sur safari par exemple). Aux sites de poursuivre l’effort. On notera d’ailleurs que Google met le paquet là dessus pour inciter les sites à s’adapter.

Mon Nom

Je ne sait pas dans quelle grotte tu vit, mais personnellement je n’ai absolument jamais eu aucun problème avec mes modales sur aucun site

Rodolphe
Rodolphe

Nous vivons dans la grotte de l’expérience utilisateur ! Comment as-tu su qu’il n’y avait aucun problème avec tes modales sur les sites mobiles ? Tu as interrogé tes utilisateurs ?

Commenter

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *