L'ordre visuel du contrôle de liste et du contenu, qui devrait être indiqué ci-dessus?
Dans de nombreux logiciels, il existe une liste et un panneau d'affichage. Un utilisateur peut sélectionner différents éléments dans une liste pour voir différents contenus dans la vue. Par exemple, lorsque vous ouvrez Gmail, sur la gauche, vous voyez une liste d'e-mails, et en sélectionnant l'un d'eux, vous voyez les détails de cet e-mail. Lorsque ces deux vues sont organisées horizontalement, il n'y a généralement aucune confusion dans la façon de les concevoir. Nous mettons la liste à gauche et le contenu à droite. Mais le problème vient lorsque nous le concevons verticalement, qui devrait être affiché en haut?
1. Contenu en haut et liste en bas.
Il existe plusieurs exemples où vous pouvez voir le contenu affiché en haut.
(1) Finder Mac OS
.
Ici, vous pouvez voir différentes images en haut en sélectionnant différents éléments en bas.
(2) Visual Studio
Ici, vous pouvez afficher différentes erreurs dans le code en sélectionnant différentes erreurs dans la liste des erreurs lors du débogage de votre code.
2. Liste en haut et contenu en bas. Il existe également des exemples lorsque vous affichez la liste en haut tandis que le contenu en bas.
Dans l'exemple ci-dessus, vous voyez les détails en sélectionnant différents éléments dans une liste supérieure. Des exemples similaires existent également dans certaines applications de messagerie, où les détails d'un e-mail sont affichés en bas.
Voici donc ma question. Y a-t-il des règles/théories derrière cela? Au début, je pensais que les habitudes de lecture étaient importantes, car la plupart des gens lisaient de gauche à droite et de haut en bas. Il semble que la "liste au sommet" soit toujours logique. Mais comment expliquez-vous les contre-exemples? Quand faut-il concevoir le "contenu" en haut, et le contrôle de manipulation en bas? Quand devrions-nous le faire dans le sens inverse?
Pour démarrer le bal, à mon avis
si c'est un "aperçu", il va en dessous
tandis que
s'il s'agit du "contenu ou travail réel", il va au-dessus
Pour reformuler, si vous "regardez une liste", si une "liste est la chose", et c'est juste un aperçu de l'élément que vous avez mis en surbrillance lorsque vous faites défiler cette liste - cela va en bas. Alors que si c'est le "contenu ou le travail réel", si le "point est de l'afficher (| travailler dessus, etc.)" il monte en haut.
Pour moi, cela (a) décrit la plupart des cas auxquels je peux penser et (b) est ce que je pense de la façon dont cela devrait être dans un monde idéal.
vous travaillez réellement sur quelque chose (VisualStudio ou AffinityDeisgner ou Unity) - le panneau principal est le panneau principal en haut; les autres choses que vous modifiez sont ci-dessous
vous regardez une liste de choses (boîte de réception MailApp), en faisant défiler la liste en surbrillance, vous voyez un aperçu ci-dessous
note sur l'affichage du dossier "galerie" OSX . J'apprécie bien sûr que ce soit un "dossier", vous parcourez une liste d'images pour en choisir une. Cependant, ce mode d'affichage d'un dossier, qui Apple introduit, est plus un "afficheur de photos". C'est une sorte d'idée délicate qu'ils avaient: "hé, au lieu d'avoir besoin d'une visualisation complète de la photo application de galerie comme Aperçu, nous avons ingénieusement mis cela, comme l'un des modes d'affichage des dossiers - appuyez simplement sur la commande-4 ". Donc J'interprète ce mode dossier comme en fait une "application de visualisation de photos". Notez que de la même manière sur n'importe quelle application de visualisation de photos ou de lecture de films autonome - en fait, tout ce qui a une zone de travail et un "scrubber" de une sorte en bas - bien sûr, "l'image que vous regardez" est la zone principale et en effet supérieure: par exemple, dans iOS-Photos, il y a les minuscules icônes de défilement en bas pour sélectionner laquelle. Je l'interprète comme une "application de visualisation de photos entière" plutôt que comme une "liste de visualisation de choses". Notez en effet que si vous cliquez sur la commande-3, elle se convertit en une "liste conventionnelle" est l'affichage principal "puis en un" élément mineur - aperç "(bien que sur le r dans ce cas).
Une autre réflexion intéressante: maintenant que nous sommes tous des appareils à doigt toute la journée. Nous semblons passer au mode "B" par défaut: c'est "toujours" du contenu, mettez-le en haut, il suffit d'avoir un scrubber en bas pour feuilleter. Vous voyez très rarement le mode "A" de nos jours, je pense. Il est révolu le temps de regarder tranquillement une liste.
(En effet, en tant que personne très âgée, lorsque j'utilise osx MailApp ("sur le bureau - j'ai toujours un ordinateur portable !!") Je lutte contre les préférences et je lui fais afficher la boîte de réception dans une ancienne liste ordinaire (sans aperçu ci-dessous, merci beaucoup !). Donc, c'est ce qui se passe quand vous êtes vieux et boiteux. Les enfants d'aujourd'hui verraient probablement leur e-mail exactement comme iOS-Photos .. juste une galerie/panneaux flicky comme vos preuves A ci-dessus, avec un "scrubber" au bas.)
Comme pour beaucoup de choses en UX, la réponse à une question aussi large est "ça dépend".
Les aperçus et autres formes d'affichage de contenu sont toujours contextuels. La relation entre la vue de contenu et la liste dépend du flux de travail pour le système. Pour ne donner que quelques exemples, les utilisateurs peuvent se préoccuper principalement de trouver quelque chose dans la liste, puis de le visualiser ou ils peuvent se concentrer sur la recherche de quelque chose qui semble correct, puis la découverte de sa place dans la liste - chaque scénario donne un contexte différent à la relation entre la liste et la vue du contenu.
Si vous concevez un système et avez un cas d'utilisation particulier à l'esprit, il vaut probablement la peine de trouver certains de vos utilisateurs et de les tester avec quelques wireframes dans différentes permutations. (L'utilisabilité Hub est également bon pour cela).
Pour donner un autre coup de pied au ballon: Les règles pour le dessus ou le dessous doivent être les mêmes que pour la gauche ou la droite.
Il existe différents types de "contenu". Dans vos exemples:
- Dans le Finder de Mac OS (vue d'image), le "contenu" est en fait également une liste (horizontale) d'exactement les mêmes éléments que dans la liste de la section inférieure.
- Dans Visual Studio, le "contenu" est le code entier; tous les éléments de la liste sont des "enfants" du "contenu".
- Dans l'exemple Cartes, le "contenu" contient (beaucoup) de détails sur seulement 1 des éléments de la liste.
Ma pensée serait donc de m'en tenir aux principes généraux:
- Si le contenu contient les détails d'un seul élément de la liste, il serait judicieux de placer la liste en premier = gauche ou haut
- Si la liste est un descendant du contenu, alors elle pourrait aller à droite ou en dessous
Donc:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
