Exploration de la conception multimodale - Un didacticiel Adobe XD

Une mère qui s'apprête à préparer le dîner à la maison ouvre une application de cuisine sur son iPad ou sa SmartTV. En utilisant le toucher et la voix, elle interagit avec l'application, indiquant à la vidéo de mettre en pause , d' avancer rapidement ou de rejouer une section spécifique. Si elle le souhaite, elle peut appuyer sur l'écran au lieu d'utiliser sa voix.

L'utilisation de plusieurs modes d'interaction est ce sur quoi repose la conception multimodale .

Avant d'explorer la conception multimodale, commençons par une compréhension de base de deux types d'interactions : ordinateur-humain et humain-ordinateur. Chacune de ces interactions comprend diverses modalités telles que la voix, le toucher et la rétroaction tactile.

Modalités informatiques-humaines

Les modalités ordinateur-humain (ou ordinateur à humain) aident un ordinateur à comprendre ce que veut l'utilisateur. Les modalités informatiques-humaines les plus courantes reposent sur la vision, l'ouïe et les capacités tactiles. Quelques exemples sont l'infographie, la lecture audio, les vibrations du téléphone et la rétroaction tactile de la montre intelligente.

Modalités homme-ordinateur

Nous avons inventé plusieurs façons d'interagir avec les ordinateurs. Quelques exemples sont les claviers, les souris, les écrans tactiles, les trackpads et la reconnaissance vocale. Dans ce cas, les utilisateurs s'appuient sur divers mécanismes pour communiquer avec les ordinateurs et les commander.

Des exemples plus complexes sont les accéléromètres, les gyroscopes et les magnétomètres qui aident à la détection de mouvement. Pensez à jouer à un jeu de tennis sur une console et à utiliser la manette de jeu pour imiter le mouvement de la raquette. Cela offre de nombreuses autres possibilités de créer une expérience utilisateur [multimodale] unique et attrayante.

Pourquoi la conception multimodale

L'idée derrière la conception multimodale est de combiner plusieurs modalités afin d'améliorer l'expérience utilisateur d'un produit. Comme tout le monde utilise les produits de différentes manières et dans différents contextes, les utilisateurs disposent de plusieurs mécanismes de rétroaction et disposent de plusieurs façons d'interagir avec leur ordinateur.

Les concepteurs facilitent la vie des utilisateurs en incorporant et en automatisant les actions selon différentes modalités. S'il n'y avait qu'un seul mécanisme de modalité, cela affecterait négativement l'expérience utilisateur et la conception «échouerait» dans l'esprit de l'utilisateur.

Un exemple est un système d'infodivertissement automobile. La plupart de ces systèmes permettent aux utilisateurs d'interagir avec la voix et le toucher. Lors de la conduite, le choix évident est d'utiliser notre voix pour passer un appel téléphonique ou la navigation, mais lorsqu'il est garé, il est probablement plus facile d'utiliser l'écran tactile ou une molette de défilement pour interagir avec le système.

Voici quelques exemples supplémentaires que nous trouvons couramment dans la conception multimodale :

• Une interface utilisateur graphique s'appuie sur notre vision pour interagir, par exemple, avec un site Web ou un panneau d'affichage numérique.
• Une interface utilisateur vocale repose sur nos capacités auditives pour interagir. Cela inclut tout assistant vocal, tel qu'Alexa, Google Assistant ou Siri.
• L'haptique, les gestes et le mouvement reposent sur notre perception du toucher (capacités tactiles) pour déclencher une interaction. Recevoir un message ou balayer vers la gauche pour sauter une chanson en sont deux exemples.

La conception multimodale est également utile lors de la conception pour les personnes ayant certaines limitations et handicaps.

Un exemple simple de conception multimodale : le SmartHome

Robert rentre chez lui après une longue journée. Son système domotique se déclenche dès qu'il se trouve à moins d'un kilomètre de son garage. Le système reconnaît qu'il est arrivé et lance une séquence d'actions automatisées. Par exemple, allume les lumières, règle le chauffage et la climatisation et désactive le système d'alarme.

Ensuite, Robert pourrait soit utiliser une télécommande, soit demander à l'assistant activé par l'IA de baisser le chauffage lorsqu'il entre.

Une expérience de conception multimodale complexe : la santé

Nous sommes désormais capables de capturer des entrées plus complexes d'utilisateurs utilisant des appareils intelligents. Nous pouvons mesurer des entrées telles que les niveaux de stress, les battements cardiaques, les cycles de sommeil, la consommation d'eau et, dans un proche avenir, les niveaux de glucose.

Une fois ces entrées stockées, des appareils et des services tels que Fitbit et First Aid by The Red Cross fournissent des avertissements précieux et vitaux sous la forme d'une alerte vibrante, d'une « tape » sur le poignet ou d'une alarme sonore.

Il s'agit d'une utilisation plus complexe de la conception multimodale car l'équilibre entre les entrées et les sorties doit être calculé correctement. La conception ne doit pas donner de fausses alarmes, ce qui pourrait envoyer l'utilisateur dans la panique.

Qu'il s'agisse de concevoir des expériences multimodales simples ou complexes, l'un des meilleurs moyens de mieux comprendre la conception multimodale est de commencer à concevoir en gardant cela à l'esprit. Voyons comment nous pouvons y parvenir en utilisant Adobe XD.

Prototypage d'une expérience multimodale dans Adobe XD

Adobe XD, un outil de conception UX populaire, a récemment ajouté des commandes vocales et la lecture à son arsenal de fonctionnalités. En profitant d'eux, nous pouvons ajouter des modalités telles que la lecture vocale et audio pour créer une expérience utilisateur multimodale.

