Conception d'interfaces multimodales à l'aide d'Adobe XD

Nous sommes à l’aube d’une révolution de l’assurance-chômage. Les interfaces multimodales donneront plus de puissance aux utilisateurs, mais elles modifieront également la façon dont les utilisateurs interagissent avec les systèmes. Dans cet article, vous pouvez apprendre à créer votre propre interface utilisateur multimodale à l'aide d'Adobe XD.

(Cet article est sponsorisé par Adobe.) Les interfaces utilisateur évoluent. Les interfaces vocales remettent en cause la longue domination des interfaces utilisateur graphiques et deviennent rapidement une partie intégrante de notre vie quotidienne. Des progrès significatifs en matière de reconnaissance automatique de la parole (APS) et de traitement du langage naturel (PNL), associés à une base de consommateurs impressionnante (des millions d'appareils mobiles avec assistants vocaux intégrés), ont influencé le développement rapide et l'adoption d'une interface vocale. [19659005] Les produits utilisant la voix comme interface principale deviennent de plus en plus populaires. Aux États-Unis seulement, 47,3 millions d’adultes ont accès à un haut-parleur intelligent (c’est le un cinquième de la population adulte américaine ), et ce nombre est en augmentation. Mais les interfaces vocales ont un avenir prometteur, non seulement pour un usage personnel ou domestique. Au fur et à mesure que les utilisateurs s'habitueront aux interfaces vocales, ils devront s'y attendre dans un contexte commercial . Imaginez simplement que vous puissiez bientôt déclencher un projecteur de salle de conférence en disant, par exemple, «Montrez ma présentation».

Il est évident que la communication homme-machine se développe rapidement pour englober à la fois les interactions écrites et orales. Mais cela signifie-t-il que les futures interfaces seront uniquement vocales? Malgré certaines représentations de science-fiction, la voix ne remplacera pas complètement les interfaces utilisateur graphiques. Au lieu de cela, nous aurons une synergie de la voix, du visuel et du geste dans un nouveau format d'interface: une interface multimodale à commande vocale.

Dans cet article, nous allons:

• explorer le concept de voix – interface activée et passez en revue différents types d'interfaces activées par la voix;
• découvrez pourquoi les interfaces utilisateur multimodales à commande vocale seront l'expérience utilisateur préférée;
• voyez comment vous pouvez créer une interface utilisateur multimodale à l'aide d'Adobe XD.

L'état des interfaces utilisateur vocales (VUI)

Avant de plonger dans les détails des interfaces utilisateur vocales, nous devons définir ce qu'est l'entrée vocale. La saisie vocale est une interaction homme-machine dans laquelle un utilisateur prononce des commandes au lieu de les écrire. La beauté de la saisie vocale réside dans le fait qu’il s’agit d’une interaction plus naturelle pour les utilisateurs: les utilisateurs ne sont pas limités à une syntaxe spécifique lorsqu’ils interagissent avec un système; ils peuvent structurer leur contribution de nombreuses manières différentes, comme ils le feraient dans une conversation humaine.

Les interfaces utilisateur vocales apportent les avantages suivants à leurs utilisateurs:

• Coût d'interaction réduit
  L’interface activée implique un coût d’interaction, ce coût est théoriquement inférieur à celui de l’apprentissage d’une nouvelle interface graphique.
• Contrôle mains libres
  Les interfaces utilisateur virtuelles sont idéales pour les utilisateurs très occupés, par exemple. , en conduisant, en cuisinant ou en faisant de l'exercice.
• Vitesse
  La voix est excellente lorsqu'on pose une question plus rapidement que de la taper et de lire les résultats. Par exemple, lorsque vous utilisez la voix dans une voiture, il est plus rapide d'indiquer l'endroit à un système de navigation plutôt que de taper l'emplacement sur un écran tactile.
• Émotion et personnalité
  Même lorsque nous entendons une voix, mais ne vois pas l'image d'un haut-parleur, nous pouvons l'imaginer dans notre tête. Cela permet d'améliorer l'engagement des utilisateurs.
• Accessibilité
  Les utilisateurs malvoyants et ceux ayant une mobilité réduite peuvent utiliser la voix pour interagir avec un système.

Trois types d'interfaces à activation vocale

En fonction de l'utilisation de la voix, il peut s'agir d'un des types d'interface suivants:

Agents de voix dans les appareils Screen-First

Apple Siri et Google Assistant sont d'excellents exemples d'agents de voix. Pour de tels systèmes, la voix agit davantage comme une amélioration de l'interface graphique existante. Dans de nombreux cas, l’agent constitue la première étape du parcours de l’utilisateur: l’utilisateur déclenche l’agent vocal et fournit une commande par voix, tandis que toutes les autres interactions sont effectuées à l’aide de l’écran tactile. Par exemple, lorsque vous posez une question à Siri, celle-ci fournit les réponses sous la forme d'une liste et vous devez interagir avec cette liste. En conséquence, l'expérience utilisateur devient fragmentée – nous utilisons la voix pour initier l'interaction puis passer au toucher pour la poursuivre.

Périphériques vocaux uniquement

Ces périphériques ne disposent pas d’affichage visuel. les utilisateurs comptent sur l'audio pour les entrées et les sorties. Les enceintes intelligentes Amazon Echo et Google Home sont d'excellents exemples de produits de cette catégorie. L’absence d’affichage visuel est une contrainte importante sur la capacité de l’appareil à communiquer des informations et des options à l’utilisateur. Par conséquent, la plupart des gens utilisent ces périphériques pour effectuer des tâches simples, telles que jouer de la musique et obtenir des réponses à des questions simples.

Dispositifs Voice-First

Avec les systèmes Voice-first, l'appareil accepte les entrées utilisateur principalement via des commandes vocales, mais dispose également d'un affichage à l'écran intégré. Cela signifie que la voix est l'interface utilisateur principale, mais pas la seule. Le vieil adage «Une image vaut mille mots» s’applique toujours aux systèmes modernes à commande vocale. Le cerveau humain dispose d’incroyables capacités de traitement d’image. Nous pouvons comprendre des informations complexes plus rapidement lorsque nous les voyons visuellement. Comparés aux périphériques vocaux uniquement, les périphériques vocaux d’abord permettent aux utilisateurs d’accéder à une plus grande quantité d’informations et facilitent beaucoup de tâches.

Amazon Echo Show est un excellent exemple de périphérique utilisant un système voix d’abord. Les informations visuelles sont progressivement incorporées dans un système holistique – l'écran n'est pas chargé avec des icônes d'applications; Au lieu de cela, le système encourage les utilisateurs à essayer différentes commandes vocales (en suggérant des commandes verbales telles que «Essayez Alexa, montrez-moi la météo à 17h00»). L’écran facilite même les tâches courantes telles que la vérification d’une recette pendant la cuisson – les utilisateurs n’ont pas besoin d’écouter attentivement et de garder toute l’information dans leur tête; lorsqu'ils ont besoin d'informations, ils se contentent de regarder l'écran.

Présentation des interfaces multimodales

Quand il s’agit d’utiliser la voix dans une interface utilisateur, ne considérez pas la voix comme quelque chose que vous pouvez utiliser seul. Des périphériques tels que Amazon Echo Show incluent un écran mais utilisent la voix comme méthode de saisie principale, offrant ainsi une expérience utilisateur plus globale. Il s’agit du premier pas vers une nouvelle génération d’interfaces utilisateur: les interfaces multimodales

. Une interface multimodale est une interface qui associe la voix, le toucher, l’audio et différents types de visuels dans une même interface utilisateur transparente. Amazon Echo Show est un excellent exemple de périphérique qui tire pleinement parti d'une interface multimodale activée par la voix. Lorsque les utilisateurs interagissent avec Show, ils effectuent des demandes exactement comme ils le feraient avec un appareil vocal uniquement. toutefois, leur réponse sera probablement multimodale, contenant à la fois des réponses vocales et visuelles.

Les produits multimodaux sont plus complexes que les produits reposant uniquement sur des éléments visuels ou sur la voix. Pourquoi quelqu'un devrait-il créer une interface multimodale? Pour répondre à cette question, nous devons prendre du recul et voir comment les gens perçoivent l’environnement qui les entoure. Les gens ont cinq sens, et la combinaison de nos sens travaillant ensemble est la façon dont nous percevons les choses. Par exemple, nos sens travaillent ensemble lorsque nous écoutons de la musique lors d’un concert. Supprimez un sens (par exemple, l'ouïe) et l'expérience passe dans un contexte totalement différent.

