Guías Interactivas: Una guía completa con ejemplos

¿Qué es una guía interactiva?

Una guía interactiva es un tutorial paso a paso integrado en un producto digital (como un sitio web, un programa o una aplicación). Ayuda a los usuarios a entender cómo funciona en su totalidad, aumentando su compromiso y eficacia.

Los 3 tipos principales de guías interactivas

Una vez entendido qué son las guías interactivas, vamos a profundizar en los tres tipos principales que puedes elegir o mezclar para obtener resultados aún mejores:

1- Guías paso a paso

Las guías paso a paso muestran a los usuarios una secuencia de acciones para garantizar que comprenden cada función que ofrece tu producto.

Estas guías reducen significativamente el esfuerzo que los usuarios dedican a aprender y descubrir, mediante la experiencia práctica, cómo obtener el máximo valor de un producto complejo.

Este tipo de guía interactiva es especialmente útil para el onboarding de nuevos usuarios y para introducir nuevas funciones.

2- Tooltips y ventanas emergentes

Los tooltips y las ventanas emergentes son útiles para proporcionar a los usuarios orientación contextual, ya que pueden activarse por acciones del usuario o por ubicaciones concretas dentro de la interfaz.

Al promover la interactividad práctica, los tooltips y las ventanas emergentes llaman la atención sobre elementos específicos de la interfaz de usuario con una baliza y una explicación que ayuda a los usuarios.

Estos elementos permiten la personalización porque pueden adaptarse a segmentos de usuarios, casos de uso y niveles de experiencia.

3- Guías interactivas en vídeo

Las guías interactivas proporcionan a los usuarios vídeos con contenido educativo para que puedan pausar, reproducir y, en última instancia, comprender la mecánica de cada paso que les llevará al éxito a su ritmo.

Gracias a las guías interactivas en vídeo, los usuarios pueden seguir una secuencia de acciones mediante vídeo para asegurarse de que no se pierden ni un solo paso antes de realizar por sí mismos las tareas reales dentro del producto.

¿Cómo elegir entre estos tres?

Bueno, la respuesta depende de tus necesidades.

👉 Las guías paso a paso son estupendas para desglosar procesos complejos que requieren la acción del usuario o cuando los usuarios tienen que seguir una secuencia para alcanzar un objetivo.

Estas guías interactivas guían a los usuarios a través de las tareas para que comprendan plenamente la funcionalidad. Garantizan que los usuarios también podrán realizar después tareas dentro del producto.

👉 Los tooltips y las ventanas emergentes son estupendos para proporcionar ayuda rápida y contextual cuando los usuarios interactúan con elementos o funciones específicas dentro del producto.

Con estos elementos, puedes ofrecer orientación en el momento justo en que el usuario la necesita. Esto es especialmente útil para explicar botones o funciones individuales sin interrumpir el flujo general de uso del producto.

👉 Las guías interactivas en vídeo son estupendas para hacer demostraciones visuales de flujos de trabajo complejos.

Las guías interactivas en vídeo permiten a los usuarios ver y absorber información a su propio ritmo sin necesidad de interactuar, por ejemplo, dando una visión general del producto o función sin abrumar al usuario con acciones que realizar.

¿Guías interactivas o tutoriales tradicionales?

Las guías interactivas son diferentes de los tutoriales tradicionales, como los tours del producto.

Los tours del producto consisten en largas secuencias que muestran todas las funciones del producto de una sola vez, creando frustración en el usuario.

A diferencia de las guías interactivas, estas guías no implican elementos de personalización para cada segmento de usuarios que tengas.

Las guías interactivas son tutoriales interactivos dentro de la aplicación que proporcionan a los usuarios elementos en pantalla que les ayudan a comprender la propuesta de valor de tu producto a través de las funciones que ofreces, simplificando el proceso de onboarding y exploración.

Puedes personalizar las guías interactivas en función de tu segmento de audiencia para responder a las necesidades de tu base de usuarios.

