Comment gérer l'espace supplémentaire
Je suis en train de développer une application Web qui utilise déjà une conception réactive (bootstrap) et qui fonctionne bien avec une petite résolution. Mais il est courant que les écrans de bureau atteignent jusqu'à 1920 pixels de large, et ils sont notre principal public pour l'instant (c'est une application Web pour les professionnels de l'informatique).
La plupart de nos pages sont des formulaires qui ont un certain ordre logique d'entrée et nous allons préférer une lecture descendante et les distribuer verticalement. Donc, il y a le problème, nous devons utiliser plus de hauteur que de largeur, laissant encore plus d'espace inutilisé à l'écran.
Les propriétaires de produits se sont déjà plaints de l'espace vide à gauche, mais il semble que la distribution horizontale des champs du formulaire ne soit pas une option comme vous pouvez le voir dans mon brouillon ci-dessous:
L'échelle de ce brouillon n'est pas très bonne, un écran large de 1920 pixels laisse beaucoup plus d'espace vide sur la gauche, ce qui rend les entrées très éloignées les uns des autres dans la 2ème approche.
TL; DR
Je dois choisir entre laisser un espace vide sur des écrans larges ou laisser les entrées associées loin les unes des autres. À mon humble avis, l'approche n ° 1 (voir la photo), c'est mieux, mais je serais heureux si vos gars me faisaient savoir si c'était vraiment la meilleure solution, donc je peux convaincre les propriétaires de produits que c'est mieux de cette façon ou d'une autre.
[~ # ~] modifier [~ # ~]
Basé sur le réponse de DA01 J'ai mis à jour mon brouillon en suivant ses considérations.
Concernant le centrage du contenu, je pense que cela pourrait entrer en conflit avec le concept de la barre latérale, j'ai donc modifié son comportement. Avant, la barre latérale pouvait être basculée à partir d'un bouton et du coin de l'écran (glisser), maintenant elle est juste cachée sur les petits appareils et le bouton de basculement apparaît à l'écran et le geste de balayage est activé.
C'est beaucoup plus propre maintenant, mais je ne sais pas quel est le comportement idéal de la barre latérale pour cette configuration ...
Les clients qui se plaignent de `` tout l'espace supplémentaire '' regardent généralement les choses du point de vue de la conception visuelle plutôt que du point de vue UX/utilisabilité comme s'ils imprimaient le site et le suspendaient au-dessus de leur cheminée comme une œuvre d'art.
Oui, si vous étendez votre navigateur à 1920 ... BEAUCOUP de sites Web auront beaucoup d'espace vide. Cela ne change pas la convivialité du site, et étendre délibérément et arbitrairement les choses à 1920 aggravera généralement les choses à partir d'un POV UX/utilisabilité.
En fait, vous voudrez rarement que votre site s'étende au-delà de 900-1100 environ. Au-delà de cela, le rapport d'aspect commence à devenir plutôt ridicule et la longueur des lignes de texte devient illisible. Les gens travaillent principalement de haut en bas en ce qui concerne les formulaires, vous souhaiterez donc probablement garder vos présentations de formulaires plus verticales qu'horizontales.
La "solution" courante pour ce type de plainte consiste à:
- définir une largeur maximale sur la zone de contenu
- centrer la zone de contenu
- mettre un joli motif/couleur derrière la zone de contenu.
Cela se traduira par un "site" bien centré au-dessus de l'espace non littéralement blanc.
Si vous évitez les bordures dans le formulaire et utilisez la même couleur d'arrière-plan que le corps, il sera visuellement meilleur.
Il est nécessaire de limiter les espaces avec des bordures lorsque le contenu doit être séparé. La zone de formulaire n'a pas besoin d'être séparée ici car il n'y a rien à séparer. Les frontières ne font qu'ajouter au bruit à mon avis. De plus, les lignes verticales garantissent qu'il n'est pas perdu/flottant dans la page.