Como construir uma interface de chatbot

Em meados da 2000, os agentes virtuais e os chatbots de atendimento ao cliente receberam muita adulação, embora não fossem muito conversacionais, e sob o capô, eram apenas compostas de intercâmbios de dados com servidores da Web.

Hoje em dia, apesar de um grande número de exemplos de 'Ai fraco' existir (incluindo Siri, Alexa, mecanismos de pesquisa da Web, tradutores automatizados e reconhecimento facial) e outros tópicos como web design responsivo estão assolando o limoeiro, os chatbots ainda estão causando uma agitação. Com o grande investimento de grandes empresas, restam muitas oportunidades para hackear as interfaces de conversação do futuro.

• Como projetar uma experiência de chatbot

Às vezes eles têm uma má reputação, mas os chatbots podem ser úteis. Eles não precisam se sentir como um substituto básico para um formulário da Web padrão, onde o usuário preenche os campos de entrada e aguarda a validação - eles podem fornecer uma experiência de conversão.

Essencialmente, estamos aprimorando o experiência de usuário Para se sentir mais natural, como conversar com um especialista ou amigo, em vez de pilhas de navegador da Web e cliques ou gestos móveis. O objetivo é que, ao fornecer respostas empáticas e contextuais, esta tecnologia se tornará incorporada diretamente na vida das pessoas.

Assista ao vídeo abaixo ou leia para descobrir uma maneira prática de projetar e construir um chatbot, com base em um aplicativo real de ingestão de projetos em uma prática de design de serviço.

01. Defina uma personalidade

Como esta prática serve mais de 110.000 membros globalmente, o objetivo era fornecer uma interface rápida, conveniente e natural através dos quais as partes interessadas internas poderiam solicitar serviços digitais eficazes, em vez de ter que preencher as formas confusas.

O primeiro passo foi estabelecer a personalidade do Chatbot, pois isso representaria a voz da equipe de design de serviços para suas partes interessadas. Nós construímos no trabalho seminal de Aarron Walter em personas de design . Isso ajudou muito a nossa equipe a desenvolver os traços de personalidade do Bot, que determinou as mensagens para saudações, erros e feedback do usuário.

Este é um estágio delicado, pois afeta como a organização é percebida. Para ter certeza de que tínhamos tantas informações quanto possível, criamos imediatamente workshops de partes interessadas para pregar a personalidade, cor, tipografia, imagens e fluxo apropriadas ao se envolver com o bot.

Depois que tínhamos ganho todas as aprovações necessárias - incluindo buscando conselhos legais - estabelecemos para converter formulários de solicitação arcaico em uma série de perguntas de referência que imitava uma conversa entre as partes interessadas e um representante da nossa equipe de serviços de design.

02. Use Rivescript

Nós sabíamos que não queríamos ficar muito profundos na linguagem AI Markup para a parte de processamento - nós apenas precisávamos o suficiente para começar a experiência.

Rivescript é uma simples API de Chatbot que é fácil de aprender e serve para as nossas necessidades. Em poucos dias, tivemos a lógica para a ingestão de um pedido de projeto do bot, e analisei-o com lógica de negócios suficiente para validar e categorizá-lo para que ele possa ser enviado através do JSON Rest Services à fila de tarefas do projeto interno apropriado.

Para obter este chatbot básico funcionando, vá para o Rivescript Repo. , clone e instale todas as dependências do nó padrão. No repo, você também pode obter um sabor das interações que você pode adicionar com os vários snippets de exemplo.

Em seguida, execute a pasta Web-Client, que transforma o bot em uma página da Web executando um servidor grunhido básico. Neste ponto, você pode melhorar a experiência para atender às suas necessidades.

03. Gere o cérebro do seu bot

O próximo passo é gerar o "cérebro" do nosso bot. Isso é especificado em arquivos com a extensão .rive, e felizmente, o Rivescript já vem com interações básicas fora da caixa (por exemplo, perguntas como 'Qual é o seu nome?', 'Quantos anos você tem?' E 'Qual é o seu cor favorita?').

Quando você inicia o aplicativo Web-Client usando o comando do nó correto, o arquivo HTML é instruído a carregar estes .RIVE arquivos.

Em seguida, precisamos gerar a parte do cérebro de nosso chatbot que lidará com solicitações de projetos. Nosso objetivo principal é converter uma seleção de questões de ingestão de tarefas de projeto em uma conversa regular.

Então, por exemplo:

• Olá, como podemos ajudar?
• Ótimo, em quanto tempo precisamos começar?
• Você pode me dar uma ideia aproximada do seu orçamento?
• Conte-me mais sobre o seu projeto ...
• Como você ficou sabendo sobre nós?

Um formulário web acessível típico seria assim:

 & lt; formulário ação = "" & gt;
& lt; fieldset & gt;
& lt; Legend & GT; Tipo de solicitação: & lt; / legend & gt;
& lt; input id = "opção-One" Type = "Radio" Name = "tipo de solicitação" Valor = "opção-One" & gt;
& lt; etiqueta para = "opção-One" & gt; opção 1 & lt; / etiqueta & gt; & lt; BR & GT;
& lt; entrada ID = "opção-dois" tipo = "nome" nome = "value =" opção-dois "& gt;
& lt; etiqueta para = "opção-dois" & gt; opção 2 & lt; / etiqueta & gt; & lt; BR & GT;
& lt; entrada ID = "opção-três" tipo = "nome" nome = "value =" opção-três "& gt;
& lt; etiqueta para = "opção-três" & gt; opção 3 & lt; / label & gt; & lt; BR & GT;
& lt; / fieldset & gt;
& lt; fieldset & gt;
& lt; Legend & GT; Timeline: & lt; / Legend & GT;
& lt; entrada ID = "One Month" Type = "Radio" Name = "Solicitar-Timeline" Valor = "um mês" & gt;
& lt; etiqueta para = "um mês" & gt; 1 mês & lt; / label & gt; & lt; BR & GT;
& lt; entrada ID = "Um-três meses" tipo = "Radio" Name = "Solicitação do tempo" valor = "um-três meses" & gt;
& lt; etiqueta para = "um mês" e gt; 1-3 meses e lt; / label & gt; & lt; BR & GT;
& lt; Entrada ID = "Quatro-Plus-Meses" Tipo = "Radio" Name = "Solicitação do tempo" valor = "quatro-plus-meses" & gt;
& lt; etiqueta para = "quatro meses" & gt; 4+ meses & lt; / label & gt; & lt; BR & GT; & lt; / fieldset & gt;
& lt; BR & GT;
& lt; etiqueta para = "solicitação-orçamento" & gt; informação orçamentária & lt; / label & gt; & lt; BR & GT; & lt; textarea id = "solicitação-orçamento" nome = "solicitação-orçamento-texto" linhas = "10" cols = "30" e gt; & lt; / textarea & gt;
 & lt; BR & GT;
& lt; etiqueta para = "solicitação-descrição" & gt; descrição do projeto & lt; / label & gt; & lt; BR & GT;
& lt; textarea id = "solicitação-descrição" nome = "solicitação- description-text" linhas = "10" cols = "30" e gt; & lt; / textarea & gt;
 & lt; BR & GT;
& lt; etiqueta para = "referência de solicitação" & gt; referência & lt; / label & gt; & lt; BR & GT; & lt; textarea id = "solicitação-referência" nome = "solicitação-referência- texto" linhas = "10" cols = "30" e gt; & lt; / textarea & gt;
 & lt; BR & GT;
 & lt; Tipo de entrada = "Enviar" Valor = "Enviar" & GT;
& lt; / form & gt; 

Com formulários da Web, estamos muito familiarizados com certos padrões: você clica no botão Enviar, todos os dados do formulário são enviados para outra página onde a solicitação é processada e, em seguida, provavelmente uma página de agradecimento insolente aparece.

Com chatbots, somos capazes de tomar a interação de enviar um pedido e torná-lo mais significativo.

04. Projetar uma voz

Para converter este formulário para uma interface de usuário conversacional servido no cliente Web do Rivescript, precisamos converter a arquitetura de informações de rígida para fluido; ou rótulos de campo em cordas da interface do usuário.

Vamos considerar alguns rótulos de campo acessíveis e seu tom relacionado:

• Solicitação: Como podemos ajudar? Não tenho certeza? Você se importa se eu fizer algumas perguntas?
• Linha do tempo: Em quanto tempo precisamos começar?
• Informações sobre orçamento: Você pode me dar uma ideia aproximada do seu orçamento?
• Descrição do Projeto: OK, você pode me dizer um resumo do problema a ser resolvido?
• Referência: Além disso, que nos encaminhou?

Em seguida, precisamos converter o código do formulário da Web no script AI, após o Rivescript é muito aprendível lógica de processamento Para conversas bidirecionais:

- Como podemos ajudar?

+ *
% como podemos ajudar
- & lt; definir áreas = & lt; var & gt; e gt; certeza, você se importa se eu fizer algumas perguntas?

+ *
Claro que se importa se eu fizer algumas perguntas - em quanto tempo eu preciso começar este pedido?

+ *
Em quanto tempo eu preciso para iniciar este pedido
- & lt; definir quando = & lt; var & gt; & gt; você pode me dar idéia aproximada do seu orçamento?

+ *
% você pode me dar ideia aproximada do seu orçamento
- & lt; definir orçamento = & lt; var & gt; & gt; ok, você pode me dizer um resumo do problema a ser resolvido, componentes e ambientes afetados ou uma descrição geral?

+ *
% OK Você pode me dizer um resumo do problema para ser resolvido componentes e ambientes afetados ou uma descrição geral
- & lt; Set Project = & lt; var & gt; e gt; também, que nos encaminhou?

+ *
% também que se referiram para nós
- & lt; conjunto de referências = & lt; var & gt; e gt; ótimo aqui é o que eu tenho até agora: \ n serviços necessários: & lt; obter áreas e gt; \ n precisa começar: & lt; obter quando & gt; \ n orçamento bruto: & lt; obter orçamento e gt; \ n sobre o seu projeto: & lt; obter projeto & gt; \ n Referido por: & lt; obter encaminhamento e gt; \ n e entrará em contato em breve há mais alguma coisa que eu possa ajudá-lo hoje? & lt; chamada & gt; ingestão e lt; obter áreas e gt; & lt; obter quando & gt; & lt; obter orçamento & gt; & lt; obter projeto e gt; & lt; obter referencial & gt; / lt; / call & gt; 

05. Solicitação de envio

Ao se opor às variáveis ​​de formulário padrão a serem enviadas para outra página ou serviço ao processo, os chatbots podem validar e enviar informações inseridas pelo usuário em uma janela de bate-papo (ou falada) imediatamente, o que significa que os usuários também podem revisitar os valores inseridos anteriormente.

Precisamos enviar a solicitação do usuário inserida na interface do usuário do ChatBot através da API do JSON REST para um servidor de tarefas de projeto externo.

No Rivescript-js. Estamos livres para fazer uso de um Xmlhttprequest. Objeto para enviar a solicitação quase simultaneamente, à medida que os dados são inseridos pelo usuário:

 & gt; Javascript de ingestão de objeto
 var http = novo xmlhttprequest ();

 var A = rs.getuservar (rs.currentuser (), "áreas");
 var b = rs.getuservar (rs.currentuser (), "quando");
 var c = rs.getuservar (rs.currentuser (), "orçamento");
 var d = rs.getuservar (rs.currentuser (), "projeto");
 var e = rs.getuservar (rs.currentuser (), "referual");

 var url = "http: // localhost: 3000 / enviar";

 var params = "ÁREAS =" + A + "& amp; quando =" + B + "& amp; orçamento =" + C + "& amp; pro ject =" + d + "& amp; referual =" + e;
 console.log (params);

 http.open ("post", url, true);

 http.setrequestheader ("Tipo de conteúdo", "aplicativo / x- www-form-urlencoded");
 http.setrequestheader ("Conexão", "fechar");
 http.onreadystateechange = function () {// chame uma função quando o estado é alterado.
  if (http.readystate == 4 & amp; e amp; http.status == 200) {
    alerta (http.responsetext);
  }
 }
 http.send (params);

& lt; Objeto 

06. Não tenha medo do chatbot

Em breve, as formas atuais de interagir com computadores para obter informações vão entregar a tecnologia baseada em AI, como chatbots, onde as pessoas simplesmente fazem comandos de voz simples, como tenhamos visto com tecnologia, como o Amazon Echo e o Google Home.

A comunidade de web design não precisa de medo - todos nós devemos estar abraçando o valor agregado dessa nova tecnologia.

Pode ser um trocador de jogos para as empresas que funciona, oferecendo atendimento ao cliente totalmente escalável e melhorar a inteligência do cliente.

Este artigo foi originalmente destaque em Revista Net. , A revista mais vendida do mundo para web designers e desenvolvedores. Inscreva-se aqui .

Artigos relacionados:

• Como os chatbots estão aprendendo - entrevista com Giles Colborne
• Como a Web inteligente mudará nossas interações
• Como as interfaces de conversação estão inovando o banco