Cómo diseñar UI/UX extraordinarias para niños

Chema Juárez

Lo que tu llamas nativo digital yo lo llamo buen diseño

Boceto de escenario de Tiny Trees. ©Tiny Cosmonauts 2019

Lo primero que hay que tener en cuenta cuando te enfrentas al diseño de un producto infantil es que tu usuario es especial (muy especial). Debes tener en consideración aspectos como la falta de capacidad lectora, la escasa paciencia y una limitada habilidad psicomotriz a la hora de crear experiencias satisfactorias para los pequeños cosmonautas.

Es uno de los mayores retos a los que me he enfrentado durante mi carrera profesional como diseñador y programador interactivo.

Aunque las apps y juegos infantiles no suelen obtener grandes reconocimientos, requieren de mucho cuidado y un esfuerzo muchas veces mayor que el resto de productos interactivos para pasar los controles de calidad de las tiendas digitales y, peor aún, de sus exigentes usuarios, esos locos pequeñajos.

Durante este caso de estudio me estaré refiriendo, como usuario modelo, a niños en edad preescolar con edades comprendidas entre los 2–6 años. Aunque, por supuesto, puede ser trasladado a niños más mayores únicamente descartando o adaptando aquellos puntos que se entienden específicos para edades más tempranas.

Conozcamos a través de las características de los niños de estas edades, y sus comportamientos más comunes, como llevar a cabo un diseño interactivo infantil extraordinario:

No existen los nativos digitales

Para empezar tienes que saber que nuestros usuarios no han recibido, gracias a la maravillosa genética, los conceptos necesarios para manejar los dispositivos electrónicos, y no tendrán gran experiencia con determinadas funcionalidades, iconografía y elementos de interfaz, que en los adultos ya se dan por sabidas. Diseña interfaces y experiencias sencillas, armónicas y agradables a nivel visual, interactivo y sonoro.

Dr Livingstone, supongo

¿Cuánto disfrutas leyendo folletos de instrucciones? Nada. A los niños les pasa igual.

No des demasiadas explicaciones, ni hagas tutoriales interminables sobre el uso de tu juego o herramienta. Ellos tienen una capacidad innata (esto sí) para investigar, explorar y averiguar cómo hacer funcionar las cosas.

En Tiny Trees, no hay instrucciones, el niño tiene que averiguar como avanzar en el juego

Además, piensa que si tu interacción tiene que ser explicada es probablemente porque no está bien diseñada. Intenta darle una vuelta para minimizar las instrucciones escritas y, si no te queda otro remedio, haz que sea lo más visual posible apoyándolo con elementos gráficos y animaciones.

Instrucciones básicas del uso del Modo Caja de Luz en Tiny Swipers

En Tiny Swipers era imposible explicar el Modo Caja de Luz, donde el usuario tiene que poner un folio sobre la pantalla, para poder calcar a su personaje y sacarlo fuera de la pantalla y tuve que recurrir a una ventana explicativa adicional. De esta manera, con una pequeña animación, mostramos el proceso que después se explica de forma simplificada en el texto inferior.

Su psicomotricidad fina es algo gruesa

Tienen las manos pequeñas y sus deditos son aún algo torpes. Facilítales las cosas con elementos interactivos un poco más grandes de lo que los harías para los adultos. Así serán capaces de acceder a los contenidos de forma sencilla limitando su grado de frustración frente a los errores.

Detalle del botón de inicio de Tiny Trees

Pide confirmación cuando haya algún evento importante como, por ejemplo, el borrado de todo el lienzo que estaban pintando e intenta limitar los eventos de touch involuntarios.

Ventana modal con petición de confirmación antes de borrar el lienzo en Tiny Swipers.

En este ejemplo se muestra la ventana modal de confirmación para el borrado del lienzo en Tiny Swipers. Fijaos también en el tamaño de los botones para evitar los touchs indeseados, su separación y el color de resalte (más vistoso) del botón de cancelación frente al de aceptación, para evitar que los niños pierdan su trabajo por equivocación y tiren el dispositivo contra la pared.

Pequeños analfabestios

Procura que en tu app haya el menor número de textos. Sobre todo si esos textos son esenciales para el desarrollo y transcurso de la experiencia que estás proponiendo. Si no te queda otro remedio intenta apoyarlo con elementos visuales, audio y/o locuciones.

Detalle de interacción donde Nora cuenta historias sin necesidad del lenguaje

En Tiny Trees (3 a 6 años) no utilizamos ningún texto durante la aventura. Todo sucede a nivel gráfico e interactivo y le da al niño la posibilidad de imaginar algunas de las historias que suceden dentro del juego.

Además piensa en lo que te ahorras en traducciones, son todo ventajas.

Fuera bicho, fuera

Los niños son seres tremendamente exigentes y no aceptan con gusto la frustración cuando no les funcionan las cosas. Prueba bien tu app antes de publicarla en las tiendas porque un pequeño bug puede ser un motivo de peso para que cierren vuestra app y no quieran volver a utilizarla.

Optimiza tu app para que sea rápida y fluida

