Interactive Tutorial Patterns

Los tutoriales lanzados al primer login interrumpen al usuario en su momento de mayor motivación para explorar, no mejoran el rendimiento en tareas y rara vez se recuerdan cuando hacen falta. La ayuda contextual activada por la acción del usuario (pull) aparece cuando el conocimiento es relevante, así que es mucho más probable que se retenga. Si la interfaz necesita un manual para usarse, el problema de fondo es de usabilidad, no de onboarding: NN/g resume que "the best onboarding is no onboarding".

Un coachmark tiene sentido cuando una función es genuinamente no obvia y no puede hacerse más descubrible con buen diseño visual: una acción atipica, un gesto oculto, una entrada por URL. Colocarlo sobre iconos universales (engranaje = ajustes, X = cerrar) o flujos estandar es ruido cognitivo que senala que el producto es complejo. NN/g advierte además que varias pistas consecutivas hacen que el usuario las descarte más rápido sin importar su calidad, y que los tutoriales en serie hacen la app "overly complicated and daunting".

El usuario que cierra una guía y empieza de inmediato aprende mejor explorando que leyendo: es la paradoja del usuario activo que documenta NN/g. Forzar la interacción con el tour genera frustración y dana la confianza en el producto. Un botón "Saltar" o cierre visible en todo momento y la tecla Escape funcional son requisitos no negociables; el usuario que ve la salida y elige quedarse se involucra en sus propios términos.

La memoria de trabajo humana es limitada: la información se desvanece en unos 20 segundos según el modelo de Atkinson-Shiffrin, así que presentar varios tooltips simultaneos o en rafaga supera la capacidad de retención a corto plazo. NN/g recomienda mostrar las pistas de forma secuencial en los momentos relevantes del flujo. Un indicador de progreso ("2 de 4") reduce la ansiedad de no saber cuanto falta y le da al usuario un marco mental del tour.

Un overlay que oscurece la pantalla completa con capturas estaticas impide ver el contexto real del elemento que se enseña y rompe la conexion entre la instrucción y el uso. El resaltado contextual (spotlight) deja visible el elemento real recortado en luz plena y atenua el resto, así la instrucción ocurre en el mismo contexto donde se aplicara. NN/g pide además no obstruir el contenido: el tooltip se posiciona para no tapar la información que el usuario necesita consultar. El bloqueo total se reserva para modales criticos, no para tutoriales.

La Ley de Proximidad (Gestalt) establece que los elementos visualmente cercanos se perciben como relacionados. Un tooltip alejado del elemento que describe rompe esa asociación: el usuario tiene que inferir a que se refiere la instrucción. NN/g recomienda que en áreas densas con muchos elementos las flechas aclaren a que elemento corresponde cada tooltip, reduciendo la confusión. Ancla el hint al borde del elemento y, si la zona es ambigua, dibuja una flecha o línea que los conecte.

Mostrar el mismo coachmark o tour en cada apertura de la app es la forma más rápida de convertir la ayuda en ruido ignorado. El estado "ya visto" debe persistir en localStorage o en el perfil del usuario, no en sessionStorage, que se borra al cerrar la pestana. La única excepción es un reset manual ("Volver a ver la guía") que el usuario activa desde ajustes; NN/g resume el principio como "make help easy to dismiss and recall".

Un tooltip o tour que no se opera con teclado excluye a quien no usa raton, y un coachmark que atrapa el foco viola WCAG 2.1 SC 2.1.2 No Keyboard Trap (nivel A). El foco debe entrar al primer elemento interactivo del hint al abrirse y volver al disparador al cerrarse, preservando el orden (SC 2.4.3). Usa role="dialog" con aria-modal si es interactivo o role="tooltip" con aria-describedby si solo informa, y respeta prefers-reduced-motion eliminando las animaciones de entrada y salida.