Mélanger le matériel et l'immatériel : concevoir des interfaces multimodales à l'aide d'Adobe XD

Publié: 2022-03-10
Résumé rapide ↬ Nous sommes à l'aube d'une révolution de l'interface utilisateur. Non seulement les interfaces multimodales donneront plus de pouvoir aux utilisateurs, mais elles changeront également la façon dont les utilisateurs interagissent avec les systèmes. Dans cet article, vous apprendrez à créer votre propre interface utilisateur multimodale à l'aide d'Adobe XD.

(Cet article est aimablement sponsorisé par Adobe.) Les interfaces utilisateur évoluent. Les interfaces vocales remettent en question la longue domination des interfaces utilisateur graphiques et deviennent rapidement une partie courante de notre vie quotidienne. Des progrès significatifs dans la reconnaissance automatique de la parole (APS) et le traitement du langage naturel (NLP), ainsi qu'une base de consommateurs impressionnante (des millions d'appareils mobiles avec assistants vocaux intégrés), ont influencé le développement et l'adoption rapides de l'interface vocale.

Les produits qui utilisent 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-à-dire un cinquième de la population adulte américaine), et ce nombre ne cesse d'augmenter. Mais les interfaces vocales ont un bel avenir non seulement pour un usage personnel et domestique. Au fur et à mesure que les gens s'habitueront aux interfaces vocales, ils s'y attendront également dans un contexte professionnel. Imaginez que vous pourrez bientôt déclencher un projecteur de salle de conférence en disant quelque chose comme « Montrez ma présentation ».

Il est évident que la communication homme-machine se développe rapidement pour englober à la fois l'interaction écrite et orale. 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 voix, de visuels et de gestes dans un nouveau format d'interface : une interface vocale et multimodale.

Dans cet article, nous allons :

  • explorer le concept d'interface vocale et passer en revue différents types d'interfaces vocales ;
  • découvrir pourquoi les interfaces utilisateur multimodales à commande vocale seront l'expérience utilisateur préférée ;
  • découvrez comment 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 la saisie vocale. La saisie vocale est une interaction homme-ordinateur dans laquelle un utilisateur prononce des commandes au lieu de les écrire. La beauté de la saisie vocale est qu'il s'agit d'une interaction plus naturelle pour les personnes — les utilisateurs ne sont pas limités à une syntaxe spécifique lorsqu'ils interagissent avec un système ; ils peuvent structurer leur contribution de différentes manières, comme ils le feraient dans une conversation humaine.

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

  • Moins de coût d'interaction
    Bien que l'utilisation d'une interface vocale implique un coût d'interaction, ce coût est inférieur (en théorie) à celui de l'apprentissage d'une nouvelle interface graphique.
  • Contrôle mains libres
    Les VUI sont idéales lorsque les mains de l'utilisateur sont occupées, par exemple en conduisant, en cuisinant ou en faisant de l'exercice.
  • Vitesse
    La voix est excellente lorsque poser une question est plus rapide que de la taper et de lire les résultats. Par exemple, lorsque vous utilisez la voix dans une voiture, il est plus rapide de dire 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 voyons pas l'image d'un locuteur, nous pouvons imaginer le locuteur dans notre tête. Cela a une opportunité d'améliorer l'engagement des utilisateurs.
  • Accessibilité
    Les utilisateurs malvoyants et les utilisateurs à mobilité réduite peuvent utiliser la voix pour interagir avec un système.

Trois types d'interfaces vocales

Selon la manière dont la voix est utilisée, il peut s'agir de l'un des types d'interfaces suivants.

Agents vocaux dans les appareils à écran d'abord

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

Siri exécute une commande vocale pour rechercher des actualités, mais demande ensuite aux utilisateurs de toucher l'écran pour lire les éléments.
Siri exécute une commande vocale pour rechercher des actualités, mais demande ensuite aux utilisateurs de toucher l'écran pour lire les éléments. ( Grand aperçu )

Appareils vocaux uniquement

Ces appareils n'ont pas d'affichages visuels ; les utilisateurs comptent sur l'audio pour l'entrée et la sortie. Amazon Echo et les haut-parleurs intelligents 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 appareils pour effectuer des tâches simples, telles que jouer de la musique et obtenir des réponses à des questions simples.

Amazon Echo Dot est un appareil sans écran.
Amazon Echo Dot est un appareil sans écran. ( Grand aperçu )

