Pourquoi les barres de progression sont-elles horizontales?
Question déclenchée par cette discussion .
Pourquoi les barres de progression sont-elles presque toujours présentées comme des lignes horizontales qui augmentent de gauche à droite? Est-ce la meilleure méthode pour indiquer les progrès (et pourquoi)? Et existe-t-il des exemples significatifs de renversement de cette tendance?
Parce que la plupart des gens vivant dans le monde occidental lisent de gauche à droite, et c'est ainsi qu'ils imaginent comment le temps passe.
C'est une bonne question de savoir si de haut en bas profiterait aux clients japonais ou de droite à gauche certaines cultures arabes, d'un autre côté, les influences culturelles des médias occidentaux et des logiciels occidentaux changent cela.
On peut facilement supposer que, sur la base de leur écriture, ils s'attendent à ce que cela se produise de droite à gauche ou de haut en bas, mais puisque leur monde est propagé par les iPhones et Androids et les fenêtres et Facebook et quoi que ce soit, ils 'y suis habitué quand il s'agit d'ordinateurs, cela se produit dans le sens inverse.
Quoi qu'il en soit, il existe des cultures où le temps passe traditionnellement de droite à gauche. L'anglais n'en fait pas partie, dépend de votre public.
Une raison très possible à cela est l'adaptation et l'adéquation avec le contexte dans lequel l'indicateur de progrès est affiché.
Pensez-y, un indicateur de progression est généralement affiché avec un texte descriptif qui explique ce qui est en cours de traitement. Et que savons-nous du texte ... eh bien, pour une chose, il est écrit horizontalement de gauche à droite (je sais que le chinois traditionnel, le japonais et l'arabe ne font pas partie de cela, mais je parle une langue d'interface utilisateur conventionnelle).
Il semble très approprié d'afficher la barre de progression de manière à ce qu'elle soit facilement couplée avec son texte environnant.
Imaginez à quel point ces vues de progression seraient déséquilibrées si la barre de progression était présentée verticalement.
Je vais faire un exemple, juste pour les coups de pied!
Il pourrait également y avoir une réponse liée au matériel. Avant l'interface graphique, il y avait l'interface DOS Prompt/terminal. Les barres de progression ici auraient été rendues avec des caractères, par exemple points ou carrés remplis. Lors du codage, il est beaucoup plus facile d'afficher la progression en grandissant de la gauche de l'écran vers la droite, car vous pouvez calculer l'emplacement du caractère suivant, très probablement en incrémentant l'adresse de la mémoire vidéo pour afficher le prochain `` caractère de progression '' .
La mémoire vidéo commence en haut à gauche de l'écran (disons qu'il s'agit de l'adresse zéro) et continue jusqu'à ((screen_width * screen_height) - 1), il est donc beaucoup plus rapide (à la fois dans les lignes de code du programmeur et dans les cycles du processeur) de se dessiner mémoire vidéo une ligne horizontale qu'une verticale. Cela permettrait également d'économiser un défilement vertical excessif afin que l'utilisateur puisse toujours voir les commandes précédentes qu'il avait tapées.
Il existe depuis les "graphiques" textuels et c'est la tradition à ce stade. Sur la ligne de commande, de gauche à droite est le seul chemin à parcourir, donc les premières barres de progression devaient fonctionner de cette façon. En HTML et JavaScript, les tableaux ont une largeur, mais pas une hauteur que vous pouvez varier en temps réel, donc la technologie a dicté à nouveau les barres horizontales.
Je n'achète pas le temps qui s'écoule de gauche à droite. Une horloge traditionnelle tourne. Un sablier ou une horloge à eau se remplit par le bas. Au contraire, le précédent historique se remplirait de bas en haut.
Dans tous les cas, une barre de progression qui ne faisait rien mais se remplissait de gauche à droite semblerait tout simplement fausse à ce stade. À moins que vous ne vouliez créer une expérience surréaliste et désorientante pour vos utilisateurs, allez de gauche à droite.
Le placement en est un. Si vous avez une ligne de texte, vous pouvez la souligner avec une barre de progression. Il est logique de le faire aller dans le même sens que le texte écrit (dans la culture occidentale)
Des barres verticales existent, il y en a une dans ma voiture indiquant le carburant. Et, fait intéressant, je ne pense pas que vous en trouverez un où 25 pièces complètes s'affichent comme 25 pièces du haut remplies. Nous supposons naturellement que le "remplissage" gravitera vers le bas, comme de l'eau dans un verre.
Des barres circulaires existent, fonctionnant invariablement dans le sens des aiguilles d'une montre.
La clé semble être le fascimile culturel et la référence.
Il y a des informations intéressantes disponibles auprès de Microsoft sur ce qu'ils ont découvert en faisant des choses comme l'animation de document volant sur copie. Je semble me souvenir d'avoir lu quelque part que la raison pour laquelle les barres de progression vertes ont une impulsion lumineuse le long est pour rassurer l'utilisateur qu'il y a de l'activité ET que cela va dans la bonne direction.
J'expérimente parfois certains de ces indices acceptés et c'est drôle la frustration immédiate que vous pouvez générer.
Le modèle mental des choses qui augmentent ou progressent dans le temps semble généralement être quelque chose qui se déplace de gauche à droite ou de bas en haut. En termes de interface utilisateur du lecteur multimédia discutée dans l'autre question , la barre horizontale semble être le meilleur moyen d'indiquer une position dans une plage finie tout en permettant à un utilisateur de sauter en avant ou en arrière jusqu'à un point à l'intérieur cette gamme. Je suppose que cela pourrait fonctionner verticalement, mais cela serait gênant. Une alternative comme une boucle fermée pourrait fonctionner uniquement pour indiquer des progrès, mais je pense que ce serait gênant dans les situations où vous devez interagir avec.
La barre de progression est un moyen "vu à distance" de communiquer l'état d'une tâche.
Il permet aux utilisateurs de quitter la portée étroite du moniteur et de voir visuellement la progression d'une tâche sans avoir à lire de petits textes.
Les yeux humains peuvent avoir une confusion optique lors du traitement des lignes verticales. C'est l'une des raisons pour lesquelles la plupart des langues sont écrites horizontalement. À l'exception des langues asiatiques comme au Japon, mais même ces langues peuvent être écrites horizontalement.
L'autre problème à résoudre est le rapport d'aspect des moniteurs. Ils ne sont pas carrés donc le cerveau humain peut être facilement confondu par des lignes qui divisent cet espace. Le cerveau humain voudra traiter les lignes verticales sur un moniteur pour créer des zones carrées d'intérêt. Ceci est connu sous le nom de Rabatment d'un rectangle .
La plupart des interfaces utilisateur se composent de nombreuses lignes horizontales et l'introduction d'une barre de progression verticale causera probablement plus de confusion à l'utilisateur. Vous pouvez facilement créer Illusions facultatives par inadvertance simplement par la disposition des commandes de l'interface utilisateur.
Pour montrer avec quelle facilité les lignes horizontales et verticales ne se mélangent pas bien. Découvrez l'astuce Illusion verticale-horizontale , où le cerveau humain ne voit pas correctement la longueur des lignes.
Donc, pour répondre à la question "Pourquoi les barres de progression sont-elles horizontales", c'est parce qu'elles doivent l'être. Sinon, ce serait déroutant et distrayant pour l'utilisateur.
Les alternatives acceptables aux barres de progression horizontales sont;
- Forme de cercle où la barre suit la circonférence.
- Grand texte numérique indiquant la progression terminée.
- Grandes icônes visuelles qui représentent l'état (en cours, terminé) d'une tâche.
- Animation 2D représentant le travail effectué pour la tâche.
Je pense que les autres réponses ont suffisamment expliqué pourquoi les barres de progression circulent généralement horizontalement, mais j'ai pensé publier quelques contre-exemples intéressants:
Dans certains logiciels de bureau d'Apple (par exemple Xcode et les anciennes versions de Mail), la progression est affichée à travers de minuscules graphiques circulaires:
Image de randomtruth sur le Apple Forum des communautés d'assistance . Désolé pour la mauvaise qualité.
Si vous souhaitez utiliser ce contrôle dans vos propres applications Cocoa, il y a ne implémentation open source .
Apple a également utilisé une technique similaire dans iTunes (sur le Web , le bureau et iOS) lors de la lecture d'un aperçu:
Image de iLounge
Image de Daring Fireball
Une fois que vous avez ouvert la porte pour regarder les techniques Web, il y a quelques autres circulaires intéressantes:
Image de Percentage Loader , un plugin jQuery à cet effet
Image de Circular Progress , un autre plugin jQuery à cet effet
Enfin, il y a le compteur de progression de style "jauge" (même si je dirais probablement que ce n'est pas vraiment un progrès mètre; vous ne travaillez pas nécessairement d'un côté à l'autre comme vous devriez vous attendre à ce qu'un indicateur de progression le fasse):
Image tirée de documentation des composants Oracle Application Development Framework
Voici un outil de validation qui utilise des barres de progression horizontales et verticales. La barre de progression verticale est toujours visible tandis que le panneau de commande contenant la barre horizontale peut être réduit sur le bord gauche.
Je pense que c'est vraiment à cause de deux choses:
- Un écran immobilier doit être pris en considération. Une barre de progression horizontale est facile à voir et n'occupe pas beaucoup d'espace vertical, donc plus d'informations telles que les instructions, le temps d'achèvement estimé et ce que la machine fait réellement peuvent tenir proprement au-dessus ou en dessous de la barre.
- L'œil humain a tendance à regarder de gauche à droite, de haut en bas. (Voici n article le mentionner.)
En considérant (2), les barres de progression diagonales peuvent avoir un certain sens. Mais ils pourraient occuper beaucoup d'espace d'écran.
Pourquoi pas des barres de progression verticales? Microsoft dit , "N'utilisez pas de barres de progression verticales. Les barres de progression horizontales ont une cartographie plus naturelle et un meilleur flux." La capture d'écran de cet article montrant Install_Messenger.exe illustre cela. Il contient "__ Mo de __ Mo terminé" juste en dessous de l'indicateur (horizontal) de la barre de progression indiquant la distance de l'opération. Voici n article correspondant d'Apple , qui ne traite pas directement des barres de progression verticales mais n'en a que des horizontales dans ses exemples.