Pendant trop longtemps, nous avons pensé à l’expérience utilisateur uniquement comme conception visuelle ou gestuelle. Il est temps de changer cette façon de penser. La conception multimodale est un moyen de penser et de concevoir des expériences qui relient nos capacités sensorielles entre elles.

Les interfaces multimodales sont un moyen plus humain pour l'utilisateur et la machine de communiquer. Ils ouvrent de nouvelles opportunités pour des interactions plus profondes. Et aujourd'hui, il est beaucoup plus facile de concevoir des interfaces multimodales, car les limitations techniques qui, par le passé, limitaient les interactions avec les produits sont en train d'être gommées.

La ​​différence entre une interface graphique et une interface multimodale

La principale différence est que des interfaces multimodales comme Amazon Echo Afficher les interfaces vocales et visuelles de synchronisation. Par conséquent, lors de la conception de l'expérience, la voix et les éléments visuels ne sont plus des éléments indépendants.

Canal visuel et vocal: quand les utiliser

Il est important de penser à la voix et aux éléments visuels en tant que canaux d’entrée et de sortie. Chaque canal a ses forces et ses faiblesses.

Commençons par les éléments visuels. Il est clair que certaines informations sont plus faciles à comprendre lorsque nous les voyons, plutôt que lorsque nous les entendons. Les visuels fonctionnent mieux lorsque vous devez fournir:

