Lorsque les utilisateurs ouvrent un site web ou une application, ils remarquent d’abord les éléments de design évidents : logo, couleurs, icônes, illustrations et imagerie. Si ces éléments contribuent effectivement à l’expérience globale de l’utilisateur, ils sont en fait les pièces d’un plus grand puzzle : le design d’interaction. Ce concept peut être plus subtil pour les utilisateurs finaux qu’une nouvelle page d’accueil flashy, mais il est essentiel pour créer une expérience numérique engageante et intuitive.

Qu’est-ce que le design d’interaction ?

Le design d’interaction consiste à faciliter les interactions entre les utilisateurs et les produits (le plus souvent, ces produits sont des applications ou des sites Web). Selon l’Interaction Design Foundation, « le but du design d’interaction est de créer des produits qui permettent à l’utilisateur d’atteindre son ou ses objectifs de la meilleure façon possible. » En d’autres termes, les designers d’interaction sont responsables de la création de chaque élément sur un écran avec lequel un utilisateur pourrait interagir, que ce soit par un clic, un glissement, un tapotement ou une autre sorte d’action.

Les cinq dimensions du design d’interaction servent de modèle utile pour comprendre ce qu’il implique. Introduit pour la première fois par Gillian Crampton Smith, une universitaire spécialisée dans le design d’interaction, le modèle ne comprenait que quatre dimensions. Kevin Silver, designer d’interaction senior chez IDEXX Laboratories, a ajouté la cinquième.

1D : Les mots doivent être simples à comprendre et doivent communiquer la bonne quantité d’informations à l’utilisateur (trop de détails peuvent submerger, tandis que trop peu d’informations peuvent causer de la confusion).

2D : Les représentations visuelles, comme les images, la typographie et les icônes, doivent compléter les mots pour communiquer des informations à l’utilisateur.

3D : Les objets physiques ou l’espace font référence au matériel et aux objets réels avec lesquels un utilisateur interagit. Par exemple, utilisent-ils un smartphone ou un ordinateur portable avec une souris ? Et où sont-ils, à leur bureau ou dans un métro bondé ?

4D : Le temps fait référence à la façon dont les utilisateurs pourraient mesurer la progression, avec du son et des animations par exemple, ainsi qu’au temps qu’ils passent à interagir avec les trois premières dimensions.

5D : Le comportement a été ajouté par Kevin Silver et comprend la façon dont les dimensions précédentes définissent les interactions d’un produit. Elle comprend également les réactions des utilisateurs et du produit.

Relié : 6 raisons pour lesquelles les designers UX devraient explorer l’interaction gestuelle

10 exemples de design d’interaction

À quoi ressemble l’interaction de design dans la vie réelle ? Voici quelques-uns de nos exemples préférés trouvés sur Dribbble.

Par Jony vino. Partager l’addition avec vos amis n’est pas toujours aussi facile qu’il y paraît, surtout si vous êtes plus une personne visuelle qu’une personne de chiffres. Ce concept d’application vous permet d’entrer le montant total de l’addition, de sélectionner le pourcentage de pourboire, puis de voir combien chaque personne va payer. Le plus intéressant ? Au lieu d’ajuster manuellement la part de chaque personne et de devoir constamment mettre à jour la part de chacun, vous pouvez simplement redimensionner la section de chaque personne dans l’application et les chiffres seront automatiquement recalculés pour tout le monde.

Par Prem Gurusamy. Sur la plupart des sites de commerce électronique, vous devez naviguer vers une partie complètement différente du site ou de l’appli pour voir votre panier. Avec cette interaction, vous pouvez voir instantanément vos articles « voler » dans votre panier dès que vous cliquez sur le bouton « Ajouter au panier ». Le panier continue de faire apparaître visuellement vos articles, même lorsque vous explorez d’autres parties du site.