Appareils vocaux d'abord

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

L'Amazon Echo Show est un excellent exemple d'appareil qui utilise un système vocal. Les informations visuelles sont progressivement intégrées dans le cadre d'un système holistique - l'écran n'est pas chargé d'icônes d'application ; 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 toutes les informations dans leur tête ; lorsqu'ils ont besoin de l'information, ils regardent simplement l'écran.

Amazon Echo Show est essentiellement un haut-parleur Amazon Echo avec un écran.
Amazon Echo Show est essentiellement un haut-parleur Amazon Echo avec un écran. ( Grand aperçu )

Présentation des interfaces multimodales

Lorsqu'il s'agit d'utiliser la voix dans la conception de l'interface utilisateur, ne considérez pas la voix comme quelque chose que vous pouvez utiliser seul. Les appareils tels qu'Amazon Echo Show incluent un écran mais utilisent la voix comme principale méthode de saisie, ce qui permet une expérience utilisateur plus globale. C'est le premier pas vers une nouvelle génération d'interfaces utilisateurs : les interfaces multimodales.

Une interface multimodale est une interface qui mélange la voix, le toucher, l'audio et différents types de visuels dans une interface utilisateur unique et transparente. Amazon Echo Show est un excellent exemple d'appareil qui tire pleinement parti d'une interface multimodale à commande vocale. Lorsque les utilisateurs interagissent avec Show, ils font des demandes comme ils le feraient avec un appareil uniquement vocal ; cependant, la réponse qu'ils recevront sera probablement multimodale, contenant à la fois des réponses vocales et visuelles.

Les produits multimodaux sont plus complexes que les produits qui reposent uniquement sur le visuel ou uniquement sur la voix. Pourquoi est-ce que quelqu'un devrait créer une interface multimodale en premier lieu ? 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 en direct. Supprimez un sens (par exemple, l'ouïe) et l'expérience prend un tout autre contexte.

Nos sens travaillent ensemble lorsque nous écoutons de la musique lors d'un concert en direct. Supprimez un sens (par exemple, l'ouïe) et l'expérience prend un tout autre contexte.
( Grand aperçu )

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

Les interfaces multimodales semblent être 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 parce que 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 ici est que les interfaces multimodales comme Amazon Echo Show synchronisent les interfaces vocales et visuelles. Par conséquent, lorsque nous concevons l'expérience, la voix et les visuels ne sont plus des éléments indépendants ; ils font partie intégrante de l'expérience que le système fournit.

Canal visuel et vocal : Quand utiliser chacun

Il est important de considérer la voix et les visuels comme des canaux d'entrée et de sortie. Chaque canal a ses propres forces et faiblesses.

Commençons par les visuels. Il est clair que certaines informations sont simplement 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 riches en données (telles que des diagrammes et des graphiques) ;
  • informations sur les produits (par exemple, les produits dans les boutiques en ligne ; très probablement, vous voudriez voir un produit avant de l'acheter) et comparaison de produits (comme avec la longue liste d'options, il serait difficile de fournir toutes les informations en utilisant uniquement la voix) .

Pour certaines informations, cependant, nous pouvons facilement nous fier à la communication verbale. La voix peut être la bonne solution pour les cas suivants :

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

Bien qu'il s'agisse 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 visuels fonctionnent ensemble. Par exemple, supposons que nous voulions acheter une nouvelle paire de chaussures. Nous pourrions utiliser la voix pour demander au système "Montrez-moi des chaussures New Balance". Le système traitera votre demande et fournira visuellement des informations sur le produit (un moyen plus simple pour nous de comparer les chaussures).

Ce que vous devez savoir pour concevoir des interfaces multimodales à commande vocale

La voix est l'un des défis les plus excitants pour les concepteurs UX. Malgré sa nouveauté, les règles fondamentales de conception d'une interface multimodale à commande vocale sont les mêmes que celles que nous utilisons pour créer des conceptions visuelles. Les concepteurs doivent se soucier de leurs utilisateurs. Ils doivent viser à réduire les frictions pour l'utilisateur en résolvant leurs problèmes de manière efficace et donner la priorité à la clarté pour rendre les choix de l'utilisateur clairs.

Mais il existe également des principes de conception uniques pour les interfaces multimodales.

Assurez-vous de résoudre le bon problème

