À quoi sert la barre inférieure dans les fenêtres contextuelles / modales?
Il semble y avoir un modèle courant où le bas d'une fenêtre modale contient une zone qui semble légèrement séparée de son contenu. J'essaie de savoir d'où vient cette habitude et quels principes d'utilisabilité se cachent derrière.
Pourquoi ou quand les utiliseriez-vous? Même quand il n'y a aucun bouton là-dedans? D'où est-ce que sa vient?
Les fenêtres modales (ou popups en général) ont beaucoup de qualités quasi tactiles. Ils semblent sortir du flux régulier d'une application et se trouvent au-dessus de celle-ci. Est-ce que cela a quelque chose à voir avec la couleur de la barre au bas de cette zone? Y a-t-il une sorte d'article réel que nous imitons?
Quelques exemples:
En remarque; accidentellement, tous les exemples sont des réseaux sociaux, mais cela arrive aussi ailleurs.
Un peu plus de détails sur mon cas d'utilisation
Je suis actuellement à un point dans un projet où nous décidons de supprimer ou non cette zone, car la séparation prend une bonne quantité d'espace loin du contenu des modaux. Nous avons quelques cas d'utilisation différents, allant des conditions générales aux formulaires de contact, et certaines fonctionnalités plus complexes sont également à venir.
Certaines des nouvelles fonctionnalités font partie du processus de saisie de certains contenus générés par les utilisateurs, consistant en environ 3 ou 4 étapes, certaines avec des boutons au bas du modal, d'autres sans.
L'idée derrière cette barre remonte à loi de similitude de Gestalt qui dit:
Les éléments d'un assortiment d'objets sont regroupés de façon perceptuelle s'ils sont similaires les uns aux autres.
C'est pourquoi vous verrez deux colonnes en (a) et deux lignes en (b). Ce dernier démontre également que la couleur l'emporte sur la forme (dans cet exemple spécifique au moins).
Dans certaines captures d'écran que vous avez fournies, la similitude est souvent en arrière-plan.
Une autre façon de voir les choses est un exemple de la loi de la région commune, qui dit:
Les objets qui sont enfermés dans une région commune sont susceptibles d'être perçus comme appartenant à un groupe, indépendamment de la similitude ou de la proximité des objets constitutifs.
Comme dans cette illustration:
En séparant les groupes à l'aide de lignes de bordure (généralement plus de bruit) ou de couleurs, vous favorisez le regroupement logique des éléments graphiques (ce qui est dans le groupe et ce qui est à l'extérieur).
Il convient de noter qu'en regroupant des éléments, vous les séparez également des éléments d'un autre groupe.
Exemples
Dans la boîte de dialogue, la barre sépare le contenu de l'interaction. Dans le menu, il est simplement utilisé pour mettre en évidence:
Dans le cas de Google, dans la boîte de dialogue supérieure, la "barre" sépare le contenu réel du type de contenu à partager (je ne vois personne comprendre cela sans une séparation visuelle).
Dans la boîte de dialogue inférieure, la différenciation des régions supérieure et inférieure sépare l'interaction de manipulation des données de l'interaction tâche/progression. Les boutons de la barre fermeront également la boîte de dialogue, contrairement à toutes les autres interactions; si vous me demandez, la case à cocher e-mail ne devrait pas être dans cette barre, mais sous le champ To (bien que je puisse voir la raison pour laquelle elle est là - "juste avant de fermer cette boîte de dialogue, voulez-vous envoyer un e-mail les gens aussi? "):
En fait, la réponse acceptée ne montre pas un raison principale pourquoi elle a été faite de cette façon.
Plus que la perception visuelle, mettre une barre fixe au bas d'une fenêtre contextuelle modale qui a des actions (comme le bouton "OK" dans vos exemples) va laisser l'utilisateur voir les actions possibles même si la section de contenu est trop grande pour tenir dans un petit écran -> Il y a une barre de défilement.
De cette façon, même la plus petite taille d'écran peut voir le bouton d'action sans avoir à faire défiler jusqu'à la fin du contenu.
Sinon, il serait très déroutant si l'utilisateur devait faire défiler le contenu avant même de savoir qu'une action lui était associée.
Cette conception le rend très clair et les principales actions s'inscriront dans la barre inférieure, à tout moment, quelle que soit la partie du contenu que vous lisez.
C'est un moyen assez courant d'appeler les tâches du modal que vous avez ouvert, pour leur apporter plus d'attention. Je ne pense pas qu'il soit nécessaire d'avoir une couleur différente pour la barre si vos boutons de tâches se démarquent.
Pour répondre à votre autre question "D'où cela vient-il?": L'élément réel que nous imitons avec ceci est votre fiche standard coupée sur une note.
La loi Gestalt s'applique dans la vie réelle car nous avons une perception de la profondeur qui nous avertit que la fiche ne fait pas partie de la note ci-dessous. Avec la norme émergente du système d'exploitation plat, cela devient une question plus valable.
Même Apple a mis du temps à déterminer quelles interfaces sont encore suffisamment pertinentes pour imiter. Certes, le téléphone à cadran a influencé la première interface iPod, et le calendrier de type agenda était parmi les derniers Objets iOS à mettre à jour.
Une chose que ma longue expérience en UX m'a appris: tout est à débattre.