L’expérience utilisateur au cœur du design d’interaction

Design interaction

L’origine des interfaces

Qu’est-ce qu’une interface ?
En informatique et en électronique, une interface est un dispositif qui permet des échanges et interactions entre différents acteurs. Une interface humain-machine (IHM) permet des échanges entre un humain et une machine.” (source : Wikipédia).

Les interfaces ont été créées comme les télécommandes furent créées pour contrôler les télévisions ou les boutons sur le micro-ondes pour le faire fonctionner.
L’interface sur le web nous donne accès à de nombreux services, allant de l’e-commerce à la recherche d’informations, en passant par les divertissements.

L’UI (User Interface) est donc un moyen pour l’utilisateur d’interagir avec les sites, de communiquer, de faire comprendre son besoin afin qu’on lui apporte une solution.
C’est souvent ici que réside le problème : les interfaces web sont conçues pour répondre à des demandes génériques et sont parfois compliquées.
Les échanges entre la machine et l’utilisateur sont donc limités. Les utilisateurs comptent sur les pratiques “génériques” et l’affordance que certains éléments ont pour les guider.

Pourquoi l’interaction suscite-t-elle autant d’intérêt ?

Le design d’interaction apporte une partie de la solution au problème d’échange entre la machine et l’utilisateur à travers “le mouvement”. Celui-ci permet à l’interface de montrer des éléments à l’utilisateur.

Afin de capter l’attention des utilisateurs, les designers ne se contentent plus de faire ressortir des informations grâce à des couleurs impactantes mais utilisent le mouvement d’un élément que l’on fait arriver sur l’écran.

Il est ainsi très simple d’orienter l’utilisateur à un endroit souhaité sur un site ou sur une application. L’interaction crée un effet “waouh”et constitue une révolution : les sites / applications suggèrent aux utilisateurs des informations par le mouvement, mouvement qui rend l’interface plus vivante par la même occasion.

L’importance du “less is more”

[“Less is more”, phrase adopted by 1947 by architect Ludwig Mies van der Rohe as a precept for and architecture].

Le design d’interaction est devenu une tendance et comme toute tendance, on en fait pour la coolness qu’elle dégage. Il ne faut cependant pas tomber dans la surenchère d’effets de transitions, d’animation sur tous les éléments de l’interface et sur toutes les interactions sans objectif final. Cette surabondance d’éléments va nuire à l’expérience vécue par l’utilisateur.
Et si votre utilisateur a peur de cliquer sur une zone car il craint que son interface fasse un backflip 360°, vous aurez toutes les chances de le faire fuir et de le diriger directement vers un site concurrent !

Comme pour les tendances graphiques, si une animation vous plait, posez-vous d’abord les bonnes questions : Sera-t-elle bénéfique pour votre utilisateur ? Quel sera la logique de ce mouvement, quel message doit délivrer l’interaction / transition ?
Dans mon article sur le principe de continuité, j’explique pourquoi il est important de créer une logique de navigation basée sur les positions des éléments.
Dans ce genre de cas, les transitions et les mouvements liés aux éléments d’interfaces sont cruciaux et le moindre “effet de trop” peut considérablement nuire à l’expérience et donc à la compréhension globale du fonctionnement du service.

Ne pas penser des “pages” mais des parcours

Penser les conceptions en “flux” est crucial. Il n’est pas pertinent de faire du design d’interaction, de créer des animations si l’architecture d’information, l’arborescence et le principe de navigation ne sont pas pensés en mouvement.

Le design d’interaction n’est pas une brique supplémentaire pouvant être ajoutée entre la conception (wireframing) et la direction artistique (maquettage). Ce n’est ni une option ni un “nice to have” mais un “must have”, une ligne de vie de l’expérience utilisateur.Penser l’expérience en flux permet de créer des parcours beaucoup plus fluides, de supprimer cette habitude de “compter les clics” : en effet, si l’utilisateur ne sent pas les transitions de pages ou qu’elles lui paraissent naturelles, qu’est-ce qui l’empêcherait de continuer après “3 clics” ?

Les outils de design d’interaction

La tendance liée à l’interaction a fait naître beaucoup d’outils et de services permettant de créer des animations d’interface. FramerJS, Mavelapp et InVision, notamment, proposent des services intéressants :

  • Marvelapp propose de faire des prototypes simples permettant la navigation entre les écrans avec des effets de transition basiques. Le service est très simple à prendre en main et rapide à employer.
  • InVision davantage dédié aux itérations avec les différents membres d’un projet (client compris). Le service, simple d’emploi, propose des moyens de feedback, de versionning etc. Il est également désormais possible de faire de l’animation avec les éléments d’interface.
  • FramerJS est l’outil que j’utilise régulièrement pour mes projets. Il est plus compliqué à prendre en main que Marvelapp car il est basé sur une logique de “code” (coffeescript). Mais c’est aussi son plus grand point fort : étant basé sur du code, il permet de créer des prototypes très similaires au produit final.

L’équipe de FramerJS met régulièrement à jour l’outil et propose de plus en plus de modules et fonctions prédéfinis afin d’optimiser le temps de production des prototypes.
Bien que les outils de prototypage soient importants car ils nous permettent de mettre en oeuvre les concepts que nous imaginons, il est à mon sens important de ne pas s’enfermer dans un outil. La sélection de l’outil doit être liée aux besoins du projet et peut évoluer tout au long de la démarche.

Au-délà des écrans, pensons les IHM

Vous vous souvenez de la définition de l’interface, et notamment des IHM ? « Une interface humain-machine (IHM) permet des échanges entre un humain et une machine.”

Cette définition révèle bien que l’on parle d’interface entre l’homme et la machine, on ne parle pas d’écran !
Arrêtons nous un instant sur ce constat et imaginons notre futur. Depuis quelques temps, les IHM ont beaucoup évolué.

Aujourd’hui, il n’y a pas eu de réelle prise de conscience de cette évolution alors même que certains changements sont flagrants : avec les écrans tactiles ou des principes comme la reconnaissance d’empreinte ou le touch force, les utilisateurs ne cliquent plus mais touchent, glissent. De ces nouvelles gestuelles naissent de nouvelles utilisations. Les conceptions évoluent avec les utilisations et les utilisations changent en fonctions des IHM employées.
Il va donc falloir logiquement anticiper l’arrivée des nouvelles IHM, les comprendre pour proposer une utilisation naturelle aux utilisateurs. Cela implique d’une part de la veille sur des principes comme la réalité virtuelle, le motion capture, la commande vocale, le contrôle par activité cérébrale etc…

Toutes ces technologies ne sont pas nécessairement arrivées à mâturité mais elles ont toutes le potentiel pour devenir des IHM grand public. Il est donc important de les comprendre et de surveiller leurs évolutions.
Enfin, ce sont les tests utilisateurs et l’expérimentation des interfaces qui vont concrétiser les bonnes pratiques et celles à éviter.

En conclusion…

Vous l’aurez donc compris, lorsqu’on met l’utilisateur au centre de sa réflexion, l’important est de rendre son expérience positive. Pour cela, il faut la rendre intéressante, intuitive et efficace !
Le bon équilibre se trouve grâce aux questions que l’on se pose, les expérimentations que l’on met en place et la passion que l’on insuffle lors de nos projets. Il faut savoir apprendre des échecs, qui nous indiquent simplement que nous n’avons pas suivi la bonne méthode. Et enfin, il faut observer les tendances et oser d’autres solutions et de nouveaux outils.

Tags : , ,