La conception doit résoudre les problèmes. Mais il est vital 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. Ainsi, assurez-vous que vous vous concentrez 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 sur d'autres méthodes d'interaction (telles que cliquer ou taper). C'est pourquoi, lorsque vous créez un nouveau produit - avant même de commencer la conception - il est essentiel de mener des recherches sur les utilisateurs et de déterminer si la voix améliorerait l'UX.

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

  • Trouvez des endroits dans le parcours où les utilisateurs pourraient rencontrer des frictions et de la frustration. 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éer des flux conversationnels

Idéalement, les interfaces que vous concevez ne devraient nécessiter aucun coût d'interaction : les utilisateurs devraient pouvoir répondre à leurs besoins sans perdre de temps supplémentaire à 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 enveloppé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 ressemble à une conversation en direct, les concepteurs doivent se concentrer sur la création de flux conversationnels. Chaque flux conversationnel se compose de dialogues - les voies 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 conversationnel peut être présenté sous la forme d'un organigramme. Chaque flux doit se concentrer sur un cas d'utilisation particulier (par exemple, régler un réveil à l'aide d'un système). Pour la plupart des dialogues dans un flux, il est essentiel de prendre en compte les chemins d'erreur, lorsque les choses déraillent.

Chaque commande vocale de l'utilisateur se compose de trois éléments clés : l'intention, l'énoncé et l'emplacement.

  • L'intention est l'objectif de l'interaction de l'utilisateur avec un système à commande vocale.
    Une intention n'est qu'une façon sophistiquée de définir le but derrière un ensemble de mots. Chaque interaction avec un système apporte à l'utilisateur une certaine utilité. Qu'il s'agisse d'une information ou d'une action, l'utilité est dans l'intention. Comprendre l'intention de l'utilisateur est un élément crucial des interfaces vocales. Lorsque nous concevons une VUI, nous ne savons pas toujours avec certitude quelle est l'intention d'un utilisateur, mais nous pouvons la deviner avec une grande précision.
  • L'énoncé est la façon dont l'utilisateur formule sa demande.
    Habituellement, les utilisateurs ont plus d'une façon de formuler une commande vocale. Par exemple, on peut régler un réveil en disant « Régler le réveil sur 8h », ou « Réveil 8h demain » ou encore « Je dois me réveiller à 8h ». Les concepteurs doivent tenir compte de toutes les variantes possibles de l'énoncé.
  • Les slots 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, « 8h00 » est un créneau horaire.

Ne mettez pas de 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 de réunion, vous devez dire "Calendrier, réunions, créer une nouvelle réunion"." Si vous devez expliquer les commandes, vous devez reconsidérer la façon dont vous concevez le système. Visez toujours une conversation en langage naturel et essayez de vous adapter à divers styles de parole).

Rechercher la cohérence

Vous devez assurer la cohérence du langage et de la voix dans tous les contextes. La cohérence aidera à renforcer la familiarité dans les interactions.

Fournissez toujours des commentaires

La visibilité de l'état du système est l'un des principes fondamentaux d'une bonne conception d'interface graphique. 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.

  • Informez l'utilisateur que le système est à l'écoute.
    Afficher des indicateurs visuels lorsque l'appareil écoute ou traite la demande de l'utilisateur. Sans rétroaction, l'utilisateur ne peut que deviner si le système fait quelque chose. C'est pourquoi même les appareils uniquement vocaux tels qu'Amazon Echo et Google Home nous donnent un bon retour visuel (lumières clignotantes) lorsqu'ils écoutent ou recherchent une réponse.
  • Fournir des marqueurs conversationnels.
    Les marqueurs de conversation indiquent à l'utilisateur où il en est dans la conversation.
  • Confirmer lorsqu'une tâche est terminée.
    Par exemple, lorsque les utilisateurs demandent au système de maison intelligente à commande vocale "Éteignez 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 de l'objectif du système de maison intelligente, qui est de faciliter la vie de l'utilisateur.

Évitez les longues phrases

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

Soyez respectueux du 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 terminer sa tâche. Ainsi, si vous ne pouvez pas résumer une réponse en quelques mots, affichez-la plutôt à l'écran.

Fournir les étapes suivantes de manière séquentielle

Les utilisateurs peuvent être submergés non seulement par de longues phrases, mais aussi par leur nombre d'options à 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 à tout moment et assurez-vous qu'il sait quoi faire à chaque instant.

Lors de la conception d'un système vocal complexe avec de nombreuses fonctionnalités, vous pouvez utiliser la technique de la divulgation progressive : ne présentez que les options ou les informations nécessaires pour accomplir la tâche.

