Comment nous avons procédé pour créer des éléments d'interface utilisateur d'entrée pour notre plate-forme de chatbot

Publié: 2017-01-01

Les chatbots, tels qu'ils existent aujourd'hui, n'ont pas beaucoup de capacités pour comprendre le langage humain naturel. Et c'est l'une des principales raisons pour lesquelles la plupart des applications de messagerie (Messenger, Kik, etc.) recourent à un mélange d'interface utilisateur graphique et textuelle dans leurs plates-formes de bot - pensez aux boutons, aux carrousels, aux cartes d'image et pas seulement aux réponses textuelles.

Chez Tars, nous utilisons le navigateur comme plate-forme pour créer notre propre interface de chat pour que les bots fonctionnent. Et cela nous donne une totale liberté sur tous les composants dont nous disposons. Si vous avez essayé l'un de nos bots (si ce n'est pas le cas, essayez-en d'abord ici et ici), vous saurez que nous soutenons fortement l'interface utilisateur graphique + l'approche textuelle. Dans le cadre de ce processus de réflexion, nous avons créé un certain nombre d'entrées clavier personnalisées dans notre interface frontale pour faciliter différentes interactions et situations utilisateur.

Messenger, Kik, Telegram sont d'immenses plateformes où les développeurs déploient chaque jour des centaines de bots. Je pense toujours que ces plates-formes de messagerie n'ont pas fait assez sur les composants frontaux pour aider un boommaker à créer des interactions utilisateur enrichissantes.

Et c'est pourquoi, je voulais parler davantage de la façon dont nous avons créé chaque interface utilisateur personnalisée, pourquoi chacune d'entre elles a du sens et comment leur absence bousille les interactions des utilisateurs en ce moment.

Alors on y va :

Défilement de la date et de l'heure

Pensez à un scénario où vous devez demander à un utilisateur quand il souhaite prendre rendez-vous ? Il peut y avoir plusieurs façons de donner la même information.

25 novembre, 25 novembre, 25 novembre, 25/11, 25-11-2016, 25/11/16 - tous signifient essentiellement la même chose, mais il devient difficile pour une machine de donner un sens à ces données.

C'est pourquoi nous avons incorporé un défileur de date et d'heure où les utilisateurs peuvent faire rouler les cadrans et sélectionner la date/l'heure.

chatbot1

Je n'ai vu aucune autre plate-forme de messagerie fournir cette interface utilisateur jusqu'à présent et je pense que c'est un must si un bot demande la date ou l'heure à l'utilisateur.

Boutons verticaux

chatbot2 Considérez-les comme des options à choix multiples dans un formulaire où vous avez un nombre limité de choix. Appuyer sur les boutons rend l'interaction plus rapide et limite également la portée de la conversation.

L'approche basée sur les boutons est logique lorsque vous devez choisir entre une pizza végétarienne et non végétarienne, mais ce n'est peut-être pas la meilleure interface utilisateur à avoir si vous avez le choix entre 100 polices d'assurance.

Que peut-on faire de plus avec les boutons verticaux ?

  • ajoutez une image à côté de chaque option pour la rendre plus attrayante visuellement.
  • vous pouvez soit laisser l'utilisateur répondre à un seul clic, soit le faire cliquer sur "Envoyer" après avoir appuyé sur l'une des options. Ce dernier aide à reconfirmer si l'utilisateur n'a pas sélectionné l'option particulière par erreur. Il n'y a aucun moyen de revenir en arrière dans un flux de discussion et c'est pourquoi cette personnalisation est logique.
  • ajoutez un menu d'informations rapides à chaque option pour fournir des informations détaillées et améliorer le processus de prise de décision.

chatbot3

Tout le monde ne connaît pas la différence entre Advance et Basic Facial. L'ajout de détails sur ce qui est inclus et la tarification améliore l'expérience utilisateur.

Une autre chose importante à garder à l'esprit lorsque vous utilisez Button UI est de formuler votre question de la bonne manière. Comme Leszek l'explique dans son article ici, il est préférable de poser la question d'une manière qui limite la gamme d'options et définit le contexte au lieu de poser une question très ouverte.

chatbot4

Restreindre la saisie de l'utilisateur

Je pense que c'est l'une des meilleures choses que nous ayons faites pour notre interface de chat. Chaque fois que nous fournissons une interface utilisateur d'entrée graphique (boutons, carrousels, etc.), nous n'autorisons pas l'utilisateur à saisir quoi que ce soit dans le texte.

Pourquoi faire ça? Parce qu'un utilisateur peut taper n'importe quoi et que votre bot n'est pas prêt pour cela. Jusqu'à ce que vous soyez là, il vaut mieux rester simple et restreint plutôt que de rompre la conversation.