La paciencia, por lo general, no es una de las virtudes de estos bichos. Intenta evitar las pantallas de carga y las introducciones largas. Si estás obligado a ponerlas intenta hacerlas lo más dinámicas posibles, con animaciones y efectos sonoros para minimizar su aburrimiento y hacer mas entretenida la espera.

Detalle de precarga de Tiny Trees

En Tiny Trees la carga de todos los elementos del juego se produce cuando el niño pulsa el botón de empezar a jugar. Es una carga grande que requiere de algunos segundos. Por ese motivo implementamos una pequeña animación donde la nave absorbe la cápsula que además nos sirve para explicar el inicio de la aventura que se vive después en el juego.

Detalle de carga real de todos los personajes y elementos de la parte creativa de Tiny Swipers

En Tiny Swipers hay un GRAN trabajo de optimización de los recursos, con una sola carga de todos los atlas y assets cuando el niño inicia el juego para que después la interactividad al crear los personajes no se vea interrumpida por la carga de los elementos.

Tócala otra vez Sam

¿Cuántas veces habéis tenido que tragaros junto a vuestros hijos el capítulo de Pocoyo de la carrera de coches? Los niños tienen una mente repetitiva y disfrutan repitiendo las cosas para aprenderlas. Diseña tu juego, cuento o experiencia interactiva teniendo en cuenta esta capacidad y proporciónales un modo de volver a vivir la aventura.

Un buen gesto

  • Tap: es, con diferencia, el más intuitivo dentro de los gestos táctiles. Utilízalo en todas las interacciones principales e importantes.
  • Mover el dedo por la pantalla: A los niños les encantan las mecánicas en las que tienen que trazar líneas y dibujar en la pantalla. No te cortes en diseñar experiencias que requieran de este gesto.
  • Swipe: es muy intuitivo y sencillo para ellos, sobre todo cuando hay indicadores visuales. Swipe, Swipe, Swipers!
  • Drag & Drop: Los niños pueden arrastrar un objeto y soltarlo en una nueva posición. Procura que el objeto sea mayor que su dedo para que puedan visualizar la trayectoria y, no seas exigente con la precisión del área de la posición final. Si es necesario implementa guías de recorrido y ajuste automático al soltar el elemento para facilitarle las cosas un poco.
  • Slide: Los niños no están muy familiarizados con los sliders, pero si los indicas bien en diseño marcando el punto de origen y final no tendrán ningún problema en utilizarlos.
  • Pinch: hacer el gesto de zoom para escalar objetos es algo complicado para ellos, requiere de un poco de coordinación motora que aún no tienen muy desarrollada. Además con dedos pequeñitos los dispositivos no detectan muy bien este gesto. Mi recomendación es que no lo uses si no es realmente necesario y, si lo es, quizá sea buena idea indicar que hagan el gesto con los dos dedos índices de cada mano.
  • Multi-touch: Aunque los eventos multitouch se suelen producir en mayor medida, de forma no intencionada (al poner toda la manaza en la pantalla), puedes utilizar las capacidades multitoque de tu dispositivo para ciertas mecánicas. No aconsejo su uso en mecánicas principales.
  • Double Tap: evita estos gestos, los niños están acostumbrados a obtener una reacción al tocar un objeto. El doble tap puede producirles la sensación de que la interacción no surte efecto y se quedarán confundidos o frustrados por no conseguirlo.

Estamos hablando de niños, puede que toquen por error, que pongan toda la mano, que babeen la pantalla o que incluso le peguen un moco al personaje protagonista. Intenta, en la medida de lo posible, limitar los gestos táctiles para que las interacciones no se solapen y evitar así el tener problemas de interacción táctil involuntaria.

Mecánica multitouch en Tiny Trees

En Tiny Trees utilizamos las capacidades multi-touch para que los niños, al arrastrar y juntar las nubes, provoquen una tormenta.

Scrolling

Los niños prefieren los scrolls horizontales a los verticales.

Acuérdate de seguir las guías de diseño acerca de los scrolls dejando parte de los ítems que no están en el foco visibles para mostrar que hay más elementos a los lados de la pantalla e incitarles a que quieran descubrirlos.

Scroll horizontal en la pantalla de selección de categoría de personajes. Tiny Swipers

Ese color te destaca

Si en tu app quieres indicar que un objeto está seleccionado, o que tiene el foco de la acción, es recomendable marcarlo con un color de resalte en el borde o un glow que lo identifique (mejor si este glow tiene una animación en loop intermitente para llamar su atención)

Glow intermitente en el accionador de la persiana

Menús deliciosos

Haz que tus menús sean intuitivos y divertidos.

Anímalos para que navegar a través de ellos sea una experiencia entretenida y, a poder ser, que sean en sí mismos un pequeño juego.

Procura que no haya demasiadas opciones donde volverse locos y categoriza los elementos, siempre que sea posible, para que la navegación sea cosa de niños.

Animación del menú radial en Tiny Swipers

Norte, Sur, Este y Oeste

