Support IVY : Encyclopédie #1 et site d'informations, Conseils, Tutorials, Guides et plus
  • Accueil
  • Questions & Réponses
  • Magazine
    • Conseil en relations
      • Astuces
    • Rédaction & écriture
    • Web Design
    • Réseaux sociaux
      • Facebook
  • Lifestyle
    • Food
  • Ressources
    • Graphique
      • PixelArt
No Result
View All Result
Support IVY : Encyclopédie #1 et site d'informations, Conseils, Tutorials, Guides et plus
  • Accueil
  • Questions & Réponses
  • Magazine
    • Conseil en relations
      • Astuces
    • Rédaction & écriture
    • Web Design
    • Réseaux sociaux
      • Facebook
  • Lifestyle
    • Food
  • Ressources
    • Graphique
      • PixelArt
Support IVY : Encyclopédie #1 et site d'informations, Conseils, Tutorials, Guides et plus
No Result
View All Result
Home Design & Graphique

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

19 juin 2020
in Design & Graphique
Reading Time: 12 mins read
Design : Aide-mémoire de l’interface utilisateur: liste vs grilles

Table des matières

    • 0.1 ArticlesA lire
    • 0.2 Design : Le design peut et doit faire mieux
    • 0.3 Design : Application des principes heuristiques pour évaluer un jeu mobile
    • 0.4 Design : Votre recherche d’emploi craint, mais cela ne signifie pas que vous le faites
    • 0.5 Design : La PlayStation 5 Reveal était un génie du marketing – un meilleur marketing
  • 1 Aide-mémoire de l’interface utilisateur: liste vs grilles
  • 2 À quoi ressemble une grille
  • 3 Ceinture standard
  • 4 Grille de maçonnerie
  • 5 Grille justifiée
  • 6 Meilleures pratiques pour les ceintures

ArticlesA lire

Design : Le design peut et doit faire mieux

Design : Le design peut et doit faire mieux

Design : Application des principes heuristiques pour évaluer un jeu mobile

Design : Votre recherche d’emploi craint, mais cela ne signifie pas que vous le faites

Design : Votre recherche d’emploi craint, mais cela ne signifie pas que vous le faites

Design : La PlayStation 5 Reveal était un génie du marketing – un meilleur marketing

Design : La PlayStation 5 Reveal était un génie du marketing – un meilleur marketing

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.

Exemple de grille.

À 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.

Exemple de grille standard.

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.

Exemple d’une grille de maçonnerie.

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?)

Exemple de grille justifiée.

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.

ShareTweetPin

Related Posts

Design : Le design peut et doit faire mieux
Design & Graphique

Design : Le design peut et doit faire mieux

Le design peut et doit faire mieux nous vivre dans un monde qui devient chaque jour plus dépendant de la...

Design & Graphique

Design : Application des principes heuristiques pour évaluer un jeu mobile

Application des principes heuristiques pour évaluer un jeu mobile photo par Austin Distel sur Unsplash photo par Halacious sur Unsplash...

Design : Votre recherche d’emploi craint, mais cela ne signifie pas que vous le faites
Design & Graphique

Design : Votre recherche d’emploi craint, mais cela ne signifie pas que vous le faites

Votre recherche d'emploi craint, mais cela ne signifie pas que vous le faites J'ai lutté contre la dépression. Comme des...

Design : La PlayStation 5 Reveal était un génie du marketing – un meilleur marketing
Design & Graphique

Design : La PlayStation 5 Reveal était un génie du marketing – un meilleur marketing

La PlayStation 5 Reveal était un génie du marketing - un meilleur marketing Pendant la révélation, la bande-annonce de "Spiderman",...

Next Post
Théorie de la mesure – Pourquoi j’ai acheté un clavier à 250 $ – L’innovation

Théorie de la mesure - Pourquoi j'ai acheté un clavier à 250 $ - L'innovation

React Native vs Full Native pour le développement mobile – Fabio Ferreira

React Native vs Full Native pour le développement mobile - Fabio Ferreira

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • Accueil
  • Questions & Réponses
  • Science
  • Business
  • Cryptomonnaie
  • Design
  • Marketing
  • Programmation
  • Politique de confidentialité
  • Gaming
  • Rankiing
  • A propos
  • Contact

© 2018-2020 SupportIVY - Premium Magazine.

No Result
View All Result
  • Accueil
  • Questions & Réponses
  • Magazine
    • Conseil en relations
      • Astuces
    • Rédaction & écriture
    • Web Design
    • Réseaux sociaux
      • Facebook
  • Lifestyle
    • Food
  • Ressources
    • Graphique
      • PixelArt