Principios de la interfaz de usuario conversacional: proceso completo de diseño de un chatbot de sitio web

En este artículo, le mostraré un estudio de caso que describe un proceso completo de diseño de una interfaz de usuario conversacional para un sitio web B2B, que incluye fragmentos del guión de conversación, conceptos básicos de la teoría de la comunicación y algunos de los consejos y trucos que creo hacen de este proyecto un poco único

Apertura

Es finales de 2016. Muchas personas dicen que la interfaz de usuario conversacional es el futuro de la interfaz web. Las aplicaciones de mensajería instantánea, chatbots, interfaces de usuario basadas en texto o emojis probablemente nunca hayan sido tan populares. Algunos podrían decir que es solo otra moda de diseño o que las interfaces basadas en texto no son nada nuevo, pero francamente, admitámoslo, con el advenimiento de iPhone Messages, Slack o Facebook Messenger, la forma en que intercambiamos información cambió irreversiblemente. Los mensajes de texto se han convertido en una forma extremadamente natural de comunicación en estos días.

Entonces, naturalmente, cuando surgió la oportunidad de que The Rectangles trabajara en un sitio web de conversación para uno de nuestros clientes, no dudamos ni un segundo.

Vamos, muéstrame un equipo al que no le gustaría trabajar en ese proyecto ahora.

Objetivos del proyecto

Cliente:

  • Chop-Chop - una empresa de desarrollo web

Nuestras tareas principales en este proyecto:

  • diseñar un conjunto completo de activos de interfaz de usuario conversacional
  • crear un guión de conversación
  • manejar los tipos más comunes de aleatoriedad conversacional (es decir, f * cks y dfdffjhfdjhfkfs)
  • transmitir el carácter de la marca (también mediante el uso del héroe de la marca de la compañía, Cody)
  • aumentar la curiosidad y el gusto del usuario (interlocutor)
  • mostrar las habilidades de desarrollo web de la empresa

Te mostraré cómo lo hicimos paso a paso, pero primero ...

Un poco de teoría

Empecemos con lo básico. Creo que a veces es importante retroceder un poco antes de sumergirse en asuntos más complejos. En este caso realmente nos ayudó. Lo creas o no, pero leer todas esas definiciones fundamentales nos abrió los ojos sobre algunas soluciones creativas e impulsó todo el proceso de ideación.

Y creo que no deberías saltarte esta parte también.

Los principios de comunicacion

Hay cientos de definiciones que explican la comunicación. La siguiente es mi versión híbrida de algunas que encontré.

La comunicación es un proceso de compartir mensajes significativos.

Los mensajes (comunicación en general) pueden ser verbales o no verbales.

La herramienta de comunicación verbal más común es el lenguaje, que es un conjunto de símbolos utilizados para intercambiar información en forma de palabras que pueden transformarse en significados.

Ejemplos: hola; Gracias; Te ves estupenda hoy

No verbal, por el contrario, se refiere a cualquier tipo de comunicación diferente de las palabras. Pueden ser gestos, expresiones faciales, tono de voz, pero también acciones o símbolos que tienen un significado social común.

Ejemplos: , ,

La comunicación es un proceso donde todos los aspectos se afectan entre sí. Significa que la comunicación es holística y que todo el proceso crea un sistema en el que todos los elementos (todos los mensajes) trabajan juntos por el bien común.

Estos mensajes son funcionales, lo que significa que los usamos para obtener los efectos deseados, pero también adaptativos, lo que significa que, según la situación, pueden modificarse y ajustarse para lograr mejores resultados.

Finalmente, el lenguaje que usamos para comunicarnos se basa en el código de comunicación, que es un conjunto de principios y significados. Crean la base para la interpretación. Estos códigos de comunicación también se denominan reglas; Hay dos tipos de ellos:

  1. Reglas constitutivas: se refieren al sentido y al significado de palabras particulares, y cómo debemos interpretarlas. Además, nos dicen cómo entender un mensaje en un contexto particular.
  2. Reglas normativas: ayudar a determinar una reacción adecuada basada en la interpretación de un mensaje dado. En otras palabras, nos dicen qué debemos y qué no debemos hacer (decir) en una situación particular.

Y, por supuesto, una de las formas más naturales y comunes de comunicación es una conversación. Entonces, cuando discutimos las IU conversacionales, creo que también deberíamos echar un vistazo a una definición de conversación de muestra:

La conversación es una conversación entre dos o más personas, generalmente informal.

Entonces, ¿es posible crear, sin una poderosa mente maestra de inteligencia artificial, una interfaz que cumpla con los principios de comunicación?