Prenons l'exemple d'un prototype du parcours mobile d'une application de cuisine. Un chef montre comment cuisiner un steak, et les gens peuvent dire à l'application de mettre en pause, de répéter ou de continuer à utiliser la voix ou le toucher.

Nous prototypons d'abord tous les écrans nécessaires pour illustrer l'expérience :

Cliquez pour voir l'image en taille réelle.

Ensuite, nous ajoutons une commande vocale qui émulera une modalité vocale. En mode prototype, on commence par connecter le premier et le deuxième écran. Ensuite, nous sélectionnons la voix sous le déclencheur et écrivons un énoncé sous la commande pour déclencher cette transition. Si nous voulons ajouter deux commandes vocales ou plus, nous devrons ajouter un connecteur pour chacune.

Cliquez pour voir l'image en taille réelle.

Pour l'écran suivant, nous voulons que le système réponde à l'utilisateur. Pour ce faire, nous créons un déclencheur temporel et ajoutons la lecture vocale sous action. Puisque nous voulons créer une réaction immédiate, nous réglons le temps à 0 seconde.

Cliquez pour voir l'image en taille réelle.

Nous pouvons également ajouter des déclencheurs traditionnels. Dans cet exemple, nous allons ajouter un déclencheur tactile sur le deuxième élément de la liste. Lorsque l'utilisateur appuie sur cet élément, l'application passe à l'écran suivant. La combinaison des commandes vocales et des commandes tactiles est un excellent exemple d'une expérience utilisateur meilleure et plus réfléchie grâce à la conception multimodale.

Cliquez pour voir l'image en taille réelle.

Ensuite, nous voulons illustrer comment l'utilisateur peut mettre en pause et continuer l'expérience au sein de l'application. Étant donné que nous concevons cette application en pensant à Amazon Echo, nous souhaitons ajouter une commande vocale telle que "Echo, pause".

Cliquez pour voir l'image en taille réelle.

Pour que la vidéo continue, nous allons effectuer la même action en ajoutant la commande vocale "Echo, continue".

Cliquez pour voir l'image en taille réelle.

Il s'agit d'un exemple de base de conception multimodale utilisant le déclencheur vocal. Les déclencheurs supplémentaires incluent le tapotement, le glissement et l'utilisation du clavier ou d'une manette de jeu pour contrôler le prototype.

Il est facile de tomber dans le piège d'utiliser des déclencheurs simplement parce qu'ils existent. Pour concevoir une meilleure expérience utilisateur avec la conception multimodale, les concepteurs voudront tester et apprendre quelles interactions ont le plus de sens, et à quel moment.

Conception multimodale et modèles mentaux

Lors de la conception à l'aide de modalités, il est important de se rappeler que les utilisateurs ont un ensemble préconçu d'attentes (modèles mentaux) quant à la manière dont une interaction doit se produire. Par exemple, la plupart des utilisateurs s'attendent à ce qu'un écran se déplace vers le haut lorsqu'ils font défiler vers le bas sur un trackpad ou avec une molette de défilement de la souris.

Notez que dans de nombreux cas, ces modèles mentaux sont encore en cours de formation. Secouer le téléphone en est un exemple. C'est encore une interaction obscure car certains fournisseurs l'utilisent pour "annuler" la frappe, tandis que d'autres l'utilisent pour mélanger les chansons.

Il est important d'être conscient de ces modèles mentaux lors du choix des modalités à mettre dans la conception du produit. L'utilisation de modalités familières peut améliorer l'expérience utilisateur. Les modalités qui sont encore en cours de formation pourraient dérouter les utilisateurs et dégrader l'expérience.

Modalités émergentes : conception de la conversation

Deux modalités qui gagnent en popularité sont les chatbots et les interfaces utilisateur vocales. Parfois appelées interfaces utilisateur conversationnelles, l'accent est mis principalement sur les interactions textuelles et vocales.

Un chatbot peut utiliser une interface pour recevoir des entrées telles que du texte et est capable d'afficher des graphiques, des liens, des cartes et un dialogue conversationnel. Certains chatbots peuvent prendre des commandes via la voix, puis afficher les résultats sous forme de texte ou en utilisant la voix synthétisée.

Des interactions vocales pures font également leur apparition. Pensez à l'expansion de Siri ou d'Alexa aux appareils domestiques intelligents où les utilisateurs ne tapent rien, mais ont plutôt des interactions complètes avec la voix uniquement. Ceci est important pour les concepteurs car presque toutes les expériences de conception de conversation sont multimodales.

Un bon exemple est Lily de Maybe. Un bot qui vous apprend le chinois (et d'autres langues) et fonctionne sur différents canaux. Les conversations peuvent avoir lieu sur l'application ou en parlant au bot.

Sommaire

Utilisant la voix, le toucher, le texte et la rétroaction tactile, la conception multimodale combine différentes modalités pour créer de meilleures expériences utilisateur. Les interactions ordinateur-homme et homme-ordinateur peuvent être combinées pour créer des expériences produit uniques.

La conception multimodale présente également de nouvelles opportunités et de nouveaux défis pour les concepteurs. Des outils comme Adobe XD facilitent le prototypage de produits en utilisant diverses modalités, mais il y a un art et une science à les utiliser ensemble.

Trouver cet équilibre parfait, combiné à l'émergence de nouvelles modalités, incitera les concepteurs à relever la barre en matière d'amélioration de l'expérience utilisateur.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Concevoir avec précision – Une revue Adobe XD
• Explorer les raisons des critiques du Design Thinking
• Chatbot UX - Conseils de conception et considérations
• Le Chat Crash – Quand un Chatbot échoue
• L'importance de la conception centrée sur l'humain dans la conception de produits