Quelle est la meilleure façon d'indiquer que vous pouvez faire défiler une zone lorsque celle-ci n'a pas de barre de défilement?

La seule chose à laquelle je pouvais penser était de dire: "Faites défiler pour voir le menu complet" ci-dessus. De quelles autres façons les gens le font-ils?

Les gens sont bien liés à la relativité physique dans les interfaces utilisateur. En d'autres termes, si vous voulez qu'une interface soit naturelle ou rende ses contrôles évidents, vous pouvez utiliser l'apparence du réalisme physique pour le faire. Des icônes appropriées sont toujours également indispensables, pour des fonctionnalités évidentes.

À quoi ressemblerait physiquement une zone de défilement? Facile! Une couche de contenu sous un cadre extérieur. Pour obtenir ce look, vous pouvez utiliser une ombre de boîte sur le calque extérieur.

• Astuce: lorsque vous créez des ombres de boîte CSS, vous pouvez associer plusieurs ombres avec des virgules. Utilisez une ombre lointaine claire avec une ombre courte plus forte pour un bel effet. Utilisez RGBA (contrôle d'opacité) pour une touche légère!

Ensuite, sans barre de défilement, la meilleure pratique qui vient à l'esprit serait d'utiliser JQuery avec une boîte de défilement cliquable attachée aux bords des cadres dont le contenu défile, en faisant apparaître la boîte lorsque les éléments intérieurs dépassent en dehors de la boîte dans l'une des quatre directions.

Si vous souhaitez que la barre soit absente ou masquée par défaut, conservez-la soit cachée soit légèrement opaque jusqu'à ce que la zone de défilement soit survolée ou tapotée, puis que le mécanisme de défilement apparaisse.

• Utilisation facile: la boîte doit s'activer (commencer à faire défiler l'élément enfant) légèrement lors d'un événement de survol, et complètement sur la souris.

Voici une démonstration:

Pour les zones de défilement longues, le défilement accéléré est un must via cette pratique, sinon la capacité des utilisateurs à naviguer rapidement dans le contenu sera inhibée.

Après avoir bidouillé avec cela, je pense que je peux créer un plugin JQuery pour, et utiliser cette pratique pour ma prochaine application web.

Assurez-vous que la quantité de contenu par défaut affichée en premier montre un élément en bas (en supposant un défilement vertical) qui n'est que partiellement révélé, informant ainsi l'utilisateur qu'il y en a plus en dessous, et ils peuvent l'atteindre / le révéler.

Voici ce que j'essaierais:

Un dégradé doux qui recouvre un peu le contenu. Cela indique qu'il y en a plus ci-dessous. De plus, vous pouvez bien sûr ajouter une petite flèche.

La façon dont vous voulez le faire dépendra de qui, selon vous, sera le public et du contexte.

Les techniques de repérage habituelles telles que les flèches et les graphiques qui se poursuivent au-delà du pli peuvent aider l'utilisateur à voyager. Alternativement, vous pouvez opter pour un système de menu / navigation ancré, que de nombreux sites à page unique utilisent.

La solution la plus flagrante et la plus laide serait une fenêtre contextuelle qui informe les utilisateurs de faire défiler vers le bas pour plus de contenu, puis se cache lorsque l'acteur défile (style de notification des cookies).

Une autre option consiste à changer le curseur lorsque vous survolez l'élément en quelque chose qui indique le défilement, comme une flèche en mouvement qui pointe et indique vers le bas, ou quelque chose qui indique «en savoir plus en faisant défiler».

Bien sûr, cela ne fonctionne que pour le bureau.