¿Por qué necesitas guías interactivas?

Hay varias razones por las que deberías adoptar guías interactivas, entre ellas las siguientes:

1- Interactuar con los usuarios para una mayor adopción

Las guías interactivas permiten a los usuarios adquirir experiencia práctica mediante elementos interactivos de la interfaz de usuario que recorren el producto.

Al aprender cómo funciona tu producto, los usuarios pueden (re)descubrir tus funciones con más confianza ahora que saben qué hacer, dónde ir y cómo ponerlas en práctica.

En última instancia, esta secuencia de aprender, empezar a utilizar y cumplir objetivos promueve una mayor tasa de adopción.

Puedes comprobar cómo Indicata aumentó su tasa de adopción tras utilizar UserGuiding aquí 👈

2- Mejorar el proceso de aprendizaje para la retención

Las guías interactivas mejoran la experiencia de aprendizaje de los usuarios, ya que simplifican la visualización y explicación de los elementos básicos que los usuarios deben utilizar para obtener el máximo rendimiento.

Mostrando paso a paso cómo los usuarios pueden obtener valor de tu producto, las guías interactivas les permiten adoptar tus funciones principales en un tiempo récord.

Comprender que tu producto puede satisfacer las necesidades de tus usuarios aumenta la probabilidad de que vuelvan a utilizarlo, creando adherencia al producto y aumentando la retención de clientes.

Si quieres inspirarte, puedes leer cómo Plandisc mejoró su retención de usuarios utilizando los tooltips y hotspots de UserGuiding.

3- Minimizar los tickets de soporte con una mejor comprensión

Otra ventaja de los recorridos interactivos es que estas guías pueden reducir la confusión del usuario proporcionándole ayuda en tiempo real en los puntos críticos, por muy complejos que sean tu producto o tus funciones.

Las guías interactivas proporcionan una navegación clara para garantizar que los usuarios no se queden atascados durante la fase de descubrimiento, lo que resulta muy útil cuando los usuarios necesitan ayuda instantánea.

Esta asistencia por sí sola reduce la necesidad de soporte, ya que los usuarios pueden encontrar respuestas 24 horas al día a través de guías interactivas siempre accesibles. 

¿Quieres ver cómo Cuepath redujo en un 72% el número de llamadas de asistencia que recibió tras implantar los elementos interactivos de UX de UserGuiding?

Cómo crear guías interactivas

Para cada tipo de guía interactiva, tienes que suscribirte a una plataforma sin código o hacerlo internamente, desde cero.

Sin embargo, repasaremos los pasos que debes seguir, independientemente de la solución que elijas.

1- Guías paso a paso

Empecemos por crear una guía interactiva en YouTube con la ayuda de una guía paso a paso.

1.1 Da la bienvenida a los usuarios a tu plataforma

En primer lugar, debes crear una guía y elegir tu primer modal para dar la bienvenida a tus usuarios a tu plataforma, YouTube en este caso.

1.2 Personaliza cada elemento de la guía

Para personalizar tu modal de bienvenida, puedes sustituir el orden de cada elemento de la pantalla: yo opté por seguir con las opciones predeterminadas (imagen, cabecera, texto principal y botones).

Sea cual sea tu pedido, debes asegurarte de que los artículos muestren el aspecto de tu marca y transmitan la voz de tu marca.

Empecemos por jugar con el texto para que puedas dar la bienvenida a tus usuarios con un tono amistoso y, al mismo tiempo, hacer una introducción contundente que explique exactamente lo que hace YouTube.

Para este paso, tienes que hacer clic en la cabecera y el cuerpo, respectivamente, y rellenar los espacios en blanco.

Una vez finalizados el encabezado y el texto, puedes cambiar la imagen predeterminada del modal de bienvenida por el logotipo de YouTube haciendo clic en la imagen, luego en el cuadro de imagen y eligiendo una forma adecuada de insertar una imagen.

Si observas cómo el botón destaca con un color rosáceo, quizá quieras personalizarlo también para que se ajuste a tu tema general.

