Contenido
- 01. Establecer una personalidad
- 02. Utilice RiveScript
- 03. Genera el cerebro de tu bot
- 04. Diseña una voz
- 05. Envío de solicitudes
- 06. No temas al chatbot
A mediados de la década de 2000, los agentes virtuales y los chatbots de servicio al cliente recibieron mucha adulación, aunque no eran muy conversacionales, y bajo el capó se componían simplemente de intercambios de datos con servidores web.
Hoy en día, aunque existe una gran cantidad de ejemplos de 'IA débil' (incluidos Siri, Alexa, motores de búsqueda web, traductores automáticos y reconocimiento facial) y otros temas como el diseño web receptivo están acaparando la atención, los chatbots siguen causando revuelo. . Con una importante inversión de las grandes empresas, quedan muchas oportunidades para piratear las interfaces de conversación del futuro.
- Cómo diseñar una experiencia de chatbot
A veces tienen mala reputación, pero los chatbots pueden resultar útiles. No es necesario que se sientan como un reemplazo básico de un formulario web estándar, donde el usuario completa los campos de entrada y espera la validación; pueden brindar una experiencia de conversación.
Básicamente, estamos mejorando la experiencia del usuario para que se sienta más natural, como conversar con un experto o un amigo, en lugar de apuntar y hacer clic en el navegador web o hacer gestos móviles. El objetivo es que, al proporcionar respuestas contextuales empáticas, esta tecnología se incorpore directamente a la vida de las personas.
Mire el video a continuación o siga leyendo para descubrir una forma práctica de diseñar y construir un chatbot, basado en una aplicación real de entrada de proyectos en una práctica de diseño de servicios.
01. Establecer una personalidad
Dado que esta práctica sirve a más de 110,000 miembros en todo el mundo, el objetivo era proporcionar una interfaz rápida, conveniente y natural a través de la cual las partes interesadas internas pudieran solicitar servicios digitales efectivos, en lugar de tener que completar formularios confusos.
El primer paso fue establecer la personalidad del chatbot, ya que representaría la voz del equipo de diseño del servicio ante sus partes interesadas. Nos basamos en el trabajo fundamental de Aarron Walter sobre personas de diseño. Esto ayudó mucho a nuestro equipo a desarrollar los rasgos de personalidad del bot, que luego determinaron los mensajes de saludos, errores y comentarios de los usuarios.
Esta es una etapa delicada, ya que afecta la percepción de la organización. Para asegurarnos de que teníamos la mayor cantidad de información posible, organizamos inmediatamente talleres para las partes interesadas para identificar la personalidad, el color, la tipografía, las imágenes y el flujo del usuario adecuados al interactuar con el bot.
Después de haber obtenido todas las aprobaciones necesarias, incluida la búsqueda de asesoramiento legal, nos propusimos convertir los formularios de solicitud arcaicos en una serie de preguntas de ida y vuelta que imitaban una conversación entre las partes interesadas y un representante de nuestro equipo de servicios de diseño.
02. Utilice RiveScript
Sabíamos que no queríamos profundizar demasiado en el lenguaje de marcado de IA para la parte de procesamiento; solo necesitábamos lo suficiente para poner en marcha la experiencia.
RiveScript es una API de chatbot simple que es bastante fácil de aprender y suficiente para nuestras necesidades. En unos pocos días, teníamos la lógica para recibir una solicitud de proyecto del bot y analizarla con suficiente lógica empresarial para validarla y categorizarla para que pudiera enviarse a través de los servicios JSON REST a la cola de tareas del proyecto interno correspondiente.
Para que este chatbot básico funcione, diríjase al repositorio de RiveScript, clónelo e instale todas las dependencias estándar de Node. En el repositorio también puede obtener una muestra de las interacciones que puede agregar con los diversos fragmentos de ejemplo.
A continuación, ejecute la carpeta del cliente web, que convierte el bot en una página web ejecutando un servidor Grunt básico. En este punto, puede mejorar la experiencia para que se adapte a sus necesidades.
03. Genera el cerebro de tu bot
El siguiente paso es generar el "cerebro" de nuestro bot. Esto se especifica en archivos con la extensión .RIVE y, afortunadamente, RiveScript ya viene con interacciones básicas listas para usar (por ejemplo, preguntas como '¿Cuál es tu nombre?', '¿Cuántos años tienes?' Y '¿Cuál es tu ¿color favorito?').
Cuando inicia la aplicación de cliente web con el comando de nodo adecuado, se le indica al archivo HTML que cargue estos.HENDER archivos.
A continuación, necesitamos generar la parte del cerebro de nuestro chatbot que se ocupará de las solicitudes de proyectos. Nuestro principal objetivo es convertir una selección de preguntas de admisión de tareas de proyectos en una conversación regular.
Así por ejemplo:
- Hola como podemos ayudar
- Genial, ¿qué tan pronto tenemos que empezar?
- ¿Puede darme una idea aproximada de su presupuesto?
- Cuéntame más sobre tu proyecto ...
- ¿Como supiste de nosotros?
Un formulario web accesible típico se vería así:
formulario acción = ""> conjunto de campos> leyenda> Tipo de solicitud: / leyenda> id de entrada = "opción-uno" tipo = "radio" nombre = "tipo de solicitud" valor = "opción-uno"> etiqueta para = "opción- uno "> opción 1 / etiqueta> br> id de entrada =" opción-dos "tipo =" radio "nombre =" tipo de solicitud "valor =" opción-dos "> etiqueta para =" opción-dos "> opción 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> opción 3 / label> br> / fieldset > fieldset> legend> Timeline: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> etiqueta para = "one-month"> 1 mes / label> br> input id = "one-three-months" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 months / label> br> input id = "cuatro-más-meses" type = "radio" name = "request- timeline" value = "cuatro-plus-months"> label for = "cuatro-plus-months"> 4+ meses / label> br> / fieldset> br> label for = "request-budget"> Información presupuestaria / label> br> textarea id = "request-budget" name = "request-budget-text" rows = "10" cols = "30"> / textarea> br> label for = "request-description"> Descripción del proyecto / label> br> textarea id = "request-description" name = "request- description-text" rows = "10" cols = "30"> / textarea > br> etiqueta para = "solicitud-referencia"> Referencia / etiqueta> br> textarea id = "solicitud-referencia" nombre = "solicitud-referencia-texto" filas = "10" cols = "30"> / textarea> br > tipo de entrada = "enviar" valor = "Enviar"> / formulario>
Con los formularios web, estamos muy familiarizados con ciertos patrones: hace clic en el botón Enviar, todos los datos del formulario se envían a otra página donde se procesa la solicitud y, probablemente, aparece una descarada página de agradecimiento.
Con los chatbots, podemos aprovechar la interacción de enviar una solicitud y hacerla más significativa.
04. Diseña una voz
Para convertir este formulario en una interfaz de usuario conversacional servida en el cliente web de chatbot de RiveScript, necesitamos convertir la arquitectura de información de rígida a fluida; o etiquetas de campo en cadenas de interfaz de usuario.
Consideremos algunas etiquetas de campo accesibles y su tono de pregunta relacionado:
- Pedido: ¿Cómo podemos ayudar? ¿No estoy seguro? ¿Le importa si le hago algunas preguntas?
- Línea de tiempo: ¿Qué tan pronto tenemos que empezar?
- Información presupuestaria: ¿Puede darme una idea aproximada de su presupuesto?
- Descripción del Proyecto: De acuerdo, ¿puede decirme un resumen del problema a resolver?
- Referencia: Además, ¿quién te refirió a nosotros?
A continuación, debemos convertir el código del formulario web en un script AI, siguiendo la lógica de procesamiento muy fácil de aprender de RiveScript para conversaciones bidireccionales:
- ¿Cómo podemos ayudar? + *% ¿cómo podemos ayudar? Establecer áreas = varSure, ¿te importa si hago un par de preguntas? + *% seguro que le importa si hago un par de preguntas - ¿Qué tan pronto debo comenzar esta solicitud? + *% ¿Qué tan pronto debo iniciar esta solicitud? Establecer cuándo = var ¿Puede darme una idea aproximada de su presupuesto? + *% ¿Puede darme una idea aproximada de su presupuesto? Establezca el presupuesto = varOK, ¿puede darme un resumen del problema a resolver, los componentes y los entornos afectados o una descripción general? + *% ok, ¿puede decirme un resumen del problema a resolver, componentes y entornos afectados o una descripción general - set project = varAlso, who refirió a nosotros? + *% también quién lo refirió a nosotros - establezca referal = vargreat esto es lo que obtuve hasta ahora: n Servicios necesarios: obtener áreas> n Necesito comenzar: obtener cuando> n Presupuesto aproximado: obtener presupuesto> n Acerca de su proyecto: obtenga el proyecto> n Recomendado por: obtenga una referencia> ny nos pondremos en contacto en breve. ¿Hay algo más en lo que pueda ayudarlo hoy? llamar> admisión obtener áreas> obtener cuando> obtener presupuesto> obtener proyecto> obtener referencia> / llamar>
05. Envío de solicitudes
A diferencia de las variables de formulario estándar que se envían a otra página o servicio para procesar, los chatbots pueden validar y enviar la información ingresada por el usuario en una ventana de chat (o hablada) inmediatamente, lo que significa que los usuarios también pueden volver a visitar los valores ingresados previamente fácilmente.
Necesitábamos enviar la solicitud del usuario ingresada en la interfaz de usuario del chatbot a través de la API JSON REST a un servidor de tareas de proyecto externo.
En RiveScript-js somos libres de hacer uso de un XMLHttpRequest objetar enviar la solicitud casi simultáneamente, ya que los datos son ingresados por el usuario:
> entrada de objetos javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "áreas"); var b = rs.getUservar (rs.currentUser (), "cuando"); var c = rs.getUservar (rs.currentUser (), "presupuesto"); var d = rs.getUservar (rs.currentUser (), "proyecto"); var e = rs.getUservar (rs.currentUser (), "referencia"); var url = "http: // localhost: 3000 / send"; var params = "areas =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (params); http.open ("POST", url, verdadero); http.setRequestHeader ("Tipo de contenido", "aplicación / x- www-form-urlencoded"); http.setRequestHeader ("Conexión", "cerrar"); http.onreadystatechange = function () {// Llamar a una función cuando cambia el estado. if (http.readyState == 4 && http.status == 200) {alerta (http.responseText); }} http.send (params); objeto
06. No temas al chatbot
Pronto, las formas actuales de interactuar con las computadoras para obtener información cederán a la tecnología basada en inteligencia artificial como los chatbots, donde las personas simplemente realizan comandos de voz simples, como hemos visto con tecnologías como Amazon Echo y Google Home.
La comunidad del diseño web no tiene por qué temer: todos deberíamos aceptar el valor añadido de esta nueva tecnología.
Podría ser un cambio de juego para las empresas para las que trabaja, ya que ofrece un servicio al cliente totalmente escalable y una mejor inteligencia del cliente.
Este artículo apareció originalmente enrevista neta, la revista más vendida del mundo para diseñadores y desarrolladores web. Suscríbete aquí.