Avoir une solide stratégie de gestion des erreurs

Bien sûr, le système doit empêcher les erreurs de se produire en premier lieu. Mais quelle que soit la qualité de votre système à commande vocale, vous devez toujours concevoir pour 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.
    Dans la conversation, il n'y a pas d'erreurs. Essayez d'éviter les réponses du type "Votre réponse est incorrecte".
  • Fournir des flux de récupération d'erreur.
    Fournissez une option pour les allers-retours dans une conversation, ou même pour quitter le système, sans perdre d'informations importantes. Enregistrez l'état de l'utilisateur dans le parcours, afin qu'il puisse reprendre le système là où il s'était arrêté.
  • Laissez les utilisateurs relire les informations.
    Fournir une option pour que le système répète la question ou la réponse. Cela peut être utile pour les questions ou les réponses complexes où il serait difficile pour l'utilisateur de consigner toutes les informations dans sa mémoire de travail.
  • Fournir un libellé d'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. La formulation d'arrêt devrait les aider à faire exactement cela.
  • Gérez les énoncés inattendus avec grâce.
    Peu importe combien vous investissez dans la conception d'un système, il y aura des situations où le système ne comprendra pas l'utilisateur. Il est essentiel de gérer ces cas avec grâce. N'ayez pas peur de laisser le système admettre un manque de compréhension. Le système doit communiquer ce qu'il a compris et fournir des rappels utiles.
  • Utilisez l'analyse pour améliorer votre stratégie d'erreur.
    Analytics peut vous aider à identifier les mauvais virages et les interprétations erronées.

Gardez une trace du contexte

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

En savoir plus sur 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 le contexte de l'utilisateur ou le comportement passé) pour comprendre ce que l'utilisateur veut. Cette technique est appelée interprétation intelligente et nécessite que le système apprenne activement à connaître l'utilisateur et soit capable d'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 l'utilisateur, que vous le prévoyiez ou non. Les gens associent la voix aux humains plutôt qu'aux machines. Selon une étude de Speak Easy Global Edition, 74 % des utilisateurs réguliers de la technologie vocale s'attendent à ce que les marques aient des voix et des personnalités uniques pour leurs produits à commande vocale. Il est possible de développer l'empathie grâce à la personnalité et d'atteindre un niveau d'engagement plus élevé de l'utilisateur.

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 comptez sur ce personnage lors de la création de dialogues.

Bâtir la confiance

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

L'établissement de la confiance commence par la définition des attentes des utilisateurs. Les interfaces graphiques traditionnelles comportent 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 disposent de moins d'outils sur lesquels s'appuyer. Pourtant, il est vital 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 parle de ce que le système peut faire ou de ce qu'il sait. Lors de la conception de l'intégration, essayez de proposer des exemples significatifs pour faire savoir aux gens ce qu'il peut faire (les exemples fonctionnent mieux que les instructions).

En ce qui concerne les résultats valides, les gens savent que les systèmes à commande vocale sont imparfaits. Lorsqu'un système fournit une réponse, certains utilisateurs peuvent douter que la réponse soit correcte. cela se produit parce que les utilisateurs ne disposent d'aucune information permettant de savoir si leur requête 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 comme preuve à l'appui (affichez la requête d'origine à l'écran) et fournissez des informations clés sur l'algorithme. Par exemple, lorsqu'un utilisateur demande "Montre-moi les cinq meilleurs films de 2018", le système peut dire : "Voici les cinq meilleurs films de 2018 selon le box-office aux États-Unis".

N'ignorez pas la sécurité et la confidentialité des données

Contrairement aux appareils mobiles, qui appartiennent à l'individu, 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 qui a accès à toutes vos données personnelles. Certains systèmes VUI tels qu'Amazon Alexa, Google Assistant et Apple Siri peuvent reconnaître les voix individuelles, ce qui ajoute une couche de sécurité au système. Néanmoins, cela ne garantit pas que le système sera en mesure de reconnaître les utilisateurs en fonction de leur signature vocale unique dans 100 % des cas.

La reconnaissance vocale s'améliore continuellement et il sera difficile, voire impossible, d'imiter une voix dans un proche avenir. Cependant, dans la réalité actuelle, il est vital de fournir une couche d'authentification supplémentaire pour rassurer l'utilisateur sur la sécurité de ses données. Si vous concevez une application qui fonctionne avec des données sensibles, telles que des informations de santé ou des coordonnées 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.

