Le Card Design : vers un nouveau paradigme UX


User Experience

Fortement popularisé par les réseaux sociaux, le Card Design est l’une des grandes tendances actuelles en design d’interfaces. Adoptée par de plus en plus de sites et applications mobiles, cette approche ergonomique est déjà considérée comme le futur du web.

Inspiré par le Metro Design design de Windows et démocratisé par la plateforme Pinterest, le Card Design consiste en une présentation du contenu sous forme de petits blocs agencés sur une grille.

windows metro 1024x576 Le Card Design : vers un nouveau paradigme UX

Le modèle UI Metro créé par Windows pour son système d’exploitation Windows 8

 

pinterest screenshot 1024x650 Le Card Design : vers un nouveau paradigme UX

Pinterest utilise le principe de l’infinite Scroll pour naviguer à travers ses 50 milliards d’épingles

 

Généralement composée d’un titre, d’un rich média et d’un texte concis, l’objectif d’une Card est de proposer un condensé d’informations et d’y ajouter des possibilités d’interactions via des liens et/ou des boutons. Nettement plus digeste que les pages classiques, ce principe ergonomique a naturellement trouvé sa place dans le contexte actuel de sur-information. En effet, avec une navigation simple, cette architecture permet aux internautes de scanner rapidement une quantité importante de contenu et d’accéder de manière plus directe aux informations recherchées.

Google Card 300x193 Le Card Design : vers un nouveau paradigme UXGoogle card UI 300x223 Le Card Design : vers un nouveau paradigme UX

Décomposition d’une Card de l’application Google Now

 

Un design user friendly

Synthétiques mais aussi esthétiques, les Cards s’appuient dans leur aspect visuel sur les principes du Flat Design et du Material Design en proposant une mise en forme minimaliste et intuitive qui sait mettre en évidence les actions de l’utilisateur. Le choix des aplats de couleurs, des typographies et de l’iconographie crée une unité et un sens. Certaines Cards intègrent des micro-interactions qui les rendent encore plus attrayantes. Succinctes, jolies et faciles d’appréhension, l’efficacité de cette approche UX-UI est incontestable !

delivery card interactive Le Card Design : vers un nouveau paradigme UX

Application pour un service de livraison (Dribble)

 

Pour une meilleure navigation mobile

Au delà de leur aspect visuel, si les Cards sont appréciées c’est parce qu’elles disposent d’un atout technique non négligeable : elles sont parfaitement compatibles avec les architectures responsives ! Placées sur une grille, leur agencement peut évoluer afin de s’adapter à n’importe quel point de rupture ou taille d’écran.

Une approche ergonomique qui se retrouve également de plus en plus dans la construction des applications mobiles. De part leur consistance, les Cards sont adaptées à la navigation tactile et particulièrement à la fonctionnalité de swipe. L’exemple le plus probant est très certainement l’application de rencontre Tinder qui permet de balayer d’un doigt les “cartes” des autres utilisateurs.

swipe navigation Le Card Design : vers un nouveau paradigme UX

Le glissement a été démocratisé par le leader de l’application de rencontres Tinder

  

Faciliter l’agrégation de contenu

Réduites à leur essence même, les Cards sont intelligibles et peuvent s’affranchir de tout élément contextuel. Elles deviennent alors un atout pour des plateformes sociales qui vont pouvoir ré-agréger plus facilement ces morceaux de contenus et notamment les afficher en fonction des intérêts témoignés par l’utilisateur, sa localisation, son profil, ses habitudes de navigation, les interactions de sa communauté…

 Le Card Design : vers un nouveau paradigme UX Google Now Le Card Design : vers un nouveau paradigme UX twitter card Le Card Design : vers un nouveau paradigme UX

Twitter, Facebook et Google (Google Now et Google Plus) ont intégré dans leur architecture les Cards

 

Les plateformes sociales ne sont pas les seules à adopter cette ergonomie. Le modèle se diffuse progressivement sur le web et les Cards se retrouvent sur d’autres typologies de site web : e-commerce, site de marque, plateformes médiatiques… touchant différentes industries.

Site HM 247x1024 Le Card Design : vers un nouveau paradigme UXairbus site 385x1024 Le Card Design : vers un nouveau paradigme UX

Le site e-commerce H&M et le site Groupe Airbus 

 

Deezer plateforme 1024x513 Le Card Design : vers un nouveau paradigme UX

La plateforme musicale Deezer

 

Guardian Le Card Design : vers un nouveau paradigme UX

Le site web du quotidien britannique The Guardian

 

BNP les bons comptes entre amis iphone Le Card Design : vers un nouveau paradigme UX

L’application Les bon comptes entre amis de la BNP Paribas

 

Avec l’évolution des objets connectés, ces blocs de contenus sont une solution efficace aux problématiques du multi-device. Flexibles et nomades les Cards s’invitent sur nos tablettes, télévisions, lunettes ou montres, leur offrant un avenir prometteur !

 

 

Sources

https://blog.intercom.com/why-cards-are-the-future-of-the-web/

https://blogue.o2web.ca/comprendre-le-card-ui/

Laisser un commentaire