Coachmark
El coachmark es un componente del Design System que, a través de texto y/o imágenes, buscan educar a los usuarios sobre nuevos flujos o experiencias de producto. Estos mensajes pueden secuenciarse para formar un recorrido guiado.
Playground
- yml
---
es:
design-system:
display: "desktop"
flipper_key: "habilitar_tour_ds"
enable_amplitude: true
steps:
init:
title: "Playground"
text: "Este es el playground de Buk, aquí puedes probar los componentes y utilidades de Buk"
attachTo:
element: ".clase-del-elemento"
placement: "bottom"
buttons:
- text: "Siguiente"
classes: "btn-secondary"
action: "next"
second:
title: "Código"
text: "Aquí puedes ver el código de ejemplo de cada componente"
attachTo:
element: ".tabs"
placement: "bottom"
buttons:
- text: "Siguiente"
classes: "btn-secondary"
action: "next"
- text: "Atrás"
classes: "btn-primary ghost"
action: "back"
end:
title: "Final del Tour"
image_path: "assets/images/some_img.gif"
text: "Gracias por acompañarnos en este emocionante viaje"
buttons:
- text: "Cerrar"
classes: "btn-secondary"
action: "complete"
Lista de parámetros
- yml
| Propiedad | Tipo | Detalle |
|---|---|---|
| display | String | Define en que dispositivo se mostrará el tour |
| flipper_key | String | Define feature flag a la que se asociará el tour |
| enable_amplitude | String | Permite activar las marcas de amplitude para el tour |
| title | String | Título del tour |
| description | String | Descripción del tour |
| image_path | String | URL de la imagen del tour, debe estar ubicada en assets/images/some_img.gif |
| steps | Array | Pasos del tour |
| isActive() | Function | Verifica si el tour está activo |
| next() | Function | Avanza al siguiente paso, en el orden en que fueron añadidos |
| back() | Function | Muestra el paso anterior, en el orden en que fueron añadidos |
| cancel() | Function | Cancela el paso actual, ocultándolo sin avanzar |
| complete() | Function | Llama a _done() para activar el evento completo |
| hide() | Function | Oculta el paso actual |
| start() | Function | Muestra el primer paso y comienza el tour |
| getCurrentStep() | Function | Devuelve el paso que se está mostrando actualmente |
| removeStep(id) | Function | Elimina el paso del tour |
| on(eventName, handler, [context]) | Function | Vincula un evento |
| off(eventName, [handler]) | Function | Desvincula un evento |
| once(eventName, handler, [context]) | Function | Vincula solo la próxima instancia de un evento |
Anatomía
1. Imagen - Background
Indicator:
Tamaño recomendado: 800x508 px (real 320 x 203 px).
Modal mobile:
Tamaño recomendado: 800x433 px (real 320 x 173 px).
Modal desktop
Tamaño recomendado: 1000x376 px (real 600 x 376 px).
2. Título
Indicator:
Se recomienda un máximo de 22 caracteres.
Modal mobile:
Se recomienda un máximo de 50 caracteres.
Modal desktop:
Se recomienda un máximo de 90 caracteres.
3. Botón cierre
Cierra el coachmark en cualquier instancia y no vuelve a desplegarse.
4. Bajada
Indicator:
Se recomienda un máximo de 100 caracteres.
Modal mobile:
Se recomienda un máximo de 200 caracteres.
Modal desktop:
Se recomienda un máximo de 250 caracteres.
5. Botón "Recordar más tarde"
Cierra coachmark y no vuelve a abrirlo hasta la siguiente sesión. Se despliega solo en la instancia inicial del coachmark.
6. Botón "Siguiente"
Permite pasar al siguiente paso - instancia del coachmark.
7. Botón "Atrás"
Permite regresar al paso - instancia previa del coachmark.
8. Indicador
La flecha permite reforzar el lugar donde se quiere instruir. Se puede aplicar en cualquier dirección (superior, inferior o laterales) con excepción al caso en que se aplica una imagen, donde el borde superior queda bloqueado para la flecha.
9. Botón "Cerrar"
Se visualiza solo en la instancia final del coachmark y permite cerrarlo. No se vuelve a desplegar.
Manual de uso
Cuándo usarlo
- Para reforzar flujos que involucran educar sobre nuevas interfaces.
- Cambios complejos en la mecánica de funcionamiento de ciertos flujos que requiera reeducar a los usuarios.
- Un elemento o grupo de elementos que se encontraban en un lugar en la interfaz, y ahora se movieron a otro perdiendo de vista o no logrando acceder en el mismo tiempo o cantidad de pasos.
- Un elemento o grupo de elementos que antes no existían y se hacen parte de la interfaz.
Cuándo no usarlo
- Para cambios de experiencia retroactivos.
- Para implementaciones de test A/B.
- Para ventas o conversión.
- Para proporcionar feedback o informar sobre estados de flujo.
Caso Onboarding
¿Cuales son los gatillantes?
- Al ingresar a la página, modal o instancia que cumple con los requisitos.
- Luego de interactuar con algún evento o elemento de interacción.
¿Quiénes son los responsables de llevar a cabo su correcta aplicación?
- En primera instancia, el Product Designer del squad que requiere la aplicación.
- Si no existe un Product Designer asignado, recurrir a Design System.
¿Hasta cuántos coachmark pueden existir en simultaneo?
- No hay un número específico, pero si considerar como máximo un coachmark por sesión.
¿Cuál es el periodo de vigencia de un coachmark?
- Considerando que la frecuencia de ingreso a la plataforma por usuarios únicos es aproximadamente 7 sesiones al mes, se recomienda que el periodo máximo de vigencia sea de un mes.
¿Dónde ver los coachmarks encendidos?
- En el siguiente documento puedes visualizar los coachmarks encendidos
¿Cuántos pasos puede tener el coachmark?
- Apelando a la Ley de Miller, la recomendación es de un máximo de 9 pasos.