Design : Aide-mémoire de l’interface utilisateur: liste vs grilles

Les vues en grille fonctionnent bien lorsque vous essayez d’afficher l’image, mais elles vous permettent également d’afficher plusieurs produits côte à côte en même temps. Cela permet également à l’utilisateur de comparer visuellement différents éléments. L’inconvénient ici est qu’il n’y a pas beaucoup d’espace pour le texte.

À quoi ressemble une grille

Parce que les grilles sont principalement utilisées pour les produits, elles ont tendance à avoir de grandes images avec copie en dessous. La copie est généralement le nom de l’article et le prix, et peut-être un ou deux autres détails.

Bien qu’il existe de nombreux types de grilles, la plus courante est une grille standard où les conteneurs ont la même hauteur et la même largeur. Nous examinerons également la maçonnerie et les grilles justifiées. Je n’ai pas inclus de grilles personnalisées ici, car je n’ai pas encore trouvé de bons résultats de recherche qui les utilisent. Si vous souhaitez en savoir plus sur les grilles, cette donne une belle vue d’ensemble.

Quand utiliser une vue de grille:

• Si l’image de l’élément de résultat est la plus importante pour l’utilisateur.
• Si un utilisateur doit pouvoir comparer visuellement des articles (par exemple, comparer des chaussures).
• Si vos résultats de recherche n’ont pas besoin d’une description.

Ceinture standard

Une grille standard est lorsque tous les éléments sont de la même taille. Ce modèle sera probablement utilisé par votre site de vente au détail de l’usine. Cette grille permet de garder tous leurs produits propres et bien rangés, ce qui facilite la comparaison des articles par les utilisateurs.

Qui devrait envisager de l’utiliser: Magasins de vente en ligne de produits physiques, éventuellement des sites de portfolio (artistes, illustrateurs, etc.).
Pourquoi est-il bon: Il permet aux utilisateurs de comparer facilement les images et les prix des produits.
Qui l’utilise: Walmart, Amazon (parfois), Esty, la plupart des magasins de vente en ligne.

Grille de maçonnerie

J’ai découvert pour la première fois les merveilles des grilles de maçonnerie lorsqu’un ami m’a invité sur Pinterest alors que j’étais encore à l’université. * Soupir * les heures que j’ai gaspillées à organiser des conseils sur des endroits que je ne visiterais jamais, car il s’avère que l’étude du design graphique ne vous rendra pas riche.

Alors, qu’est-ce qui rend une grille de maçonnerie différente d’une grille standard? Dans une grille standard, la hauteur et la largeur sont les mêmes, tandis que dans une grille de maçonnerie, les hauteurs sont différentes. Cela permet aux images d’être affichées dans leurs proportions d’origine sans être recadrées à une taille définie. Cependant, plus l’image est longue en hauteur, plus elle obtient d’espace. Un grand nombre de spécialistes du marketing Pinterest utilisent cela à leur avantage et créent des images très longues afin d’obtenir plus de «temps d’écran» pendant que l’utilisateur fait défiler.

En règle générale, la plupart des grilles de maçonnerie rencontrées favorisent un «comportement de navigation»; la seule exception que je puisse trouver étant les magasins en ligne d’artistes et les sites de photographie.

Qui devrait considérer ce modèle: Sites d’intérêt et de portefeuille.
Avantages: Il encourage les utilisateurs à continuer le défilement.
Les inconvénients: Il est difficile de comparer des éléments.
Qui l’utilise: Unsplash, tumblr., Pinterest et certains sites de portfolio d’artistes / designers.

Grille justifiée

La première fois que j’ai remarqué une grille justifiée était sur les images Google, mais elle est également utilisée sur les blogs et les sites de photographie. Contrairement aux grilles de maçonnerie, les grilles justifiées redimensionnent les images afin qu’elles tiennent dans des lignes justifiées plutôt que dans des colonnes. Par défaut, la grille semble très nette, mais il lui manque le défilement des grilles de maçonnerie. (note latérale: à qui dois-je m’adresser pour ajouter « scroll-more-iness » au dictionnaire?)

Qui devrait considérer ce modèle: Sites d’images.
Avantages: Vous pourrez peut-être afficher plus d’images, ce qui encourage la comparaison en masse.
Qui l’utilise: Shutterstock, Google Images, Flickr.

Meilleures pratiques pour les ceintures

Voici quelques bonnes pratiques que vous pouvez suivre pour styliser votre grille.

Images des produits
Pour encourager les acheteurs potentiels, réfléchissez à la manière de faciliter la comparaison des produits. Vous pouvez le faire par;

• Utilisation des mêmes couleurs d’arrière-plan ou similaires. La plupart des magasins en ligne utilisent un fond blanc ou uni.
• Si vous vendez des vêtements, assurez-vous que vos modèles sont dans des poses familières. Aussi, évitez que vos modèles portent les vêtements à l’envers ou assis sur le poêle, ou toute autre chose qui Zara pense que c’est une bonne idée.

Longueur du titre
Quelle est la meilleure longueur pour un titre de produit? Souvent, vous n’aurez pas beaucoup de choix dans ce domaine, mais en règle générale – plus court est préférable pour les grilles car, selon le nombre de colonnes, vous n’aurez peut-être pas autant d’espace pour la copie. Et avoir une longue colonne avec des mots simples ne volera pas. Je recommanderais de décider du nombre maximal de caractères par titre d’élément (en fonction de l’espace horizontal, de la taille de la police et du nombre de lignes) et de demander aux créateurs de contenu de respecter cette limite.

Et évidemment, évitez d’avoir des descriptions ou toute autre chose qui sera considérée comme distrayant de l’objectif principal (l’image). Pensez à voir si vous pouvez vous évader sans même avoir de titre, comme Shutterstock.

Nombre de colonnes
Si vous vous attendez à avoir beaucoup de résultats par écran (par exemple un grand détaillant), vous devriez avoir plus de colonnes. Si vous vous attendez à n’avoir que quelques résultats par écran (par exemple, un détaillant), vous pouvez avoir moins de colonnes avec des images plus grandes. Pensez-y de la même manière que vous le feriez pour un magasin de brique et de mortier; « Bob’s Groceries » sur la route, aura des tonnes de produits sur leurs étagères, tous empilés les uns sur les autres. Alors que chez «Fancy Pants» sur la 5e Avenue, il y aura un vêtement par mètre carré.

Grilles sur mobile
La plupart des sites que j’ai examinés conservent leur grille sur mobile et passent à deux colonnes, à l’exception d’Amazon qui est passé à une vue de liste. Le fait d’avoir des images plus petites dans deux colonnes permet à vos utilisateurs de voir plus d’éléments à la fois et facilite la comparaison. Dans l’ensemble, si vous n’avez pas à modifier votre mise en page pour mobile, ne le faites pas. Économisez du temps de développement sur quelque chose de plus pratique comme cacher des œufs de Pâques ou créer des curseurs personnalisés, par exemple.