Loading

L’humain est devenu le cœur de la recherche d’interface graphique, c’est une des priorités de l’expérience utilisateur. Le design ne doit pas plaire mais transmettre et lorsqu’il s’agit de communiquer, la solution c’est l’interaction.

Définition et règles de base du design interactif #UX #IxD Cliquez pour tweeter

 

delivery_cardDesign d’interaction sur mobile by Ramotion

 

Le principe de base lors d’un échange entre deux humains, c’est d’associer son positionnement à celui de son auditeur. Il faut savoir ajuster ses propos, sa posture, son éloquence à celui qui nous écoute. Exemple : Si une personne parle de haute voix et rapidement, lui répondre à voix basse et très lentement posera un malaise relationnel.  En design d’interaction, c’est le même principe, on cherche à communiquer ainsi il faut savoir analyser, s’adapter et réagir comme notre cible, l’Homme.

Voici les principes de base du design d’interaction définit à travers ces trois notions : l’analyse, l’adaptation et la réaction.

 

L’analyse : “Human First”

On entend partout  “mobile first“, ceci est dû à l’utilisation exponentielle des smartphones/tablettes et autres interfaces réduites et tactiles.  Mais si le portable fait fureur auprès des utilisateurs, c’est parce que son écran (interface) se rapproche d’avantage vers l’humain. On tient l’appareil dans nos mains, on dépose nos doigts dessus et on interagit avec le toucher et la voix. Ces méthodes d’utilisation facilitent la cohésion entre l’homme et la machine, ce qui devient un terrain de jeux pour le design d’interaction.

 

flowbtnby Alexander Bickov

 

Avant de jouer il faut étudier et dans ce cas là, c’est la cible qu’il faut connaître pour en déduire ses méthodes de navigations et ses habitudes de consommation ( oui Internet se consomme comme un produit ). Les interactions ne vont pas être les mêmes pour un fervent Apple Addict à celui d’une personne hermétique aux nouvelles technologies.

Il est nécessaire de savoir ce que l’utilisateur s’attend à voir sur un site et ce qu’il va être destiné à chercher. Ceci est variable en fonction de chaque personne. Cependant on peut distinguer un utilisateur d’un autre grâce à plusieurs critères : emploi, objectifs, préférences, désirs, situation, expérience, etc…

L’élaboration de ce persona va permettre de réfléchir à un design centré sur les besoins de l’utilisateur tout en lui offrant des “surprises” visuelles. Si, au préalable, vous connaissez les mouvements de vos utilisateurs, vous pourrez alors envisager leurs futures actions et ainsi mettre à disposition facilement ce qu’ils recherchent.

 

L’adaptation entre l’humain et le virtuel

Le design d’interaction s’appuie ( essentiellement ) sur la relation homme-machine, ainsi il faut prendre en compte la manipulation faite par l’homme. Afin d’adapter ce traitement à une utilisabilité agréable, il est nécessaire d’ajuster l’interface aux notions d’ergonomie cognitive.

On parle alors d’affordance et de recommandations ergonomiques :

  • Théorie de Gesltat
  • Incitation : conduit l’utilisateur à effectuer des actions spécifiques
  • Distinction : groupe des fonctions de même type facilitant l’accès, la mémorisation et l’apprentissage
  • Retour utilisateur : réunit les différents comportements de l’interface visant à montrer le fonctionnement du système
  • Lisibilité : éclaircir et limiter le nombre d’éléments différents présents sur l’interface
  • Fléxibilité : concerne la capacité de l’interface à s’adapter à différents contextes d’utilisation
  • Concision : afficher le contenu de façon à faciliter l’exploitation des données
  • Principes de Mayer

En parlant d’accessibilité et d’humain, il faut évidemment prendre en compte les notions physiques, comme les zones accessibles sur portable en fonction du positionnement de nos mains.

Screen-Shot-2015-09-03-at-09.41.21-520x373

Ainsi le design d’interaction se distingue principalement sur les boutons, les formulaires, la navigation et sur l’affichage dynamique du contenu. Parmi tout ces moyens il faut pouvoir surprendre l’utilisateur en y ajoutant des aspects humains et “naturels”. On sait tous que la nature trouve sa beauté dans les détails, en design d’interaction c’est pareil. Les détails sont souvent perçus instinctivement, mais c’est grâce à eux que nous faisons la distinction entre le réel et le fictif, entre une photo et la réalité par exemple. Ce sont ces détails qui font le design d’interaction aussi efficace.

De plus l’œil humain est capable ( et habitué ) de discerner plusieurs mouvements à la fois sans perde le fil ( en dessous de 25 images/s ). Les remous et déplacement qui nous entourent ne sont pas saccadés et irréguliers, mais bien continus et fluides. Ainsi une interface doit s’en rapprocher en ajoutant une continuité interactive dans sa navigation.

 

La réaction post-action

Si un bouton à une forme de bouton et que lorsqu’on l’actionne il y a réaction, l’objectif du design d’interaction est réussi. Evidemment aujourd’hui c’est plus compliqué que ça, car une action peut en entraîner une autre qui va offrir d’autres options et ainsi de suite. Ceci s’avère être la subtilité du design d’interaction, offrir des possibilités à l’utilisateur tout en le guidant vers ce qu’il recherche, simplement avec les composants d’une interface.

Pour ce faire il faut établir le parcours que l’utilisateur empruntera tout au long de son voyage sur votre site/application. Ainsi il faut pouvoir faciliter ce chemin de plusieurs manières différentes, comme réduire le nombre de page ou encore l’espace entre chaque interaction. L’important c’est de garder de la constance et de la familiarité avec l’utilisateur durant cette traversé numérique.

Sur n’importe quel site, chaque utilisateur va avoir ses propres objectifs et besoins. C’est là que la complexité du design d’interaction entre en jeu. Cependant des habitudes communes sont constatables parmi de larges panels d’utilisateurs. Ainsi il est possible de “prédire”  les gestes et réactions des utilisateurs pour finalement améliorer leurs expériences.

Les clés vous l’aurez compris, c’est le storytelling, la maîtrise technologique et la connaissance de son utilisateur. 

 

6 Exemples de design d’interaction

Voici des mises en situation du design d’interaction sous plusieurs formes.

1 – Proposer un formulaire (Input) visuellement agréable

formulaire-design-interaction

 

006a

2 – Rendre un tutoriel (Inboard app) attractif

tutoriel application interactif

inboard application storytelling interaction

 

3 – Garder le même contexte

screens_color_backgroundBy : Shelby Corbella

design-interaction-fluide

 

4 – Donner du répondant

bouton menu interaction

 

bouton icon hover

 

5 – Afficher l’état d’avancement

chargement animation interaction design1

chargement animation interaction design2

 

6 – Animer les boutons (Call to action)

animation bouton call to action

animation bouton twitter

 

 

Merci d’avoir été jusque là !

Article inspiré de VisualHierarchy et TNW / image de couverture by Abdullah Noman

Do you like Hugo Vermot's articles? Follow on social!
No Comments
Comments to: Définition et règles de base du design d’interaction
Inscription obligatoire et gratuite

Suivez toutes nos actualités

Ne manquez pas un article ! Toutes les nouveautés directement dans vos emails.

ARTICLES LES PLUS APPRÉCIÉS

Articles des membres

Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]

LES NOUVEAUX ARTICLES

  1. Actualités
Cela n’est plus nouveau, la cybersécurité est un enjeu crucial pour toutes les entreprises et organisations qui utilisent des systèmes informatiques. Mais, en même temps, l’expérience utilisateur (UX) est également devenue un facteur clé pour la bonne utilisation des systèmes. Malheureusement, ces deux objectifs ne vont pas toujours de pair. En effet, sécuriser quelque chose […]
  1. Articles des membres
Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]