Pourquoi nous n'utilisons pas d'interfaces plus larges sur des écrans larges
L'écran s'élargit de plus en plus. Presque tous les l'interface utilise une largeur fixe et le contenu est centré sur l'écran.
Je sais que nous ne pouvons pas lire une ligne trop longue facilement, mais il existe des solutions pour remplir l'espace supplémentaire: colonnes, grille, ...
Cela ressemble à une énorme perte d'espace.
Pourquoi cela ne devient pas une tendance à produire des interfaces larges, laissant l'interface verticale pour une horizontale? Je ne connais que quelques sites Web qui utilisent une large interface.
Y a-t-il des limites? Pourquoi tout le monde s'en tient à son site Web d'une largeur de 1000 pixels?
Je pense que c'est juste un cas d'une norme qui a été imposée en raison de la résolution générale étant un maximum de 1024 px de large plus tôt ( maintenant le la résolution commune est 1366 x 768 ) et les concepteurs préfèrent avoir un peu d'espace dans leurs conceptions plutôt que de l'étirer jusqu'à 1024px. Le fait qu'un écran plus petit soit parfaitement visible sur un grand écran y contribue également.
Pour citer ceci article
il n'est pas surprenant que de nombreuses dispositions de bureau (comme celle-ci) soient conçues pour convenir à une résolution de 1024x768. Il s'agit d'un reste d'une époque antérieure, lorsque les conceptions étaient limitées à la résolution d'écran la plus répandue chez les utilisateurs. Aujourd'hui, avec la majorité des utilisateurs de bureau sur des écrans de plus de 1024 pixels, une fenêtre de navigateur maximisée peut transformer cette disposition de 960 pixels soigneusement réfléchie en un monolithe dans un champ d'espaces blancs.
De plus en plus de personnes accèdent à Internet avec un appareil mobile chaque année, il est donc logique de concentrer les budgets et les délais sur la création de bonnes expériences utilisateur pour les écrans plus petits. Les dispositions mobiles peuvent être parfaitement utilisables sur des appareils plus grands, mais il n'en va pas toujours de même pour les dispositions de bureau affichées sur de petits écrans.
Il existe également des contraintes mathématiques à la largeur préférée à laquelle vous pouvez concevoir. Pour citer ceci article :
La plupart des concepteurs de sites Web ne souhaitent pas que le site soit 100% fluide. Autrement dit, ils ne veulent pas concevoir pour TOUTES les largeurs - juste une poignée. De plus, il est agréable d'avoir une petite fenêtre "chrome", ou un espace mort qui se trouve en dehors du corps du site Web pour des choses comme les arrière-plans et les goodies à position fixe.
La raison la plus importante que nous concevons généralement pour une largeur maximale de 960 pixels est peut-être mathématique. Vous voyez, 960 (en nombre) a beaucoup de facteurs (28, pour être exact).
Tous ces nombres se divisent également en 960. Ainsi, une largeur maximale de 960 px a plus d'options de mise en page, telles que 16 colonnes de largeur égale. Si nous arrondissons 960 à 1000, vous verrez qu'il a beaucoup moins de facteurs (16).
Voyons maintenant pourquoi il est relativement plus difficile de concevoir des écrans plus grands,
- Bien que 1366 x 768 soit la résolution la plus courante, des résolutions plus élevées que celles-ci ne sont toujours pas si courantes et un site Web conçu à une largeur maximale de 960 px évoluera très bien dans un moniteur de 1366 px
- Si nous optons pour la pleine largeur, la lisibilité du texte est une autre préoccupation, comme vous l'avez souligné à juste titre, et à mesure que la largeur augmente, le nombre de caractères dans une ligne augmente et réduit la lisibilité. Pour citer ceci article
Le problème flagrant de cette approche est d'avoir des colonnes de texte super larges. Un corps de texte de 30 cm de large ne rendra pas votre mise en page plus esthétique, mais, plus important encore, la lisibilité sera également réduite.
La largeur d'une ligne de texte est typiquement désignée comme la "mesure" et, pour préserver la lisibilité, elle devrait viser une longueur d'environ 45 à 75 caractères. Trop de caractères et il devient difficile pour l'œil du lecteur de reculer dans le texte et de localiser le début de la ligne suivante. Cela peut être combattu en augmentant la hauteur de ligne (interligne), assez facile à implémenter aux moments appropriés par le biais de requêtes multimédias, mais ce n'est pas une solution complète.
- La troisième question qui se pose pourquoi ne pouvons-nous pas simplement augmenter la taille du contenu à l'échelle pour l'augmentation de la taille. Bien que ce soit une option viable, cela affecte à nouveau la lisibilité comme indiqué dans ce article :
Nous regardons les écrans plus confortablement avec un angle de vision d'environ 30 °.
Ce qui signifie effectivement;
Plus l'écran est grand, plus la distance de visionnement optimale est grande.
Par conséquent, une plage de numérisation plus petite fonctionnera mieux pour une lisibilité plus facile et les utilisateurs ne seront pas obligés de s'asseoir loin de l'écran pour pouvoir numériser le contenu.
Après un commentaire, j'ai réalisé que je n'avais pas suffisamment expliqué ma position, mais je n'ai plaidé que pour une seule facette de mon opinion. Voici une version plus complète.
Résumé
Il y a des cas où faire un design large peut être bénéfique, et un bon designer va utiliser ces opportunités. Mais de telles conditions se produisent rarement. S'ils ne sont pas présents, une conception étroite à largeur fixe et une combinaison d'une conception de remplissage d'espace pour des écrans larges et d'une conception étroite pour un écran étroit sont de bons choix légitimes. Créer une version large uniquement et la livrer à tout le monde n'est jamais bon.
Contexte
Un concepteur doit concevoir pour une certaine largeur, que j'appellerai la largeur de conception principale . Le concepteur cherchera à maximiser l'utilisabilité à la largeur choisie; J'appellerai la quantité d'utilisabilité obtenue la utilisabilité complète de la conception.
Il est souvent nécessaire que la conception conserve autant que possible son utilisation de base lorsque la largeur est réduite ( conception réactive ). Cela fonctionne en créant des conceptions "extensibles" et en changeant parfois les éléments de conception (par exemple, en réduisant le nombre de colonnes lorsqu'une largeur très étroite est reconnue). Mais il est reconnu qu'à un certain point, chaque conception se dégradera (aura une utilisation réduite par rapport à la ligne de base) lorsque la largeur devient trop petite. Même une simple colonne de texte sera moins lisible à, disons, une largeur de 1 cm.
Il est humainement impossible de concevoir et de tester à toutes les largeurs à la fois, mais un bon concepteur travaillera généralement sur les largeurs plus étroites et plus larges en parallèle à la largeur principale, ou du moins les gardera à l'esprit et fera des choix de conception à la largeur principale qui permettre une transition facile vers plus large et plus étroit.
Raisons de ne pas remplir l'espace lorsqu'il y a plus de largeur disponible que la largeur de conception principale
Parce que ne plus grande efficacité spatiale n'entraîne pas automatiquement une plus grande facilité d'utilisation. "L'espace gaspillé" n'est pas un facteur négatif de convivialité. Même la règle "au-dessus du pli" perd de sa crédibilité, et lorsque le défilement vertical est de toute façon nécessaire, quelques tours supplémentaires de la roue ne sont généralement pas un problème.
Le concepteur a déjà atteint une utilisation complète à la largeur de conception principale choisie . Elle peut essayer de l'augmenter dans la liberté accrue offerte par le plus grand espace, mais à moins que l'espace ne soit déjà un goulot d'étranglement sévèrement limitant à la largeur de conception principale choisie, il est peu probable que l'utilisabilité soit augmentée au-dessus utilisabilité complète à un état d'utilisation supplémentaire . Bien sûr, si le concepteur a trouvé une solution qui augmente la convivialité par rapport à la largeur plus étroite, il devrait utiliser cette solution.
Un exemple de conceptions qui bénéficient de la largeur supplémentaire serait l'application Web Remember the milk et l'application de bureau Mendeley, qui n'utilisent pas le modèle maître-détail classique, mais placent le formulaire d'édition des détails dans une colonne supplémentaire. Cela permet à l'utilisateur de sélectionner plusieurs maîtres et de leur attribuer simultanément un ou plusieurs champs de détail à la même valeur.
Mais de tels exemples sont rares. Dans la plupart des cas, la largeur n'est pas une contrainte limitative, et le fait de remplir un espace plus large n'augmente pas la convivialité. Le concepteur peut, bien sûr, créer une version plus plus économe en espace qui est livrée aux utilisateurs avec des écrans larges. Mais si l'utilisabilité reste la même entre la version large et la version étroite, il n'y a pas besoin d'utiliser la version large. C'est le choix du concepteur (ou de son client) de faire une version optimisée pour un écran large, de laisser la version principale de la largeur du dessin s'étirer dynamiquement ou de laisser le dessin à une largeur fixe afin qu'une fenêtre plus large soit remplie de vide motif de fond. Lorsqu'il n'y a pas de différence d'utilisation, le seul critère est l'esthétique, et cela variera entre les personnes, il n'y a aucun moyen de choisir celui qui plaît à tout le monde.
Dans le pire des cas, créer une version plus économe en espace réduira même la convivialité. Un utilisateur effectuant une tâche spécifique a des besoins d'informations spécifiques. Toutes les informations et fonctionnalités non nécessaires à la tâche en cours sont en fait gênantes. Si vous vous êtes déjà plaint d'un logiciel "gonflé", vous savez ce que je veux dire en disant que le fait d'afficher plus d'informations ou de boutons sur l'écran peut être préjudiciable. Et même s'il n'y a pas de distraction, l'encombrement et le manque d'espace blanc réduisent généralement la convivialité de la conception.
Mais pourquoi ne pas choisir une largeur de conception principale plus grande que le classique ~ 1000 px @ 100 dpi?
(Je suis personnellement un partisan de 960, mais j'ai vu beaucoup de gens qui utilisent 1024 aussi)
Simplement: parce qu'il punit les utilisateurs qui ne se conforment pas à vos attentes d'un ordinateur de bureau avec un écran large moderne. Fondamentalement, plus vous faites d'hypothèses sur la largeur minimale de l'écran, plus vous vous rapprochez de la redoutable distinction "Works on my machine".
Un avantage majeur d'un écran large est qu'il est possible d'avoir plusieurs fenêtres en mosaïque. Si le concepteur (Web?) Fait l'hypothèse que l'utilisateur maximisera toujours la fenêtre, il/elle gêne certains workflows très efficaces. Fondamentalement, juste parce que l'utilisateur a acheté un grand écran, il ne vous a pas donné la permission de l'occuper avec votre application.
Il existe une multitude d'appareils et de plateformes (et cela a toujours existé). Tout simplement parce que les ordinateurs de bureau ont tendance à avoir des écrans plus grands récemment, cela ne signifie pas que tous les appareils qui exécutent votre application en ont. Cela est particulièrement vrai pour les applications Web, qui doivent s'exécuter sur toutes sortes de plates-formes, mais il peut arriver que les utilisateurs souhaitent exécuter votre application de bureau Windows sur un ordinateur de taille netbook, un petit écran intégré quelque part dans un environnement industriel, etc. .
Les utilisateurs ne sont pas obligés d'acheter le matériel le plus récent et le plus performant. De nombreuses personnes non affinées en informatique utilisent encore des moniteurs de dix ans dans un format 3: 4 et une faible résolution. Et ils s'attendent à ce que votre application s'exécute également sur leur ordinateur.
Avec l'avènement des écrans à dpi plus élevés, davantage d'applications commencent à permettre une mise à l'échelle décente. Plus les applications permettent une mise à l'échelle indépendante des pixels, plus il est probable que les utilisateurs ayant une moins bonne vue, ou les utilisateurs qui ont placé le moniteur plus loin des yeux en raison de restrictions d'espace sur leur bureau, voudront zoomer dans votre application. S'il est trop large, il n'aura pas d'espace pour zoomer. (Certes, c'est une inquiétude future, car la plupart des applications sont encore très loin d'un bon zoom indépendant des pixels, et les systèmes d'exploitation n'ont pas une bonne prise en charge native pour cela - l'option existe sur Mac, mais je pense qu'elle a besoin logiciels tiers).
Et n'oubliez pas que la plupart des sites Web existent encore sur le texte. Les lignes plus longues sont très nuisibles à la lisibilité. La configuration de lecture optimale contient des lignes larges de 60 à 70 caractères qui suivent verticalement de manière linéaire. Et tandis que l'utilisateur est plongé dans la lecture, il ne veut rien avoir à côté du texte. Mais si vous y mettez autre chose, il l'ignorera quand même. C'est un cas particulier (les applications peuvent parfois faire bon usage d'une colonne de droite, voir Remember the Milk et Mendeley pour des exemples décents), mais c'est un cas très courant.
Et pourquoi commencer par une largeur de conception principale étroite?
Garder la utilisabilité complète à largeur réduite devient plus difficile lorsque la différence entre la largeur de conception principale et la largeur réduite augmente. Il est probable que le concepteur devra introduire plus de changements d'éléments que de simples rétrécissements/reflux. Cela représente plus d'efforts pour le concepteur et aboutit à une conception moins cohérente (et la cohérence elle-même est un facteur de convivialité, grâce à une meilleure capacité d'apprentissage). Pour cette raison, un concepteur préférera choisir une largeur de conception principale qui soit aussi petite que possible (afin que les largeurs réduites ne puissent pas devenir beaucoup plus petites) tout en laissant suffisamment de liberté pour établir une très bonne utilisabilité de base.
La répartition des largeurs disponibles pour l'utilisateur est loin d'être fluide; il y a de grands sauts aux tailles d'affichage standard. Ainsi, un concepteur choisira fréquemment une taille standard pour la largeur de conception principale , par opposition à quelques pixels de moins (cela restreindra la liberté des concepteurs, sans atteindre plus d'utilisateurs).
Bien sûr, la largeur de conception principale ne doit pas non plus être choisie trop étroite, ou elle ne sera pas suffisante pour atteindre une utilisation complète. Il y a des gens qui conçoivent le mobile d'abord (en choisissant une largeur de conception principale correspondant à la taille de l'écran du smartphone), mais ils feront généralement aussi une version de bureau avec des changements substantiels, qui auront également augmenté l'utilisabilité.
Pourquoi les appels des utilisateurs à des conceptions plus larges ne sont pas toujours une bonne raison de les livrer
La première raison peut être appliquée à pratiquement tout dans la conception et l'ingénierie des exigences. Cela découle du fait que évaluer l'utilisabilité d'un produit fini est facile, mais évaluer l'utilisabilité d'une conception proposée est une compétence difficile acquise. C'est une situation de "je ne peux pas dire ce qu'est [un design utilisable], mais je le saurai quand je le verrai". Il se peut qu'un utilisateur paie de l'argent pour un nouvel écran plus large, puis voit beaucoup d'espace blanc dessus et pense que l'espace est en quelque sorte gaspillé. Il propose la solution "il suffit de mettre un peu de design là-dedans", l'évalue pour les inconvénients et n'en voit aucun. Dans de nombreux cas, l'utilisateur aura également déjà connu des occasions où le passage d'une faible largeur à une grande largeur augmentait la convivialité (par exemple, lorsqu'il a mis à niveau un moniteur de 13 pouces à un moniteur de 17 pouces) et ne remarquera pas que cet effet ne tient pas toute largeur augmente. Ensuite, il peut commencer à exiger un design plus large. Nous, les concepteurs, ne pouvons pas nous attendre à ce que nos utilisateurs sachent ce qui est bon pour eux, mais nous ne sommes pas non plus tenus de répondre à leurs souhaits lorsqu'ils ne conduisent pas à une situation qui leur convient. (Sauf s'il existe un contrat qui stipule que nous devons faire exactement cela).
La deuxième raison est spécifique à la largeur de l'écran. La majorité des gens commencent à apprendre l'informatique, atteignent un état de connaissances intermédiaires et ne sont pas disposés à faire plus d'efforts pour atteindre des niveaux de compétence plus avancés. Il s'agit d'une stratégie d'apprentissage très efficace pour une technologie qui ne change pas ou qui change lentement, car l'apprentissage de la compétence à un niveau avancé est soumis à des rendements décroissants. Dans les ordinateurs, nous sommes confrontés à une situation où le carrelage des fenêtres serait une grande amélioration par rapport à l'utilisation maximale de chaque fenêtre, mais ce n'était pas le cas il y a 10 à 15 ans en raison des petits écrans et des faibles résolutions qui prévalaient alors. Donc, les gens qui ont depuis longtemps atteint un niveau confortable de culture informatique ne pensez jamais au carrelage et ne l'essayez jamais. Les créateurs de systèmes d'exploitation ne sont pas très incités à offrir une mosaïque appropriée, car aucun utilisateur ne le demande. En conséquence, bien que l'utilisation de deux fenêtres ou plus carrelées sur les grands écrans actuels conduise souvent à une convivialité beaucoup plus élevée qu'une application utilisant tout l'espace, les utilisateurs n'y pensent tout simplement pas et exigent le sous-optimal espace avec votre application/site Web "à la place.
Nous le faisons, cela s'appelle Responsive Design :
Un site conçu avec RWD adapte la mise en page à l'environnement de visualisation en utilisant des grilles fluides basées sur des proportions, des images flexibles et des requêtes multimédia CSS3, une extension de la règle @media.
Le concept de grille fluide demande que la taille des éléments de page soit exprimée en unités relatives comme les pourcentages, plutôt qu'en unités absolues comme les pixels ou les points.
Les images flexibles sont également dimensionnées en unités relatives, afin de les empêcher de s'afficher en dehors de leur élément conteneur.
Les requêtes multimédias permettent à la page d'utiliser différentes règles de style CSS en fonction des caractéristiques de l'appareil sur lequel le site est affiché, le plus souvent la largeur du navigateur.
Les composants côté serveur (RESS) en conjonction avec ceux côté client tels que les requêtes multimédias peuvent produire des sites à chargement plus rapide pour l'accès sur les réseaux cellulaires et également offrir une fonctionnalité/convivialité plus riche évitant certains des pièges des solutions côté appareil uniquement.
Cela dit, je dirais également que raison que la plupart des sites réactifs ne s'étendent pas au-delà d'une largeur de ~ 1000px est parce qu'il est juste de dire que la plupart des gens n'embauchent pas de développeurs physiques qui savent ce qu'ils font.
Au lieu de cela, ils accèdent à l'un des nombreux sites de modèles et achètent un modèle afin qu'ils puissent essayer de le faire eux-mêmes ou qu'ils s'inscrivent avec un système de gestion de contenu comme Wordpress , Joomla , Drupal , DNN (anciennement DotNetNuke) , etc., et utilisez leur système et choisissez l'un de leurs modèles.
La plupart d'entre eux n'ont généralement pas de modèles très larges. Pour obtenir cette personnalisation, vous devez embaucher des développeurs/concepteurs qui peuvent vous donner ce que vous voulez. Le simple fait est que les sites ainsi construits sont minoritaires. Cela ne changera pas jusqu'à ce que la base d'utilisateurs décide que c'est ce qu'ils veulent.
À mon humble avis - l'avoir nu sur les côtés, appelé espace blanc, permet à l'utilisateur de se concentrer sur le contenu. Trop peut être trop distrayant.
De plus, je suis sûr que Gutenberg savait ce qu'il faisait lorsqu'il a conçu les marges au nombre d'or.
Peu importe la largeur des écrans, nos yeux ne sont que très éloignés.
La plupart des sites ont du texte à lire, et la lecture de texte nécessite notre attention visuelle. Le problème que nous avons est que notre vision centrale a un domaine limité; en gros, c'est la distance entre les pupilles, qui est d'environ deux pouces.
Cette limitation est liée à notre évolution; nous avions besoin d'une vision centrale nette pour traquer les proies, mais il n'avait pas besoin d'avoir une grande zone pour détecter d'autres prédateurs. Ce n'est pas un hasard si d'autres prédateurs terrestres au sommet de leurs chaînes alimentaires partagent notre anatomie visuelle (c.-à-d. Les yeux devant le visage et assez proches les uns des autres).
Le demandeur reconnaît que nous ne pouvons pas suivre les longues files d'attente trop facilement. C'est parce que nous devons déplacer nos globes oculaires pour ce faire; c'est instinctif mais nécessite toujours un mouvement musculaire. Le fait de trop éloigner les éléments de texte du site peut empêcher l'utilisateur de les voir.
Cela dépend entièrement de l'application, bien sûr. De nombreuses applications vous ont toujours permis d'utiliser toute la largeur de votre écran. Excel étant un exemple simple.
En termes de sites Web, il existe de nombreuses raisons pratiques:
- comme vous le dites, la lecture de longues lignes de texte peut être problématique.
- ce n'est pas parce que les gens ont un large écran qu'ils ont un large navigateur
- en fait, beaucoup de gens avec des moniteurs plus larges ont tendance à avoir des fenêtres plus étroites, bien que plusieurs fenêtres soient ouvertes
- l'analyse d'une seule colonne de haut en bas est une chose à laquelle nous sommes habitués (même avant la datation du Web) et est plus facile que l'analyse de plusieurs colonnes côte à côte
- plus vous décidez de la largeur des largeurs extrêmes, plus il y a de variances à intégrer à leur stratégie de mise en page réactive
Tu as dit:
Presque tous les l'interface utilise une largeur fixe et le contenu est centré sur l'écran
Cette affirmation n'est pas correcte. Ceci est probablement correct uniquement pour les sites de contenu de texte . Voici quelques exemples de sites qui utilisent toute la largeur:
- Pinterest utilise toute la largeur de l'écran (au moins le 1920 que j'utilise)
- Kizi - que mes enfants utilisent tout le temps - utilise également tout l'écran
- New Relic utilise la plus grande partie de la largeur de la page pour afficher les statistiques de l'application.
Et je suis presque sûr qu'il existe de nombreux autres exemples.
Comme indiqué dans de nombreuses réponses ci-dessus, il est difficile de créer de bons sites basés sur du texte qui utilisent toute la largeur de l'écran en raison de nos limites humaines, mais lorsque le site n'est pas basé sur du texte, je ne vois aucun problème.
Alors que les écrans deviennent plus grands, les utilisateurs ont toujours une plage de mise au point visuelle étroite. Pour le contenu immersif comme les vidéos, les animations, les illustrations, etc ... ces grands écrans sont GRANDS. Pour des choses comme la réalisation de tâches sur un site Web, les utilisateurs ne pourront toujours se concentrer que sur la même zone de 1000 pixels (donner ou prendre).