Este es el aspecto que puede tener una definición de UI conversacional (CUI):

Una interfaz basada en un sistema holístico de intercambio de mensajes funcionales, adaptativos y significativos, en el que ambos lados de la conversación usan e interpretan los códigos del lenguaje, manteniendo y cumpliendo las reglas constitutivas y normativas de una manera amigable e informal.

Y queríamos crear esa interfaz de usuario.

Teoría a la práctica: crear una interfaz de usuario conversacional

Definiendo objetivos

Los chatbots en B2B tienen su función. Las personas visitan dichos sitios web por una razón particular, porque quieren algo. Es como ir a un restaurante o entrar en una tienda física. Por supuesto, a veces las personas lo hacen porque no tienen nada mejor que hacer o simplemente quieren divertirse, pero en general, hay un propósito detrás de esto; ordenar comida, comprar un par de zapatos o conocer los precios. Por otro lado, un camarero o un dependiente también tienen sus tareas y guiones a seguir cuando habla con un cliente. Un sitio web conversacional puede funcionar exactamente de la misma manera, y la función de un chatbot puede ser similar a la de un dependiente o un mesero.

En este caso, sabíamos exactamente lo que queríamos lograr, ya que hemos trabajado con Chop-Chop durante años (en realidad, lo cofundé en 2010), pero si necesita ayuda para definir los objetivos de chatbot / usuario, puede usar Diseño centrado en el usuario Canvas.

Especificamos los siguientes objetivos para nuestro chatbot:

  • expreso personaje de la marca Chop-Chop
  • use el sitio web per se para mostrar las habilidades de desarrollo web de Chop-Chop
  • proporcionar al usuario información sobre los servicios de Chop-Chop
  • alentar al usuario a marcar el sitio
  • aprender algo sobre el usuario (nombre, ocupación, correo electrónico, teléfono)
  • ayuda para ponerse en contacto (CUI como alternativa de formulario de contacto)
  • animar a los usuarios a suscribirse al boletín

Parte 1. Diseñando la comunicación verbal

Construyendo el guión de conversación

Los diseñadores de UX deberían poder anticipar. En este proyecto, sabíamos que esta es la única forma de construir un sistema de comunicación holístico sin soporte de IA. Necesitábamos un excelente guión de conversación con una sintaxis adaptativa que también hiciera que la conversación fuera agradable y significativa para los usuarios.

1. El marco de conversación

Usando una pizarra, comenzamos con un mapa mental simple. Teniendo en cuenta los objetivos del chatbot, anotamos todos los posibles temas y partes de conversación. Queríamos comprobar rápidamente qué tan complejo podría ser el guión final.

Primeras etapas de la escritura del guion de conversación

Luego, dividimos y organizamos las partes en grupos funcionales (los llamamos bloques). Ya comenzamos a ver algunos patrones. Algunos de los grupos estaban relacionados con objetivos (los llamamos núcleos), otros fueron responsables de hacer que la conversación fuera menos oficial (chateadores), otro grupo proporcionó al usuario opciones o información adicional (extras), y también hubo reacciones al usuario. respuestas Finalmente, los saltos podrían adelantar la conversación a un bloque de script diferente.

La lista final de bloques de script:

  • Apertura
  • Extra (s)
  • Saltar (s)
  • Núcleo (s)
  • Chatter (s)
  • Finalizando
Ejemplo de línea de tiempo de marco de conversación simple

Por supuesto, la construcción del guión final es mucho más nudosa que un marco lineal. Todas las dependencias y combinaciones infinitas basadas en la naturaleza holística de la conversación hacen que todo sea extremadamente complejo.

2. El guión

Este fue el momento que todos esperábamos desde el primer minuto del proyecto: finalmente pudimos escribir el guión de conversación real. Esta parte fue divertida, pero también requirió el máximo enfoque. Era mucho más fácil con el guión dividido en bloques, ya que todas las partes de la conversación podían escribirse por separado.

Lo bueno es que la única herramienta que necesita para escribir scripts CUI es lápiz y papel o un editor de texto.

A continuación hay algunos ejemplos de los bloques de script.

Apertura:

Hola
Soy Cody y me encantaría chatear contigo
    Hola cody
¿Cómo estás hoy?
    Bueno ... podría ser mejor
Mal día, ¿eh? Eso pasa…

Extra:

Espero que no te importe que use cookies
    ¿Que son estos?
¡Mi desayuno!
Jaja, pobre broma
Las cookies son datos sobre usted almacenados por un navegador
    Suena espeluznante pero hm ... OK
¡Excelente!

Omitir:

¡Hola!
Pareces familiar
¿Nos conocemos?
    sí tenemos
¡Decir ah! ¡Tengo buena memoria!
La última vez hablamos sobre el desarrollo de Magento
¿Quieres continuar nuestra conversación?
    Continuemos

Núcleo:

    Cuéntame de ti
¡Con placer! :-)
¿Quieres saber de dónde vengo?
Escucha mi historia?
¿O tal vez aprender a qué me dedico?
    ¿De dónde es?
Bueno, la idea de mí vino del estudio de diseño UX The Rectangles
Pero fue el diseñador polaco Jan Kallwejt quien me vistió y me peinó

Charla:

¿Ves esa participación en la esquina superior?
    ¿Qué hay de eso?
Si te gustó nuestro chat, ¡preséntame a tus amigos! :-)
Estaré encantado de hablar con ellos también.
    Quizas mas tarde

Finalizando:

tengo que ir pronto
¿Quieres ver algún truco antes?
    ¡Muéstrame!
Presione Cmd + D
¡Jaja!
¿Me has marcado?
    Aún no
¡Hazlo entonces! :-)
Ok, es hora de que me vaya
Mantengámonos en contacto
    ¡Adiós, Cody!

3. La sintaxis

Un buen guión debería permitirle crear diferentes escenarios de la conversación. Es más fácil si la conversación es en inglés, ya que la sintaxis en inglés es relativamente simple. Sin embargo, en muchos idiomas debería poder crear más de una opción de un mensaje (frase) reemplazando una palabra por otra. Además, un diseñador de guiones debe poder especificar los lugares para las respuestas, opciones, etc. del usuario.

Para crear dicha notación de script, necesitará un conjunto de símbolos: paréntesis, corchetes, llaves y todo lo que usted y su equipo puedan leer y comprender. Esto también es muy importante para los desarrolladores que implementarán el script. También deberían poder entenderlo.

{(Buenos días) | Hola | Hola}, amigo, {soy | mi nombre es} Cody!

En algunos casos, chatbot puede elegir una palabra de un conjunto específico al azar (Hola; Hola, Oye; Yo), pero en cambio también puede ser un poco más inteligente y mostrar algunos mensajes según, digamos, la hora del día del usuario (Bueno buenos días, buenas noches).

Aquí hay un conjunto de símbolos de muestra y sus funciones:

  • {} llaves: define un conjunto de opciones
  • El | tuberías: separa las opciones en un conjunto
  • () paréntesis: especifique las opciones relacionadas con la condición en un conjunto
  • [] paréntesis: indicar la entrada del usuario
Ejemplo de notación de sintaxis

Si desea obtener más información sobre cómo escribir el guión per se, infórmenos.

4. Mensajes de chatbot

La visualización de la conversación fue uno de los desafíos de UX más importantes de este proyecto. A continuación se presentan algunos de los aspectos más destacados.

Declaraciones individuales vs párrafos completos

La gente no habla en párrafos. Hablamos usando oraciones simples. Por supuesto, estos a veces pueden formar expresiones interminables, pero en una conversación las personas a menudo se turnan. Además, creemos que mostrar párrafos largos de texto, que el usuario necesita leer antes de responder, se puede comparar con hablar con una persona que habla horriblemente rápido. Entonces, en lugar de párrafos, decidimos mostrar combinaciones de oraciones simples (cortas).

Combinando declaraciones individuales en bloques

Al manipular el radio de la esquina de las burbujas, es posible crear bloques de texto lógicos de mensajes individuales. De esa manera, aún podríamos hablar en oraciones y no en párrafos, pero le daremos al usuario una suave pista: hey, esta parte de la conversación comienza aquí y termina allí.

Las esquinas redondeadas ayudan a combinar declaraciones individuales en bloques de texto.

Desvanecimiento vs desplazamiento

El método más frecuente para mostrar el flujo de conversación es agregar constantemente nuevos mensajes debajo de los antiguos y permitir que el usuario se desplace.

Como alternativa experimental, los mensajes antiguos pueden desvanecerse y, como resultado, ya no es necesario desplazarse. Sé que el aspecto útil de dicha solución es cuestionable, pero mírelo desde una perspectiva diferente: tal solución refleja la naturaleza de una conversación real. Cuando habla con alguien, tampoco tiene acceso a la información intercambiada todo el tiempo.

Usar transparencia para marcar mensajes anteriores

Además, en algún momento puede simplemente usar saltos para preguntar al usuario si desea regresar a alguna de las partes anteriores de la conversación, o mostrar un botón permanente 'Saltar a' que, cuando se presiona, provocaría la pregunta del bot sobre volver a cualquier de los pasajes pasados.