• une longue liste d'options (la lecture d'une longue liste prendra beaucoup de temps et sera difficile à suivre);
• des informations très chargées en données (telles que des diagrammes et des graphiques);
• informations sur les produits (par exemple, les produits des boutiques en ligne; il est fort probable que vous souhaitiez voir un produit avant de l'acheter) et la comparaison de produits (comme pour la longue liste d'options, il serait difficile de fournir toutes les informations à l'aide de seule voix).

Toutefois, pour certaines informations, nous pouvons facilement nous fier à la communication verbale. La voix convient parfaitement aux cas suivants:

• commandes utilisateur (la voix est une modalité de saisie efficace, permettant aux utilisateurs de donner des commandes au système rapidement et en contournant les menus de navigation complexes);
• des instructions utilisateur simples (par exemple, une vérification de routine d'une ordonnance);
• avertissements et notifications (par exemple, un avertissement audio associé à des notifications vocales au volant).

Bien qu'il s'agisse là de quelques cas typiques de combinaison visuelle et vocale, il est important de savoir que nous ne pouvons pas séparer les deux l'un de l'autre. Nous ne pouvons créer une meilleure expérience utilisateur que lorsque la voix et les éléments visuels fonctionnent ensemble. Par exemple, supposons que nous voulions acheter une nouvelle paire de chaussures. Vous pouvez utiliser la voix pour demander au système «Montre-moi les chaussures New Balance». Le système traiterait ta demande et fournirait des informations sur le produit (cela nous permettrait de comparer plus facilement les chaussures).

Ce que vous devez savoir pour concevoir Interfaces multimodales à activation vocale

La voix est l'un des défis les plus passionnants pour les concepteurs UX. Malgré sa nouveauté, les règles de base pour la conception d'interfaces multimodales à commande vocale sont les mêmes que celles utilisées pour créer des conceptions visuelles. Les concepteurs doivent se soucier de leurs utilisateurs. Ils doivent avoir pour objectif de réduire les frictions de l'utilisateur en résolvant ses problèmes de manière efficace et en privilégiant la clarté pour clarifier les choix de l'utilisateur.

Il existe toutefois des principes de conception uniques pour les interfaces multimodales.

Assurez-vous de résoudre les problèmes qui se posent. Problème correct

La conception devrait résoudre les problèmes. Mais il est essentiel de résoudre les bons problèmes. sinon, vous pourriez passer beaucoup de temps à créer une expérience qui n’apporte pas beaucoup de valeur aux utilisateurs. Assurez-vous donc que vous êtes concentré sur la résolution du bon problème. Les interactions vocales doivent avoir un sens pour l'utilisateur. les utilisateurs doivent avoir une raison impérieuse d'utiliser la voix plutôt que d'autres méthodes d'interaction (telles que cliquer ou toucher). C’est pourquoi, lorsque vous créez un nouveau produit, même avant de commencer la conception, il est essentiel de mener une recherche auprès des utilisateurs et de déterminer si la voix améliorerait l’expérience utilisateur.

Commencez par créer une carte de parcours utilisateur. Analysez la carte du voyage et trouvez des endroits où l'intégration de la voix en tant que canal serait bénéfique pour l'UX.

• Recherchez les endroits du voyage où les utilisateurs risquent de rencontrer des frictions et des frustrations. L'utilisation de la voix réduirait-elle les frictions?
• Pensez au contexte de l'utilisateur. La voix fonctionnerait-elle dans un contexte particulier?
• Pensez à ce qui est uniquement activé par la voix. N'oubliez pas les avantages uniques de l'utilisation de la voix, tels que l'interaction mains-libres et yeux-libres. La voix pourrait-elle ajouter de la valeur à l'expérience?

Création de flux conversationnels

Idéalement, les interfaces que vous concevez ne nécessitent aucun coût d'interaction: les utilisateurs doivent pouvoir répondre à leurs besoins sans perdre de temps à apprendre à interagir avec le système. Cela se produit uniquement lorsque l'interaction vocale ressemble à une conversation réelle et non à une boîte de dialogue système encapsulée dans le format de commandes vocales. La règle fondamentale d'une bonne interface utilisateur est simple: les ordinateurs doivent s'adapter aux humains et non l'inverse.

Les gens ont rarement des conversations plates et linéaires (conversations qui ne durent qu'un tour). C’est pourquoi, pour que l’interaction avec un système donne l’impression d’une conversation en direct, les concepteurs doivent se concentrer sur la création de flux de conversation. Chaque flux de conversation consiste en des boîtes de dialogue, c'est-à-dire les chemins qui se produisent entre le système et l'utilisateur. Chaque boîte de dialogue comprendrait les invites du système et les réponses possibles de l’utilisateur.

Un flux de conversation peut être présenté sous la forme d’un diagramme de flux. Chaque flux doit se concentrer sur un cas d'utilisation particulier (par exemple, définir un réveil à l'aide d'un système). Pour la plupart des dialogues d'un flux, il est essentiel de prendre en compte les chemins d'erreur lorsque les choses se passent mal.

Chaque commande vocale de l'utilisateur consiste en trois éléments clés: l'intention, l'énoncé et la fente.

• L'intention est l'objectif de l'interaction de l'utilisateur avec un système activé par la voix.
  Une intention n'est qu'un moyen sophistiqué de définir l'objectif d'un ensemble de mots. Chaque interaction avec un système apporte à l'utilisateur un utilitaire. Que ce soit une information ou une action, l’utilitaire est intentionnel. Comprendre l’intention de l’utilisateur est une partie cruciale des interfaces vocales. Lorsque nous concevons VUI, nous ne savons pas toujours avec certitude ce que l'intention d'un utilisateur est, mais nous pouvons le deviner avec une grande précision.
• L'énoncé est la façon dont l'utilisateur formule sa demande.
  Généralement, les utilisateurs ont plus d’une façon de formuler une commande vocale. Par exemple, nous pouvons définir un réveil en disant «Définir réveil à 8 heures», ou «Réveil demain à 8 heures» ou même «Je dois me lever à 8 heures». Les concepteurs doivent prendre en compte toutes les variations possibles de l'énoncé. .
• Les emplacements sont des variables que les utilisateurs utilisent dans une commande. Parfois, les utilisateurs doivent fournir des informations supplémentaires dans la demande. Dans notre exemple de réveil, «8 heures» est un créneau.

Ne mettez pas les mots dans la bouche de l’utilisateur

Les gens savent parler. N'essayez pas de leur apprendre des commandes. Évitez les phrases telles que «Pour envoyer un rendez-vous à une réunion, vous devez dire« Calendrier, réunions, créer une nouvelle réunion ».» Si vous devez expliquer les commandes, vous devez revoir la façon dont vous concevez le système. Visez toujours la conversation en langage naturel et essayez de vous adapter à différents styles de conversation.)

Recherchez la cohérence

Vous devez parvenir à la cohérence du langage et de la voix dans tous les contextes. La cohérence contribuera à familiariser les utilisateurs avec les interactions.

Toujours fournir un retour d'informations

La visibilité de l'état du système est l'un des principes fondamentaux de la conception d'un bon GUI . Le système doit toujours tenir les utilisateurs informés de ce qui se passe grâce à un retour d'information approprié dans un délai raisonnable. La même règle s’applique à la conception VUI.

• Indiquez à l’utilisateur que le système est à l’écoute
  Afficher les indicateurs visuels lorsque l’appareil écoute ou traite la demande de l’utilisateur. Sans retour d'informations, l'utilisateur ne peut que deviner si le système fait quelque chose. C'est pourquoi même les appareils vocaux tels qu'Amazon Echo et Google Home nous fournissent un retour visuel agréable (lumières clignotantes) lorsqu'ils écoutent ou cherchent une réponse.
• Fournissez des repères de conversation.
  les marqueurs informent l’utilisateur de la position qu’il occupe dans la conversation.
• Confirme le moment où la tâche est terminée.
  Par exemple, lorsque les utilisateurs demandent au système de maison intelligente à commande vocale «Éteindre les lumières dans le garage ”, le système doit informer l'utilisateur que la commande a été exécutée avec succès. Sans confirmation, les utilisateurs devront entrer dans le garage et vérifier les lumières. Cela va à l’encontre du but du système de maison intelligente, qui est de simplifier la vie de l’utilisateur.

Évitez les phrases longues

Lors de la conception d’un système à commande vocale, tenez compte de la manière dont vous fournissez des informations aux utilisateurs. Il est relativement facile de submerger les utilisateurs de trop d’informations lorsque vous utilisez des phrases longues. Premièrement, les utilisateurs ne peuvent pas conserver beaucoup d’informations dans leur mémoire à court terme, ils peuvent donc facilement oublier certaines informations importantes. De plus, l’audio est un média lent – la plupart des gens peuvent lire beaucoup plus rapidement qu’ils ne peuvent l’écouter.

Respectez le temps de votre utilisateur; ne lisez pas de longs monologues audio. Lorsque vous concevez une réponse, moins vous utilisez de mots, mieux c'est. Mais rappelez-vous que vous devez toujours fournir suffisamment d'informations pour que l'utilisateur puisse effectuer sa tâche. Ainsi, si vous ne pouvez pas résumer une réponse en quelques mots, affichez-la à l'écran.

Fournir les étapes suivantes séquentiellement

Les utilisateurs peuvent être submergés non seulement par de longues phrases, mais également par le nombre d'options qu'ils peuvent choisir à la fois. Il est essentiel de décomposer le processus d’interaction avec un système à commande vocale en petits morceaux. Limitez le nombre de choix que l'utilisateur a à la fois et assurez-vous qu'il sait quoi faire à tout moment.

Lors de la conception d'un système à commande vocale complexe comportant de nombreuses fonctionnalités, vous pouvez utiliser la technique de divulgation progressive. : Présentez uniquement les options ou les informations nécessaires pour mener à bien la tâche.

Disposez d'une stratégie de gestion des erreurs puissante

Bien entendu, le système doit éviter les erreurs en premier lieu. Cependant, quelle que soit la qualité de votre système à commande vocale, vous devez toujours concevoir le scénario dans lequel le système ne comprend pas l'utilisateur. Votre responsabilité est de concevoir pour de tels cas.

Voici quelques conseils pratiques pour créer une stratégie:

• Ne blâmez pas l’utilisateur.
  Lors d’une conversation, il n’ya pas d’erreur. Essayez d'éviter les réponses telles que «Votre réponse est incorrecte».
• Fournissez des flux de reprise sur erreur.
  Offrez une option pour les échanges dans une conversation ou même pour quitter le système sans perdre. une information important. Sauvegarde l'état de l'utilisateur dans le trajet, afin qu'il puisse reprendre le système, directement de l'endroit où il s'était arrêté.
• Permet aux utilisateurs de rejouer les informations.
  Fournit une option permettant au système de répéter la question ou réponse. Cela peut être utile pour des questions complexes ou des réponses dans lesquelles il serait difficile pour l'utilisateur de consigner toutes les informations dans sa mémoire de travail.
• Indiquez le libellé en arrêt.
  Dans certains cas, l'utilisateur ne sera pas intéressé à écouter une option et voudra que le système arrête d'en parler. Les mots arrêtés devraient les aider à faire exactement cela.
• Gérez avec élégance les énoncés inattendus
  Quel que soit votre investissement dans la conception d’un système, il peut arriver que le système ne comprenne pas l’utilisateur. Il est essentiel de gérer ces cas avec élégance. Ne craignez pas de laisser le système admettre un manque de compréhension. Le système doit communiquer ce qu'il a compris et fournir des réponses utiles.
• Utilisez des analyses pour améliorer votre stratégie d'erreur.
  Les analyses peuvent vous aider à identifier les erreurs de direction et les mauvaises interprétations.

Keep Track Of Context

Assurez-vous que le système comprend le contexte de l'entrée de l'utilisateur. Par exemple, lorsque quelqu'un dit vouloir réserver un vol à destination de San Francisco la semaine prochaine, il peut faire référence à «cela» ou à «la ville» au cours de la conversation. Le système doit se rappeler de ce qui a été dit et pouvoir le faire correspondre aux informations nouvellement reçues.

À propos de vos utilisateurs pour créer des interactions plus puissantes

Un système à commande vocale devient plus sophistiqué lorsqu'il utilise des informations supplémentaires (telles que contexte utilisateur ou comportement passé) pour comprendre ce que veut l'utilisateur. Cette technique est appelée interprétation intelligente. Elle nécessite que le système connaisse activement l'utilisateur et puisse ajuster son comportement en conséquence. Cette connaissance aidera le système à fournir des réponses même à des questions complexes, telles que "Quel cadeau dois-je acheter pour l'anniversaire de ma femme?"

Donnez à votre VUI une personnalité

Chaque système à commande vocale a un impact émotionnel sur le utilisateur, que vous le planifiiez ou non. Les gens associent la voix aux humains plutôt qu'aux machines. Selon la recherche Speak Easy Global Edition 74% des utilisateurs habituels de la technologie vocale s'attendent à ce que les marques aient des voix et des personnalités uniques pour leurs produits compatibles avec la voix. Il est possible de créer de l’empathie grâce à la personnalité et d’obtenir un niveau plus élevé d’engagement de la part des utilisateurs.

Essayez de refléter votre marque et votre identité uniques dans la voix et le ton que vous présentez. Construisez un personnage de votre agent à commande vocale et utilisez-le pour créer des boîtes de dialogue.

Construire la confiance

Lorsque les utilisateurs ne font pas confiance à un système, ils ne sont pas motivés pour l'utiliser. C’est pourquoi la confiance est une exigence de la conception du produit. Deux facteurs ont un impact significatif sur le niveau de confiance créé: capacités du système et résultat valide.

L'établissement de la confiance commence par la définition des attentes de l'utilisateur. Les interfaces graphiques traditionnelles contiennent de nombreux détails visuels pour aider l'utilisateur à comprendre de quoi le système est capable. Avec un système à commande vocale, les concepteurs ont moins d'outils sur lesquels compter. Néanmoins, il est essentiel de rendre le système naturellement détectable; l’utilisateur doit comprendre ce qui est et n’est pas possible avec le système. C’est pourquoi un système à commande vocale peut nécessiter l’intégration de l’utilisateur, où il explique ce que le système peut faire ou ce qu’il sait. Lors de la conception de l'intégration, essayez de proposer des exemples significatifs pour que les utilisateurs sachent ce qu'ils peuvent faire (les exemples fonctionnent mieux que les instructions).

Lorsqu'il est question de résultats valables, les utilisateurs savent que les systèmes vocaux sont imparfaits. Lorsqu'un système fournit une réponse, certains utilisateurs peuvent douter que la réponse soit correcte. cela se produit car les utilisateurs ne savent pas si leur demande a été correctement comprise ou quel algorithme a été utilisé pour trouver la réponse. Pour éviter les problèmes de confiance, utilisez l'écran des preuves à l'appui (affichez la requête d'origine à l'écran) et fournissez des informations essentielles sur l'algorithme. Par exemple, lorsqu'un utilisateur demande: «Montre-moi les cinq films les plus populaires de 2018», le système peut dire: «Voici les cinq films les plus populaires de 2018 selon le box-office américain».

Ne pas ignorer la sécurité. Et confidentialité des données

À la différence des appareils mobiles, qui appartiennent à des particuliers, les appareils vocaux ont tendance à appartenir à un lieu, comme une cuisine. Et généralement, il y a plus d'une personne au même endroit. Imaginez simplement que quelqu'un d'autre puisse interagir avec un système ayant accès à toutes vos données personnelles. Certains systèmes VUI tels que Amazon Alexa, Google Assistant et Apple Siri peuvent reconnaître des voix individuelles, ce qui ajoute une couche de sécurité au système. Néanmoins, il ne garantit pas que le système sera capable de reconnaître les utilisateurs sur la base de leur signature vocale unique dans 100% des cas.

La reconnaissance vocale s'améliore continuellement et sera difficile ou presque. impossible d'imiter une voix dans un avenir proche. Cependant, dans la réalité actuelle, il est essentiel de fournir une couche d’authentification supplémentaire pour rassurer l’utilisateur sur le fait que leurs données sont en sécurité. Si vous concevez une application qui fonctionne avec des données sensibles, telles que des informations médicales ou bancaires, vous souhaiterez peut-être inclure une étape d'authentification supplémentaire, telle qu'un mot de passe, une empreinte digitale ou une reconnaissance faciale.

Test de l'utilisabilité

Test de l'utilisabilité est une exigence obligatoire pour tout système. Tester tôt, tester souvent devrait être une règle fondamentale de votre processus de conception. Collectez les données de recherche des utilisateurs dès le début et répétez vos conceptions. Mais tester des interfaces multimodales a ses propres spécificités. Voici deux phases à prendre en compte:

• Phase d'idéation
  Testez vos boîtes de dialogue. Entraînez-vous à lire des exemples de dialogues à voix haute. Une fois que vous avez eu des échanges, enregistrez les deux côtés de la conversation (les énoncés de l'utilisateur et les réponses du système) et écoutez l'enregistrement pour comprendre s'ils ont un son naturel.
• Premières étapes du développement du produit (test avec -fi)
  Le test Wizard of Oz est bien adapté au test des interfaces de conversation. Le test Wizard of Oz est un type de test dans lequel un participant interagit avec un système qui, à son avis, est exploité par un ordinateur mais est en réalité exploité par un humain. Le participant au test formule une requête et une personne réelle répond à l'autre bout. Cette méthode tire son nom du livre Le merveilleux magicien d'Oz de Frank Baum. Dans le livre, un homme ordinaire se cache derrière un rideau, prétendant être un puissant sorcier. Ce test vous permet de tracer tous les scénarios possibles d’interaction et, par conséquent, de créer des interactions plus naturelles. Say Wizard est un excellent outil pour vous aider à exécuter un test d'interface vocale du magicien d'Oz sur macOS.
• Étapes ultérieures du développement du produit (tests avec des prototypes hi-fi)
  Lors des tests de convivialité des interfaces utilisateur graphiques, nous demandons souvent aux utilisateurs de parler à voix haute lorsqu'ils interagissent avec un système. Pour un système à commande vocale, cela n’est pas toujours possible, car le système écouterait cette narration. Il serait donc peut-être préférable d'observer les interactions de l'utilisateur avec le système plutôt que de lui demander de parler fort.

Comment créer une interface multimodale à l'aide d'Adobe XD

Maintenant que vous comprenez parfaitement ce qu'est un multimodal l’interface et les règles à respecter lors de leur conception, nous pouvons discuter de la fabrication d’un prototype d’interface multimodale.

Le prototypage est un élément fondamental du processus de conception. Pouvoir donner vie à une idée et la partager avec d’autres est extrêmement important. Jusqu'à présent, les concepteurs souhaitant intégrer la voix dans le prototypage disposaient de peu d'outils, le plus puissant d'entre eux étant un organigramme. Imaginer comment un utilisateur interagirait avec un système nécessiterait beaucoup d'imagination de la part de quelqu'un qui regarderait l'organigramme. Avec Adobe XD, les concepteurs ont désormais accès au support de la voix et peuvent l’utiliser dans leurs prototypes. XD connecte de manière transparente le prototypage d'écran et le prototypage vocal dans une application.

Nouvelles expériences, même processus

Même si la voix est un support totalement différent de la représentation, le processus de prototypage de la voix dans Adobe XD est sensiblement le même que celui du prototypage. une interface graphique. L'équipe Adobe XD intègre la voix de manière à sembler naturelle et intuitive à tout concepteur. Les concepteurs peuvent utiliser des déclencheurs vocaux et la lecture vocale pour interagir avec des prototypes:

• Les déclencheurs vocaux lancent une interaction lorsqu'un utilisateur dit un mot ou une phrase en particulier (énoncé).
• La lecture vocale permet aux concepteurs d'accéder à un moteur de synthèse vocale. . XD prononcera des mots et des phrases définis par un concepteur. La lecture vocale peut être utilisée à différentes fins. Par exemple, il peut servir de reconnaissance (pour rassurer les utilisateurs) ou de guide (les utilisateurs savent donc quoi faire).

La grande chose à propos de XD est que cela ne vous oblige pas à apprendre la complexité de chaque voix. plate-forme.

Assez de mots – voyons comment cela fonctionne en action. Pour tous les exemples que vous verrez ci-dessous, j’ai utilisé des planches créées à l’aide du kit Adobe XD UI pour Amazon Alexa (il s’agit d’un lien pour télécharger le kit). Le kit contient tous les styles et composants nécessaires pour créer des expériences pour Amazon Alexa.

Supposons que nous ayons les planches d’art suivantes:

Passons au mode prototypage pour ajouter des interactions vocales. Nous allons commencer par les déclencheurs vocaux. En plus des déclencheurs tels que cliquer et faire glisser, nous pouvons maintenant utiliser la voix comme déclencheur. Nous pouvons utiliser n’importe quelle couche pour les déclencheurs vocaux, à condition qu’une poignée menant à une autre planche d’art. Connectons ensemble les planches d’art.

Une fois que nous aurons fait cela, nous trouverons une nouvelle option “Voice” sous “Trigger”. Lorsque nous sélectionnons cette option, nous voyons un champ «Commande» que nous pouvons utiliser pour entrer un énoncé – c’est ce que XD écoute réellement. Les utilisateurs devront parler de cette commande pour activer le déclencheur.

C’est tout! Nous avons défini notre première interaction vocale. Désormais, les utilisateurs peuvent dire quelque chose et un prototype y répondra. Mais nous pouvons rendre cette interaction beaucoup plus puissante en ajoutant la lecture de la parole. Comme je l'ai mentionné précédemment, la lecture de la parole permet au système de dire quelques mots.

Sélectionnez un deuxième plan de travail entier et cliquez sur la poignée bleue. Choisissez un déclencheur «Time» avec un délai et réglez-le sur 0.2s. Sous l'action, vous trouverez «Lecture vocale». We’ll write down what the virtual assistant speaks back to us.

We’re ready to test our prototype. Select the first artboard, and clicking the play button in the top right will launch a preview window. When interacting with voice prototyping, make sure your mic is on. Then, hold down the spacebar to speak the voice command. This input triggers the next action in the prototype.

Use Auto-Animate To Make The Experience More Dynamic

Animation brings a lot of benefits to UI design. It serves clear functional purposes, such as:

• communicating the spatial relationships between objects (Where does the object come from? Are those objects related?);
• communicating affordance (What can I do next?)

But functional purposes aren’t the only benefits of animation; animation also makes the experience more alive and dynamic. That’s why UI animations should be a natural part of multimodal interfaces.

With “Auto-Animate” available in Adobe XD, it becomes much easier to create prototypes with immersive animated transitions. Adobe XD does all the hard work for you, so you don’t need to worry about it. All you need to do to create an animated transition between two artboards is simply duplicate an artboard, modify the object properties in the clone (properties such as size, position and rotation), and apply an Auto-Animate action. XD will automatically animate the differences in properties between each artboard.

Let’s see how it works in our design. Suppose we have an existing shopping list in Amazon Echo Show and want to add a new object to the list using voice. Duplicate the following artboard:

Let’s introduce some changes in the layout: Add a new object. We aren’t limited here, so we can easily modify any properties such as text attributes, color, opacity, position of the object — basically, any changes we make, XD will animate between them.

When you wire two artboards together in prototype mode using Auto-Animate in “Action”, XD will automatically animate the differences in properties between each artboard.

And here’s how the interaction will look to users:

One crucial thing that requires mentioning: Keep the names of all of the layers the same; otherwise, Adobe XD won’t be able to apply the auto-animation.

Conclusion

We’re at the dawn of a user interface revolution. A new generation of interfaces — multimodal interfaces — not only will give users more power, but will also change the way users interact with systems. We will probably still have displays, but we won’t need keyboards to interact with the systems.

At the same time, the fundamental requirements for designing multimodal interfaces won’t be much different from those of designing modern interfaces. Designers will need to keep the interaction simple; focus on the user and their needs; design, prototype, test and iterate.

And the great thing is that you don’t need to wait to start designing for this new generation of interfaces. You can start today.

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design processas it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behanceand also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

(ms, ra, al, yk, il)