Effectuer des tests d'utilisabilité

Les tests d'utilisabilité sont une exigence obligatoire pour tout système. Tester tôt, tester souvent devrait être une règle fondamentale de votre processus de conception. Rassemblez les données de recherche des utilisateurs dès le début et réitérez 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 exemples de dialogues. Entraînez-vous à lire à haute voix des exemples de dialogues. Une fois que vous avez des flux de conversation, 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 semblent naturels.
  • Premières étapes du développement du produit (tests avec des prototypes lo-fi)
    Les tests Wizard of Oz sont bien adaptés pour tester les interfaces conversationnelles. Le test du Magicien d'Oz est un type de test dans lequel un participant interagit avec un système qui, selon lui, est exploité par un ordinateur, mais qui est en fait 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 The Wonderful Wizard of Oz de Frank Baum. Dans le livre, un homme ordinaire se cache derrière un rideau, se faisant passer pour un puissant sorcier. Ce test vous permet de cartographier tous les scénarios d'interaction possibles 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 Wizard of Oz sur macOS.
  • Concevoir pour la voix : la méthode du "magicien d'Oz" (regarder sur Vimeo)
  • Étapes ultérieures du développement du produit (tests avec des prototypes hi-fi)
    Dans les tests d'utilisabilité des interfaces utilisateur graphiques, nous demandons souvent aux utilisateurs de parler à haute voix lorsqu'ils interagissent avec un système. Pour un système à commande vocale, ce n'est pas toujours possible car le système écouterait cette narration. Ainsi, il serait peut-être préférable d'observer les interactions de l'utilisateur avec le système, plutôt que de lui demander de parler à haute voix.

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

Maintenant que vous avez une solide compréhension de ce qu'est une interface multimodale et des règles à retenir lors de leur conception, nous pouvons discuter de la façon de créer un prototype d'interface multimodale.

Le prototypage est une partie fondamentale du processus de conception. Pouvoir donner vie à une idée et la partager avec les autres est extrêmement important. Jusqu'à présent, les concepteurs qui souhaitaient intégrer la voix dans le prototypage disposaient de peu d'outils sur lesquels s'appuyer, le plus puissant étant un organigramme. Imaginer comment un utilisateur interagirait avec un système nécessitait beaucoup d'imagination de la part de quelqu'un qui regardait l'organigramme. Avec Adobe XD, les concepteurs ont désormais accès au médium de la voix et peuvent l'utiliser dans leurs prototypes. XD connecte de manière transparente le prototypage d'écran et de voix dans une seule application.

Nouvelles expériences, même processus

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

  • Les déclencheurs vocaux démarrent une interaction lorsqu'un utilisateur prononce un mot ou une phrase (énoncé) particulier.
  • 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 à de nombreuses fins différentes. Par exemple, il peut agir comme un accusé de réception (pour rassurer les utilisateurs) ou comme un guide (pour que les utilisateurs sachent quoi faire ensuite).

La grande chose à propos de XD est qu'il ne vous oblige pas à apprendre les complexités de chaque plate-forme vocale.

Assez de mots - voyons comment cela fonctionne en action. Pour tous les exemples que vous verrez ci-dessous, j'ai utilisé des plans de travail créés à l'aide du kit d'interface utilisateur Adobe XD 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 plans de travail suivants :

exemple de plan de travail
( Grand aperçu )

Passons en mode prototypage pour ajouter quelques interactions vocales. Nous allons commencer par les déclencheurs vocaux. En plus des déclencheurs tels que le toucher et le glisser, nous pouvons désormais utiliser la voix comme déclencheur. Nous pouvons utiliser n'importe quel calque pour les déclencheurs vocaux tant qu'ils ont une poignée menant à un autre plan de travail. Relions les plans de travail ensemble.

Connecter des plans de travail ensemble
Relier les plans de travail ensemble. ( Grand aperçu )

Une fois que nous aurons fait cela, nous trouverons une nouvelle option "Voice" sous le "Trigger". Lorsque nous sélectionnons cette option, nous verrons un champ "Commande" que nous pouvons utiliser pour entrer un énoncé - c'est ce que XD écoutera réellement. Les utilisateurs devront prononcer cette commande pour activer le déclencheur.

