Cartes vs Listes, comment elles impactent UX
Deux des façons les plus courantes d'organiser le contenu d'un site Web sont les cartes et les listes. Chacun a ses avantages et ses inconvénients. Alors que les listes existent depuis les débuts du Web, la conception basée sur les cartes n’est devenue que récemment une force à prendre en compte et un choix de plus en plus populaire pour l’organisation des contenus.
Les cartes et les listes sont des moyens uniques pour afficher le contenu, ce qui signifie qu'elles sont respectivement meilleures et pires pour des situations spécifiques. La clé pour les concepteurs Web, bien sûr, est de comprendre quand utiliser exactement chacun permet aux utilisateurs une meilleure expérience utilisateur. Les réponses peuvent simplement vous surprendre et vous amener à regarder les principes de conception un peu différemment.
Ici, nous explorons quand il est approprié dans la conception de sites Web d'utiliser des cartes plutôt que des listes et vice versa.
Qu'est-ce qu'une carte? Qu'est-ce qu'une liste?
Pour nous aider à comprendre que l'utilisation d'une carte ou d'une liste est plus appropriée à des fins d'UX, cela nous aide grandement à comprendre d'abord ce que chacun est et ce que chacun fait (ou est censé faire).
Une carte est un conteneur qui affiche divers éléments d'information connexes, à partir desquels les utilisateurs peuvent obtenir encore plus d'informations. Bien que ce soit toujours un produit de design plat, il est mieux classé comme étant Flat Design 2.0, car il a généralement des effets 3D légers comme les ombres portées pour indiquer la cliquabilité. Les effets 3D tels que la profondeur visuelle fonctionnent comme le signifiant pour les utilisateurs, leur indiquant qu'ils peuvent cliquer pour plus d'informations.
Il est intéressant de noter qu’il ya une sorte de dichotomie avec une carte, car elle ressemble généralement à une carte à jouer, à la fois en forme et en taille. Cela évoque le skeuomorphisme obsolète, où les éléments graphiques ressemblaient à des éléments réels.
Une liste est une page où les critères de recherche ou les habitudes de navigation d'un utilisateur les prennent. La page de liste comporte essentiellement un certain nombre d'éléments ou d'entrées candidats. Par conséquent, une liste doit faciliter une analyse visuelle efficace et rapide pour une UX correcte. C'est une distinction importante qui nous aide à différencier lorsqu'une liste est plus appropriée qu'une carte, en termes de facilité d'utilisation.
Quand utiliser les cartes
Maintenant que nous connaissons les principales différences entre les cartes et les listes, il nous est plus facile de savoir en toute confiance lorsque l’utilisation de chacune d’elles est appropriée dans la conception Web.
Pour la navigation d'information (par opposition à la recherche)
Les cartes rendent difficile voire impossible aux utilisateurs de discerner facilement l’importance du classement du contenu. Par exemple, les cartes ne fournissent aucune information évidente sur l'ordre dans lequel le contenu doit être affiché sur une page, car le contour / les bordures des cartes sont similaires. Certes, la recherche de base sur le suivi des yeux suggère toujours que les utilisateurs commencent d'abord par le contenu en haut et à gauche de la page, mais que les listes facilitent grandement l'utilisation de cette méthode fondamentale d'absorption du contenu en ligne.
C'est pourquoi l'utilisation de cartes pour parcourir d'énormes collections, comme celles de Pinterest, par exemple, est idéale. Lorsque vous parcourez simplement les résultats de recherche sur Pinterest, au lieu de déterminer l'ordre d'affichage, le défilement infini des résultats basés sur des cartes rend la navigation agréable, amusante et facile. Chaque fois que vous voyez quelque chose d'intéressant, vous pouvez cliquer immédiatement sur la carte pour plus d'informations. C'est une gratification instantanée.
Pour les regroupements d'éléments divers
Selon l'application ou le programme que vous utilisez, vous rencontrerez éventuellement un tableau de bord qui utilise une conception basée sur des cartes pour faciliter la distinction entre différents types de contenu. Ceci est un exemple de la force des cartes pour permettre aux utilisateurs d'identifier rapidement les différents types de contenu qu'ils gèrent.
Comme les cartes utilisent des frontières pour établir des limites visuelles, elles sont idéales pour regrouper des éléments disparates.
Quand utiliser les listes
Les listes peuvent être un peu plus simples que les cartes, peut-être parce qu'elles existent depuis plus longtemps dans la conception Web. Par conséquent, il est plus facile de déterminer quand les utiliser correctement.
Pour un balayage efficace des yeux
Les listes sont préférables lorsque les utilisateurs doivent rechercher rapidement quelque chose sur un site, par exemple lorsqu'ils consultent la page de résultats de recherche après avoir saisi leurs termes de recherche. Les listes qui sont verticales et où un élément se trouve sur une rangée au-dessus aident à concentrer les yeux de l'utilisateur beaucoup mieux que les cartes, car les listes sont fixes alors que les cartes ne sont pas en position fixe dans les lignes.
Pour les petits écrans
En d'autres termes, les cartes prennent beaucoup plus de place à l'écran. Cela rend leur utilisation sur les appareils mobiles et sur certaines tablettes problématique car cela oblige les utilisateurs à faire défiler la page pour voir plus de choix plus tôt que lorsque les listes sont utilisées. Étant donné que les éléments d'une liste sont simplement placés sur de courtes lignes sur toute la longueur d'une page, les utilisateurs peuvent voir plus de choix sans avoir à se fier à la mémoire à court terme. voir plus d'éléments).
Dès que votre conception exige que les utilisateurs se souviennent de leurs choix plus haut sur l'écran, ils commencent à rencontrer charge cognitive , qui nuit à UX. La charge cognitive signifie que votre cerveau doit redoubler d'efforts pour se souvenir de quelque chose pendant qu'il traite encore de nouvelles informations supplémentaires. Cela conduit à un ralentissement de la vitesse des tâches et, potentiellement, à l'abandon complet d'une tâche utilisateur.
Sur l'application App store de mon smartphone, les catégories d'applications sont organisées dans une liste verticale soignée qui affiche huit éléments sur une page, sans que je crains d'avoir à faire défiler la liste pour en voir plus et mémoriser les choix précédents. Si cela avait été fait dans une mise en page avec des cartes beaucoup plus grandes, je n’aurais pu voir que quelques choix au maximum, entravant mon UX.
Cartes vs listes
Les cartes sont simplement un système organisationnel permettant d’afficher des éléments d’information liés à des informations supplémentaires dans la navigation du site. Ils sont parfaits pour permettre aux utilisateurs de parcourir de nombreuses informations et de regrouper des éléments.
Les listes sont des pages qui affichent des résultats de recherche et des entrées qui sont des éléments candidats correspondant à la requête de recherche. Ils sont idéaux pour organiser un contenu similaire en alignement vertical.
Souvenez-vous de cette distinction vitale entre les deux et vous organiserez le contenu de manière magistrale avec un excellent design.