Pour 2 ensembles d'informations connexes, dois-je diviser la disposition en 2 panneaux fixes séparés ou simplement utiliser 1 panneau?
Supposons que vous créez un site Web et que vous souhaitez afficher deux ensembles d'informations connexes.
Le premier ensemble est souvent bref tandis que le second est le détail. Ex: table des matières vs article, fiche produit vs détail du produit, introduction du film vs détails du film ...
Si votre patron souhaite afficher les deux ensembles d'informations sur une seule page Web, comment concevez-vous votre page?
À mon avis, il existe 2 façons de concevoir cela, en supposant que la hauteur de l'écran est de 700 pixels:
Option 1: mettez le premier ensemble d'informations dans un panneau fixe supérieur (hauteur = 350px) avec une barre de défilement, puis mettez le second un panneau fixe inférieur (hauteur = 350px) avec une barre de défilement. Voir cette photo.
![enter image description here]()
Option 2: Mettez les deux ensembles dans un panneau fixe (hauteur = 700px) avec une barre de défilement comme cette image
Pour Option 1, le premier ensemble et le deuxième ensemble sont séparés, de sorte que les utilisateurs peuvent voir 2 parties séparément
Pour Option 2, ils voient tout le premier ensemble. Ils peuvent avoir besoin de faire défiler vers le bas pour voir le deuxième ensemble.
Quelle option est simple et apporte la meilleure expérience utilisateur aux utilisateurs?
En tenant compte de l'interaction entre ces deux ensembles d'informations, j'irais avec une version adaptée de l'option 1.
Avec le premier ensemble d'informations ayant une plus grande importance sur le deuxième ensemble (c'est-à-dire que vous devez choisir l'article du 1er ensemble pour que le deuxième ensemble soit mis à jour), le premier ensemble apparaissant dans la ligne de vision des utilisateurs en premier est plus important.
Ma suggestion irait avec une option similaire à Apple Mail où la liste des articles à gauche et le contenu apparaît à droite.
La raison en est que l'espace vertical est plus important pour un utilisateur lisant n'importe quel type de contenu que l'espace horizontal. Donc, en empilant les deux ensembles d'informations l'un sur l'autre, vous supprimez cet espace horizontal.
De plus, en les empilant côte à côte, cela vous permet de montrer à l'utilisateur plus d'articles dans le premier ensemble d'informations, ce qui pourrait entraîner une baisse du taux de rebond.
Gardez à l'esprit le principe Gestalt :
Les éléments regroupés donnent la perception d'être associés les uns aux autres.
Si vos informations sont les mêmes, ne les regroupez pas d'elles-mêmes, car cela entraînera une confusion quant à ce qui sera associé à quoi.
Je pense que l'option 2 pourrait fonctionner pour la mise en page que vous faites. Cependant, si vous deviez suivre la suggestion de @Serg, cela peut vous aider car ils sont regroupés, de manière différente.
Attention cependant: les yeux des gens peuvent facilement grouper des éléments si vous les séparez, concluant dans leur tête que ces éléments appartiennent à leurs propres groupes respectifs, les comprenant ainsi comme différents des autres groupes.
Votre option 1 donne la perception des deux champs d'information comme étant différents, mais vous les avez expliqués comme étant les mêmes.
Le premier ensemble est souvent bref tandis que le second est le détail. Ex: table des matières vs article, fiche produit vs détail produit, introduction du film vs détails du film.
Je suggère l'option 2 si les informations sont les mêmes .