Articles de blog, produits, services, membres d'une équipe, réalisations : sur la plupart des sites, une grande partie du contenu est présentée sous forme de cartes. Ces blocs rectangulaires regroupent une image, un titre, un court texte et un lien. Simples en apparence, les cartes UI demandent pourtant une conception soignée pour rester lisibles, cohérentes et faciles à utiliser.
Pourquoi les cartes UI sont partout
Les cartes présentent plusieurs avantages. Chacune forme une unité autonome, facile à repérer et à comparer avec ses voisines. Elles s'adaptent naturellement aux différentes tailles d'écran, en passant de plusieurs colonnes sur ordinateur à une seule sur mobile. Et elles permettent de présenter des contenus variés avec une structure commune.
La structure d'une bonne carte
Une carte efficace suit généralement un ordre logique :
- Un visuel qui illustre le contenu et attire l'attention ;
- Une catégorie ou une étiquette, pour situer le contenu ;
- Un titre, élément le plus important, court et explicite ;
- Un résumé de deux ou trois lignes maximum ;
- Des informations complémentaires : date, prix, durée, auteur ;
- Une action, souvent implicite puisque la carte entière est cliquable.
Hiérarchie et lisibilité
Le titre doit ressortir nettement, par sa taille et sa graisse. Les informations secondaires, comme la date ou la catégorie, sont plus discrètes. Limitez la longueur des résumés : des textes de longueurs très différentes produisent des cartes de hauteurs inégales, qui donnent une impression de désordre. Tronquer proprement les textes trop longs ou aligner les cartes sur une hauteur commune résout ce problème.
Une zone cliquable généreuse
Sur une carte, le visiteur s'attend à pouvoir cliquer n'importe où, pas seulement sur un petit lien « En savoir plus ». Rendre toute la carte cliquable améliore le confort, surtout sur mobile. Techniquement, il faut toutefois le faire proprement : un seul lien principal, sur le titre, dont la zone cliquable est étendue à toute la carte en CSS. On évite ainsi d'envelopper toute la carte dans un lien, ce qui produit une lecture confuse pour les lecteurs d'écran.
Des états visibles
Au survol, une carte doit réagir légèrement : une ombre plus marquée, un léger déplacement, un changement de couleur du titre. Cela confirme qu'elle est cliquable. Au clavier, l'élément actif doit être clairement visible grâce à un contour de focus. Ces retours visuels rendent l'interface plus intuitive. Les recommandations du W3C sur le focus visible précisent ce point.
Les images des cartes
Toutes les images d'une liste de cartes doivent avoir les mêmes proportions, sinon l'alignement est cassé. Les formats horizontaux, comme le trois-deux ou le seize-neuvième, sont les plus courants. Pensez aussi à la performance : les images doivent être redimensionnées à la taille d'affichage des cartes, et chargées à la demande pour celles qui sont situées plus bas dans la page.
Les cartes sur mobile
Sur mobile, les cartes passent généralement sur une seule colonne. Il faut alors veiller à ce qu'elles ne deviennent pas trop hautes : une image moins haute ou une disposition horizontale, image à gauche et texte à droite, permet d'afficher plus de contenu à l'écran. Les espacements entre cartes doivent rester suffisants pour éviter les clics accidentels.
Éviter la surcharge
La tentation est grande d'ajouter de nombreuses informations dans chaque carte : plusieurs boutons, des icônes, des étiquettes multiples. Chaque ajout complique la lecture. Une carte efficace donne juste assez d'information pour décider de cliquer, pas davantage.
Mon conseil
Regardez vos listes de cartes UI comme le ferait un visiteur pressé : trouve-t-il en un coup d'œil le titre de chaque carte ? Peut-il cliquer facilement sur mobile ? Les cartes sont-elles alignées et homogènes ? Corriger ces points améliore nettement la navigation, sur un blog comme sur une boutique.