Définition d'un déclencheur vocal dans Adobe XD.
Définition d'un déclencheur vocal dans Adobe XD. ( Grand aperçu )

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 vocale. Comme je l'ai mentionné précédemment, la lecture vocale permet à un système de prononcer certains 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,2 s. Sous l'action, vous trouverez "Lecture vocale". Nous écrirons ce que l'assistant virtuel nous répond.

Utilisation de l'option Commande pour saisir un énoncé ou prononcer une commande pour activer le déclencheur
( Grand aperçu )

Nous sommes prêts à tester notre prototype. Sélectionnez le premier plan de travail et cliquez sur le bouton de lecture en haut à droite pour lancer une fenêtre d'aperçu. Lorsque vous interagissez avec le prototypage vocal, assurez-vous que votre micro est allumé. Ensuite, maintenez la barre d'espacement enfoncée pour prononcer la commande vocale. Cette entrée déclenche l'action suivante dans le prototype.

Utilisez l'animation automatique pour rendre l'expérience plus dynamique

L'animation apporte de nombreux avantages à la conception de l'interface utilisateur. Il sert des objectifs fonctionnels clairs, tels que :

  • communiquer les relations spatiales entre les objets (D'où vient l'objet ? Ces objets sont-ils liés ?) ;
  • communiquer les affordances (que puis-je faire ensuite ?)

Mais les objectifs fonctionnels ne sont pas les seuls avantages de l'animation ; l'animation rend également l'expérience plus vivante et dynamique. C'est pourquoi les animations d'interface utilisateur devraient faire naturellement partie des interfaces multimodales.

Avec "Auto-Animate" disponible dans Adobe XD, il devient beaucoup plus facile de créer des prototypes avec des transitions animées immersives. Adobe XD fait tout le travail pour vous, vous n'avez donc pas à vous en soucier. Pour créer une transition animée entre deux plans de travail, il vous suffit de dupliquer un plan de travail, de modifier les propriétés de l'objet dans le clone (propriétés telles que la taille, la position et la rotation) et d'appliquer une action d'animation automatique. XD animera automatiquement les différences de propriétés entre chaque plan de travail.

Voyons comment cela fonctionne dans notre conception. Supposons que nous ayons une liste de courses existante dans Amazon Echo Show et que nous souhaitions ajouter un nouvel objet à la liste à l'aide de la voix. Dupliquer le plan de travail suivant :

Plan de travail : liste de courses.
Plan de travail : liste de courses. ( Grand aperçu )

Introduisons quelques changements dans la mise en page : Ajoutez un nouvel objet. Nous ne sommes pas limités ici, nous pouvons donc facilement modifier toutes les propriétés telles que les attributs de texte, la couleur, l'opacité, la position de l'objet - en gros, toutes les modifications que nous apportons, XD s'animera entre elles.

Deux plans de travail : notre liste de courses originale et sa copie avec un nouvel article.
Deux plans de travail : notre liste de courses originale et sa copie avec un nouvel article. ( Grand aperçu )

Lorsque vous associez deux plans de travail en mode prototype à l'aide de l'animation automatique dans "Action", XD animera automatiquement les différences de propriétés entre chaque plan de travail.

Lorsque vous associez deux plans de travail en mode prototype à l'aide de l'animation automatique dans "Action", XD animera automatiquement les différences de propriétés entre chaque plan de travail.
( Grand aperçu )

Et voici à quoi ressemblera l'interaction pour les utilisateurs :

Un GIF montrant à quoi ressemblera l'interaction pour les utilisateurs

Une chose cruciale qui doit être mentionnée : Gardez les mêmes noms pour toutes les couches ; sinon, Adobe XD ne pourra pas appliquer l'animation automatique.

Conclusion

Nous sommes à l'aube d'une révolution de l'interface utilisateur. Une nouvelle génération d'interfaces — les interfaces multimodales — donnera non seulement plus de pouvoir aux utilisateurs, mais changera également la façon dont les utilisateurs interagissent avec les systèmes. 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.

Cet article fait partie de la série de conception UX sponsorisée par Adobe. L'outil Adobe XD est conçu pour un processus de conception UX rapide et fluide, car il vous permet de passer plus rapidement de l'idée au prototype. Concevez, prototypez et partagez - le tout dans une seule application. Vous pouvez découvrir d'autres projets inspirants créés avec Adobe XD sur Behance, et également vous inscrire à la newsletter de conception d'expérience Adobe pour rester à jour et informé des dernières tendances et informations sur la conception UX/UI.