Pourquoi de nombreux sites laissent-ils la moitié de chaque page Web vide?
Pourquoi de nombreux sites laissent-ils la moitié de chaque page Web vide? N'est-ce pas un gaspillage d'espace d'écran?
Un bel exemple de cela est les sites du réseau Stack Exchange:
Comme vous pouvez le voir, il reste une tonne d'espace blanc des deux côtés de chaque page.
L'espace blanc rend-il les sites compatibles avec certaines tailles d'écran?
Le fait de quitter l'espace aide-t-il à rendre les sites adaptés aux mobiles?
L'espace rend-il les pages moins encombrées et donc plus utilisables?
Ou, n'y a-t-il aucune bonne raison et les gens le font simplement parce qu'ils ne réalisent pas qu'ils ne devraient pas?
J'ai travaillé sur des sites qui utilisent les deux conceptions et je n'ai pas eu de plaintes de la part des utilisateurs.
Exemples de sites disposant d'espace: débordement de pile , GitHub , Facebook
Exemples de sites sans espace: Amazon , Chase , Gmail
Il existe de nombreuses raisons, mais les principales sont l'encombrement visuel et la hiérarchie des informations d'un côté, et cohérence structurelle du côté de l'interface utilisateur.
Encombrement visuel
L'encombrement est un phénomène important dans nos vies et une considération importante dans la conception des interfaces utilisateur et des visualisations d'informations. De nombreux systèmes de visualisation existants sont conçus pour réduire l'encombrement en filtrant les objets ou les informations que l'utilisateur voit, ou en utilisant des techniques de grossissement non linéaires afin que les objets au centre de l'écran bénéficient d'une plus grande zone d'affichage. Les conseils pour la conception de pages Web, de cartes et d'autres visualisations se concentrent souvent sur les techniques d'affichage d'une grande quantité d'informations tout en réduisant l'encombrement au minimum grâce à des choix judicieux de représentation et d'organisation de ces informations. [Rosenholtz et al., 2005]
En termes simples: l'idée est d'éviter la surcharge visuelle et donc cognitive en présentant les éléments de manière logique. Cette voie logique est liée au point suivant:
Hiérarchie de l'information
Les informations ont une hiérarchie et c'est la partie la plus importante de ce que vous voulez montrer. À savoir, la différence entre l'échec et le succès.
La hiérarchie des informations est un principe de conception universel qui devrait être utilisé dans toutes les formes de conception, y compris la conception de l'apprentissage en ligne. Par définition, c'est l'agencement d'éléments ou de contenu sur une page/un écran de telle manière qu'il révèle un ordre d'importance (ascendant ou descendant).
Jetez un œil au modèle encadré ci-dessous:
Comme vous pouvez le constater, il est assez clair que la hiérarchie est structurée et compréhensible par la plupart des gens. Veuillez noter qu'en mode réactif, cette hiérarchie empilera tous les éléments comme prévu, donc l'avantage mobile est très clair
Maintenant, la même disposition, transformée en pleine largeur:
(essayez de le voir en taille réelle)
Maintenant, la hiérarchie 1 a disparu et l'œil de l'utilisateur va probablement scanner en premier 2 et 3. Et puis 6 et 7! Fondamentalement, notre élément le plus important est en dessous de la hiérarchie. Nous pouvons le changer pour que l'ordre ressemble à 3-1-2-4. Ensuite, nous aurons également des problèmes lors de l'empilement sur des modèles réactifs (non seulement les appareils, même le redimensionnement de l'écran), car 3 sera le premier élément, donc encore une fois, nous créons des problèmes plutôt que de résoudre des problèmes.
Comme vous pouvez le voir, les problèmes sont assez importants, et ce ne sont que les principaux.
Mais nous avons également le côté interface utilisateur ou présentation:
Cohérence structurelle
Disons que vous avez une page pleine largeur. Quoi qu'il en soit, ce sera 100%. 100% pour la personne sur un petit ordinateur portable et 100% sur un moniteur 24 pouces. Il est facile de voir que la personne sur un ordinateur portable verra des informations condensées, avec une certaine structure qui montrera les éléments d'une manière très spécifique avec une quantité très spécifique d'informations à l'écran.
Maintenant, l'utilisateur de ce moniteur 24 pouces verra quelque chose d'extrêmement différent. Tout d'abord, il y a de fortes chances que l'utilisateur se sente comme dans un match de tennis, la tête allant d'un côté à l'autre. La saturation visuelle et le frottement seront incroyablement élevés , bien sûr. Mais l'affichage vertical des informations sera également différent. Voir ci-dessous:
1366x768 
Maintenant 1920x1200 (moniteur 24 pouces) 
Quelle différence, hein? Les images ont été agrandies (et cela pourrait être un autre problème!) et le texte a conservé sa taille, doublant presque la quantité de texte. Maintenant, réfléchissez à cela multiplié par la quantité incroyable de tailles d'écran qui existent, et celles qui n'existent toujours pas et qui apparaîtront peut-être dans les prochains mois
En d'autres termes: au lieu de conserver le contrôle, nous l'abandonnons en faveur de l'aléatoire .
Bien sûr, nous parlons de règles générales, pas de cas extrêmement spécifiques, il y aura donc des exceptions ici et là
Une dernière note:
Je tiens à préciser que d'après vos exemples en pleine largeur, seul Amazon l'utilise, et cela leur a pris des années de tests (il y avait un article très intéressant à ce sujet que je ne peux pas trouver en ce moment) avec d'innombrables tests A/B. Mais ici, la hiérarchie fonctionne: ils vendent des produits où ils ne peuvent pas connaître la hiérarchie à l'avance, car la plupart des produits auront une approximation similaire poids, vous ferez donc de votre mieux pour correspondre à l'utilisateur chercher.
Quant à Google, ils utilisent un modèle encadré et alignent le contenu à gauche avec un petit espace blanc à gauche. Les pages principales de LinkedIn sont encadrées et centrées, bien qu'il soit vrai que la page de destination pour les utilisateurs non connectés possède un élément pleine largeur. Mais si vous y prêtez attention, tout le reste est encadré, même sur cette page
La longueur de ligne optimale pour votre corps de texte est considérée comme étant de 50 à 60 caractères par ligne, espaces compris ("Typographie", E. Ruder). D'autres sources suggèrent qu'un maximum de 75 caractères est acceptable.
Garder un site Web propre (et simpliste) est une tendance de conception, mais il a également des valeurs d'utilisabilité. Il y a moins de bruit et les utilisateurs peuvent trouver des choses plus facilement.
Mais l'ajout d'une largeur maximale à votre contenu est principalement bon pour la lisibilité. Jetez un œil à reddit et vous remarquerez pourquoi la longueur de ligne est importante.
Il y a une limite raisonnable dans la quantité d'informations que l'utilisateur devrait voir à la fois .
Si la vue contient plus d'informations que l'utilisateur ne peut les assimiler/comprendre, cela devient écrasant. Cela dépendra du type de conten et de la façon dont les informations sont affichées.
Il ne s'agit pas de laisser un espace vide, mais d'utiliser la quantité d'espace nécessaire, pas plus.
Pour illustrer le point avec votre exemple:
Comme les sites Web peuvent utiliser le défilement, il n'est pas nécessaire de mettre autant d'informations que possible sur un seul écran.
Maintenant, comment distribuer le contenu?
Selon le site, le contenu peut être centré ou aligné à gauche (ce dernier étant probablement dû à la lecture de gauche à droite). Il existe une autre alternative qui n'est pas de répartir l'espace dans les limites des conteneurs, mais plutôt à l'intérieur des éléments. Ce type de mise en page peut être utile s'il y a plusieurs colonnes à l'intérieur des conteneurs et qu'il y a une barre latérale de chaque côté. En d'autres termes, cela vaut la peine s'il y a suffisamment de colonnes, et à un moment donné la cohérence de chaque élément (chaque ligne) commencera à se briser car les informations sont trop éloignées . Et lorsque nous atteignons ce point, nous sommes de retour pour continuer à ajouter cet espace vide de l'une des manières précédentes.
Etudes académiques sur l'espace blanc
Oui, l'espace blanc est utilisé pour augmenter la lisibilité et réduire l'encombrement visuel [1] , [2] .
Plus il y a d'objets sur l'écran, plus l'œil et le cerveau doivent traiter [3] . Avec un espace vide, nous réduisons les ressources d'attention requises pour traiter la page . Cependant, trop (plus de 50%) peut avoir un effet négatif sur la lisibilité et la satisfaction des utilisateurs [4] .
L'espace blanc rend-il les sites compatibles avec certaines tailles d'écran?
Pas vraiment. Si la page n'a pas d'espace blanc (et est empilée avec du contenu), lors de la conception pour différentes résolutions, il deviendra un énorme problème de positionner tous les éléments de la page pour les différentes résolutions.
Est-ce que quitter l'espace aide à rendre les sites adaptés aux mobiles?
Enfin pas exactement. Sur les résolutions mobiles, vous pouvez remarquer qu'il n'y a pas beaucoup d'espace blanc. Ils ont une structure de mise en page différente en raison de l'espace d'écran limité disponible sur les téléphones mobiles.
Références:
[1] Chaparro B. et al., Lecture de texte en ligne: une comparaison de quatre dispositions d'espace blanc, 2004
[2] Coursaris C. et Kripintris K., Esthétique Web et utilisabilité: une étude empirique des effets de l'espace blanc, 2012
[3] S. Luck et E. Vogel La capacité de la mémoire de travail visuelle pour les caractéristiques et les conjonctions, 1997
[4] Bernard M., Chaparro B. et Thomasson R., Trouver des informations sur le Web: la quantité d'espace est-elle vraiment importante?, 2000
En tant que développeur web parlant pour les sites que j'ai créés: nous n'avons pas conçu pour un affichage de grande largeur. Et l'espace blanc est ce qui par défaut lorsque vous augmentez la largeur du navigateur (ou quelle que soit la couleur d'arrière-plan CSS).
Les coûts de conception et de développement d'un site Web réactif et évolutif sur ordinateur et mobile sont déjà assez élevés. Nos analyses montrent que plus de 90% de nos utilisateurs consultent notre site en <1400 px de large résolution.
En fin de compte, cela ne vaut pas la peine de consacrer du temps et de l'argent à la conception et à la mise en œuvre pour les <10% des utilisateurs qui naviguent sur nos sites à une résolution> 1400 pixels.
Parce que certaines personnes naviguent comme moi, avec le moniteur tourné à 90 °.
D'autres personnes utilisent des tablettes, des téléphones et Win 3.11 avec une résolution 640 * 480 et des couleurs 8 bits. Les meilleurs sites Web sont généralement conçus pour être lisibles sur tous appareils, pas fière allure sur un appareil particulier.
Si le contenu est naturellement aussi large, élargissez certainement la page. Ainsi, par exemple, une grande table, serait beaucoup plus utilisable si elle utilisait autant de largeur qu'il le fallait, qu'en étant à l'étroit dans une colonne plus étroite. J'ai utilisé la feuille de calcul Google Documents en plein écran dans le passé, et c'est utile.
Mais comme d'autres l'ont dit, il y a une limite à la longueur des lignes de texte avant qu'elles ne deviennent difficiles à lire. C'est parce qu'il devient difficile de trouver le début de la ligne suivante lorsque votre œil se déplace vers la gauche, les colonnes de texte ne doivent donc être que si larges.
Un autre argument pour ne pas avoir de pages Web larges est que je n'ai pas acheté un énorme moniteur juste pour que je puisse voir plus d'un site Web. À mesure que les écrans deviennent plus grands, les gens sont moins susceptibles de maximiser les fenêtres, de sorte que le navigateur n'est pas si large de toute façon.
J'ai acheté un énorme moniteur (en fait, deux énormes moniteurs côte à côte, et j'en aurais plus si ma machine les conduisait) pour pouvoir avoir plusieurs fenêtres, navigateurs, éditeurs, etc. côte à côte. De cette façon, je n'ai pas à basculer constamment entre les applications, je peux simplement regarder de l'une à l'autre, ce qui rend les choses beaucoup plus efficaces. Cela est probablement plus vrai pour des sites comme stackexchange, qui sont souvent utilisés dans des contextes de travail, où les gens travaillent sur d'autres choses en même temps. C'est presque certainement beaucoup moins important pour les sites de divertissement.
Donc, comme pour toute question de convivialité, pensez au contexte dans lequel vos utilisateurs travaillent. Votre site est-il la seule chose qu'ils consultent, ou est-ce juste une partie de ce qu'ils font? Pouvez-vous vraiment en être sûr? Avez-vous enregistré ces informations par exemple?
Même si c'est la seule chose qu'ils font, il est toujours inutile de mettre les choses à l'écran à moins qu'elles ne servent réellement à quelque chose. Sinon, ce ne sont que des bruits qui nuisent à ce que vous voulez qu'ils regardent (ou, en fait, ils veulent regarder). Donc, si c'est vraiment utile, allez-y. Mais ne remplissez pas simplement l'espace pour le plaisir.
Cette conception est facilement trouvée et modifiée à l'aide de bootstrap, l'exemple est ici: http://getbootstrap.com/css/#grid-example-fluid
La réponse simple pour l'interface utilisateur est que la largeur du paragraphe est comparable à la quantité de mouvement non forcé qu'un œil peut faire de gauche à droite - il est également comparable à une feuille de papier.
Normalement, la zone lisible d'un paragraphe ne doit pas être plus large qu'une main de taille moyenne.
J'ai été vraiment surpris de voir cette question et l'intérêt pour le sujet. Cela me semble faire partie du vieux débat autour de la question "L'espace blanc est-il un espace perdu?"
Je pense que c'est un mythe et il y a beaucoup d'arguments qui soutiennent l'idée que l'espace blanc est la clé d'un design réussi.
L'argument le plus important pour limiter la largeur du bloc de contenu principal et avoir l'espace blanc de mise en page est qu'il rend le design plus utilisable et aide les utilisateurs se concentrer sur les éléments les plus importants. Je peux vous dire par expérience que je laisse simplement ces sites Web avec tellement d'informations dans une page que j'ai le sentiment que je ne trouverai jamais ce dont j'ai besoin. C'est épuisant de voir des informations partout sur l'écran et je ne comprends pas comment je pourrais me concentrer sur la colonne du milieu avec du texte à gauche et à droite.
Je sais que c'est un peu subjectif, mais sur la page avec beaucoup d'informations dans la page, j'ai le sentiment que les développeurs ne veulent pas passer plus de temps pour ajouter un bouton avec "plus" ou synthétiser ce qui est important. Cela ressemble à une punition et cela semble bon marché.
L'espace blanc aide à:
- se concentrer sur le contenu le plus important;
- améliore la compréhension en lecture;
- créer l'apparence et la sensation de minimalisme et d'élégance.
Dans cet article, Pourquoi l'espace blanc est crucial pour la conception UX , j'ai trouvé une opinion intéressante:
Il a été prouvé que l'espace blanc augmente la compréhension jusqu'à 20%. (...)
L'espace blanc aide à créer des cartes mentales. (...)
La puissance de l'espace blanc vient des limites de l'attention et de la mémoire humaines
Mise à jour: Pour être plus précis, l'alternative à avoir des marges à gauche et à droite est d'avoir plus de colonnes ou d'avoir une boîte principale avec une plus grande largeur.
Le problème avec la première option est qu'il est difficile de prioriser les informations importantes et avec la seconde, il est difficile de lire un texte avec une grande largeur.
Un bon argument pour limiter la largeur d'une colonne est présenté ici et cette référence est importante à mentionner:
Existe-t-il une longueur de ligne idéale pour le contenu?
Pour citer un passage de "Web Style Guide - Principes de conception de base pour la création de sites Web".
La longueur de ligne idéale pour la mise en page du texte est basée sur la physiologie de l'œil humain…
À une distance de lecture normale, l'arc du champ visuel n'est que de quelques pouces - environ la largeur d'une colonne de texte bien conçue, soit environ 12 mots par ligne. La recherche montre que la lecture ralentit et que les taux de rétention diminuent à mesure que la longueur de la ligne commence à dépasser la largeur idéale, car le lecteur doit ensuite utiliser les muscles de l'œil et du cou pour suivre de la fin d'une ligne au début de la ligne suivante. Si l'œil doit parcourir de grandes distances sur la page, le lecteur se perd facilement et doit rechercher le début de la ligne suivante. Des études quantitatives montrent que des longueurs de ligne modérées augmentent considérablement la lisibilité du texte.
Guide de style Web - Principes de conception de base pour la création d'un site Web Patrick J. Lynch et Sarah Horton 2e édition, page 97.
Je dirais que le champ de vision joue un rôle. Vous pouvez facilement lire un morceau de papier et la largeur du site Web est à peu près de la même taille. De cette façon, vous n'avez pas à déplacer votre tête autant dans le sens horizontal lors de la lecture ou de l'analyse de la page.
De plus, même si vous essayez de réduire l'espace blanc, comment feriez-vous? Ce n'est pas forcément facile. La plupart des questions sont déjà assez courtes. 2 pages côte à côte? Comment cela fonctionnerait-il avec le défilement inifinte ou le défilement en général?
J'ai lu toutes les réponses ci-dessus, mais je n'ai vu nulle part aucune mention de problèmes réactifs qui pourraient survenir.
Bien que je n'obtienne toujours pas la conception "mobile d'abord", si vous voulez concevoir une application Web réactive, le même contenu doit avoir l'air agréable de 320 pixels jusqu'à ... peu importe. Je travaille principalement avec des tableaux de bord, donc beaucoup d'espace est nécessaire, mais la plupart du temps, je ne parviens toujours pas à étirer le contenu de manière à ce qu'il soit réactif à tous les niveaux de résolution.
Gardez toujours à l'esprit que plus la largeur du conteneur est longue, plus le contenu sera empilé dans des niveaux de résolution plus petits et plus la hauteur du bloc de contenu sera grande dans ces résolutions. Par exemple, une seule ligne de texte dans un conteneur d'une largeur de 1 920 pixels consomme 140 pixels de hauteur sur une vue d'écran mobile, soit 30% de la hauteur d'un petit écran de téléphone et sans l'interface utilisateur du navigateur. Je suis actuellement sur un écran 21: 9 3440x1440px. Imagerie montrant des objets qui s'étirent d'un côté à l'autre sur mon écran .. Sans parler du fait que parfois je dois tourner la tête pour voir le bureau d'un côté à l'autre! :RÉ
Voici un exemple: https://jsfiddle.net/cjj1Ln36/1/
Par expérience, tout ce qui dépasse 1400 pixels est une surpuissance, en particulier pour le contenu riche, par exemple la combinaison d'un titre, d'un texte et d'un graphique. Habituellement, la chose logique à faire dans les résolutions plus élevées est de casser le contenu dans les colonnes, cependant, selon la résolution et par expérience, ces colonnes finissent par être trop stériles ou trop denses selon la résolution. Il est également très improbable que deux blocs de code contiennent le même contenu - probablement impossible à prévoir dans les sites Web dynamiques, de sorte que le contenu d'une colonne peut être dense et l'autre clairsemé.
Pour les sites Web riches en photos, les choses sont encore pires.
a) Si les photos utilisent une largeur de conteneur complète de 1400 pixels, mais doivent garder un rapport commun, comme 4: 3, alors elles occuperont probablement toute la hauteur de l'écran et la dépasseront probablement.
https://jsfiddle.net/mg965au8/1/
b) Si la photo est utilisée sur le côté du texte, passer d'une résolution de 1400px à une résolution où la photo a du sens de s'asseoir au-dessus du texte (par exemple> 768px), très probablement le contenu commencera trop clairsemé et dépassera probablement la hauteur de l'image tout en rétrécissant. J'ai créé un violon pour illustrer le problème. Essayez d'étendre à partir d'une basse résolution jusqu'au maximum 1400px (imaginez sans conteneur!). A-t-il l'air agréable pour toutes les largeurs de navigateur? Probablement pas.
https://jsfiddle.net/2xnt3mk2/
Aussi, ce que tous les autres ont dit ci-dessus - trop écrasant, etc.
Surtout dans les sites Web contenant du texte, une colonne de texte étroite est plus agréable à lire qu'un mur de texte pleine largeur. De plus, si le texte n'est pas un roman, vous constaterez que plus de la moitié des lignes de texte n'atteignent pas leur pleine largeur, ce qui crée un "tache de texte" désagréable et inégal.
Pensez à la façon dont le texte est affiché dans un roman (physique) par rapport à un dictionnaire. Les dictionnaires sont généralement affichés sur deux colonnes. Il permet au lecteur de mieux se concentrer sur ce qui est lu car c'est important. Il n'est pas si important de conserver tous les mots dans un roman, mais pas aussi difficile car nous supposons que le lecteur est déjà intéressé par l'histoire.
En bref: les humains ont une durée d'attention médiocre et conservent mieux leur concentration s'ils reçoivent peu d'informations à la fois.
Cela dépend également d'un type de contenu, de sa taille et de la distance d'un utilisateur par rapport à l'écran.
Pour les vidéos, les tableaux de bord avec de grandes photos ou les présentations - le plein écran est la meilleure option.
Pour le contenu du texte et les images petites à moyennes, il est essentiel de prendre en compte un champ de perception confortable.
Quelle serait la largeur d'un champ de perception confortable sans avoir à déplacer vos yeux de gauche à droite pour un PC ou un ordinateur portable normal à une distance de 50 à 65 cm (20 à 26 pouces) d'un utilisateur assis?
Les yeux sont trop précieux et se fatiguent rapidement, donc les gens préfèrent fixer les degrés de liberté étendus du mouvement 2D au mouvement 1D et faire défiler la page verticalement et laisser les yeux rester fixes dans leur position.
Faire défiler la page verticalement est plus facile pour les gens, comme déplacer les yeux d'avant en arrière de gauche à droite et redéfinir en outre la position verticale du contenu actuel/suivant. Certains contenus peuvent simplement être perdus s'ils sont placés en dehors du champ de perception principal.
Par conséquent, l'impression visuelle globale d'une page peut en souffrir.