Utilisation de fenêtres modales dans les interfaces utilisateur

De nombreux designers en train de créer des produits numériques sont basés sur leurs sentiments. Bien que cela soit utile dans certains cas, il existe des normes communes éprouvées qui aident à créer logiquement des solutions d'interface utilisateur au lieu de s'appuyer sur l'intuition.

Dans cet article, nous allons essayer d'étudier la norme générale de modalité dans les interfaces utilisateur, et discuter de la raison pour laquelle il n'y a que deux principaux types d'écrans, et également d'analyser comment les applications et les sites Web échouent lors de la conversion des architectures d'informations et des flux d'utilisateurs en interfaces utilisateur intuitives .



Nous commençons cette étude par l'énoncé gras suivant:

Il existe deux types d'écrans:

1. Écrans modaux
2. Écrans sans modalité

Permettez-moi maintenant d'expliquer cette déclaration. Presque tous les écrans que nous pouvons imaginer entrent dans l'une de ces deux catégories. Pour comprendre la différence entre un écran modal et un écran non modal, il faut d'abord définir le concept d'écran modal.

Qu'est-ce qu'un écran modal?

Les écrans modaux peuvent être trouvés sous ses diverses formes et représentations, par exemple, l'une des suivantes:

• Vues modales plein écran
• Popups
• Pop ups
• Lightboxes

Les écrans modaux et les écrans non modaux sont des vues enfants, c'est-à-dire qu'ils sont subordonnés à une fenêtre d'application principale. Cependant, il existe une différence importante:

«La fenêtre modale crée un mode qui désactive la fenêtre principale, mais la garde visible avec la fenêtre modale comme fenêtre enfant devant elle. Les utilisateurs doivent interagir avec la fenêtre modale avant de pouvoir retourner à l'application parente »- Wikipedia

La plupart des fenêtres modales, en particulier dans les applications de bureau, peuvent être facilement identifiées car elles chevauchent visuellement la fenêtre principale. Cela est vrai pour les fenêtres contextuelles qui disparaissent de la fenêtre principale en arrière-plan, les menus et boîtes de dialogue contextuels, les boîtes lumineuses contextuelles, les alertes, etc.

Cependant, l'utilisation de la fenêtre modale sur les appareils mobiles est limitée, car de nombreux écrans modaux sur les appareils mobiles occupent la totalité de l'écran de l'appareil. Ils ne gardent plus la fenêtre principale visible par l'utilisateur, et donc plus difficile à distinguer des fenêtres non modales :


Exemple IOS: les fenêtres modales sur les appareils mobiles masquent souvent complètement la fenêtre principale de l'application.

La principale différence est la façon dont vous interagissez avec chacune des fenêtres. Alors qu'un écran non modal permet aux utilisateurs de revenir à l'écran parent, l'écran modal oblige les utilisateurs à effectuer une certaine action avant de revenir à la fenêtre principale (comme cliquer sur le bouton "Enregistrer" dans notre exemple) ou à annuler l'action en cours qui a provoqué la fenêtre modale.

L'indicateur visuel le plus frappant pour les fenêtres non modales est la navigation (la barre d'onglets dans notre exemple). Les écrans sans modalité permettent aux utilisateurs de sauter d'avant en arrière au niveau principal de navigation de l'application.

L'écran modal, cependant, oblige les utilisateurs à fermer la fenêtre avant de pouvoir à nouveau utiliser la navigation principale de l'application (les boutons "Enregistrer" ou "Annuler" dans notre exemple).

Pourquoi devriez-vous utiliser la modalité?

Les écrans modaux résolvent un problème simple. Et cela consiste en ce qui suit - les utilisateurs sont facilement distraits, vous devez donc parfois attirer toute leur attention sur un bloc spécifique d'informations ( source ). L'écran modal fait exactement cela - il oblige les gens à se concentrer sur une tâche avant de continuer à travailler dans le thread principal de l'application.

«La modalité crée le focus en empêchant les gens de faire d'autres choses avant de terminer la tâche ou de rejeter la vue appelée dans la fenêtre modale» - Apple

Quand utiliser la modalité?

Maintenant que nous savons à quoi ressemble un écran modal. Comment le comparer avec un écran non modal et à quoi sert-il? Tout d'abord, nous devons nous demander: "Dans quelle situation devons-nous l'utiliser?"

Imaginons que nous créons une startup «brillante et innovante» appelée «Purrrfect». Il s'agit d'une base de données de chatons qui permet aux utilisateurs de télécharger, d'afficher et de commenter les GIF de chatons mignons.