Puedes editar el color de tus botones yendo a la sección Themes (desde la aplicación principal) y buscando la parte Primary Buttons.

También opté por cambiar el Tooltip Highlight Box porque quería que toda la secuencia coincidiera con el esquema de colores de YouTube.

Durante este proceso de personalización, no te preocupes por los errores porque UserGuiding te proporciona un área de previsualización en tiempo real donde puedes ver los elementos que editas, consulta la sección de la derecha ⬇️

Ahora, lo único que queda por personalizar es el color del texto de tu modal de bienvenida, que puedes cambiar rápidamente haciendo clic en el texto, luego en Text en el menú y eligiendo el botón Text Color de la derecha:

Después de guardar tus cambios, así es como se verá tu pantalla:

1.3 Añade un paso para la segmentación después de dar la bienvenida a los usuarios

Después de guardar tu modal de bienvenida, debes añadir tu segundo paso, dividiendo a tus usuarios en tus casos de uso e instándoles a realizar la acción correcta.

Para esta segmentación, elegí un modal Two Columns que ayuda a dividir a los usuarios en dos grupos diferentes.

Con este modal, tienes que crear dos secuencias que provoquen acciones separadas; yo elegí ver y subir para YouTube.

Después de personalizar el modal (como hice en el primer paso), debes asegurarte de que los usuarios pueden seguir su camino en función de su elección.

Para añadir una ruta especial para los tomadores de la primera opción, puedes hacer clic en el botón y elegir el cuarto icono, "Click Actions", que te llevará a varias opciones.

He optado por "Go to a Custom Step" porque quiero ocultar los próximos pasos a los usuarios que elijan la segunda opción, Upload.

Utilizando esta técnica, vinculé dos pasos a la primera opción y un paso a la segunda opción.

Aquí, el número de pasos que añadas puede cambiar en función de la complejidad de tu plataforma, la longitud de tus instrucciones e incluso el tipo de tu base de usuarios.

Sin embargo, recuerda que las guías concisas tendrán un mayor índice de finalización que las guías largas con muchos pasos.

1.4 Asegúrate de que los siguientes pasos son fáciles de seguir

Al añadir pasos a tus guías, debes tener en cuenta que la ubicación de tus pasos (en este caso, modales) importa.

El consejo aquí es dar prioridad a poner los pasos cerca de donde necesitas que tus usuarios actúen.

Por ejemplo, elegí situar los pasos después del modal de segmentación (excepto el modal de finalización) de acuerdo con los lugares en los que los usuarios deberían centrarse.

Para ello, ve a la sección de UserGuiding de la derecha, busca la parte "Modal Placed On" y elige en función de la interfaz de usuario.

1.5 Añade un modal final para completar

Después de terminar los pasos, debes añadir un modal para tu audiencia para agradecerles que hayan terminado la guía.

También puedes aprovechar esta oportunidad para proporcionarles más recursos; por ejemplo, puedes añadir otra guía, mostrar un HTML, incrustar un vídeo o botones que lleven a una URL y a una encuesta.

Así es como se ven las guías paso a paso que creamos en el formulario de vista previa (para ambos segmentos):

2- Tooltips y ventanas emergentes

Para este tipo de guía interactiva, elegí Canva, cuyo momento Ajá se basa en que los usuarios creen (y terminen) su primer diseño.

Así pues, el primer paso de nuestra breve guía interactiva consiste en dar la bienvenida a los usuarios con una ventana emergente de bienvenida.

2.1 Crea una ventana emergente de bienvenida para los nuevos usuarios y presenta tu herramienta

A través de la sección Themes de UserGuiding, hice lo siguiente:

• Ajusté los colores de los botones según el logotipo de Canva, 
• Activé la barra de progreso y los números de paso, 
• Jugué con las formas de las cajas, moviéndote esta vez con una forma más redondeada.

