La mayoría de quienes crean contenido de onboarding lo hacen sentados frente a una pantalla de escritorio. En un monitor grande, una situación de ocho frases se lee de un vistazo y una ventana emergente en el centro de la pantalla no molesta. Pero las nuevas incorporaciones suelen abrir ese contenido en momentos cortos e interrumpidos: el trayecto en tren al trabajo, los cinco minutos antes de una reunión, la cola para almorzar.
Estas son las reglas de diseño que fijamos mientras hacíamos que First Run se pudiera jugar de principio a fin en un teléfono. First Run es una aplicación web que se abre directamente en el navegador, así que todo lo que aparece aquí se limita a lo que puede hacer la web, sin ninguna aplicación instalada.
Divídelo en bloques de cinco minutos
Una sesión en el teléfono es corta. Por eso el punto de partida del diseño no es la cantidad total de contenido, sino la unidad que se puede terminar de una sentada.
En First Run, una misión lleva de dos a cuatro minutos: leer la situación, elegir y leer la retroalimentación. Cinco minutos libres bastan para terminar una misión y cerrar la pestaña. El progreso se guarda automáticamente en el navegador, así que no hay ningún botón de guardar que recordar, y la próxima vez que abras el juego, continúa justo donde lo dejaste. Como el progreso vive en el navegador, conviene avisar de antemano de que hay que volver con el mismo dispositivo y el mismo navegador.
De esa estructura salen dos principios.
- Una decisión se termina dentro de una sesión. Si alguien lee una situación, cierra la pestaña y al día siguiente solo ve las opciones, el razonamiento detrás de la elección se ha perdido.
- Al volver, la siguiente acción es evidente. Aunque no recuerde qué estaba haciendo, el objetivo actual en el HUD y la flecha guía le indican adónde ir.
Pon los controles donde está el pulgar
Con el teléfono en una mano, el pulgar llega con comodidad a la parte inferior de la pantalla. Cuanto más se usa un control, más abajo debe estar.
Controles en la parte inferior
En vertical, First Run coloca la cruceta y los botones A, B y MENU debajo del mapa, en una zona propia. Los botones nunca tapan el mapa y el pulgar no tiene que estirarse. Si mantienes pulsada la cruceta, sigues caminando, y también puedes tocar o deslizar el dedo sobre el mapa para moverte.
Hojas inferiores en lugar de ventanas emergentes centradas
Una ventana emergente en el centro de la pantalla resulta natural en escritorio. En un teléfono, empuja el botón de cerrar a la esquina superior derecha, difícil de alcanzar con una mano. Todas las pantallas de diálogo, misión, retroalimentación y repaso de First Run son hojas inferiores que suben desde abajo. Los títulos y los botones quedan fijos arriba y abajo de la hoja, y solo se desplaza el contenido.
Áreas táctiles y zonas seguras
Lo que importa no es lo grande que parece un botón, sino lo grande que es el área que responde al toque. Da a las áreas táctiles al menos 44 a 48 px y, cuando un icono sea pequeño, amplía su zona de toque con un margen invisible. En dispositivos con muesca o barra de inicio, mantén los botones dentro de la zona segura para que deslizar hacia arriba desde la barra de inicio nunca pulse uno por accidente. Todas las capas superpuestas de First Run respetan esas zonas seguras.
Primero seleccionar, luego confirmar
En escritorio, un clic cae donde apuntas. En un teléfono, es habitual rozar una opción con el dedo al desplazarte. Si un toque accidental envía la respuesta a una pregunta de criterio, el jugador se va con la sensación de que le han hecho trampa en lugar de aprender por qué la respuesta era incorrecta.
En pantallas táctiles, tocar una opción en First Run solo la selecciona. La respuesta se envía con el botón Confirmar esta respuesta que hay debajo. Es un toque más, pero para una decisión que no se puede deshacer, ese poco de fricción es adecuado. Las acciones que se pueden deshacer, como avanzar en un diálogo o caminar, siguen siendo de un solo paso.
La regla es sencilla. Las decisiones irreversibles llevan dos pasos; las acciones reversibles, uno.
Aprovecha toda la altura de la pantalla
Los teléfonos actuales son altos. Si colocas un mapa diseñado para un marco casi cuadrado, aparecen franjas vacías arriba y abajo, y la parte visible del campus sigue siendo pequeña.
En pantallas altas, First Run estira el mapa en vertical y muestra hasta 11 casillas de ancho y 15 de alto. Cuanto más campus cabe en una pantalla, menos veces hay que abrir el mapa completo. Los marcadores de misión (! y ✓) y las etiquetas con el nombre de los NPC se dibujan sobre el mapa, así que incluso en una pantalla pequeña sabes quién tiene algo para ti sin acercarte. Cuando necesitas ver la distribución general, el botón del mapa en la esquina superior derecha de la zona de juego muestra el campus entero.
Escribe para una pantalla pequeña
El onboarding móvil falla más a menudo por el texto que por los controles. Una situación escrita para escritorio exige dos o tres desplazamientos en un teléfono, y al final quien lee ya ha olvidado cómo empezaba.
- Limita las tarjetas de situación a cinco frases o menos. Bastan el momento, el actor, el suceso y una restricción.
- Pon exactamente un punto de decisión en cada misión. Con dos, en una pantalla pequeña es fácil perder de vista qué se pregunta.
- Mantén las opciones en una o dos líneas. Las opciones largas obligan a subir y bajar para comparar las cuatro.
- Cierra la retroalimentación con dos o tres frases de razonamiento y un punto clave.
- Saca de la misión el material de contexto largo y llévalo a una tarjeta de capítulo o a un documento aparte.
Primero vertical, horizontal como alternativa
La forma natural de sujetar un teléfono es en vertical. First Run está diseñado en torno al formato vertical y trata el horizontal como alternativa. En vertical, los controles tienen su propio espacio debajo del mapa; en pantallas horizontales de poca altura, flotan sobre el mapa para que la zona de juego sea lo más grande posible. Se puede girar el teléfono, pero ninguna acción existe solo en horizontal.
Lo que sigue siendo cosa del escritorio
No todo el onboarding tiene que pasar al teléfono. Algunas tareas pierden más de lo que ganan cuando se fuerzan a una pantalla pequeña.
- Tareas de revisión con mucho código. Leer decenas de líneas y encontrar dónde cambiarlas requiere una pantalla ancha y un teclado. Limita las misiones a unas pocas líneas de código y haz la práctica real de revisión de código en el escritorio.
- Informes largos y entregables. Practicar un informe semanal o un análisis de impacto no encaja en un teléfono.
- Trabajo que compara varios documentos. Todo lo que necesite ventanas una al lado de otra pertenece al escritorio.
- Conversaciones sobre el informe de resultados. Cuando un responsable y una nueva incorporación lo revisan juntos, funciona mejor una pantalla más grande.
Practica el criterio en el teléfono y los entregables en el escritorio, y ninguno de los dos se fuerza.
Lista de comprobación del onboarding móvil
- ¿Se puede terminar una unidad en cinco minutos o menos?
- ¿El progreso se guarda automáticamente y se recupera al volver?
- ¿La siguiente acción es evidente cuando alguien vuelve?
- ¿Los controles más usados están en la parte inferior de la pantalla?
- ¿Usas hojas inferiores en lugar de ventanas emergentes centradas?
- ¿Las áreas táctiles miden al menos 44 a 48 px?
- ¿Los botones quedan dentro de la zona segura, lejos de la muesca y de la barra de inicio?
- ¿Las decisiones irreversibles usan primero seleccionar y luego confirmar?
- ¿Cada tarjeta de situación tiene cinco frases o menos y un solo punto de decisión?
- ¿Todas las acciones funcionan en vertical?
- ¿Has decidido qué tareas se quedan en el escritorio?
El objetivo del onboarding móvil no es meter a presión el contenido de escritorio en una pantalla pequeña. Es lograr que cinco minutos libres basten para terminar una decisión y cerrar la pestaña. Una vez fijada esa unidad, la mayoría de las demás decisiones de diseño consisten en protegerla.
Prueba situaciones reales como misiones de onboarding
Abre First Run en el navegador de tu teléfono y termina una misión en cinco minutos. Jugar el onboarding