Los niños menores a 6 años suelen coger los dispositivos en horizontal, sobre todo cuando se trata de tablets que son algo pesadas y les resulta más cómoda esta disposición.

En el caso de que estés planteando tu experiencia interactiva para móviles y enfocada en niños mayores de 6 puedes evaluar cuál es la disposición que mejor te conviene, dependiendo del tipo de juego o experiencia.

Y ya sabes que en occidente el sentido de escaneo es de arriba a abajo y de izquierda a derecha. Sitúa los elementos de la interfaz teniendo en cuenta estos puntos cardinales.

Cuidado con esa esquina

Debido al tamaño de las tablets los niños pueden descansar sus brazos y muñecas en las esquinas inferiores. Ten cuidado por posibles interacciones indeseadas en esta zona.

¡Mírame, mírame, mírame!

Éste punto dependerá mucho de la experiencia que quieras transmitir y cómo quieres que sea interpretada tu interfaz. Si tienes puntos calientes que quieres que destaquen puedes indicarlo, como comentaba anteriormente, con algún brillo o borde de un color diferente al resto.

Si tu intención es que el niño experimente y averigüe como interactuar con los elementos olvida esta parte y, simplemente, deja que el cerebro de Homo Ludens de tu usuario haga su magia.

Tamaño de pincel y color con resalte para indicar que están seleccionados. Tiny Swipers

Para muestra un botón

Utiliza iconografía y elementos interactivos estándar.

Así, si el niño ya ha tenido contacto con ellos en otras apps, ya tendrá una buena parte de tu interfaz aprendida y le resultará más confortable desde el primer momento y si no, estarás ayudándole a ser un nativo digital, digooooo… a saber utilizar otras interfaces en un futuro.

Me suenas de algo

Los efectos de sonido dan vida a la interactividad, tanto como una buena animación.

Utiliza con sentido común los sonidos para indicar acciones. El cerebro de tu usuario relacionará los inputs visuales con los sonoros y su experiencia será mucho más rica y placentera.

iPod Bailarín. Tiny Trees

Una buena banda

Una buena banda sonora es el 50% de cualquier contenido multimedia.

Busca músicas que enriquezcan y den profundidad a tu juego. Crea una atmósfera sonora que apoye el escenario y la narrativa que estás proponiendo.

Mi recomendación es utilizar músicas suaves, dulces y alegres. Aunque el buen rock suele pegar con todo, así que suéltate la melena, a los niños les encantará escuchar algo original y con personalidad.

Bailando con la música en Tiny Trees

Cuando seas padre comerás dos huevos

La sección para padres donde se incluyan recomendaciones, actividades o se expliquen las características del juego, deben tener un apartado propio restringido a los pequeños cosmonautas.

Ni que decir tiene las secciones de compras y suscripciones. Aquí lo explican muy bien en las líneas de diseño de Apple. Tengo que decir que, en este punto, son bastante estrictos a la hora de validar las apps y se van a poner aún más duros en los próximos meses.

Zona restringida para padres en Tiny Trees

El tema de la privacidad y seguridad de los pequeños debe ser una máxima en todo producto infantil. No pidas, guardes o almacenes datos de los pequeños. Ni nombres, ni edades, ni fotos, ni conversaciones, naíta.

Asegúrate de que nada pueda comprometer la seguridad o privacidad de los niños. Si quieres recopilar datos o hacer registros, pagos o publicidad de algún producto, hazlo en la sección restringida para padres o asegúrate de que está bien indicado para los adultos y fuera del alcance (o uso) de los niños.

Lo que ocurre en Las Vegas se queda en Las Vegas 😜

Venga no seas muermo ¡Anímate!

Dejo la mejor para el final. Tengo que reconocer que ésta es la característica en la que he dedicado más tiempo dentro de mis apps y juegos. No hay nada más aburrido que un elemento sin vida. Juega con las transiciones y las animaciones. Prueba con distintas aceleraciones: Back, Bounce, Elastic… cada una expresa de una forma diferente el comportamiento del elemento dentro de tu interfaz. Y no te olvides de añadirle partículas, a todos nos encantan las explosiones, el fuego y el humo, ¿no?

That’s all folks!

Tanto Tiny Trees como Tiny Swipers han sido destacadas por Apple en su App Store. Así que, si sigues mis consejos, estoy seguro de que crearás apps infantiles de una calidad extraordinaria que enamorarán a niños y familias.

Acuérdate que proyectos independientes como Tiny Cosmonauts necesitan de tu ayuda para seguir adelante. Los likes, corazones y palmadas están bien, pero compartir es lo más y si no que se lo pregunten a Mugatu.

Sharing is so hot right now

Este documento está en desarrollo y seguirá creciendo y mejorando con el paso del tiempo. Estaré encantado de recibir vuestros comentarios para seguir completándolo.

© Tiny Cosmonauts 2019 — Todos los derechos reservados

Chema Juárez

Written by

Padre, Director Creativo y Programador de Tiny Cosmonauts 🚀 — Desarrollador iOS y Android. Apple Teacher & 2x Apple Featured.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade