Pourquoi les pages Web défilent-elles verticalement plutôt qu'horizontalement?
Il est courant que les pages Web défilent de haut en bas au lieu de droite à gauche, mais tous les documents imprimés qui ne sont pas écrits sur des rouleaux de papier hygiénique "défilent" horizontalement. Pourquoi le web a-t-il rompu cette ancienne convention?
Le principal avantage semble être l'élimination des sauts verticaux qui se produisent lorsque nous "tournons la page" car nous devons passer d'une colonne verticale à la suivante. C'est probablement plus facile à nos yeux, et cela élimine les craintes que ces sauts puissent se produire à un endroit inopportun dans le contenu (rend les choses plus uniformes). En outre, les livres défilent probablement horizontalement, car il est plus facile de les maintenir ouverts lorsque les pages se rencontrent en ligne verticale au centre plutôt qu'horizontal, de sorte que l'emporte probablement sur toute autre préoccupation d'interface utilisateur dans l'évolution des livres.
Y a-t-il d'autres raisons pour lesquelles les pages Web et les traitements de texte défilent presque toujours verticalement?
Je crois que cela a été fait simplement parce que nous lisons de haut en bas. Le choix a été fait assez tôt et a probablement été fortement influencé par les limitations techniques.
Étant donné que le texte est codé de façon linéaire, la plupart des éditeurs de texte (pas nécessairement les traitements de texte) avaient une limite dans le nombre de colonnes et de lignes qu'ils pouvaient afficher. Si vous remontez loin, c'était généralement le long de 80 colonnes et de 25 à 40 lignes (80 x 25 en VGA). Lorsque l'écran s'est rempli, il était courant de faire défiler une page ou une ligne à la fois. Si vous faites défiler une page entière, sans conserver aucune des lignes précédentes, cela reviendrait à lire un livre. Cependant, si vous faites moins de défilement, il n'y a pas de place pour afficher le texte défilant horizontalement. Il était donc naturel de faire défiler verticalement. Il est également plus facile de restreindre le défilement et le rendu dans une seule direction par programme, ce qui peut avoir affecté les applications graphiques affichant le texte dès le début.
Je crois, mais je ne peux pas dire avec certitude, que cela s'est répercuté sur des écrans plus complexes car les programmeurs étaient habitués aux anciens outils de défilement vertical des lignes de commande. Cela a à son tour affecté ce à quoi les gens sont habitués aujourd'hui. Beaucoup de premiers logiciels n'étaient pas basés sur des études d'expérience utilisateur, mais basés sur ce que les programmeurs avaient décidé eux-mêmes. Souvent même sans l'aide de designers.
Notez que les sites Web modernes violent parfois cette convention et utilisent le défilement horizontal des pages, en particulier les sites HTML5 qui utilisent des bibliothèques graphiques comme jQuery.
Si quelqu'un d'autre connaît des études sur l'expérience de la lecture de texte à défilement vertical par rapport à défilement horizontal, j'aimerais bien en entendre parler.
Selon les directives d'interaction avec l'expérience utilisateur de Microsoft:
"Les gens lisent dans un ordre de gauche à droite, de haut en bas (dans les cultures occidentales)
Il existe deux modes de lecture: la lecture immersive et la numérisation. Le but de la lecture immersive est la compréhension. ... le but de la numérisation est de localiser des choses. ""Les utilisateurs ont tendance à ignorer de gros blocs de texte et de volets de navigation lors de la numérisation. Toutes choses étant égales par ailleurs, les utilisateurs regardent d'abord dans le coin supérieur gauche d'une fenêtre, parcourent la page et terminent leur numérisation dans le coin inférieur droit. Ils ont tendance à ignorer le coin inférieur gauche. "
Je n'y ai pas cru avant de l'avoir consciemment essayé par moi-même. Effectivement, 10/10 fois mes yeux ont naturellement balayé de gauche à droite tout en descendant dans le coin inférieur droit. Si les pages défilaient horizontalement, 45% du contenu d'une page serait manqué.
Vaut la peine d'être lu: http://msdn.Microsoft.com/en-us/library/windows/desktop/aa511279.aspx#placement
Lors de la consommation de texte, le défilement vers le bas permet de révéler le texte plus progressivement qu'un défilement horizontal. Si vous voulez juste voir une autre ligne, vous n'avez pas besoin de retourner la page entière. Comme nous lisons de haut en bas, comme le mentionne l'un des commentateurs, le défilement vertical correspond mieux à la façon dont nous "consommons les lignes". Pour les langues dans lesquelles les utilisateurs lisent le défilement horizontal de haut en bas pourrait avoir plus de sens.
Les humains lisent plus d'un mot à la fois, nous percevons les mots et les lettres dans leur contexte.
Pourquoi vous pouvez raed tihs.
Le défilement vertical présente un ensemble complet de contexte (une nouvelle ligne de texte), le défilement horizontal ne présente que des caractères ou des mots à la fois sans suffisamment de contexte pour comprendre.
Il ne s'agit pas de conventions établies, ces conventions existent pour cette même raison. Si le texte imprimé traversait les pages, il serait difficile à comprendre. Nos cerveaux comprennent mieux le texte avec le contexte, donc le faire organiser pour être plus facile à comprendre est l'objectif primordial.
Je veux dire que c'est parce que les premières implémentations du défilement favorisaient le défilement vertical. Une fois qu'un précédent est établi, il a tendance à dominer.
Selon cet info-graphique, les barres de défilement existent depuis un certain temps. J'ai ensuite trouvé quelques plus d'informations sur l'Appla Lisa:
L'équipe Lisa a décidé d'optimiser leur affichage pour une résolution horizontale, afin de pouvoir afficher 80 colonnes de texte dans une police attrayante. La résolution verticale n'était pas aussi importante, car le défilement vertical fonctionne beaucoup mieux pour le texte que le défilement horizontal. Les concepteurs ont décidé de doter Lisa d'une résolution horizontale deux fois supérieure à la verticale, en utilisant un écran de 720 x 360 pixels, avec des pixels deux fois plus hauts que larges. C'était génial pour les applications orientées texte comme le traitement de texte, mais cela rendait les choses quelque peu gênantes pour les applications plus graphiques.
Je suppose qu'il y a deux raisons:
- Nous lisons de haut en bas et de larges colonnes rendent la lecture plus difficile, car à mi-chemin, vous vous gratterez le nez et oublierez où se trouvait votre ligne. Ainsi, avec un défilement horizontal, vous auriez besoin de deux colonnes par page, de sorte qu'il est également plus facile de lire une phrase que vous lisez avant de faire défiler horizontalement.
Si vous n'aviez qu'une seule colonne, vous perdriez également beaucoup de temps lorsque vous faites défiler horizontalement, car vous devrez faire défiler jusqu'à ce que la nouvelle colonne s'adapte à l'écran, avant de pouvoir lire le nouveau contenu, tandis que lorsque vous faites défiler verticalement, vous peut commencer à lire le nouveau contenu tout en faisant défiler.
Je suppose que ce sont les raisons pour lesquelles le défilement vertical est devenu la norme dans les années 70, 80 et 90.
Après cela, il y avait aussi la raison 2.
- Essayez d'imaginer une molette de défilement qui défile horizontalement ...
Mon doigt du milieu commence à me faire mal à cette pensée.
Oui, le mouvement de défilement vertical avec une molette est beaucoup plus facile à faire qu'un mouvement horizontal - les souris avec deux molettes de défilement, une verticale et une horizontale, ont échoué sur le marché, les souris qui ont la capacité d'incliner la molette de défilement sur les côtés pour le défilement horizontal n'a pas vraiment été un succès, car ceux-ci sont nerveux, il y a de fortes chances que vous incliniez la roue lorsque vous vouliez simplement faire défiler verticalement.
Avec les souris actuelles, il n'y a aucun moyen que le défilement horizontal devienne plus courant, car c'est une douleur dans le ... ^^
Avec les écrans tactiles/tablettes, le défilement horizontal est beaucoup plus facile, mais les problèmes mentionnés en 1. existent toujours sur ceux-ci.
Les systèmes d'écriture de gauche à droite de haut en bas direction d'écriture sont plus facilement facilités avec du papier réel ou virtuel de largeur limitée et (pratiquement) de hauteur illimitée. Ce modèle à largeur limitée/hauteur illimitée (ou rouleau de papier vertical ), appliqué aux écrans d'ordinateur ou à des rouleaux de papier réel, est à la fois plus facile à mettre en œuvre et plus facile à utiliser que la plupart des autres modèles (une séquence de pages de taille fixe , telle que prise en charge par de nombreux processeurs de documents, est plus complexe et plus difficile à utiliser que un modèle de rouleau de papier vertical , alors que le texte d'une longueur de ligne illimitée est difficile à lire et à modifier).
Ainsi, le Web, qui était à l'origine composé de documents texte balisés, a suivi les conventions établies de présentation de documents texte sur un écran d'ordinateur. Bien sûr, avec la technologie d'aujourd'hui, il n'est pas difficile d'implémenter des modèles paginés qui défilent horizontalement ou verticalement, ou qui ont un autre mécanisme de transition de page, mais ils ne sont pas aussi simples à utiliser qu'un bon vieux rouleau vertical de systèmes de style papier .
Parce que c'est plus efficace.
Si vous devez faire défiler horizontalement, vous devez faire défiler pour chaque ligne de texte jusqu'à la fin, revenir en arrière pour le début de la ligne suivante, faire défiler pour la fin de cette ligne, revenir en arrière pour le début de la ligne suivante, etc.
Si vous faites défiler verticalement, vous pouvez lire le texte complet à l'écran, puis faire défiler plusieurs lignes (peut-être l'écran complet) et lire le nouveau texte.
En supposant que vous concevez exclusivement pour une langue qui effectue un suivi horizontal:
Votre saut de ligne sur un texte enveloppé par Word doit être complètement arbitraire
Si vous avez un bloc de texte et que vous êtes prêt à faire défiler horizontalement, quand devriez-vous décider que cela suffit et ajouter un saut de ligne? Même si vous essayez de faire des sauts de ligne intelligents, vous devrez d'abord connaître le contenu de la page afin de pouvoir la rendre, ce qui signifierait une expérience utilisateur en constante évolution et éliminerait la possibilité de chargement dynamique. contenu.
Vous pouvez éliminer le problème de rupture de ligne en créant des colonnes à largeur fixe, mais c'est mauvais pour les documents riches en médias
En fait, j'aime vraiment l'idée de lire des colonnes et de faire défiler horizontalement car cela simulerait une expérience de lecture semblable à un livre, mais ce n'est pas idéal pour les documents qui contiennent des médias, car vous devrez prendre des décisions de mise en forme qui sont limitées par les dimensions de les média. Cela signifie que votre site pourrait être parfait sur la première conception, mais s'il devait être mis à jour, il y aurait des contraintes de médias qui exigeraient une refonte ou (plus probablement) les médias ne seraient tout simplement jamais autorisés à être soumis. En outre, il ne pouvait accepter les soumissions d'utilisateurs sans contraintes inutiles.
Je suggérerais de regarder un peu d'histoire, de typographie et de HCI.
Historiquement, les parchemins remontent à l'Égypte ancienne et étaient utilisés pour la tenue des registres, puis par les Israélites (première utilisation de parchemins pour l'enregistrement de la littérature) et ont été utilisés jusqu'au 1er siècle après JC, lorsque le codex ou livre relié a été inventé. Il est intéressant de noter que ces parchemins étaient au format horizontal, pas vertical (ils se déroulaient d'un côté et s'enroulaient de l'autre) et étaient divisés en colonnes de texte un peu comme les pages de un livre.
À l'époque médiévale et au début de la modernité, des documents plus courts appelés rouleaux étaient principalement utilisés à des fins administratives telles que la comptabilité, les accords juridiques, les inventaires, etc. Il est important de noter que contrairement aux rouleaux, les rouleaux sont écrits dans un vertical format (comme une page Web à défilement vertical) et sont souvent plus larges. [wikipedia 1][wikipedia 2]
Les rouleaux et rouleaux sont des éléments linéaires et séquentiels. Vous commencez au début et faites défiler littéralement le contenu entier jusqu'à ce que vous arriviez à ce que vous voulez lire. Inversement, les livres (ou codex) peuvent être parcourus, plongés, retournés d'avant en arrière et généralement utilisés de manière beaucoup moins linéaire. Cela semblerait être beaucoup plus accessible et convivial.
D'un point de vue typographique, il existe un certain nombre de considérations, principalement liées à la lisibilité du texte. L'élément principal à souligner ici est la longueur de ligne. La longueur de ligne optimale est considérée comme étant de 50 à 75 caractères, espaces compris. Trop court et vous cassez le rythme des lecteurs et ajoutez du stress à l'expérience de lecture. Trop long et il est difficile de passer de la fin d'une ligne à la ligne suivante correcte. [ “Typographie” - E. Ruder] Je ne connais aucune recommandation concernant le nombre de lignes par page.
Ces considérations d'utilisabilité suivent bien sûr jusqu'à HCI.
- Peu importe la taille de votre écran, vous ne devez toujours pas dépasser la longueur de ligne optimale.
- Vous devriez être en mesure de vous plonger dans le contenu et de faire des allers-retours facilement. Ceci est particulièrement pertinent pour les pages Web à défilement très long et c'est la façon dont la plupart des gens utilisent le Web.
Cependant, avec le défilement des pages, d'autres considérations apparaissent naturellement:
- Il est (ou devrait être) assez facile d'accéder à n'importe quelle partie de la page que vous souhaitez, soit par la navigation, comme un index de page (comme une page de FAQ), par la recherche ou par d'autres moyens.
- Le défilement vertical vous permet de faire défiler n'importe quel montant à la fois, que ce soit 1 ligne ou 10 pages (ou écrans) alors que défilement horizontal vous limite à 1 page à la fois .
- Comment faire défiler horizontalement des colonnes de texte? Autorisez-vous les gens à s'arrêter avec la moitié de la colonne hors de l'écran? Sinon, le défilement horizontal devient moins un défilement qu'un basculement de page.
- La numérisation de beaucoup de texte est beaucoup plus facile lors du défilement vertical plutôt que horizontalement car il n'y a pas la rupture de continuité que produisent les pages séparées.