Pasando a la barra lateral, una vez más debes centrarte en la personalización, porque reflejar el aspecto de tu marca y crear coherencia en este aspecto mejora la notoriedad de tu marca.

Comprueba cómo he personalizado una ventana emergente de bienvenida para Canva en 30 segundos ⬇️

2.2 Añade un tooltip a tu secuencia y muéstralo alrededor de tu plataforma 

Para el segundo paso, debes empezar a emplear tooltips y mostrar tus funciones principales a tus nuevos usuarios.

Al comprobar cada función que ofreces, tu público comprenderá tus ofertas y podrá probarlas por sí mismo mediante elementos interactivos de UI.

El primer tooltip que utilices debe informar a tus usuarios sobre la página principal de tu plataforma, ya que será el lugar que visitarán con frecuencia después de iniciar sesión.

Después de utilizar un tooltip con una breve descripción, debes guiar a los usuarios a través de las acciones que quieres que realicen, permitiendo poco a poco la interactividad con la página.

Estos son los pasos que puedes seguir para que el resto de la guía interactiva sea fácil de seguir:

• Insta a los usuarios a dar un paso hacia la obtención de valor en tu producto a través de tu función principal, creando un diseño en el caso de Canva.
• Rellena los espacios en blanco para los nuevos usuarios si hay pasos próximos con opciones que necesiten explicación antes de realizar cualquier acción, igual que el paso cuatro.
• Opta por poner a su disposición todas las opciones y permitirles elegir o limitar el número de opciones; luego, indícales el camino hacia el área de selección mediante tooltips.
• Tras la selección, dirígelos a la página donde realizarán las funciones clave de tu producto; consulta el séptimo paso de nuestra guía interactiva de Canva a continuación.
• Preséntales estas funciones clave una a una, junto con algunos consejos que pueden simplificar este proceso de adaptación y adopción.

Después de presentar cada elemento de UI necesario, debes terminar la guía interactiva con un modal que proponga algunas acciones a tu público para ayudarle a alcanzar su momento Ajá.

En este caso, puede consistir en animarles a crear su primer diseño (o a jugar con los elementos actuales de la página para obtener las nociones básicas) en el moodboard (o en cualquier diseño que les hayas incitado a elegir durante el proceso de selección).

Esta secuencia podría beneficiarse de una checklist de onboarding que muestre las acciones que quieres que realicen los usuarios para que las sigan una vez finalizada la guía interactiva.

En otro escenario en el que optes por que los usuarios comiencen el proceso de diseño en un lienzo en blanco (con un botón de crear desde cero), también podrías animarles a terminar su primer diseño y compartirlo, iniciando la activación del usuario.

En el ejemplo siguiente, el primer botón garantiza que los usuarios permanezcan en la misma página para trabajar en el diseño, mientras que el segundo les lleva al centro de ayuda, donde pueden encontrar más información sobre cualquier tema relacionado con el diseño que tengan en mente.

También puedes seguir añadiendo pasos a esta guía interactiva para otras secciones, pero yo la he hecho breve y sencilla para ayudar a los nuevos usuarios a experimentar rápidamente el valor del producto.

3- Guías interactivas en vídeo 

Para las guías interactivas en vídeo, seleccioné Grammarly, cuyo momento Ajá consiste en señalar los errores gramaticales y ortográficos y mejorarlos con sugerencias.

3.1 Da la bienvenida a los usuarios, hazlo breve y añade un vídeo instructivo

Como las guías interactivas en vídeo deben ir al grano y ser fáciles de seguir, desplegué un modal de anuncio que saludaba a los usuarios y les mostraba el producto al mismo tiempo.

Después de dar la bienvenida a los usuarios, el modal debe mostrar un vídeo preciso para que lo vean, comprendan el valor fundamental del producto y lo repitan si están confusos.

Comprueba cómo el modal que aparece a continuación cumple ambos requisitos al saludar a los usuarios y mostrarles cómo funciona Grammarly a través de un vídeo ⬇️

