En tant que product designer, j’ai une affection particulière pour les cards. Ce sont des composants que j’utilise très souvent dans mes projets. Leur force ? Elles fonctionnent comme de petites pages condensées, faciles à organiser dans une grille. Visuellement, elles me rappellent les polaroïds de mon enfance : ces instantanés que j’annotais et accrochais aux murs de ma chambre.
Cette analogie illustre bien l’intérêt des cards : elles regroupent des informations essentielles dans un format visuel à la fois structuré et flexible. C’est pour cette raison que j’ai choisi de rédiger un guide des bonnes pratiques.
Que vous conceviez une interface logicielle ou un site web, les cards constituent un pattern de présentation des données particulièrement efficace — à condition de bien les utiliser.
Le bon format de carte : l’impact sur la lecture et les fixations oculaires
Le choix entre une carte verticale et une carte horizontale n’est pas neutre.
Une carte verticale favorise un parcours de lecture naturel, du haut vers le bas, réduisant ainsi l’effort cognitif. Elle est particulièrement efficace lorsque l’image constitue le point d’entrée, car elle capte immédiatement l’attention avant de conduire l’œil vers le texte.
La carte horizontale, quant à elle, fragmente davantage le regard puisqu’elle oblige à multiplier les mouvements latéraux. Toutefois, elle s’avère mieux adaptée aux contenus textuels plus longs, car elle offre un confort de lecture supérieur grâce à des lignes plus aérées et plus lisibles.
En ergonomie, on retiendra donc que l’orientation doit être choisie en fonction du contenu dominant afin de minimiser la charge cognitive.
Exemples de carte verticale et horizontale
Optimiser l’affichage sur mobile
Sur mobile, la question de l’optimisation de l’espace devient encore plus cruciale.
Les cartes horizontales limitent le défilement vertical et réduisent le coût de navigation, tandis que les cartes verticales s’intègrent mieux dans des grilles en colonne, mais au prix d’un scroll parfois excessif.
Le geste principal sur mobile est le défilement. Pour éviter une surcharge visuelle, il est préférable de choisir un format vertical pour la plupart des cartes, qui s’insère naturellement dans un flux. Le format horizontal peut être utilisé avec un défilement latéral (“carousel”), mais uniquement pour des contenus complémentaires, comme des suggestions.
Rendre une carte entièrement cliquable simplifie les interactions utilisateur, surtout lorsqu’une seule action est associée à cette carte. Ce choix de conception réduit la charge cognitive et encourage l’utilisateur à interagir plus facilement avec le contenu. En proposant une zone cliquable plus large, vous rendez l’interface plus accessible et plus réactive, ce qui fluidifie le parcours utilisateur.
Exemples d’affichage de carte sur mobileStructurer les informations dans la carte
L’organisation interne de la carte conditionne elle aussi son efficacité. Les informations essentielles, comme une photo de produit ou un prix, doivent être mises en avant dans les zones de forte visibilité, généralement en haut ou au centre.
Mettre en avant les informations clés
Identifiez les éléments les plus importants, ceux qui influencent le plus les décisions de l’utilisateur.
Par exemple, dans une fiche produit, ce sont l’image, le nom et le prix. Ce sont les points qui déclenchent l’intérêt ou le refus. Ces éléments doivent donc bénéficier d’une mise en valeur visuelle plus forte, avec une image plus grande et bénéficiant de marges autour d’elle.
Les séparateurs horizontaux peuvent aider à distinguer des éléments non liés ou à mettre en avant la hiérarchie entre eux. Cependant, ils sont rarement utiles dans la conception de cartes. Utilisez plutôt la typographie et les espaces négatifs pour créer de la distance ou faire ressortir le contenu.
Exemple de mise en avant d’informations clés
Données quantitatives (secondairement importantes)
Les données quantitatives figurant sur les cartes jouent un rôle important dans la prise de décision de l’utilisateur.
Evitez de les placer entre le titre et la description. Placez-les de préférence dans en bas de carte, séparés visuellement ou au dessus du prix.
Exemple de données quantitatives
Métadonnées (étiquettes, catégories)
Les étiquettes comme le type d’annonce sont importantes, mais ne font pas partie des principales données. Elles doivent être distinguées visuellement. Il est donc conseillé de les afficher dans un coin distinct de la carte, sous forme de chips colorées, afin de signaler qu’il s’agit de catégories et non d’informations descriptives.
Exemple de métadonnées
La gestion des hauteurs et des autolayouts
La gestion des hauteurs joue un rôle clé dans la lisibilité et la comparabilité des informations. Si chaque carte s’adapte librement à son contenu, on risque d’obtenir un affichage hétérogène où les titres, chiffres ou boutons ne s’alignent plus d’une carte à l’autre, ce qui complique la comparaison. Pour éviter cet effet, il est recommandé de définir une taille fixe pour certains éléments internes (par exemple, hauteur de l’en-tête, zone de contenu, emplacement des actions). Ainsi, même si la densité de texte ou de données varie, les repères visuels restent constants et l’utilisateur peut comparer rapidement les cartes entre elles.
L’autolayout vient compléter cette logique en gérant l’espacement, l’alignement et la répartition des blocs internes. On peut, par exemple, fixer la hauteur de l’en-tête et du pied de carte, tout en laissant la zone centrale s’adapter légèrement au contenu. Cette combinaison permet de maintenir une structure cohérente à l’échelle du tableau de cartes, tout en préservant une certaine flexibilité dans l’affichage des données.
Gestion des hauteurs et des autolayouts
Autolayouts Hug
1 Déterminé par le contenu
2 Variable, s’ajuste automatiquement
3 Si le contenu grandit, la carte s’étire. S’il est plus court, la carte se réduit
4 Affichage hétérogène, difficile de comparer les données
Autolayouts Fixed
1 Déterminé par avance
2 Reste toujours la même
3 Les contenus qui dépassent peuvent être tronqués, masqués ou créer un débordement
4 Uniformité, toutes les cartes ont la même hauteur
Les deux gestions d’hauteur comparées
Conclusion
Une carte UI bien conçue n’est pas seulement un élément graphique : c’est un outil ergonomique qui réduit la charge cognitive, facilite la navigation et hiérarchise les informations de manière intuitive. En guidant le regard, en clarifiant les priorités et en soutenant la prise de décision, elle devient un véritable vecteur d’efficacité cognitive au service de l’expérience utilisateur.
A retenir
Une carte verticale favorise une lecture fluide et met en valeur les images, tandis qu’une carte horizontale est plus adaptée aux textes longs.
Sur mobile, les cartes verticales s’intègrent bien dans le flux mais génèrent du défilement, alors que les horizontales réduisent le scroll et fonctionnent bien en carrousel. Une carte entièrement cliquable simplifie l’interaction, réduit la charge cognitive et améliore l’accessibilité.
Les informations clés doivent être mises en avant, les données secondaires regroupées dans un pied de carte, et les métadonnées présentées distinctement.
L’équilibre entre éléments à hauteur fixe (garantissant l’alignement et la comparaison) et sections adaptatives via autolayout (assurant la fluidité et l’accessibilité) est la clé d’un design efficace et scalable.
Cet article a été co-rédigé par Nathalie TRAN et Maxence FREIXA.
