VUE MOBILE: informations supplémentaires dans le défilement horizontal vs modal vs accordéon
Je travaille sur la vue mobile d'un site Web avec des profils. Sur ces profils, il y a beaucoup de catégories/groupes remplis de balises et d'autres informations. Afin de garder la page propre et le visiteur concentré, les détails de ces catégories ne sont pas tous initialement visibles.
Au cours de mes recherches, j'ai trouvé trois possibilités pour afficher des informations détaillées:
Quels sont les avantages et inconvénients?
Au départ, je voudrais utiliser le premier exemple pour afficher du contenu graphique (images, icônes) mais je me demande si je manque des problèmes techniques ou UX majeurs? Existe-t-il un problème de défilement horizontal sur les sites Web mobiles? Et pourquoi AirBnB utilise-t-il par exemple la 2ème option dans leur application mais la 3ème option sur leur site mobile (rubrique commodités)?
Quelques questions à vous poser sur les utilisateurs:
Y a-t-il des avantages à voir plus d'images côte à côte dans une grille?
Par exemple, le contenu des vignettes exprime-t-il une couche supplémentaire d'informations lorsqu'il est répertorié dans une grille?
Posez-vous la même question lorsque la grille est développée dans l'option 3.
Quelques considérations supplémentaires:
Combien d'images aura un profil? Si elle est illimitée, une disposition de grille dans un écran séparé sera plus facile à parcourir que de les confiner dans une rangée.
Le même problème prévaut dans l'option 3, l'utilisateur peut souhaiter voir toutes les images tout en référençant d'autres contenus dans le profil. Cependant, il sera difficile de naviguer si les miniatures poussent le contenu supplémentaire à fond.
En résumé, l'option 1 pour quelques images, l'option 2 pour de nombreuses images, l'option 3 pour quelques images mais l'avantage de voir une grille.
Il existe probablement de nombreux autres cas d'utilisation pour votre site Web particulier. Exécutez des tests utilisateur si possible, sinon, remplissez le filaire avec le contenu réel et considérez les avantages et les inconvénients de chaque mise en page en tenant compte des besoins de votre utilisateur dans cette page particulière.
Par exemple, pour Airbnb, l'utilisateur doit peut-être constamment vérifier les images pour confirmer visuellement les équipements et la disposition de l'appartement lors de la lecture de la description. Il pourrait être plus facile pour eux de faire défiler simplement et d'ouvrir l'image, plutôt que d'avoir à ouvrir la grille dans un écran séparé et à choisir la bonne image.