Buenas prácticas para crear guías interactivas eficaces

Tras aprender a crear 3 tipos de guías interactivas, es hora de comprobar las mejores prácticas que debes adoptar durante el proceso de creación:

1- Pon el uso en el centro, no tu producto

Una buena práctica que SIEMPRE debes tener en cuenta al crear una guía interactiva o no, es concentrarte en los beneficios que los clientes obtendrán de tu producto.

El error de la otra práctica consiste en poner tu producto en el centro y presentarlo a tu público, lo que puede resultar poco práctico, ya que los nuevos usuarios tienen períodos de atención cortos y desean ver cómo pueden beneficiarse de tu producto lo antes posible.

Por eso debes dar prioridad a las ventajas del producto en lugar de simples tours del producto que muestren sólo los elementos de la plataforma y de la interfaz de usuario.

2- Define claramente tu momento Ajá

Para crear una guía interactiva satisfactoria, tienes que llevar a los usuarios desde el principio hasta el final, explicándoles el valor que pueden obtener de cada elemento del proceso.

Debes prestar atención a la armonización de estos pasos, asegurándote de que este proceso tenga elementos complementarios que giren en torno a tu momento Ajá.

Gracias a esta combinación, los usuarios podrán comprender cómo tu producto puede resolver su problema y adoptarlo, allanando el camino para la activación del usuario.

3- Hazlo digerible con instrucciones claras y concisas

Una cosa que debes recordar al crear una guía interactiva es el estilo general, que influye en la legibilidad y la continuación.

Para elevar el nivel de tu guía, tienes que garantizar una guía interactiva con explicaciones breves que sean precisas y capaces de dirigir a los usuarios a las funciones principales sin ninguna confusión.

Por tanto, debes evitar el uso de jerga y sintaxis complejas que puedan dificultar el proceso de aprendizaje y crear una curva de aprendizaje empinada para tu audiencia.

4- Incorpora mecanismos de retroalimentación

Implantar mecanismos de retroalimentación y estar abierto a los comentarios que puedan ayudarte a mejorar el proceso de aprendizaje de tus usuarios es un paso importante que muchos suelen pasar por alto.

No seas uno de ellos y recoge activamente las opiniones de tus usuarios para saber si tu guía interactiva es fácil de seguir y adoptable desde su punto de vista.

Puedes incluso añadir una pregunta más a tu secuencia de encuestas que surgen después del onboarding y conocer en detalle qué les dificultó el proceso.

Ejemplos de guías interactivas para inspirarte

Después de aprender a crear guías interactivas, es hora de consultar ejemplos de otras empresas, ¿no te parece?

1- Guías paso a paso

Straico se toma en serio las guías interactivas, y es difícil no darse cuenta.

En el ejemplo siguiente, Straico introduce a los nuevos usuarios en la plataforma con la ayuda de una breve guía paso a paso.

Esta guía interactiva explica cómo los usuarios pueden extraer significado del uso de Straico.

¡Mira cómo primero da la bienvenida a los usuarios y les insta a empezar!

A continuación, la guía explica lo que los usuarios pueden conseguir utilizando Straico; lo mejor es que después del modal de bienvenida, la guía incluye GIFs en cada paso para ayudar a los usuarios a comprender la funcionalidad de la plataforma más fácilmente.

Mira toda la guía paso a paso en acción aquí ⬇️

2- Tooltips y ventanas emergentes

Debido a su interfaz más repleta de funciones, Canva es una aplicación que utiliza tooltips y ventanas emergentes.

Como combinación, los tooltips y las ventanas emergentes son extremadamente útiles cuando los usuarios activan un punto específico, ya que pueden guiar a los usuarios hacia funciones que aún no han descubierto o ayudarles con consejos durante el proceso de diseño para eliminar confusiones.

Como cualquier otra guía interactiva, Canva primero da la bienvenida a los usuarios al estudio de diseño mediante una ventana emergente de bienvenida.