Recommandé pour vous:

Comment Metaverse va transformer l'industrie automobile indienne

Comment Metaverse va transformer l'industrie automobile indienne

Que signifie la disposition anti-profit pour les startups indiennes ?

Que signifie la disposition anti-profit pour les startups indiennes ?

Comment les startups Edtech aident à améliorer les compétences et à préparer la main-d'œuvre pour l'avenir

Comment les startups Edtech aident la main-d'œuvre indienne à se perfectionner et à se préparer pour l'avenir...

Stocks technologiques de la nouvelle ère cette semaine : les problèmes de Zomato continuent, EaseMyTrip publie des...

Les startups indiennes prennent des raccourcis à la recherche de financement

Les startups indiennes prennent des raccourcis à la recherche de financement

La startup de marketing numérique Logicserve Digital aurait levé 80 Cr INR en financement auprès de la société de gestion d'actifs alternative Florintree Advisors.

La plate-forme de marketing numérique Logicserve met en sac un financement INR 80 Cr et se rebaptise LS Dig ...

Ce que nous faisons est ceci :

chatbot5

Ceci est notre interface de chat

Et c'est ce qui se passe quand vous n'avez pas quelque chose comme ça :

chatbot6

Il s'agit de Facebook Messenger qui n'autorise pas la saisie de texte restreinte lorsque vous avez des réponses rapides

Bouton Terminé et Pass

Ce sont deux toutes petites nuances que nous avons fini par incorporer car nous avons toujours pensé les chatbots scénarisés comme une évolution des formulaires.

Lorsque vous envoyez votre adresse ou que vous donnez un commentaire détaillé sur l'interface de chat, le comportement général consiste à appuyer sur le bouton d'envoi après avoir écrit quelques mots et la réponse entière est finalement répartie sur 3 à 4 déclarations. Avec le "bouton Terminé", vous pouvez continuer à taper et appuyer dessus une fois que vous avez donné la réponse complète.

Si vous ne disposez pas d'une telle option, le prochain message de la machine viendra après la première instance elle-même, ce qui entraînera des réponses incomplètes.

chatbot7

Avoir un bouton "Terminé" lorsque vous devez sélectionner plusieurs options ou avoir des réponses sur plusieurs lignes

Il peut également y avoir des cas où un utilisateur souhaite ignorer la question et pour cela, nous avons un "bouton Passer" à la place du "bouton Envoyer". Dès que l'utilisateur commence à taper, le bouton Passer se transforme en bouton Envoyer.

chatbot8

Vous ne voulez pas donner votre email ? Appuyez sur "Passer" pour sauter la question.

Suggestions de saisie semi-automatique

C'est comme la fonctionnalité de saisie semi-automatique dans la recherche Google où vous commencez à taper et cela suggère les options possibles. Cela devient particulièrement utile lorsque vous avez une longue liste d'options et qu'avoir des boutons verticaux n'est pas une option réalisable. Pensez à une longue liste de localités, de villes, de modèles de voitures, etc.

chatbot9

Étoiles et J'aime

Particulièrement utile lorsque vous demandez des commentaires ou une expérience utilisateur et que la réponse est de nature plus qualitative. Et vous pouvez même personnaliser les icônes pour qu'elles soient des étoiles, des goûts, des cœurs, des émoticônes.

chatbot10

Cartes-images

Ceci est utile lorsque vous devez présenter plusieurs éléments d'information sur chaque élément en une seule fois. Il peut s'agir d'un hamburger dans un processus de commande de nourriture ou d'une chemise dans un flux d'achats. Toutes les cartes sont empilées les unes contre les autres et vous pouvez faire défiler pour voir toutes les options.

Il y a 4 parties de cet élément d'interface utilisateur - image, titre, description et pied de page. Vous pouvez les utiliser différemment selon ce que vous voulez y afficher.

chatbot11

Si vous souhaitez tester tous ces éléments d'interface utilisateur d'entrée, voici le lien vers un chatbot qui vous guide un par un.

Le chat étant une interface minimaliste avec juste des bulles et une zone de texte ne donne pas beaucoup de portée. Et je pense que nous devrons repenser la manière dont nous pouvons faciliter une variété d'interactions en utilisant les éléments existants et en en ajoutant de nouveaux à l'interface de chat.

Aimeriez-vous savoir si vous avez vous-même joué avec l'interface de messagerie et si vous y avez ajouté d'autres éléments d'interface graphique sympas ?


[Ce message d'Ish Jindal est apparu pour la première fois sur Medium et a été reproduit avec permission.]