Share
El mercado móvil ha comenzado a apuntar a las generaciones más jóvenes en gran medida. Secciones enteras de los mercados de aplicaciones están dedicadas a aplicaciones y juegos dirigidos a la demografía preescolar. Los desarrolladores han tomado nota y el mercado se ha vuelto cada vez más abarrotado..
Cuando creas una aplicación dirigida a la generación más joven, debes tener en cuenta dos cosas clave:
En este artículo, hablaré sobre las interfaces de usuario típicas asociadas con la mayoría de las aplicaciones basadas en pantalla táctil y sobre cómo modificarlas mejor cuando se acerque a este mercado..
Un tema que notará en este artículo es el de reduciendo las barreras de entrada. Cuantas más pantallas se coloquen entre una mente joven y el contenido deseado, más probabilidades habrá de que el niño se impaciente y abandone su aplicación..
Comencemos con lo que la mayoría de las aplicaciones comienzan su experiencia con: una pantalla de inicio. ¿La comida rápida? No uses uno. A los dos años de edad, nunca conocí preocupaciones de que JohnSmithDevelopment construyera su aplicación de canto y baile; Ella o él solo quiere llegar a la música. Luego viene el temido clic del botón de inicio, y su difícil público objetivo está apagado para ver otra cosa.
Los niños tienen un lapso de atención corto. Quieres llegar a los productos de tu aplicación lo más rápido posible. Comience la música de fondo en el inicio y no deje pantallas estancadas. El aburrimiento es tu enemigo.
A menudo, el siguiente elemento presentado es una "pantalla de inicio". Esta pantalla generalmente tiene el título de su aplicación y un botón marcado Jugar o comienzo o con un símbolo equivalente, algo similar a esto:
Esta pantalla suele ejecutar una animación, rebotar el título alrededor o algo similar. Este ejemplo particular de una pantalla de inicio tiene un error evidente, pero para entenderlo, debemos observar más de cerca cómo un niño interpreta su pantalla..
La forma en que usted o yo vemos el contenido en nuestro dispositivo de mano (o cualquier cosa electrónica, en realidad) es muy diferente de la forma en que un niño lo ve. Tomemos, por ejemplo, estas maquetas familiares:
Como usuario experimentado, debería mirar la descripción en el elemento de botón o tabla y encontrar el camino al contenido deseado. Este no es siempre el caso de un niño. Tú puede ver un botón con la palabra Jugar en él, e instintivamente saber qué hacer, pero ¿puede un niño de un año leer el mismo botón y entender de la misma manera? Probablemente no. Las estructuras de menú típicas simplemente no funcionan bien cuando están dirigidas a los más jóvenes. Entonces lo que hay que hacer?
Veamos algunas estructuras de menú que están mejor dirigidas a niños pequeños:
Lo que hemos cambiado en estos ejemplos es que el usuario ahora está visualmente Dirigido hacia el camino que deseamos. Eliminamos la necesidad de que el niño entienda lo que hace cada botón y, en su lugar, llamamos su atención a los objetos según su tamaño o ubicación..
Por lo general, si todo lo demás es igual, puede esperar que el niño sea atraído hacia el objeto más grande en la pantalla. Por el contrario, si tiene muchas cosas en su pantalla, eliminar el menú o los botones es un buen método, simplemente necesita cualquier toque en la pantalla para moverse a su contenido. Hay ventajas y desventajas en cada GUI que decidas emplear..
No importa cómo se acerque, siempre que represente una escena en la pantalla que no sea su contenido, habrá creado una barrera entre el niño y su juego..
Echemos un vistazo a dos botones:
Aquí hay otro ejemplo de transmisión de información visualmente a su usuario. Si bien estos dos botones significan lo mismo, el botón de la izquierda transmite mejor a un niño lo que puede esperar..
Las imágenes significan más para un niño que las palabras. El texto es un enemigo del menú para niños pequeños, así que úsalo con moderación. Esto es válido para los botones de opciones y los botones de navegación también. "Atrás" significa menos que un gráfico de flecha. Lo mismo ocurre con "Reproducción", "Menú", etc..
Diseñe sus elementos de navegación como lo haría para un mercado global: minimice el texto y use señales gráficas.
Tus menús necesitan salir de la pantalla. Hay algunos tutoriales asombrosos basados en colores en este sitio para ayudarlo a comenzar a elegir una paleta de colores para su juego o aplicación.
Con respecto al menú, mantenga sus botones u objetos interactivos brillantes y vibrantes, y los objetos de fondo más silenciados. Un efecto de sombra en los objetos de primer plano también ayuda a darles la impresión de "salirse" de la pantalla y, por lo tanto, es más probable que atraiga la atención..
Vea cuánto más se abren los botones cuando los gráficos de fondo están borrosos?
Del mismo modo, el sonido es un gran atractivo para los niños. La música ligera y llena de vida llamará la atención. Guarda la música oscura y los riffs de heavy metal para tus juegos de rol.
Además, cuando esté seleccionando música de fondo para su aplicación, tenga cuidado de encontrar una melodía que los padres puedan tolerar. Ellos son los que tendrán la última palabra sobre si tu aplicación tiene algún poder de permanencia en el dispositivo..
Tenemos algunas herramientas poderosas en nuestro arsenal, pero podemos hacerlo mejor. Hasta ahora, nuestro menú sigue siendo bastante estático y aburrido. Los niños usan este dispositivo para un estímulo visual, y darle un poco de sabor a su menú ayudará a mantener su interés.
Esto se logra con algunos trucos, a saber, animaciones, acciones y efectos de partículas. Podría hacer que el personaje principal sonriera y se agite en la esquina, o un tren que viaja a través de la parte inferior de la pantalla, o cualquier número de eventos aleatorios programados que ocurran al mismo tiempo, ya sea al lado o detrás de su menú..
Sin embargo, me gustaría prevenir mucho de este "ruido". Cualquier cosa que realmente no beneficie a su menú (es decir, cualquier cosa que solo esté allí para mostrar), distraerá a su usuario de su GUI real. En lugar de agregar este ruido, ¿por qué no ejecutar algunas acciones simples en su menú existente para atraer la atención del usuario y darle un poco de zip a su escena en el proceso? Por ejemplo, tener un botón que se mueva visualmente o que crezca y luego se contraiga en una secuencia es una excelente manera de llamar la atención.
Aquí hay una comparación simple de un botón estático a uno pulsante:
El ojo se mueve instintivamente hacia el botón en movimiento. Me gusta usar acciones para crear este efecto en mis programas. El código para tal acción se muestra aquí (el código está escrito en Objective-C, pero es fácilmente adaptable a otros idiomas):
// Crea el botón que no se mueve como un sprite SKSpriteNode * button1 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button1.position = CGPointMake (self.size.width / 4, self.size.height / 2); [auto addChild: button1]; // Crea el botón móvil como sprite SKSpriteNode * button2 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button2.position = CGPointMake (self.size.width * .75, self.size.height / 2); [auto addChild: button2]; // Crear las acciones base para escalar hacia arriba y hacia abajo en la imagen SKAction * pulseOut = [SKAction scaleTo: 1.2 duration: 0.5]; SKAction * pulseIn = [SKAction scaleTo: 1.0 duration: 0.5]; // Crear una secuencia de las acciones de escalado y repetirlas para siempre en un bucle SKAction * sequence = [SKAction sequence: @ [pulseOut, pulseIn]]; SKAction * repeatSequence = [SKAction repeatActionForever: secuencia]; // Ejecute esa secuencia de acciones en el botón en cuestión [button2 runAction: repeatSequence];
Lo bueno de las acciones es que no requieren recursos gráficos adicionales. No hay ningún efecto en el tamaño de su paquete de aplicaciones, y no necesita contratar a un artista para dibujar una secuencia de imágenes para usted. Dicho esto, puede lograr efectos similares con secuencias de animación tradicionales y archivos de atlas..
Hacer que el botón se mueva es fantástico, pero ¿y si pudiéramos hacer que se salga de la pantalla aún más? Aquí es donde los efectos de partículas pueden trabajar a tu favor. Una partícula es simplemente una imagen que podemos usar miles de veces para crear un efecto..
Podemos crear otro efecto de gran apariencia para llamar la atención sobre nuestros botones con la adición de una única imagen pequeña, un archivo XML de descripción y tres líneas de código. Las complejidades detrás de los efectos y acciones de partículas están un poco más allá del alcance de este tutorial, pero para completar, aquí está el código para cargar el archivo:
// Crear un emisor de efectos de partículas con un archivo SKEmitterNode * emitter = [NSKeyedUnarchiver unarchiveObjectWithFile: [[NSBundle mainBundle] pathForResource: @ "backHighlight" ofType: @ "sks"]]; // Posicione el nodo de efecto Partícula en el botón, pero detrás de él emitter.position = CGPointMake (button2.position.x, button2.position.y); emitter.zPosition = -100; // agrega el emisor a la escena del juego [self addChild: emitter];
Y aqui esta el resultado:
La imagen gana más profundidad con este efecto, y atrae aún más la atención..
Entonces, ¿qué estaba mal con ese menú de antes?
Cuando se lo di a mi hijo para que lo probara, él seguía intentando tocar el título animado. El botón de reproducción estaba estancado y, aunque era grande y prominente en la pantalla, seguía siendo atraído por el título animado que rebotaba. Se frustró, y antes de que pudiera mostrarle cómo llegar a la siguiente pantalla, presionó el temido botón de Inicio, buscando otra cosa..
Había seguido dos de mis consejos desde arriba, pero tuve un error importante: la distracción. Inadvertidamente había creado una barrera dentro de mi pantalla de inicio.
Recuerde, cuando se trata de niños pequeños, no puede esperar tener la paciencia para decidir cómo hacer que su aplicación funcione. Si no tiene sentido para ellos después de dos intentos, seguirán adelante. Elimine las barreras y hágalo simple e intuitivo para que alguien que no tenga habilidades de lenguaje escrito o experiencia con el producto sepa qué hacer.
Con esto en mente, aquí hay algunas pautas para eliminar:
El mejor consejo que puedo ofrecerle es este: el mejor menú para una aplicación o juego dirigido a niños pequeños es ningún menú en absoluto.
Si su usuario tiene que hacer clic en más de un botón para acceder a su contenido, tiene demasiados. La única razón real para tener un botón en su aplicación es si le presenta a sus usuarios más de una actividad para elegir. En este caso, haga que cada actividad tenga un botón de tamaño y resaltado similar, y haga que todos los elementos sean equivalentes en importancia..
Si su contenido debe caber en más de una pantalla, siempre deje una indicación visual al usuario de que hay más contenido disponible. En estos casos, utilizo la función "peeking" para mostrar parte del siguiente botón, como en este video:
Gracias por leer, y espero que haya encontrado esta discusión perspicaz. Si tiene algún comentario, no dude en dejarlo a continuación. También me encantaría ver cualquier menú que hagas para tus propias aplicaciones..
He incluido un archivo de proyecto de ejemplo con este tutorial, escrito en Objective-C con xCode 5 para la plataforma iOS. Este proyecto muestra una comparación de ejemplo de dos botones, uno estático y otro que incluye pseudo-animaciones basadas en acción y efectos de partículas..
Accentsconagua