J'ai 7 produits. Le site a beaucoup de pages de contenu (texte). Au bas de chaque page de contenu, je souhaite répertorier mes produits sous forme de miniatures.
Version A: cliquez sur une vignette pour ouvrir un modal avec les informations sur le produit
Version B: Il y a une page produit qui répertorie tous les produits avec ses informations les unes au-dessus des autres. Cliquez sur une miniature pour amener l'utilisateur à la page du produit, où la page défile automatiquement vers les informations relatives au produit.
Quelle version serait plus utilisable et pourquoi?
Option C: développez la carte pour afficher plus d'informations.
Je préfère cette méthode aux modaux, car je trouve que les modaux interrompent le flux de l'interaction - basculant le focus vers potentiellement une autre partie de la page (pas tellement sur mobile, mais cela brise toujours votre contexte).
Développez la miniature elle-même - vous savez que l'utilisateur regarde déjà ici, donc tout cela fait partie du même flux. La vignette elle-même peut couvrir les autres vignettes, ou elles pourraient toutes s'étendre dans un espace sous leur conteneur. Dépend de vous.
L'avantage de ne pas aller sur une nouvelle page est que l'utilisateur peut jeter un œil au contenu avant de choisir de changer de page. Votre miniature développée peut inclure ou non un lien vers la page du produit - cela dépend de ce que vous voulez qu'ils fassent.
J'espère que cela pourra aider :)
La règle générale que j'applique au passage de modal v à une page est la suivante.
Si les informations ou la transition sont temporaires et que le focus de l'utilisateur doit être renvoyé à la page après avoir assimilé les informations ou interagi avec un petit formulaire et que le focus ne change pas, alors un formulaire modal est la bonne solution. .
Si le lien ou le formulaire prend l'utilisateur hors du flux actuel et qu'il ne devrait pas revenir au flux d'origine, déplacer le focus vers le nouveau flux par transition vers les nouvelles pages de flux est la bonne solution.
J'irais pour la version B, page séparée. Les modaux ne s'adaptent pas bien, l'ajout d'informations supplémentaires a tendance à les casser. Une page séparée vous permet également, ainsi qu'aux visiteurs, de créer un lien direct vers les informations sur le produit.
Les modaux ne se mettent pas à l'échelle correctement. Dès que le contenu d'un modal dépasse la hauteur de l'écran, vous devez ajouter des barres de défilement ou couper le contenu. Sur mobile, cela se produit rapidement. Le design typique que les utilisateurs reconnaissent comme un modal (probablement ne l'appelle pas comme ça mais lui!), Est une superposition plein écran avec une boîte au milieu. Cliquer sur la superposition ferme la boîte. Cela ne fonctionne plus vraiment quand il y a trop de contenu.
Quelques exemples: gauche est un mauvais modal, droite est un bon modal.
La seule bonne façon de répondre à votre question est de comprendre comment vos utilisateurs utilisent votre application et interagissent avec vos produits.
Vos deux suggestions supposent que vos produits nécessitent une attention particulière.
Modals sont un bon choix si vos utilisateurs passent souvent d'un produit à l'autre et les interactions sont limitées.
Nouvelle page est un bon choix si les interactions sont diverses et quelque peu complexes, mais vous ne facilitez pas le passage à d'autres projets.
La technologie utilisée pour créer le site Web joue un rôle important dans le choix de la disposition du site Web.
Si l'utilisation d'une page distincte pour chaque produit prend plus de temps à charger la page, l'utilisateur attendra ne sera pas une meilleure expérience utilisateur. Alors que les modèles avec beaucoup d'informations défilantes seront également mauvais sur un site Web.
L'utilisation de technologies telles que Single Page Application (SPAs) charge les données lorsque le site se charge pour la première fois et affiche instantanément les informations en cas de besoin sans charger la page. Cela permet à l'utilisateur de suivre où ils se trouvent et d'où ils ont atteint cette page.
Ma conclusion est d'utiliser plusieurs pages dans une seule page serait appropriée.