Contente
- 01. Defina uma personalidade
- 02. Use RiveScript
- 03. Gere o cérebro do seu bot
- 04. Projete uma voz
- 05. Solicitar envio
- 06. Não tenha medo do chatbot
Em meados da década de 2000, os agentes virtuais e os chatbots de atendimento ao cliente recebiam muita adulação, embora não fossem muito comunicativos e, por baixo do capô, eram meramente compostos de trocas de dados com servidores da web.
Hoje em dia, embora exista um grande número de exemplos de 'IA fraca' (incluindo Siri, Alexa, motores de busca na web, tradutores automatizados e reconhecimento facial) e outros tópicos como web design responsivo estão monopolizando os holofotes, os chatbots ainda estão causando agitação . Com grandes investimentos de grandes empresas, ainda existem muitas oportunidades de hackear as interfaces de conversação do futuro.
- Como criar uma experiência de chatbot
Às vezes, eles ganham uma má reputação, mas os chatbots podem ser úteis. Eles não precisam parecer uma substituição básica para um formulário da web padrão, onde o usuário preenche os campos de entrada e espera pela validação - eles podem fornecer uma experiência de conversação.
Basicamente, estamos aprimorando a experiência do usuário para que pareça mais natural, como conversar com um especialista ou amigo, em vez de apontar e clicar no navegador ou gestos móveis. O objetivo é que, ao fornecer respostas empáticas e contextuais, essa tecnologia se torne incorporada diretamente na vida das pessoas.
Assista ao vídeo abaixo ou continue lendo para descobrir uma maneira prática de projetar e construir um chatbot, com base em um aplicativo real de entrada de projeto em uma prática de design de serviço.
01. Defina uma personalidade
Como essa prática atende a mais de 110.000 membros em todo o mundo, o objetivo era fornecer uma interface rápida, conveniente e natural por meio da qual as partes interessadas internas pudessem solicitar serviços digitais eficazes, em vez de ter que preencher formulários confusos.
A primeira etapa foi estabelecer a personalidade do chatbot, pois isso representaria a voz da equipe de design de serviço para suas partes interessadas. Baseamo-nos no trabalho seminal de Aarron Walter em personas de design. Isso ajudou muito nossa equipe a desenvolver os traços de personalidade do bot, que determinaram as mensagens de saudações, erros e feedback do usuário.
Esta é uma etapa delicada, pois afeta a forma como a organização é percebida. Para garantir que tínhamos o máximo de informações possível, montamos imediatamente workshops com as partes interessadas para descobrir a personalidade, cor, tipografia, imagens e fluxo do usuário apropriados ao interagir com o bot.
Depois de obter todas as aprovações necessárias - incluindo a busca de aconselhamento jurídico -, decidimos converter formulários de solicitação arcaicos em uma série de perguntas e respostas que imitavam uma conversa entre as partes interessadas e um representante de nossa equipe de serviços de design.
02. Use RiveScript
Sabíamos que não queríamos nos aprofundar muito na linguagem de marcação de IA para a parte de processamento - precisávamos apenas o suficiente para iniciar a experiência.
RiveScript é uma API simples de chatbot que é fácil de aprender e suficiente para nossas necessidades. Em alguns dias, tínhamos a lógica de receber uma solicitação de projeto do bot e analisá-la com lógica de negócios suficiente para validar e categorizá-la para que pudesse ser enviada por meio de serviços JSON REST para a fila de tarefas de projeto interna apropriada.
Para fazer este chatbot básico funcionar, vá para o repositório RiveScript, clone-o e instale todas as dependências do Node padrão. No repo, você também pode ter uma ideia das interações que pode adicionar com os vários trechos de exemplo.
Em seguida, execute a pasta do cliente da web, que transforma o bot em uma página da web ao executar um servidor Grunt básico. Nesse ponto, você pode aprimorar a experiência para atender às suas necessidades.
03. Gere o cérebro do seu bot
A próxima etapa é 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 prontas para uso (por exemplo, perguntas como 'Qual é o seu nome?', 'Quantos anos você tem?' E 'Qual é o seu cor favorita?').
Quando você inicia o aplicativo cliente da web usando o comando Node adequado, o arquivo HTML é instruído a carregar esses.RIVE arquivos.
Em seguida, precisamos gerar a parte do cérebro do nosso chatbot que irá lidar com as solicitações do projeto. Nosso objetivo principal é converter uma seleção de perguntas de admissão de tarefas do projeto em uma conversa regular.
Então, por exemplo:
- Olá, como podemos ajudar?
- Ótimo, quando precisamos começar?
- Você pode me dar uma ideia aproximada do seu orçamento?
- Conte-me mais sobre seu projeto ...
- Como você ficou sabendo sobre nós?
Um formulário da web acessível típico seria assim:
form action = ""> fieldset> legend> Request Type: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- um "> opção 1 / rótulo> br> input id =" opção-dois "type =" rádio "name =" pedido-tipo "valor =" opção-dois "> rótulo para =" opção-dois "> opção 2 / label> br> input id = "opção-três" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> opção 3 / label> br> / fieldset > fieldset> legend> Timeline: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 month / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 meses / label> br> input id = "quatro mais meses" type = "radio" name = "linha do tempo do pedido" value = "quatro mais meses"> label for = "quatro mais meses"> 4+ meses / label> br> / fieldset> br> label for = "request-budget"> Informações do orçamento / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Descrição do projeto / label> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference-text" rows = "10" cols = "30"> / textarea> br > tipo de entrada = "enviar" valor = "Enviar"> / formulário>
Com os formulários da web, estamos bem 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 atrevida aparece.
Com os chatbots, podemos interagir com o envio de uma solicitação e torná-la mais significativa.
04. Projete uma voz
Para converter essa forma em uma interface de usuário de conversação servida no cliente web chatbot do RiveScript, precisamos converter a arquitetura de informação de rígida para fluida; ou rótulos de campo em strings de IU.
Vamos considerar alguns rótulos de campo acessíveis e seu tom de pergunta 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 para começar?
- Informações de 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, quem o indicou para nós?
Em seguida, precisamos converter o código do formulário da web em script de IA, seguindo a lógica de processamento muito fácil de aprender do RiveScript para conversas bidirecionais:
- Como podemos ajudar? + *% como podemos ajudar - set areas = varSure, você se importa se eu fizer algumas perguntas? + *% certeza, você se importa se eu fizer algumas perguntas - Quando devo iniciar esta solicitação? + *% em quanto tempo preciso iniciar esta solicitação - definir quando = varPode me dar uma ideia aproximada do seu orçamento? + *% você pode me dar uma ideia aproximada do seu orçamento - definir orçamento = varOK, 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 a ser resolvido, componentes e ambientes afetados ou uma descrição geral - set project = varAlso, quem o encaminhou para nós? + *% também quem indicou você para nós - set referal = vargreat aqui é o que eu tenho até agora: n Serviços necessários: obter áreas> n Precisa começar: obter quando> n Orçamento aproximado: obter orçamento> n Sobre o seu projeto: obtenha o projeto> n Indicado por: obtenha recomendação> n e entrarei em contato em breve. Há mais alguma coisa em que eu possa ajudá-lo hoje? ligar> admissão obter áreas> obter quando> obter orçamento> obter projeto> obter encaminhamento> / ligar>
05. Solicitar envio
Ao contrário das variáveis de formulário padrão enviadas para outra página ou serviço para processamento, os chatbots podem validar e enviar informações inseridas pelo usuário em uma janela de bate-papo (ou faladas) imediatamente, o que significa que os usuários também podem revisar os valores inseridos anteriormente com facilidade.
Precisávamos enviar a solicitação do usuário inserida na IU do chatbot por meio da API JSON REST para um servidor de tarefas de projeto externo.
Em RiveScript-js, somos livres para fazer uso de um XMLHttpRequest objeto de enviar a solicitação quase simultaneamente, uma vez que os dados são inseridos pelo usuário:
> captação de objetos javascript var http = new 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 (), "referal"); var url = "http: // localhost: 3000 / send"; var params = "áreas =" + a + "& quando =" + b + "& orçamento =" + c + "& projeto =" + d + "& referal =" + e; console.log (params); http.open ("POST", url, verdadeiro); http.setRequestHeader ("Content-type", "application / x- www-form-urlencoded"); http.setRequestHeader ("Conexão", "fechar"); http.onreadystatechange = function () {// Chama uma função quando o estado muda. if (http.readyState == 4 && http.status == 200) {alert (http.responseText); }} http.send (params); objeto
06. Não tenha medo do chatbot
Em breve, as formas atuais de interagir com computadores para obter informações cederão à tecnologia baseada em IA, como chatbots, onde as pessoas apenas fazem comandos de voz simples, como vimos em tecnologias como Amazon Echo e Google Home.
A comunidade de web design não precisa temer - todos devemos abraçar o valor agregado dessa nova tecnologia.
Pode ser uma virada de jogo para as empresas para as quais trabalha, oferecendo atendimento ao cliente totalmente escalonável e inteligência aprimorada do cliente.
Este artigo foi publicado originalmente emrevista net, a revista mais vendida do mundo para web designers e desenvolvedores. Inscreva-se aqui.