Le flux utilisateur simplifié de notre application peut se présenter comme suit: l'utilisateur ouvre l'application et entre dans l'un des nombreux onglets disponibles (notre base de données de chatons), puis clique sur l'un des chatons (entre dans une vue détaillée d'un chaton) puis clique sur la section des commentaires ( inclus dans la section commentaires du chaton).


Flux d'utilisateurs Purrrfect

De plus, l'utilisateur peut effectuer des actions supplémentaires à chaque étape. Par exemple, il peut ajouter un autre chaton à la base de données sur l'écran de la liste des chatons. Ou il peut modifier les données sur l'écran des détails du chaton.

Vous devez maintenant comprendre lequel de ces écrans est modal et lequel ne l'est pas. La classification dans ce cas est difficile, mais voici ma règle de base personnelle:

Utilisez des écrans modaux pour les processus autonomes et des écrans non modaux pour tout le reste.

Un «processus autonome» est une action spécifique dont le début et la fin sont clairs.

Pendant une période limitée de cette action, il supprime l'utilisateur du flux général de l'utilisateur, lui permettant de se concentrer sur l'action, puis le ramène au point du flux où il a commencé cette action.

Google formule cette règle comme suit:

Utilisez des écrans modaux (boîtes de dialogue) pour afficher «les informations critiques qui nécessitent une tâche utilisateur spécifique, sa solution ou sa confirmation» - Google

Dans le cas de notre application Purrrfect, cela signifie que le flux utilisateur principal (utilisé pour examiner l'application) n'est pas modal. Cependant, les actions spéciales limitées dans le temps, telles que l'ajout de chatons, l'édition de chatons et la rédaction de commentaires, sont modales.



Toutes les actions modales peuvent être annulées ou terminées avec succès avant que l'utilisateur ne revienne au flux principal. Pour cette raison, les écrans modaux utilisent les boutons Annuler et Enregistrer (ou d'autres actions de confirmation similaires) au lieu du bouton Précédent. Si votre bouton «Retour» lance simultanément l'action de sauvegarde sur un écran non modal, vous pouvez envisager de passer à l'écran modal en ajoutant les boutons «Annuler» et «Enregistrer».

Cependant, la déclaration suivante est également vraie: si deux actions différentes, telles que Annuler et Enregistrer, n'ont pas de sens sur votre écran modal (car elles provoqueront la même action), vous pouvez basculer vers une vue non modale. Dans ce cas, la navigation principale (par exemple, la barre d'onglets) doit également rester visible à l'écran.

Revenons à notre application. Une interface possible pour Purrrfect pourrait ressembler à ceci:


Interface utilisateur Purrrfect

Dans le monde réel, la différence entre les écrans modaux et non modaux est souvent moins évidente. Par exemple, une image plein écran est modale dans la plupart des applications, bien qu'il ne s'agisse pas d'un processus ou d'un dialogue. Un écran modal peut également avoir un sens dans d'autres situations particulières lorsque vous devez générer une concentration utilisateur sur un bloc d'informations spécifique. Si l'écran détaillé de notre chaton (au centre) était le point final sans autres actions, telles que la modification ou les commentaires, nous pourrions utiliser la modalité (affichage plein écran). Mais comme il permet aux utilisateurs d'approfondir l'architecture de l'information et d'effectuer diverses actions supplémentaires (afficher les commentaires, modifier, etc.), il n'a plus de point final clair et fait donc partie du flux principal. Il s'agit donc d'une représentation non modale.

Le développeur doit évaluer si l'action est autonome ou fait partie du processus de flux d'application global, et décider de rendre l'écran modal ou non. En cas de doute, rappelez-vous cette citation:

Minimisez l'utilisation de la modalité. En règle générale, les gens préfèrent interagir avec les applications de manière non linéaire. Envisagez de créer un contexte modal uniquement dans les cas où il est important d'attirer l'attention de quelqu'un, lorsqu'une tâche doit être terminée ou arrêtée pour continuer à utiliser l'application ou enregistrer des données importantes. - Apple

Bien sûr, une interface peut très bien fonctionner sans une distinction stricte entre les représentations modales et non modales. Cependant, le concept de modalité est profondément ancré dans les écosystèmes d'interface d'Apple, Google, Microsoft et d'autres sociétés qui ont développé les attentes appropriées pour leurs utilisateurs réguliers.

Comment utiliser la modalité?

À ce jour, j'espère qu'il existe une compréhension commune du moment d'utiliser la modalité. Une seule question demeure: «Comment concevoir une modalité?» Voici une liste de contrôle rapide pour l'utilisation des écrans modaux:

• Toujours afficher le bouton fermer / masquer de la fenêtre modale (ou «annuler», «annuler», «minimiser») dans la barre de navigation supérieure. Lorsque l'utilisateur est perdu, il peut facilement fermer une telle fenêtre et revenir au niveau de l'application d'où la fenêtre modale a été appelée.
• Les boutons d'annulation sur iOS et Android sont le plus souvent situés dans le coin supérieur gauche de la barre de navigation. Android préfère l'icône de fermeture «X», tandis qu'iOS préfère le bouton «Annuler». Cependant, les boutons d'icônes sont également assez courants dans iOS.
• Les boutons de confirmation d'action sur la fenêtre modale dans iOS et Android sont par défaut situés dans la partie supérieure droite du panneau de navigation. Cependant, ce placement peut ne pas être disponible pour l'utilisateur sur les appareils avec une grande diagonale. Par conséquent, un placement flottant fixe de cela en bas de l'écran ou à la fin de la page peut être une bonne solution alternative.

Fenêtres modales à plusieurs étages

Les choses se compliquent dès que la boîte de dialogue modale comprend plusieurs étapes ou écrans enfants. Par défaut, le bouton Continuer s'affiche dans le coin supérieur droit. L'écran de la deuxième étape n'ouvrira pas un nouvel écran modal, mais reste à la place à l'intérieur du premier écran modal et s'affiche comme un écran enfant non modal (car il ne peut pas être annulé) de la superposition modale existante comme première étape de la fenêtre modale.

Lorsque vous placez l'action principale («enregistrer», «appliquer» ou «continuer») en bas de l'écran (comme recommandé précédemment), la zone supérieure droite de la deuxième étape du bloc modal libère toujours de l'espace pour un bouton d'annulation supplémentaire. Bien que le déplacement semble plus logique de gauche à droite, ce placement est toujours meilleur pour une fenêtre modale que l'impossibilité de fermer l'écran modal sur les écrans enfants (précédents).

Conclusion

De nombreux designers développent des produits en fonction de leurs émotions. Et parfois, l'intuition est plus importante que la norme, car c'est souvent l'essence de la créativité. Cependant, il est logique de connaître les normes générales de modalité, de manière à les adapter au bon moment au flux utilisateur principal de l'application.