web-dev-qa-db-fra.com

Comment rendre le défilement horizontal évident?

Le projet actuel sur lequel je travaille actuellement a un écran sur lequel nous affichons une liste de contenu que vous pouvez faire défiler verticalement et lorsque l'utilisateur appuie sur le bouton de partage sur le contenu, il charge une liste de personnes avec lesquelles vous pouvez partager le contenu.

Au lieu d'ouvrir un nouvel écran/activité pour afficher une liste de personnes, j'ai montré une liste de personnes sur le même écran en bas. La liste contient des photos de personnes ainsi que le nom indiqué sous ces photos. La liste peut défiler horizontalement.

Problème - Je ne sais pas comment rendre horizontale horizontale. Il y a plusieurs façons de le faire, mais toutes ont une sorte de problème

Sol 1- Affiche le dernier élément [image + nom] partiellement visible à l'écran mais qui ressemble à un bug dans l'application.

Sol 2 - Donnez une flèche pointant vers la droite et lorsque l'utilisateur tape dessus, la liste défile vers la gauche mais ce n'est pas naturel. Si quelque chose est horizontal, les gens peuvent le faire défiler horizontalement en faisant glisser horizontalement

Ou peut-être que je pense trop que les gens pourraient ne pas comprendre le défilement horizontal.

20
B L Λ C K

Je pense que l'idée d'un élément partiellement visible (sol 1) est aujourd'hui quelque chose d'acquis (cela vient de windows metro UI, en 2010!).

À mon avis, pour le rendre moins buggé, vous devriez essayer d'utiliser sur la liste des éléments un dégradé transparent sur la bordure et peut-être faire la même chose sur le côté gauche (et créer un "anneau" d'éléments qui encercle les éléments) .

Quelque chose comme ça: enter image description here

34
Marco Tatta

Je pense que la réponse de Marco T est une excellente solution pour votre première option. Je voudrais offrir une solution pour votre deuxième suggestion

Donnez une flèche pointant vers la droite et lorsque l'utilisateur tapote dessus, la liste défilera vers la gauche mais ce n'est pas naturel. Si quelque chose est horizontal, les gens peuvent le faire défiler horizontalement en faisant glisser horizontalement

Pourquoi ne pas proposer les deux? Pour les utilisateurs de bureau, il est parfaitement logique d'avoir une flèche à droite qui montrera les éléments à droite de la plage actuellement visible, ie faites défiler vers la gauche . Peut-être qu'une petite barre/poignée de défilement horizontale qui ne s'affiche que lorsque vous survolez le bord inférieur est utile, de sorte que vous pouvez la saisir avec votre souris et vous déplacer rapidement dans la liste tout en maintenant le bouton enfoncé.

Pour les appareils à écran tactile, le balayage est l'opération la plus naturelle. Étant donné que le bouton fléché vers la droite à droite de la bande indique que la liste défilera horizontalement, il est logique d'essayer de faire défiler la liste, et les utilisateurs modérés à experts seront ravis de voir ce travail. Les utilisateurs novices peuvent simplement appuyer sur le bouton fléché.

J'espère que le texte est clair, voici un croquis grossier qui montre les deux éléments (la flèche droite, ainsi que la poignée de défilement qui apparaît lors du survol de la souris)

enter image description here

18
CompuChip

Ma recommandation est de ne pas utiliser le défilement horizontal. Utilisez plutôt des balayages gauche-droite.

D'une manière générale, les utilisateurs savent faire défiler verticalement, et ils savent faire glisser horizontalement. La métaphore fait défiler une page et glisse vers l'avant et l'arrière dans une pile de pages.

Lorsque vous cherchez à les faire défiler horizontalement, vous pourrez peut-être créer une interface où ils sont censés glisser à gauche et à droite à la place. Si vous affichez une photo centrée avec le bord gauche de la photo suivante à sa droite et le bord droit de la photo précédente à gauche, vous pouvez rendre évident que vous avez un petit carrousel de photos à parcourir.

10
Simon White

Ayez une superposition sur le dessus.

Ou Vous pouvez aller avec une couleur d'arrière-plan avec une certaine opacité afin qu'elle donne un aspect décoloré.

Le gradient est également une bonne option à essayer.

1
Gaurav