Un simple truco de UI para mejorar Onboarding UX [OCD]

Los bocetos y las maquetas de IU suponen que los datos del usuario ya están presentes. Por ejemplo, la maqueta a continuación asume que el usuario tendrá contactos para chatear, notificaciones e incluso conversaciones de chat.

Interfaz de usuario simple de Messenger creada con este recurso de boceto gratuito

Pero este nunca es el caso cuando un usuario se registra. Al principio, no hay datos, por lo que hay una columna de contactos vacía y una ventana de chat vacía.

El diseño brillante de la interfaz de usuario facilita el consumo de información y no se centra en cómo crear esa información.

Aprendí esto de la manera difícil cuando empapé la mayor cantidad de Dribbble que pude para diseñar un tablero para una aplicación b2b. Se veía genial en Sketch, pero nuestros clientes no pudieron encontrar su camino.

La mala experiencia de usuario aumenta los costos de incorporación y soporte, lo que afecta directamente los ingresos. También se siente mal ver a un usuario que lucha por consumir su diseño perfecto de píxeles. Te recuerda que fallaste.

Soluciones existentes

Una solución era tener una incorporación inicial utilizando diapositivas como la interfaz. Este parece ser el estándar para las aplicaciones móviles.

La experiencia de usuario basada en diapositivas de Slack

El problema con el enfoque de diapositivas es la falta de contexto. Puede transmitir solo una cantidad en las diapositivas (cuánto retiene el usuario es una pregunta diferente).

Es excelente para dar una visión general del producto, pero no es muy útil para explicar cómo funciona el producto. Era irrelevante para mi caso de uso, ya que la complejidad del producto no podía reducirse a unas pocas diapositivas.

También había una solución basada en información sobre herramientas que guía al usuario a través de pasos específicos. Esta opción es más popular con las aplicaciones web. Hay muchas buenas bibliotecas javascript para ayudarlo a construir estos flujos.

Demostración de integración basada en información sobre herramientas para introjs.com/

En cuanto a una solución basada en información sobre herramientas, las encontré molestas y casi siempre hacía clic en "omitir tutorial". Aunque las grandes empresas como Canva utilizan información sobre herramientas basada en el abordaje. Un producto llamado AppCues le permite diseñar estas informaciones sobre herramientas sin código, ordenadas.

También existe un enfoque de estilo de baliza, donde las características comúnmente incomprendidas se etiquetan con balizas brillantes, que proporcionan información relevante cuando (si) se necesita.

Esta es la forma más discreta. A diferencia de la información sobre herramientas que te lleva a un tutorial de 17 pasos y desaparece cuando realmente lo necesitas, este enfoque basado en puntos de acceso proporciona información cuando estás listo.

Vale la pena mencionar que Slack usa las 3 formas. No es de extrañar que sus usuarios se queden. Lo que también de alguna manera insinúa el hecho de que la retención es directamente proporcional a la facilidad de incorporación.

OCD, también conocido como diseño centrado en la incorporación

Me gusta nombrar cosas. Los nombres ayudan a materializar ideas en la mente. Así que llamemos a este diseño centrado en la incorporación.

Quería una solución que:

  • Fue relevante para el contexto
  • No era molesto (a nadie le gusta dar 17 pasos para aprender cómo funciona una característica)
  • Es discreto (como las balizas)
  • Es fácil de consumir (la información sobre herramientas no es fácil de consumir)

Salir

Simplemente comencé a diseñar estados. El diseño de chat que viste cuando comenzaste a leer este artículo puede diseñarse con tres estados.

Estado 1: no hay contactos presentes

Estado 2: Contactos presentes, pero no chats

Estado 3: tanto los chats como los contactos están presentes

El objetivo de cada estado es hacer avanzar al usuario al siguiente estado. Cuando el usuario ha progresado al estado 3, es abordada con éxito. Teniendo en cuenta la maqueta de chat, el objetivo para cada estado es el siguiente:

Objetivo del Estado 1: primer usuario para agregar un contacto

La maqueta a continuación tiene solo una llamada a la acción, el botón azul más que permite al usuario agregar un nuevo contacto. Los gráficos y el texto preparan al usuario para que tome esa acción.

Estado 1: preparar al usuario para agregar contactos (ilustración de undraw.co)

Una vez que se ha agregado un contacto, podemos comenzar el segundo objetivo.

Objetivo del Estado 2: primer usuario para iniciar un chat

La maqueta que se muestra a continuación tiene un manual gráfico para iniciar un chat. Explica explícitamente las características disponibles. De nuevo, solo hay una cosa que puede hacer ahora, es decir, enviar un mensaje. También puede realizar una llamada en esta interfaz de usuario, pero ambas acciones tienen el mismo propósito. Llevan a su usuario al paso 3.

Estado 2: contacto agregado, primer para iniciar un chat

Objetivo del Estado 3: Ninguno, el usuario está abordado: todas las señales deben desaparecer

Y finalmente, cuando su usuario haya repetido el proceso varias veces, su interfaz de usuario comenzará a verse de la manera original.

Estado 3: el usuario se embarcó correctamente

Beneficios de este enfoque

  • En comparación con el enfoque de diapositivas en el paso 1, Onboarding Centric Design (OCD) presenta el contenido en fragmentos. La información está disponible en el punto de toma de decisiones.
  • Este enfoque se puede utilizar en dispositivos móviles y de escritorio. Esta interfaz de usuario es simple, pero en el caso de una interfaz de usuario compleja, puede usar el TOC con puntos de acceso para elevar los CTA.
  • Este enfoque mejora su UX en primer lugar, al obligarlo a pensar en términos del viaje del usuario.
  • Si usted escribe sus interfaces usando React, este enfoque encaja perfectamente con su arquitectura de componentes.

Entonces, como regla general:

Maquetas de diseño para estados.
Cada estado tiene un objetivo: avanzar al siguiente estado.
El último estado es cuando su usuario está abordado.

Gracias por leer :)

Hola, si te gustó este artículo y quieres mantenerte actualizado, sígueme en: Medio, Github o Twitter

Dirijo una comunidad floja (que tiene 18 miembros a partir del 6 de octubre de 2018) donde puede ayudar a otros o recibir ayuda con respecto a la interfaz, el backend y el desarrollo en general. Puedes unirte aquí.