5. Mensajes de usuario (respuestas)

Para una interfaz de usuario de conversación que no utiliza IA para interpretar las respuestas del usuario, esta es la parte más difícil de escribir un guión. La secuencia de comandos debe permitir a los usuarios (vamos a referirnos a ellos aquí como interlocutores) proporcionar al chatbot respuestas lógicas (recuerde, reglas constitutivas y normativas), pero cuanto más natural y abierta sea la conversación, más entretenida será para el interlocutor.

Utilizamos dos tipos de respuestas:

A. definido (controlado, cerrado)

  • son relativamente fáciles de manejar
  • requieren buenas habilidades de anticipación
  • los usuarios no pueden hablar lo que quieran
Ejemplo de respuesta definida

B. no definido (no controlado, abierto)

  • son más difíciles de manejar
  • pueden requerir que se analicen algunas bases de datos de palabras predefinidas
  • los usuarios pueden comunicarse de forma más natural
Ejemplo de respuesta no definida

Probablemente no haya una forma universal de manejar las respuestas abiertas. No podemos asumir que las personas seguirán el código de comunicación. Algunos de los mensajes no definidos violarán (especialmente) las reglas normativas. Por supuesto, algunos usuarios hablarán (escribirán) como hablarían (escribirían) con un humano, pero, por supuesto, otros intentarán desafiar a su bot enviando mensajes de texto, palabrotas o palabrerías.

Aquí hay algunos consejos sobre cómo puede controlar los mensajes no definidos:

  • las entradas se pueden limitar solo a un conjunto específico de signos (por ejemplo, si se le solicita un nombre, solo se permiten letras)
  • Se pueden usar expresiones regulares (regexp) para algunas entradas (por ejemplo, correo electrónico)
  • usar matrices de palabras groseras más populares
  • (Tendría cuidado con este pero) use algún diccionario con API para verificar si las respuestas que espera que sean palabras son realmente palabras

Naturalmente, una conversación ideal no debe tener restricciones, pero en el caso de una IU conversacional sin respaldo de IA, bueno, un poco de control es inevitable.

Una cosa más:

Al usar preguntas definidas, puede mejorar la experiencia de responder un poco con una pequeña mejora. En lugar de hacer una pregunta como esta:

Pregunta cerrada sin opciones

pregunta así:

Pregunta cerrada con opciones

Esto es pura psicología: en el primer ejemplo, el (posiblemente) rango infinito de opciones que el usuario podría tener es limitado, mientras que en el segundo está especificando este rango y dando a su usuario una opción. El resultado es el mismo en ambos escenarios, pero la experiencia de usuario es mejor en el último.

6. Interjecciones, rellenos, sonidos de conversación no léxicos.

La gente murmura, comete errores, duda o pierde el hilo cuando habla. Esto es normal. Queríamos que la conversación con nuestro chatbot fuera tan natural también. Entonces los usamos también.

Estos son algunos de los populares sonidos no léxicos conversacionales: sí, está bien, uh, oh, aum, mmm, uhh, uh-huh, uu, ya sabes, ermmm

Ejemplo de uso de sonidos no léxicos

Parte 2. Diseñando la comunicación no verbal

1. Disposición de mensajes

La forma en que los avatares del bot y del usuario y sus mensajes están organizados no debería ser incidental también. Hay dos tipos más frecuentes de visualización de la conversación:

A. los avatares + mensajes están alineados (en la mayoría de los casos, a la izquierda) uno debajo del otro

Arreglo de mensaje alineado

B. los avatares + mensajes de ambos usuarios son opuestos

Arreglo de mensaje opuesto

Creemos que la opción B refleja mejor la naturaleza de una conversación real. Por lo general, cuando dos personas hablan, se miran. Entonces, para que la IU conversacional se sienta más natural, los avatares de los interlocutores y sus mensajes también deben mostrarse de esa manera.

2. Apariencia de Chatbot

Tuvimos suerte, ya que Chop-Chop tenía un héroe de marca. Además, Cody es absolutamente perfecto para cualquier propósito de interfaz de usuario de conversación, ya que tiene una gran biblioteca de apariencias prediseñadas que podríamos usar. Creo que pronto las empresas comenzarán a medir y optimizar las tasas de conversión de IU conversacional probando diferentes avatares de chatbot.

No solo esto, estoy seguro de que si tuviéramos el equivalente femenino de Cody, las respuestas de los usuarios serían totalmente diferentes de las del hombre.

Cody avatar variantes

