Style de bouton de fermeture modal
Je regarde une proposition de refonte d'un bouton de fermeture sur une fenêtre modale pour une application web/mobile responsive. J'ai mes propres réflexions à ce sujet, mais j'aimerais que la communauté UI/UX prenne la parole.
Veuillez commenter les stratégies du bouton de fermeture ci-dessous, A et B, et ajouter vos réflexions sur l'approche la plus appropriée.
Pour les modaux, la pratique courante est B pour les applications Web. Pour les applications mobiles, un bouton plus grand, comme indiqué en A, est souvent utilisé pour faciliter les interactions tactile/tactile. Cependant, dans ce cas, vous êtes plus susceptible de voir le bouton de fermeture situé en bas de l'interface utilisateur par rapport au haut, car il s'agit d'une action secondaire. Le fait d'avoir le bouton situé en haut attire l'attention sur le bouton de fermeture avant de voir le reste du contenu en modal. Généralement, c'est une mauvaise pratique si ce n'est pas l'intention.
La convention commune pour cela est ' A ', c'est le plus souvent vu dans les modaux.
Avoir le bouton de fermeture en haut est une mauvaise pratique car:
- C'est probablement la première chose que l'utilisateur verra, et étant donné qu'un modal contextuel est généralement un événement soudain, il est peut-être plus enclin à le toucher sans aucune considération pour le contenu en dessous.
- La convention commune pour un bouton de fermeture est généralement sous le contenu, de sorte que l'utilisateur est plus susceptible de lire réellement ce qui lui a été présenté. La croix est plus subtile et moins intrusive et ne demande pas autant d'attention que le bouton, elle n'aura donc pas le même effet.
B.
Il n'est pas nécessaire de créer quelque chose de nouveau ici. "B" est ce à quoi les utilisateurs s'habituent universellement, il n'y a donc aucun besoin de forcer les utilisateurs à réentraîner visuellement leurs sens cognitifs.
N'oubliez pas l'approche KISS.
La fermeture d'un modal n'est pas la première chose que vous attendez de vos utilisateurs. Donnez-lui donc une importance proportionnée en termes de taille et de placement. En haut à droite, la plupart des utilisateurs s'y attendent. Quelques choses à garder à l'esprit:
- Avoir un bouton de fermeture qui est à l'écart de l'interaction principale de l'utilisateur sur le modal.
- Rendez le clavier à boutons accessible.
- Faites en sorte que le bouton soit suffisamment grand pour pouvoir être placé avec le pouce.
- Assurez-vous que votre modal fonctionne comme prévu sur toutes les tailles d'écran, car dans certains cas, le bouton de fermeture est hors de portée/invisible, ce qui est la chose la plus ennuyeuse à ressentir.