web-dev-qa-db-fra.com

Une ou deux barres de défilement pour le contenu + barre latérale?

Je travaille sur la conception d'un site Web et j'essaie de décider si la barre latérale défile indépendamment du contenu de la page, ou si une seule barre de défilement contrôle les deux divisions. Quel principe dois-je utiliser pour guider la décision? Dans quelles situations souhaiteriez-vous que le contenu de la barre latérale reste fixe pendant qu'un utilisateur fait défiler le contenu principal?

Une barre de défilement

  • L'utilisateur sait où il se trouve sur la page
  • le contenu de la barre latérale reste dans la même position par rapport aux autres contenus
  • Tenir la souris n'importe où sur la page fait défiler la barre
  • La grande majorité des sites Web n'utilisent qu'une seule barre de défilement - correspond aux attentes des utilisateurs
  • peut avoir des sites de largeur fixe sans barre de défilement laide au milieu de la page

Deux barres de défilement

  • Peut afficher des informations dans la barre latérale lors de la navigation dans le contenu principal, ce qui est bien lorsque le contenu principal est> 4000 px, ou vous avez besoin d'informations dans la barre de défilement et dans la barre de contenu principale en même temps
  • La barre latérale nécessite soit tout le côté gauche de la page, soit un en-tête fixe, ce qui réduit l'importance du contenu principal, la hauteur verticale de la barre latérale et du contenu principal
  • Nécessite le placement de la souris dans la barre latérale pour faire défiler son contenu
  • Google Code, qui est un site à barre de défilement à largeur fixe et Google Reader, qui a deux barres de défilement, est deux exemples de décisions différentes de la même entreprise. Je pense qu'avec Google Reader, ils ont besoin d'une barre de défilement car le contenu est généré dynamiquement.

J'apprécie votre aide à cet égard - surtout si vous pouvez m'indiquer des données s'appuyant de toute façon.

11
Kevin Burke

Je pense que l'option que vous n'avez pas énumérée dans votre question est celle de faire défiler le contenu avec une barre latérale flottante (dont l'emplacement est toujours à une distance fixe des bords de la fenêtre, pas des bords du contenu).

Je réfléchirais attentivement à la nécessité de faire défiler les deux colonnes. Dans les cas que vous mettez en surbrillance, le changement de contexte utilisateur entre le contenu principal et la barre latérale devrait soit perdre son emplacement sur la page (s'il fait défiler vers le bas du contenu principal et doit accéder à quelque chose près du haut de la barre latérale) ou aurait à comprendre indépendamment les cadres de défilement et nécessite plus de mouvement de la souris pour choisir la colonne qui obtient les actions de défilement.

Sans connaître la portée de l'application que vous développez, ma première recommandation serait de limiter le contenu de la barre latérale à moins de la hauteur de la fenêtre. Si vous avez besoin de plus d'espace, vous pouvez utiliser des onglets dans la barre latérale ou avoir des sections paginées horizontalement dans la barre latérale.

3
Brendan Berg

J'essaierais d'éviter le défilement et de résoudre la navigation dans la barre latérale d'une manière différente. Par exemple, avec pagination et un changement de la barre latérale de type ajax.

alt text

1
Lode

Vous semblez déjà connaître les avantages et les inconvénients de chaque type, il n'y a donc pas grand chose à ajouter. Comme vous l'avez dit, certains sites ont besoin de 2 barres de défilement tandis que la plupart en ont besoin.

J'ajouterais une autre idée qui est un croisement entre les 2 que vous avez mentionnés. Vous pouvez créer une barre latérale positionnée statiquement (css, position: fixed), puis vous devriez toujours garder la barre latérale en place mais avec une seule barre de défilement. Ce serait un peu moins déroutant pour les utilisateurs et c'est bon tant que le contenu de la barre latérale est plus court que la page.

0
Sruly