Me vacuné hace un tiempo, y créeme, NO era lo que esperaba.
Pensé que me presentaría, me pondrían la vacuna y me iría.
En lugar de eso, tuve que rellenar un formulario, me hicieron las mismas preguntas, nadie me dijo dónde ir y tardé media hora en encontrar la sala correcta.
No quiero faltar al respeto al personal sanitario, pero en ese momento sólo podía pensar en una cosa:
«Esto está muy desorganizado.»
Y ahora que lo pienso mejor, me recuerda a una mala experiencia de onboarding. Y la verdad es que la pandemia tiene fin…
Pero la mala UX de onboarding es algo que queda por siempre.
Por supuesto, hay una manera para que NO seas parte de eso.
Así que, hablemos de los patrones UX/UI de onboarding y de cómo pueden ahorrarte tiempo, dinero y clientes si los aplicas correctamente, hablando sobre:
👉 Qué es un patrón UX/UI de Onboarding
👉 Por qué tienes que empezar a usar patrones UX de Onboarding
👉 Cuáles son algunos tipos de patrones UX de onboarding
👉 Cuándo utilizar cada tipo de patrón UX de onboarding
¿No tienes tiempo? Aquí tienes una sección resumiendo las cosas.
Resumen
- UX de Onboarding es la experiencia que los usuarios tienen con tu producto.
- Los patrones UX/UI de onboarding son elementos que se utilizan para mejorar la experiencia y la interfaz de usuario.
- Algunas razones para empezar a utilizar diferentes patrones UX/UI para tu onboarding son:
- Causan menos fricción
- Se adaptan mejor a los flujos de onboarding de usuarios a largo plazo
- Aportan engagement y oportunidades de branding
- Algunos modelos comunes de UX/UI de onboarding son:
- Visitas guiadas de producto
- Autosegmentación
- Checklists
- Guías interactivas
- Hotspots
- Tooltips
- La elección de los patrones para tu flujo de onboarding y cuándo exactamente vas a utilizarlos depende de 3 preguntas:
- ¿Cuál es el contenido?
- ¿Quién verá este patrón?
- ¿Cuándo aparece?
¿Qué es la UX de onboarding?
La UX de onboarding es una experiencia o proceso por el que pasan los usuarios, especialmente los nuevos, en el momento en que acceden a tu sitio web, aplicación o herramienta, sea cual sea tu producto digital, y a menudo incluso antes. Cuando se hace bien, la UX de onboarding se puede utilizar para elevar la interfaz de usuario, aumentar el compromiso del usuario, mejorar la satisfacción del cliente y convertir el recorrido general del producto en un proceso de onboarding del usuario.
Por lo tanto, en resumen, los patrones de UX y de UI de onboarding son elementos de onboarding que ayudan a crear un buen viaje de usuario mientras ellos están todavía en el flujo de onboarding, creando así una buena experiencia de onboarding de usuarios.
¿Te interesa?
También puedes echar un vistazo a nuestra guía de onboarding UX. 👈
Ahora que estamos de acuerdo en la definición de onboarding UX, por fin ha llegado el momento de profundizar en los patrones UX y UI de onboarding.
¡Vamos!
Patrones de UX/UI de onboarding
Tus usuarios necesitan onboarding.
Ya se trate de onboarding sobre funciones clave o de una guía interactiva completa del producto, no puedes dar por sentado que se las arreglarán solos.
Los colaboradores que dominan el producto también necesitan onboarding, ¿recuerdas?
Puede que pienses que un onboarding paso a paso es demasiado molesto o que una guía interactiva suena demasiado elegante.
Pero de una forma u otra, una experiencia de onboarding de usuarios con varios patrones de onboarding es imprescindible.
¿Por qué?
Porque si no entienden tu producto, se irán. Sólo tienes una oportunidad.
Es duro, lo sé.
Pero ahí es donde la UI/UX de onboarding entra en escena:
¿Qué es un patrón UX/UI de onboarding?
Un patrón UX/UI de onboarding o un elemento UX/UI de onboarding es una forma de diseñar la UX o la UI para crear una experiencia de onboarding específica para un contexto determinado. El proceso de diseño del recorrido del usuario y el proceso de onboarding del usuario se ven muy afectados por los patrones de onboarding específicos que tu equipo de producto decida utilizar. El momento y la posición de cada patrón de interfaz de usuario de onboarding pueden dictar toda la experiencia de onboarding del usuario.
Por ejemplo, en un contexto en el que un usuario ya ha empezado a utilizar el producto pero todavía tiene que aprender sus características, los tooltips podrían ser el patrón de UX de onboarding adecuado.
Del mismo modo, las pantallas de onboarding al inicio de los flujos de onboarding de usuarios de aplicaciones móviles y los flujos de registro hacen lo mismo utilizando patrones UI/UX de onboarding específicos para contextos específicos.
Pero la pregunta más importante es:
¿Por qué patrones UX/UI de onboarding?
Ya sabemos por qué la UX del onboarding es importante en sí misma.
Una mala UX significa que no hay engagement por parte del usuario, bajas tasas de conclusión, baja adopción del producto, una disminución de la tasa de retención de usuarios y, finalmente, el mayor problema:
La pérdida de clientes. O simplesmente churn.
«Pero, ¿por qué necesitamos diferentes tipos de patrones de UX de onboarding para diferentes contextos?»
La respuesta corta es la psicología del usuario.
La UX tiene que ver con lo que los usuarios quieren ver, oír y vivir.
Un patrón de UX de onboarding trata, por tanto, de lo que un usuario ve, oye y experimenta durante el onboarding.
Por lo tanto, es natural que existan varios tipos de patrones de UX. Tienen que tomar forma en función de lo que los usuarios necesitan y esperan.
«Pero entonces, ¿por qué importan tanto?».
Por 3 sencillas razones:
1- Menos fricción
El uso de diferentes patrones UI/UX de onboarding puede disminuir significativamente la fricción durante el viaje del cliente, así como el flujo de onboarding del usuario.
Pongámoslo en perspectiva.
¿Cuán frustrados estarían los usuarios con una interminable visita guiada de producto?
Por ejemplo, mire el flujo inicial de onboarding de Landbot:
Parece bonito y elegante, pero ¿una visita guiada de producto de 11 pasos?
Eso hará que tus usuarios se sientan de alguna forma, y no debe ser una forma buena.
¿Y hasta qué punto se sentirían cómodos en una experiencia de onboarding atractiva con patrones de onboarding contextuales que varían en función de la importancia y la urgencia?
Mejor aún, ¿utilizando un checklists de onboarding de usuario?
He aquí cómo Calendly utiliza un checklists para mantener todo organizado durante el onboarding inicial:
Ahora, la pregunta es: ¿qué enfoque es más atractivo y menos irritante para los usuarios?
Exacto.
2- Mejor adaptación a los flujos de onboarding de usuarios a largo plazo
Dado que el uso de diferentes elementos de interfaz y experiencia de usuario ayuda a disminuir la fricción, podemos decir que el uso de diferentes elementos UI/Ux de onboarding puede ayudar a alargar Y mejorar el onboarding a largo plazo.
¿Cómo?
Dado que los diferentes patrones de UI/UX de onboarding pueden causar diferentes niveles de comodidad y frustración, el uso de patrones no disruptivos como los estados vacíos a medida que el onboarding se extiende a través del uso del producto puede beneficiar a los productos cuando se trata de reducir el churn de clientes.
Este es un buen ejemplo de estado vacío de Asana:
Gracias a que utilizan un estado vacío, los usuarios se sienten menos interrumpidos en su viaje de usuario y más seguros a la hora de realizar tareas.
3- Oportunidades de engagement y branding
Una variedad de patrones UI/UX de onboarding son muy adecuados para ser utilizados como oportunidades de engagement y branding, especialmente a largo plazo.
Por ejemplo, el estilo de ilustración distintivo de Discord les ayuda a marcar su UI/UX de onboarding al mismo tiempo que proporcionan contenido instructivo y compromiso gradual:
Ya se trate de un modal de visita guiada de producto, un tooltips, un estado vacío o una guía interactiva, los diferentes tipos de patrones de onboarding siempre ayudan a atraer y mejorar las relaciones con los usuarios.
Pero, ¿cuáles son estos distintos tipos de patrones de onboarding UX de los que hemos estado hablando?
Echémosles un vistazo.
Categorías de patrones UX/UI de onboarding
Convencionalmente, existen tres categorías de patrones UX de onboarding:
- Anotados – Patrones para cuando se quiere señalar un recurso específico
- Integrados – Patrones para anunciar o alertar algo
- Dedicados – Patrones para emocionar a los usuarios o preguntarles algo
Pero aquí, en UserGuiding, nos gusta dividir los patrones UX de onboarding en dos categorías.
Tour Onboarding y onboarding contextual.
Tour Onboarding
El tour onboarding incluye los tours de producto, algunos tipos de guías y cualquier otra cosa que sea una visita guiada.
En la mayoría de los casos, forma parte del onboarding inicial, en el que se presentan los elementos de diseño y las funcionalidades básicas, pero también se pueden activar visitas guiadas después de actualizaciones de productos o nuevos lanzamientos.
¿Por qué utilizar el tour onboarding?
¿Qué probabilidades hay de que un nuevo usuario sepa utilizar tu producto?
Son bajas.
Para asegurarte de que pueden seguir aprendiendo por sí mismos, tienes que ayudarles al principio de su viaje por el producto.
Es entonces cuando se necesita el tour onboarding.
Aun así, es importante que seas breve y que los usuarios sepan que no es un proceso largo.
Onboarding Contextual
El onboarding contextual es, como puede verse en su nombre, el tipo de UX de onboarding que es muy específico para el contexto, desde segmentos de usuarios hasta la época del año.
Estos tipos de patrones de UX de onboarding se utilizan generalmente después del onboarding inicial, preferiblemente durante el primer mes de uso y a medida que se exploran más funciones.
¿Por qué utilizar el onboarding contextual?
El onboarding contextual tiene justo lo que le falta al tour onboarding.
Con el onboarding contextual, los usuarios pueden aprender a través de la experiencia, explorar las funciones cuando lo necesiten y no frustrarse tanto.
Debido a la naturaleza complementaria del onboarding de visita guiada y del onboarding contextual, es más fácil clasificarlos de esta manera.
Si uno no ayuda, el otro sí.
Pero, por supuesto, no es tan fácil: no se puede diseñar un tour y unos Hotspots al azar y considerarlo una experiencia de onboarding para el usuario.
Echemos un vistazo a los distintos tipos de patrones UX de onboarding.
Tipos de patrones UX/UI de onboarding
Cuando digo que hay cientos de patrones UX/UI de onboarding, no exagero.
Cualquier cosa puede ser un patrón.
Desde un tipo específico de guía de onboarding hasta un tipo de hoja vacía poco utilizado, hay demasiados de ellos.
Pero aún así, es posible llegar a una imagen general de los tipos de patrones UX/UI de onboarding más utilizados.
Y eso es exactamente de lo que vamos a hablar en esta parte del artículo.
He aquí la lista de los principales patrones UX de onboarding:
- Tour de producto
- Autosegmentación
- Checklists
- Guías interactivas
- Hotspots
- Tooltips
1- Tour de producto
Hablemos del elefante en la habitación. Todo el mundo odia las visitas guiadas de producto.
¿O no?
Mi opinión es que todos odiamos las malas visitas guiadas de producto.
Y sí, si tiene más de 8 pasos, es automáticamente malo. Lo siento, no soy yo quién pongo las reglas.
Por ejemplo, mira este tour de producto de 4 pasos de PayPal.
Un paso de la visita guiada de producto de PayPal
Con 4+1 tooltips, PayPal explica las características más importantes del producto/servicio, y lo mejor es que existe la opción de «finalizar el tour».
Eso no se ve todos los días; toma nota.
Por supuesto, la facilidad de uso natural de PayPal también ayuda.
Y luego mira esta de aquí.
Nimbus Capture tiene muchos tooltips, pero lo compensan diciéndole al usuario cuántos tooltips verá.
Y, por supuesto, poder salir de la visita es siempre buenísimo.
Es mucho más difícil hacer el onboarding de tus usuarios a un producto complicado como herramientas de análisis o software basado en hojas de cálculo.
Y ahí es cuando deberías empezar a buscar otros patrones de UX de onboarding.
Por qué utilizar tours de producto?
Pros ✅
- Buen comienzo para los nuevos usuarios
- Se puede lograr una comprensión general del producto
- Primera impresión buena si se hace bien
Contras ❌
- A menudo se omite o no se le presta atención
- Puede agitar fácilmente a los usuarios si se diseña mal
- No es útil a largo plazo sin más onboarding
2- Autosegmentación
A diferencia de las guías interactivas y las visitas guiadas de producto, la autosegmentación podría ser el patrón UX de onboarding menos mal visto. Y con razón.
Aquí está el truco.
Todos queremos hablar de nosotros mismos. Pero no somos cuestionados.
Un onboarding de autosegmentación bien diseñado puede establecer un camino para cada persona sin hacer demasiadas preguntas.
Y, por supuesto, puede hacerlo sin molestar a los usuarios.
Hablemos del clásico ejemplo de Pinterest.
Al hacer que los usuarios elijan cinco cosas que les interesan, Pinterest crea un feed personal para los usuarios.
Un impulso instantáneo para cualquiera.
Y esa es la razón exacta por la que funciona.
Todo el mundo quiere una sensación personalizada en cualquier producto que utilice, incluso la tostadora o el lavabo del baño.
Pinterest lo consigue en menos de un minuto.
Otro gran ejemplo de autosegmentación sería el onboarding inicial de Mailchimp.
En lugar de centrarse en las personas usuarias y crear una UX personalizada, se centra en dar libertad a los usuarios.
Por supuesto, esto es esencialmente una ilusión. 😬
Pero aún así hace el trabajo.
La autosegmentación puede venir en cualquier forma, lo que importa es que puede ayudar a identificar una persona de usuario y adaptar su experiencia de usuario en esa perspectiva.
¿Por qué utilizar la autosegmentación?
Pros ✅
- Puede ayudar a identificar a los usuarios y mejorar la experiencia del usuario
- Hace saber al usuario que te preocupas por sus preferencias y necesidades
- Puede hacer que se familiaricen de inmediato con el contenido de tu producto
Contras ❌
- Puede ser problemático cuando los usuarios no están bien definidos o son difíciles de identificar
- El usuario puede preferir no elegir: siempre es útil añadir un botón de omisión
- Puede resultar frustrante tras una larga visita guiada de producto o demasiadas preguntas
3- Checklists
Ah, la sensación de finalizar un checklists. Qué cosa tan magnífica.
No conozco a nadie que no aprecie una buena checklist, y por eso las checklists están sustituyendo a las visitas guiadas de producto.
Todos. Los. Días.
Pero, por supuesto, incluso un checklists puede ser una mala UX.
¿Te imaginas una checklists de onboarding con más de 10 tareas, sin barra de progreso y sin mensaje de finalización/celebración después?
A mí me parece una tortura.
Hablemos de buenas checklists. Mira esta hermosa checklists de nuestro onboarding en UserGuiding.
¿Bienvenida amistosa? Check. ✅
¿Muy pocas y pequeñas tareas? Check. ✅
¿Barra de progreso? Check. ✅
¿Apagarlo en cualquier momento? Check. ✅
Por supuesto, hay muy diferentes tipos de checklists.
Cientos de patrones, ¿recuerdas?
Pero al final del día, lo que hace una buena checklists es cómo hace sentir al usuario.
Si no puedes hacer que tus usuarios sientan que están haciendo todo muy rápido y práctico, no puedes garantizar la adquisición o retención de clientes.
No se lo pienses más, consigue una buena checklist.
¿Por qué utilizar un checklist?
Pros ✅
- Mejor que las visitas guiadas de producto, especialmente para productos más grandes
- Consigue que los usuarios lo logren desde el principio
- Ayuda a gestionar mejor la carga cognitiva
Contras ❌
- Puede no impresionar sin una barra de progreso o con demasiadas tareas
- Esencialmente como una visita guiada de producto, el onboarding falla si no viene nada después
- Problemática si no reaparece después de saltarla una vez
4- Guías Interactivas
Si tuviera la oportunidad de decir a todos los diseñadores de UI/UX de onboarding una sola cosa, sería:
«Muéstralo, no lo digas.»
Cuando diseñamos UX de onboarding, parece que nos olvidamos del factor más importante.
Los usuarios.
Si ignoras las necesidades de los usuarios y solo te centras en promocionar tu producto al máximo, fracasarás en ambos.
Así que, muéstrales.
En lugar de montar un espectáculo con más de 10 tooltips, tutoriales en vídeo y Los Hotspots por todas partes, simplemente ayuda a tus usuarios a realizar una pequeña tarea, y ese será su momento más memorable con tu producto.
Por ejemplo, mira cómo Vieworks utilizó UserGuiding para crear una guía interactiva.
Aunque a primera vista se parece a un tour de producto, hay una diferencia crucial.
Los usuarios no miran; lo hacen.
Y esto crea una gran diferencia en el onboarding, teniendo en cuenta que la interactividad es seis veces mejor que el aprendizaje estático.
¿Por qué utilizar guías interactivas?
Pros ✅
- Los usuarios se incluyen y aprenden mejor
- El enfoque directo y la prueba práctica hacen que la UX sea más memorable
- Se puede acceder más tarde a través de asistentes virtuales
Contras ❌
- La vista enfocada puede resultar molesta para algunos usuarios
- No puede ser demasiado profunda para evitar la frustración del usuario
- El usuario necesita ser educado para saber dónde acceder a las guías más tarde
5- Hotspots
Los Hotspots son perfectos para dirigir a los usuarios a algún sitio.
¿Tienes algo importante que decir?
Pon un Hotspot.
Puedes usarlos para que los usuarios hagan clic en algo o pasen el ratón por encima para revelar más información, como en el caso de Zakeke (hecho con UserGuiding 😏).
O mira este otro de Plandisc que ofrece iniciar una guía interactiva, también creado con UserGuiding.
Gracias a su diseño, los Hotspots llaman la atención al instante, pero el diseñador debe decidir dónde utilizarlos.
Una vez más, todo se reduce a decidir dónde es apropiado utilizar los hotspots.
En cualquier caso, está claro que utilizar demasiado los Hotspots es de mal gusto.
Tus usuarios no son ratones de laboratorio.
¿Por qué utilizar hotspots?
Pros ✅
- Captan fácilmente la atención y direccionan a los usuarios
- Ayudan a evitar el uso de demasiadas ventanas emergentes
- Actúan como un tooltip opcional y reducen la carga cognitiva
Contras ❌
- Pueden resultar frustrantes si se utilizan en exceso
- Puede dar lugar a usuarios desinformados si se proporciona información importante a través de los Hotspots.
- Innecesarios si no se utilizan para un botón muy específico
6- Tooltips
Un tooltips es el equivalente en onboarding a decir «para tu información».
Como en «existe esta función, para tu información, utilízala con este atajo de teclado».
O «introduce una contraseña, FYI, tienes que incluir minúsculas y mayúsculas».
Pero nunca jamás:
«Introduzca el método de pago, y para tu información le cobraremos 20 dólares extra el mes que viene.»
Eso es lo último que quieres poner en un tooltips porque todos nos lo saltamos alguna vez 🤦.
Por supuesto, hay tooltips que no nos saltamos.
¿Y por qué no?
Porque están bien diseñados.
Mira este ejemplo de la app Duolingo por ejemplo.
En ese momento, el usuario aún no conoce el significado de la palabra.
Tiene que hacer clic en la palabra para averiguarlo y, al mismo tiempo, acaba aprendiendo cómo funciona la función.
A eso le llamo yo un tooltip perfectamente diseñado.
Por qué utilizar tooltips?
Pros ✅
- Buenísima alternativa para las visitas guiadas de producto en productos más sencillos, mejor para el aprendizaje adicional en productos complicados
- Menos molestos que los tours o las guías
- Se puede utilizar para casi todos los niveles de onboarding: desde el registro hasta los consejos in-app
Contras ❌
- Cuando no se pueden descartar, tienden a agitar a los usuarios
- Demasiados a la vez puede ser frustrante
- Tiene que haber muy poco contenido a la vez para que funcione
¿Cuándo utilizar cada uno?
La cuestión es la siguiente.
Conocer los patrones UX/UI de onboarding y saber cómo y dónde utilizarlos son dos cosas diferentes.
Pero bueno, yo te cubro.
En caso de duda sobre cuándo utilizar qué patrón de onboarding UX, hágase estas tres preguntas:
- ¿Cuál es el contenido?
- ¿Quién verá este patrón?
- ¿Cuándo aparece?
1- ¿Cuál es el contenido?
¿Cuál es la información?
¿Qué quieres decir a los usuarios?
No tiene sentido diseñar una visita guiada de producto utilizando sólo hotspots. Del mismo modo, transmitir información importante a través de hotspots tampoco tiene sentido.
Si no tienes en cuenta lo que el patrón va a transmitir al usuario, fracasas desde el principio.
2- ¿Quién verá este patrón?
Hay todo tipo de empresas SaaS, al igual que hay todo tipo de usuarios.
Piensa en ello.
Cuepath, un servicio de control de medicación, trabaja con usuarios de edad avanzada y, por lo tanto, tiene que construir su onboarding en consecuencia.
¿Les iría bien si sólo utilizaran tooltips?
¿O los usuarios podrían seguir el onboarding sin hotspots?
Ten siempre en cuenta a las personas y, de paso, lee el caso de éxito de Cupath.
3- ¿Cuándo debe aparecer?
La UX del onboarding funciona de forma misteriosa.
Si un determinado patrón aparece un momento antes o después, el usuario puede confundirse.
Son las expectativas del usuario, duh.
Por eso los desencadenantes de patrones UX desempeñan un papel importante a la hora de decidir qué patrón utilizar.
Por ejemplo, suena bastante normal que un mensaje de bienvenida que se dispara justo después de un registro sea un pop-up. Pero una ventana emergente que aparezca más tarde, en medio del uso de una función, no suena bien.
Piensa desde la perspectiva del usuario y todo saldrá bien.
Finalizando
Hay muchos tipos de patrones UX/UI de onboarding, casi demasiados.
Pero cada tipo corresponde a las necesidades o expectativas de un usuario, y lo último que deberían hacer las empresas de SaaS es hacer oídos sordos a éstas.
Una UX de onboarding satisfactoria no es la tarea más fácil, pero cuando se anteponen las necesidades de los usuarios, se convierte en una situación en la que todos salen ganando.
No pierdas la oportunidad.
Preguntas Frecuentes
¿Qué es el onboarding en el diseño de UX?
El onboarding en el diseño de UX es una forma de utilizar la UI y otros elementos de UX para satisfacer las necesidades y expectativas de los usuarios durante el onboarding.
¿Cómo mejorar el proceso de onboarding con patrones UX?
Mejorar la UX del onboarding depende de reducir la carga cognitiva del flujo, analizar los datos y probar el proceso con regularidad. Pero, en general, el objetivo principal debe ser siempre comprender las necesidades del usuario.
¿Cómo diseñar el mejor proceso de onboarding?
Para diseñar un excelente proceso de onboarding, los diseñadores de UX deben determinar las necesidades de los usuarios, trazar un mapa del recorrido del usuario y realizar pruebas con los usuarios. Los diseñadores también deben tener en cuenta la naturaleza del producto.
