Blog

UX Tips 111 | Les cartes de recommandations Shazam

Posted by Netwave on 08/01/19 10:36

Les applications Web et mobiles s'éloignent de plus en plus de l'approche en page pour se transformer en expériences totalement personnalisées nécessitant l’agrégation de nombreux éléments de contenu. La façon dont ce contenu est désormais présenté prend bien souvent la forme de cartes.

Le modèle d'interaction basé sur les cartes se répand assez largement et vous pouvez voir des cartes presque partout, des sites de prêt-à-porter aux applications de rencontres en passant par les applications de livraison à domicile.

C'est notamment le cas pour les recommandations personnalisées sur l'application Shazam.

Que sont les cartes ?

Les cartes sont ces petits rectangles pleins d'images et de textes qui servent de points d'entrée à des informations plus détaillées. Le terme «carte» est une excellente métaphore, car l'aspect de ces dernières ressemble à de réelles cartes de jeu.

Avant les applications Web et mobiles, les cartes étaient déjà présentes autour de nous : cartes de visite, cartes pokémon et même les post-it peuvent être inclus dans cette catégorie. En résumé, les cartes au sein de nos interfaces représentent un contenu, tout comme dans notre quotidien offline.

Shazam et les cartes de recommandations

Dans l'onglet Discover de l'application Shazam, le contenu est agencé sous forme de cartes que l'on peut faire défiler en balayant son écran verticalement. Les mises en scène des cartes sont variées. On trouve des cartes composées à majorité de texte ou bien inversement, majoritairement constituées d'images.

Toutes ont la caractéristique de comporter un lien ou un élément de design invitant à l'action. Ils incitent l'utilisateur à explorer les détails d'une carte ou bien à acheter une musique sur Google Play.

Ce jeu de cartes est constamment mis à jour en fonction des activités d'écoute de l'utilisateur. Ce type d'interface pourrait facilement être transposable à un site ecommerce de prêt-à-porter — l'historique de navigation et d'achats nourrissant la génération de recommandations sous forme de cartes au sein d'un écran dédié.

Les avantages des cartes pour une application ecommerce

Les cartes peuvent être appliquées à une variété de contextes, mises en œuvre correctement, elles peuvent améliorer l'UX d’une application. Voici quelques raisons pour illustrer pourquoi les cartes peuvent être indiquées dans le contexte d'une interface ecommerce.

Lisible

Les cartes divisent le contenu en sections, de la même manière que les paragraphes de texte groupent les phrases en sections distinctes. Elles rassemblent diverses informations pour former un contenu cohérent. Les cartes évitent également les murs de texte, qui peuvent paraître intimidants ou fastidieux.

Visuellement plaisante

La design d'interface basé sur des cartes repose généralement sur des images. En réalité, le poids des images est l'ingrédient essentiel du design à base de cartes. Elles attirent immédiatement et efficacement le regard de l'utilisateur et sont une invitation au clic ou au tap.

Responsive friendly

Les cartes sont un élément d'interface doté d'une grande flexibilité. Elles sont donc un bon choix pour un design responsive qui s'adapte à différentes tailles d'écran. Les cartes agissent comme des conteneurs d'information qui peuvent facilement être agrandis ou réduits. Cette caractéristique permet de créer une esthétique unique sur plusieurs périphériques et d'établir une UX cross-platform cohérente pour l'utilisateur, quel que soit le périphérique.

Maniable

Au sein d'une application, les cartes ont les mêmes caractéristiques que celles de leurs consoeurs offline. Les utilisateurs apprécient leur simplicité et comprennent intuitivement comment les manipuler : "je retourne une carte pour obtenir plus d’informations ou je passe d'un simple mouvement de pouce à la carte du dessous pour voir la suite des contenus".

Conclusion

Les cartes sont devenues une partie essentielle du design d'applications. Elles sont la garanties d'un design réussi offrant une grande utilisabilité. Derrière leur aspect simple, elles constituent l’un des formats de mise en page les plus flexibles pour la création d’expériences riches en contenu.

Elles se prêtent parfaitement à la mise en scène de recommandation de produits. C'est un format que les utilisateurs pressés par le temps ont l'habitude de rencontrer dans leur applications mobiles du quotidien. Les cartes sont idéales pour mettrent en scène des images de produits et pour consommer rapidement une grande quantité d’informations.

 

On en parle ?!

Avez-vous des commentaires, des questions, de l'amour ou de la haine ? Envoyez tout ça à contact@netwave.eu 💌, ou, envoyez un tweet à @netwavecorp

Rédigé par : @GuillaumePalayer - Magazine du Webdesign.

Topics: E-commerce, UX tips

Restez informé avec le récap hebdo

Catégories

Plus de catégories

Articles récents