Par Igor Pavlinski. Les applications de médias sociaux sont réputées pour leur surcharge d’informations, vous montrant toutes les histoires les plus importantes, les vidéos ou les articles tendance, et les dernières nouvelles en même temps. Ce concept de nouvelle application de médias sociaux remet le contrôle entre les mains de l’utilisateur, en organisant le contenu par source (comme YouTube, Vimeo, Twitter ou Reddit) et en vous laissant choisir le canal à explorer. Cette présentation sous forme de carte élimine également le besoin de passer d’une application à l’autre pour consommer votre contenu préféré. Au lieu de cela, il est facile d’alterner entre les sources au sein de la même expérience.

Par tubik. Il y a un million et une façons de personnaliser votre hamburger. Et lorsque vous commandez sur votre smartphone, sélectionner chaque ingrédient individuel sur un petit écran peut être un exercice de dextérité. Ce concept d’interface utilisateur pour l’application Tasty Burger simplifie l’expérience de commande en regroupant les ingrédients par type. Au lieu d’afficher une longue liste de toutes les variantes possibles de fromage, de produit, de viande ou de petit pain, vous cliquez d’abord sur la catégorie d’ingrédient (comme le fromage), puis on vous présente les différents types, comme le gouda ou le comte.

Par Rahul.Design. Si vous êtes à la recherche d’une maison et que vous ne pouvez pas voir la propriété en personne, la meilleure option suivante est d’obtenir une visite virtuelle. Ce concept pour l’application immobilière Spec tire parti de notre comportement naturel lorsque nous regardons un nouvel espace. Vous pouvez cliquer dans n’importe quelle pièce, comme la cuisine ou le salon, et déplacer votre téléphone pour obtenir une vue à 360 degrés. Il est facile de passer d’une pièce à l’autre d’un simple toucher.

Par Forest Plasencia. Les filtres offrent un moyen puissant et facile de faire apparaître différentes tranches d’information. Mais, le problème avec beaucoup d’interactions de filtre est qu’ils ouvrent une popup ou une nouvelle page dans l’application, cachant l’information même que vous voulez filtrer. Cette micro-interaction permet de tout garder dans la même vue, même lorsque vous filtrez. Ainsi, vous pouvez voir les données changer instantanément lorsque vous sélectionnez différents critères de filtrage.

Par Dmitro Petrenko. Il est plus facile que jamais d’armer et de surveiller sa maison grâce aux applications pour smartphones, mais entre 94%-99%

Relié : Créer un outil qui enregistre les interactions des utilisateurs

Par Gil. Cette simple interaction de page améliore l’expérience utilisateur sur le site et aide l’entreprise à garder les visiteurs sur leurs pages, plus longtemps. L’objectif principal du site est de montrer comment ces propriétés peuvent être utilisées dans la nature, comme bureau, et comme extension. Au lieu de créer des expériences distinctes pour chaque usage, cette page imite le flux de l’utilisateur qui compare et oppose les différentes utilisations, et rebondit de manière transparente entre elles.

Par Dominik Martin. Les interactions n’ont pas besoin d’être audacieuses et perceptibles pour avoir un impact. Ce concept d’application simplifie un comportement que nous méprisons tous – choisir notre pays de résidence dans une longue liste. Au lieu de demander aux utilisateurs de faire défiler la liste et de trouver leur pays, cette micro-interaction vous fait d’abord choisir la première lettre de votre pays, puis le trouver dans une liste de pays beaucoup plus petite et ciblée.

Par Mykolas Puodziunas. De plus en plus de sites de vente au détail facilitent la « visualisation rapide » d’un article, plutôt que de cliquer sur chaque page de détails et de devoir ensuite revenir aux résultats de la recherche pour parcourir d’autres articles. Ce concept va encore plus loin et vous permet de visualiser chaque produit dans ses différentes couleurs disponibles, sans avoir à quitter la page de la catégorie.

Avons-nous manqué votre exemple de design d’interaction préféré ? Partagez-le avec nous sur Twitter : @InVisionApp.