En una nota al margen, creo que las personas deberían evitar usar sus imágenes como avatares de chatbot. Es confuso: ¿estoy hablando con un bot o una persona? Realmente, la apariencia visual del bot es algo sobre lo que los diseñadores deben tener mucho cuidado. Por cierto, es un hecho evolutivo: el reconocimiento facial es una de las primeras habilidades que desarrollan los niños pequeños y generalmente ocurre meses antes de que aprendan a hablar.

Además, si desea utilizar su nombre real como el nombre de su bot, asegúrese de que su script también refleje su verdadera personalidad. Un chat mundano con un bot (= usted) en consecuencia puede tener un efecto perjudicial en su imagen real.

3. Expresiones faciales de Chatbot

Las expresiones faciales son súper importantes. También queríamos incluirlo en nuestro proyecto.

Parpadeando y guiñando un ojo:

La gente parpadea 10 veces por minuto en promedio. Cody hace lo mismo. Además, el guiño puede ser una señal no verbal adicional (por ejemplo: Nah, solo estoy bromeando; es broma).

Avatar de chatbot parpadeante

Las 6 emociones básicas:

Además, las reacciones de chatbot pueden caer en una de las 6 emociones básicas:

  • felicidad
  • tristeza
  • sorpresa
  • temor
  • asco
  • enfado
Muestra de expresiones faciales de Cody

4. Expresión facial del usuario (experimental)

También queríamos que los usuarios pudieran enviar un mensaje no verbal a Cody. Utilizamos el avatar del usuario para hacer eso. Al pasar el cursor por el avatar, los usuarios pueden cambiar su expresión facial como reacción a los mensajes de Cody. Obviamente, no refleja las expresiones faciales reales, pero es otra forma de comunicarse con la interfaz de usuario conversacional.

Expresiones faciales alternativas del usuario

5. Usando emojis

Todos usan emojis ahora. Y no debería ser una sorpresa. Son universales y extremadamente útiles, y agregan la capa no verbal a la comunicación escrita.

Compare estos dos mensajes de texto:

A. te odio!

B. Te odio!

Supongo que para la mayoría de nosotros, B. podría traducirse fácilmente a: ¡Te amo, amigo!

Obviamente, Cody usa emojis como la mayoría de nosotros.

Mensaje con emoji

6. Expresión fática - animando la conversación

La animación puede llevar la experiencia de usuario de la interfaz de usuario de conversación al siguiente nivel, haciendo que las interacciones de la interfaz de usuario sean más naturales y agradables para el usuario. Pero eso no es todo, los elementos animados pueden desempeñar un papel importante en toda la conversación, ya que son responsables de la llamada expresión fáctica. Simplemente hablando, esto es todo lo que hace que la conversación fluya sin problemas.

Animando el avatar de chatbot

Cuando dos personas se encuentran, muy a menudo comienzan una conversación con un apretón de manos. Permite acercarse a un interlocutor, mirarlos a los ojos y ver su rostro con mayor claridad. Por lo tanto, el avatar de Cody es un poco más grande al comienzo de la conversación, lo que permite al usuario familiarizarse con Cody, y cuando se intercambian los primeros mensajes, se vuelve más pequeño.

Indicadores de tipeo

Los indicadores simples de carga (mecanografía) se pueden usar como un equivalente a la expresión fática al hablar y decirle al usuario: manténgase fresco, cariño, todavía estoy aquí, dame un segundo para responder.

Hay infinitos indicadores de tipeo. Aquí está uno de los más comunes:

Indicador de mecanografía

Indicadores de escritura y estados de desplazamiento

Además, decidimos usar indicadores de tipeo para sugerir al usuario: oye, estás a punto de decirlo. Se muestra un indicador de escritura estática junto al avatar del usuario, pero cuando el usuario se desplaza, digamos, el botón de respuesta cerrada, el indicador de escritura comienza a animarse.

Indicador de escritura activado por desplazamiento

Finalizando

Este fue definitivamente uno de los proyectos más interesantes en los que The Rectangles han trabajado recientemente. Diseñar un sitio web de conversación cuando todavía hay muy pocos en línea fue una aventura fantástica para nuestro equipo. Hemos aprendido mucho y, para ser sincero, no podemos esperar a otro proyecto como ese.

Ahora, también podemos verlo: el futuro del diseño UX está escribiendo.

El artículo que describe el proceso de escribir nuestro script de chatbot ha sido publicado:

El sitio web de chatbot de Cody se está desarrollando actualmente en Chop-Chop.
Para recibir una notificación cuando esté listo, manténgase en contacto.

Si le gustó este artículo, le agradecería que lo recomendara o dejara un comentario. También puedes seguirme en Twitter. ¡Paz!