UX trends 2016 : Les cards

On en a beaucoup parlé lorsque Google a popularisé ce pattern de design dans sa charte Material Design. Aujourd’hui, la disposition en cartes devient une évidence et commence à être adopté en masse à travers tout le medium applicatif et web comme un élément élégant, universel et surtout très pratique pour concevoir ses interfaces. A la fois mobile dans la compacité et Web par l’approche orienté contenu, certains UI designers ne jurent plus que par ce nouveau gimmick.

Voyons en ce cas par l’exemple comment fonctionne une card…

Google

Google et les cards

Une définition

La définition originale faite par Google est déjà assez claire: Il s’agit d’une planche matérialisée servant de point d’entrée à un contenu plus détaillé. Globalement, c’est donc un élément de navigation, pointant vers un contenu en Drill Down. A cela s’ajoute souvent un caractère informatif (ce qui va être afficher ensuite) qui le rapproche d’un widget ou d’une vignette, et un caractère visuel fort qui en fait un élément de composition spécifique.

Bien sûr, les cartes sont également une réminiscence (un peu skeuomorphique) d’un item connu et aimé du réel, puisque nous avons un rapport affectif évident avec les cartes du monde normal: Cartes à jouer, cartes de visite, cartes à collectionner, cartes de crédit, etc…

Un exemple de mood cards

Mood carding

 

Quand mettre des cards

Les cards sont à mon sens une résurgence de l’éditorialisation du print, à savoir une mise en colonnes ordonnée et hiérarchisée d’un sommaire de contenus. C’est donc très utile pour définir le poids des éléments sous-jacents, en terme d’importance, de mise en avant, de qualité de contenu… Cela permet également de profiter techniquement des colonage natifs utilisés en web via des frameworks tels que Bootstrap. Que du bénef donc, à condition de respecter les tenants et aboutissants : Avoir suffisamment de contenu, disposer d’une grille régulière, et surtout avoir de quoi alimenter les cartes avec du visuel.

Wired2

WIRED tire son layout de sa parution papier

Les cartes sont également très exploitées dans le cadre d’informations ponctuelles, comme dans les notifications, où elles jouent un rôle d’identifiant visuel de l’application qui les gère, de raccourci vers un contenu particulier, ainsi que d’un extrait de ce contenu.

Le revers des cartes

Parmi les défauts régulièrement mis en avant dans l’utilisation des cartes, on trouve essentiellement de mauvais usages, comme de disposer des cartes uniformément, contenant des placeholders vides ou n’ayant pas de sens.

Un autre souci vient du côté répétitif et lassant de ce genre de disposition. Les cartes utilisées à mauvais escient, plus comme un pattern de développement qu’un usage, retombent souvent dans l’ornière de la redondance visuelle.

Exemple 1 : Twitter

Bien sûr, dans les cas de mono-colonne et de disposition en flux, pour exprimer l’empilement et la spontanéité du contenu, les cartes sont les bienvenues. Souples à manipuler, elles ne sont pas forcément utiles ici pour aller naviguer vers plus d’interactions, bien que cela soit une des options, mais pour bien séparer les différentes contributions. Les actions les plus fréquentes, comme répondre, retweetter, etc…sont placées sur la carte, tandis que les options complémentaires sont disposées sur la popup de contenu. D’ailleurs, le fait que le contenu primordial s’affiche en popup (donc par-dessus) suggère que le contenu initial est bien dans le flux général.

Carte twitter

Carte twitter

Exemple 2: Pinterest

Bien entendu, des sites et applications comme Pinterest ont largement contribué à l’essor des cards, grâce au caractère dynamique de l’ensemble (tuiles irrégulières, composition asymétrique, etc…) et au fort aspect visuel. Parfois un peu trop fort d’ailleurs, tant le visuel prend le pas sur le textuel et noie un peu l’information. Cependant, le fait de disposer de plusieurs gabarits différents de cartes rend l’ensemble imprévisible et surprenant, donc inépuisable puisque utilisé en conjonction d’un scroll infini.

Les cards ont ici une volonté interactive minimaliste, puisque le sous-niveau est bien plus loquace. Ce dernier propose à son tour un tableau de cartes. On remarquera sur cette popup une navigation multi-axes probante.

Les cartes de Pinterest

Les cartes de Pinterest

Exemple 3: Dribble

Dribble, le site des créatifs, utilise des cartes dans le contexte de la galerie. Beaucoup de contenu, un raccourci vers le travail de l’artiste (avec une grande section de commentaires), et un roll-over affichant le titre de l’oeuvre. Efficace et précis pour mettre le visuel en avant. Le modèle permet aussi les images animées qui viennent apporter de la plus value visuelle, mais complique un peu le roll-over principal. Notez que certaines infos, en l’occurrence le nom et l’identifiant de l’auteur, pourtant attachées à la vignette, sont disposées à l’extérieur, dans les gouttières. Ce qui explique l’épaisseur anormale de cet espace, permettant toutefois de reposer l’œil. Notez également que les contenus dans la carte et hors la carte sont alignés sur la même grille, suggérant l’appartenance commune.

Un exemple de cartes Dribble

Les cartes par Dribble

Exemple 4: The Gardian (application Windows)

Encore une fois, lorsque l’on dispose à la fois de beaucoup de contenus et de bons supports visuels, les cartes deviennent une disposition naturelle. C’est le cas pour la presse, naturellement, comme dans cet exemple du Gardian et de son application Windows 10. On notera la facilité avec laquelle s’intègre la publicité dans un layout en cartes. Les informations redondantes sont traitées en gris light, une manière d’atténuer le côté répétitif de la disposition.

Les cartes du Gardian

Application The Gardian

Exemple 5: Les notifications

Annoncé lors de la Build Conference 2016, l’Anniversary Update de Windows laisse entrevoir un système de notifications enrichies, des espaces dédiés et des widgets utilisant bien entendu, un modèle étendu de cartes. Celles-ci devraient permettre un accès encore plus direct aux fonctions, un punaisage actif et du contenu temps réel enrichi. Nous en reparlerons donc dans très peu de temps.

Notifications Windows 10

Notifications Windows 10

Les liens :

Le Material Design de Google

Le site Dribble

Le site Pinterest

Le site Twitter

L’application The Gardian

WIndows 10 Anniversary Update

Les guidelines applicatives de Microsoft

 

Publicités