Los siguientes pasos de esta guía interactiva incluyen tooltips y ventanas emergentes, que Canva utiliza para informar a los usuarios sobre la funcionalidad de su espacio de trabajo.

Mientras que el primer paso explica que el espacio de trabajo permite arrastrar y soltar...

El segundo paso menciona cómo los usuarios pueden utilizar este espacio a su gusto con un zoom y una navegación sencillos.

El tercer paso les informa sobre la posibilidad de colaboración en tiempo real de la plataforma, diciendo que todos los miembros del equipo pueden contribuir al diseño.

El último paso notifica a los usuarios la función de seguimiento del tiempo, que les permite configurar un temporizador para ver cuánto tiempo dedican a un diseño e incluso hacer un seguimiento del registro de tiempo de cada miembro.

3- Guías interactivas en vídeo

Esta guía interactiva, que incluye vídeos en lugar de otros elementos de UI, es perfecta para notificar a los usuarios cambios o actualizaciones, que es exactamente lo que hace Canva.

Canva utiliza vídeos para sus nuevas mejoras de funciones, en las que los usuarios pueden emplear la inteligencia artificial para mejorar la calidad de su trabajo.

Comprueba cómo Canva incorpora vídeos a las guías interactivas para ayudar a los usuarios a entender las actualizaciones de las funciones:

¿Qué es una herramienta de guía interactiva?

El software de guía interactiva es una herramienta para proporcionar a los usuarios experiencias dentro de productos digitales como sitios web, aplicaciones o software.

Estas experiencias guían a los usuarios a través de tareas y funciones, proporcionando instrucciones prácticas en tiempo real integradas directamente en la interfaz del producto.

Las 3 mejores herramientas de guía interactiva para una alta adopción

1- UserGuiding

UserGuiding es una plataforma de adopción de productos sin código que puede ayudarte a crear guías interactivas de todo tipo.

Usando UserGuiding, puedes mejorar la retención y el compromiso de los usuarios con guías interactivas que les permitan interactuar directamente con el producto, a diferencia de los tutoriales estáticos.

Con un enfoque práctico como éste, UserGuiding ayuda a los usuarios a familiarizarse con funciones o flujos de trabajo complejos de forma más eficaz.

Además, esta plataforma admite los tres tipos de guías interactivas, lo que simplifica el proceso de creación y ejecución al mismo tiempo.

👉 ¡Puedes probar gratis las guías interactivas de UserGuiding!

2- Appcues

Appcues es una plataforma de experiencia de producto que puede ayudarte a emplear guías interactivas directamente dentro de tu aplicación.

Al ofrecerte la posibilidad de crear los tres tipos de guías interactivas, Appcues puede ayudarte tanto a incorporar nuevos usuarios a tus funciones clave como a introducir nuevos procesos.

Appcues simplifica el proceso de creación de experiencias dinámicas paso a paso, reduciendo el tiempo que los equipos dedican a esta tarea e impulsando la productividad.

3- Userflow

Centrado en el onboarding de los usuarios, Userflow te permite crear guías interactivas personalizadas.

Con Userflow, puedes diseñar e implantar rápidamente experiencias de usuario personalizadas que guíen a los usuarios a través de las funciones clave.

Tanto si se trata de simplificar el onboarding como de mejorar la adopción del producto, Userflow facilita la entrega de orientación paso a paso.

Conclusión

Si estás harto de largas guías manuales que quitan tiempo a los lectores y aportan poco valor, las guías interactivas serán como un soplo de aire fresco para tu negocio.

A diferencia de las guías no interactivas, los recorridos interactivos van de la mano de la adopción del producto: ayudan a los usuarios a familiarizarse con tu producto en muy poco tiempo.

Sólo te queda elegir el tipo de guía interactiva, dónde la aprovecharás y qué solución elegirás emplear.

Déjame que te cuente un secreto: puedes encontrar todas las respuestas con UserGuiding.

Prueba ahora UserGuiding gratis para ver si satisface tus necesidades de guías interactivas.