Crear una guía paso a paso usando información sobre herramientas
Aprenda algunas prácticas recomendadas para crear flujos con tooltips
¿Tiene una nueva función para mostrar a sus usuarios? ¿O una función existente que les cuesta aprender? Una guía paso a paso puede ayudar al usuario a superar ese punto de fricción inicial y permitirle seguir aprendiendo y adoptar la función. Con este tipo de flujo, debería:
- Articule claramente la característica y el valor para el usuario.
- Enseñe la funcionalidad principal, los matices se aprenderán más adelante con más uso.
- Incorporar el reconocimiento de éxito/finalización
Este ejemplo supone que dominas algunos conceptos básicos tratados en ejemplos anteriores, especialmente los ejemplos de Flujo de bienvenida y Recorrido del producto .
Guía de construcción
Paso 1: Adjunte la primera información sobre herramientas para resaltar la función
Puede colocar automáticamente una información sobre herramientas utilizando nuestra función “Reposicionar información sobre herramientas” en el Generador.
¡Alternativamente, también puedes apuntar manualmente al elemento usando su selector CSS!
OPCIONAL: Adjunte manualmente la información sobre herramientas utilizando su selector CSS
En algunos casos, el Constructor tendrá problemas para detectar automáticamente el elemento de destino, por lo que tendrás que adjuntarlo manualmente.
Por ejemplo, el icono “Subir archivo” que tenemos está construido con este selector:
En este caso, podemos usar este selector para poner en el Builder: [data-button-id="1\.Democues_Core\.Home\.actionButton1"]
Puede encontrar más información sobre cómo Appcues trata los selectores CSS en esta guía: Selectores CSS
Una vez que tenga su selector CSS, puede seleccionar la opción Ubicación manual en la barra lateral e ingresar su selector:
Puede refinar aún más su selección en los campos AÑADIR FILTROS ADICIONALES :
Puede utilizar el filtro Por orden si tiene varios objetos con el mismo encabezado CSS o un filtro Por texto si el idioma en el elemento de destino es siempre el mismo.
Paso 2: Coloque la segunda información sobre herramientas en un elemento dinámico (si lo hay)
En este ejemplo de nuestro paso a paso, el segundo paso recae en un elemento que no es visible en la página hasta que el usuario haya interactuado con una página.
En este caso, podemos colocar la información sobre herramientas en un elemento dinámico manteniendo presionada la tecla MAYÚS una vez que sea el momento de agregar una nueva información sobre herramientas:
OPCIONAL: Ajuste la posición de la información sobre herramientas
Es posible que desee ajustar dónde aparece específicamente la información sobre herramientas y puede hacerlo ajustando la configuración de los campos Alineación y Ajustar posición .
Paso 3: Adjunte las siguientes descripciones emergentes en su secuencia
Siguiendo nuestros métodos anteriores, ¡debería ser fácil completar el proceso! Recomendamos encarecidamente limitarlo a 3-5 pasos para no abrumar al usuario.
Consejo profesional: finalice su workflow de información sobre herramientas con una información sobre herramientas basada en acciones en el botón que crea o guarda lo que el usuario acaba de hacer.
Paso 4: ¡Orienta y publica tu flujo!
Los casos de uso para este tipo de flujo abarcan diversos tipos de usuarios en diversas etapas del ciclo de vida. Para el flujo que se crea en este ejemplo, nos dirigimos a clientes que tienen eventos pero no han creado un objetivo. Así es como se ve:
¡Una vez que estés listo, sigue adelante y publica tu flujo!