09/07/15 par Nima Ehtemam

De plus en plus, il apparait que l’utilisabilité sera développée selon une approche d’application.

Les multiples fonctionnalités interactives d’un contenu ou de data, seront présentées dans une interface, selon des sections qui ressembleront, en fait, à des Cartes. C’est ce qu’on nomme le Card UI.

Types de Cartes

Il y a différents types de “Card Ui”. Par exemple le “Card” est représenté à titre d’application, une alerte selon le data d’information qui provient d’un lien applicatif externe.
Voici les exemples de 3 différentes options pour une structure de Card UI.

 

 

L’anatomie du Card Ui

Le “Card UI” est aujourd’hui – et c’est une tendance lourde à laquelle on promet un long avenir – la nouvelle approche pour les interfaces utilisateurs. En fait, on l’a tous déjà plus ou moins apprivoisé sans le savoir. Plusieurs applications et les réseaux sociaux comme Facebook, Pinterest, Twitter, l’appliquent déjà depuis un certain temps. Bien que familiers avec le design, son concept et sa théorie demeurent méconnus.

Voyons d’abord trois sections qui aident à comprendre l’interactivité de l’information.

Conception et structure

La conception d’interface peut être exploitée sous différentes architectures. Chaque structure de Card UI devrait être adaptée en fonction de l’accessibilité de l’appareil; qu’il s’agisse d’une tablette, d’un mobile, d’un ordinateur de bureau et – de plus en plus – de montres intelligentes. Si on pense aux wearables de façon générale, l’utilisation Card Ui prend toute sa pertinence.

L’objectif de cette nouvelle conception interactive est de faciliter l’aperçu visuel d’un sujet et d’y ajouter des possibilités d’interactions. Plus bas, un exemple de design d’un blogue conçu avec une structure de Card UI.

Environnement d’un “Dashboard”

Il est important de pouvoir adapter et personnaliser le format des «Cards», afin d’obtenir un affichage optimal, et ce, peut importe l’appareil utilisé. Dans le cas suivant, on se transporte dans un environnement de Dashboard.

On peut y voir l’interaction de plusieurs «data informations», qui illustrent les actions associées à l’utilisation de différentes applications externes par un utilisateur.

Les formats optimisés

Les formats du Card design peuvent varier en structure et en design. L’important c’est que les structures soient optimisées pour être fonctionnelles d’un point de vue ergonomique. L’appareil d’usage va donc définir la structure et les formats à considérer.

L’avantage du Card UI en contexte de multi-plateformes, est de rester uniforme selon un même API. Dans certains cas, on peut même dire que ça rend l’utilisabilité plus efficace que du responsive web design, dont la navigation doit être adaptée selon l’espace d’interface d’un appareil.

L’influence des médias sociaux

Avec l’évolution et la progression des médias sociaux, les designers d’interactions vont choisir plus fréquemment de concevoir en utilisant le Card UI. Comme les Facebook, Twitter, Instagram, etc. deviennent une destination de premier plan pour la consultation de nouvelles et de contenus de toutes sortes; ceux-ci gagneront en pertinence et en qualité d’expérience avec une approche design davantage orientée Card UI.

Google notamment utilise beaucoup le Card UI conception à travers ses nombreuses applications.

À titre de référence, je vous recommande une vidéo-conférence très interessante de Chris Tse sur le “Stacking the Card Deck” qui illustre à merveille tout ceci.