Diseño De Sitios Web Para Niños: Tendencias Y Mejores Prácticas

• 12 lectura mínima
• Inspiración, Vitrinas, Diseño Web, Niños
• Compartir en Twitter, LinkedIn

Los sitios web diseñados para niños se han pasado por alto en gran medida en los artículos y resúmenes de diseño web, pero hay muchos elementos de diseño hermosos e interesantes y diseños presentados en los sitios web para niños que son dignos de discusión y análisis. También hay una serie de prácticas recomendadas que son exclusivas del diseño web para sitios infantiles, prácticas que generalmente no se deben intentar en un sitio web típico.

Es posible que desee echar un vistazo a los artículos relacionados:

• Mejores Prácticas Para El Diseño Web Para Niños
• Diseñar Para Niños No Es Un Juego de Niños
• Diseñar Interfaces Web Para Niños
• La Súplica de un padre A los Desarrolladores de Aplicaciones para iPad para Niños

Este artículo mostrará una serie de sitios web comerciales populares dirigidos a niños con un análisis de tendencias, elementos y técnicas utilizados para ayudar a mantener a los niños interesados y estimulados.

Diseño Que Estimula Los Sentidos

Los seres humanos son estimulados mentalmente por una serie de factores, y esto es especialmente cierto con los niños. Los sitios web para niños exitosos implementan una serie de elementos y principios de diseño que crean un entorno adecuado para la personalidad y los intereses de un niño.

Colores vivos y brillantes

Los colores brillantes capturarán y mantendrán fácilmente la atención de un niño durante largos períodos de tiempo. Aunque la elección del color es un factor primordial en el diseño de cualquier tipo de sitio web, esto es especialmente cierto cuando se diseña un sitio web para niños, ya que los colores causan una gran impresión en las mentes jóvenes de los niños. Las opciones y combinaciones de colores que probablemente serían rechazadas o de las que se reirían al diseñar un sitio web típico pueden ser bienvenidas en un sitio web para niños.

¿Cuántas de las combinaciones de colores utilizadas en las capturas de pantalla a continuación tendrían éxito en un sitio web dirigido a un público adulto? No muchos. Por lo tanto, al diseñar un sitio dirigido a niños, use colores brillantes y vivos que estimulen visualmente de una manera inolvidable.

PBS KIDS

Página principal de Herman

Parque infantil Funbrain

Un estado de ánimo feliz

Los niños recordarán y volverán a un sitio web si su experiencia es feliz. Se pueden incorporar elementos en el diseño para garantizar que se presente un estado de ánimo alegre y positivo.

Mickey Mouse Clubhouse crea un ambiente feliz al hacer del propio Mickey un punto focal visual en la página. Su cara feliz y su lenguaje corporal ayudan a mejorar esta sensación de felicidad, creando una atmósfera de bienvenida.

El sitio web de Play-Doh crea un ambiente feliz utilizando a un niño radiante como punto focal.

El sitio web de Fifi y the Flowertots tiene un gran personaje sonriente de Flowertot en enfoque visual, creando un estado de ánimo feliz.

Elementos de la naturaleza

Los niños son estimulados por elementos reconocibles con los que pueden relacionarse. Debido a que las experiencias de los niños en la vida son limitadas, algunas de las cosas con las que están más familiarizados se encuentran en la naturaleza. Los elementos naturales como árboles, agua, nieve y animales se utilizan en los sitios web que se muestran a continuación. En muchos casos, estos elementos se enfatizan demasiado a través del tamaño o la simplicidad del diseño.

El sitio web de Disney altera su tema dependiendo del producto que se promocione. En esta captura de pantalla, utilizan un paisaje similar al del Gran Cañón para crear una experiencia visual memorable.

Discovery Kids utiliza un tema submarino.

Club Penguin presenta un tema ártico.

CBC Kids utiliza un tema de temporada basado en gráficos simples y llamativos.

PopCap Games utiliza un paisaje cubierto de hierba frente a grandes rayos de sol.

Diseño más grande

Los elementos de diseño grandes han demostrado ser efectivos en todo tipo de diseño web, demostrado por el hecho de que la tipografía grande, los botones grandes y las grandes áreas de llamada a la acción se han convertido en algo común en el diseño moderno. Debido a que los niños se sienten atraídos naturalmente por objetos simples, obvios y reconocibles, los sitios web diseñados para niños aumentarán su eficacia mediante el uso de elementos de diseño grandes.

Personajes animados

Los personajes grandes, animados y hablantes son una forma fascinante y cautivadora de captar y mantener la atención de un niño. Muchos sitios diseñados para niños usan este elemento de manera efectiva.

Barbie

El Señor Rogers’ Neighborhood

Princesa Disney

Thomas el Motor del tanque

Barney & Amigos

Profundidad en el diseño

A los niños les gusta dejar volar su imaginación en un mundo que se ve y se siente real. Este tipo de atmósfera se puede crear a través de la profundidad en los elementos de diseño. Esto puede incluir formas extruidas, sombras, paisajes, efectos biselados, degradados brillantes u objetos flotantes. A menudo, muchos de estos elementos están presentes en pantallas de dibujos animados, como se muestra a continuación.

El «Centro de adopción» de Webkinz utiliza sombras, un personaje realista y otros elementos tridimensionales para crear un diseño con profundidad.

Poisson Rouge crea una atmósfera profunda y realista utilizando una ventana que mira al sol exterior, junto con una serie de otros elementos tridimensionales.

Rainbow Magic crea profundidad en su diseño a través de una escena de paisaje animada con Flash que se mueve a medida que el usuario se desplaza sobre diferentes elementos.

Las áreas de navegación y Llamada a la Acción Que se Destacan

En cualquier diseño de sitio web, las áreas de navegación y llamada a la acción deben ser puntos focales. Los diseñadores de sitios web para niños pueden simplificar en exceso estas áreas para que los niños puedan navegar fácilmente. La navegación basada en texto en sitios web para niños no sería tan efectiva como los botones y gráficos grandes, porque carecerían de enfoque visual en una página.

Peppa Pig tiene una barra de navegación horizontal que incluye iconos grandes y descripciones fáciles de leer para cada elemento.

El sitio web de Winnie The Pooh incorpora su barra de navegación en su tema «bosque», utilizando grandes elementos gráficos de madera que no serán pasados por alto por el usuario.

Sesame Street tiene una barra de navegación horizontal fácil de localizar, junto con grandes áreas de llamada a la acción.

My Little Pony utiliza navegación basada en texto, creando una experiencia menos gráfica, que permite centrarse en los elementos de contenido. Esto podría ser ideal en algunas situaciones, pero en el sitio web de un niño es más probable que una barra de navegación basada en gráficos sea efectiva.

Interacción del usuario

Probablemente una de las formas más importantes para que el sitio web de un niño tenga éxito es incluir elementos que permitan a un niño interactuar con el sitio de alguna manera. Los niños no quieren leer o investigar intensamente; quieren jugar y entretenerse.

En un sitio web típico, ciertos elementos de diseño se ven como distractores, inutilizables y engorrosos. En el sitio web de un niño, esos mismos elementos se consideran un medio eficaz de atraer usuarios.

Interacción a través de Animación y Sonido

Los efectos y experiencias creados con Adobe Flash no se recomiendan en el diseño web moderno típico, pero en los sitios para niños casi no hay otra opción. Es cierto que la animación y los efectos de JavaScript han recorrido un largo camino debido a las muchas bibliotecas de JavaScript disponibles, pero la facilidad con la que se pueden crear animaciones complejas con Flash hace de este método la primera opción para muchos sitios web comerciales diseñados para niños.

El sitio de The Pauly’s Playhouse, al igual que la mayoría de los sitios web presentados en este artículo, está construido completamente en Flash.

El sitio web de Hot Wheels incluye un «coche del día» animado que se acerca a la pantalla cuando se carga la página, creando interacción visual.

Roary el coche de carreras tiene una breve » introducción de flash «con un botón» saltar». Esta es una tendencia de la vieja escuela en el diseño web típico, pero es un medio eficaz de atender a una audiencia basada en niños. La introducción se anima a través de un camino hasta que los personajes aparecen en el horizonte. Esto ayuda al usuario a sentir que está entrando personalmente en el mundo animado de Roary.

Yahoo! La barra de navegación para niños se crea con Flash y crea efectos de sonido y anima cuando sus elementos se ciernen sobre él. Esta tendencia es muy común en muchos de los sitios que aparecen en este artículo.

La interacción a través de video

La televisión es conocida por cautivar al público infantil durante horas, por lo que los «dibujos animados de los sábados por la mañana» han sido durante décadas una parte lucrativa de los horarios de transmisión para muchas cadenas de televisión. De manera similar, el video en el sitio web de un niño agrega un aspecto divertido, interactivo y educativo al contenido de un sitio.

CBC – Video para niños

Yahoo! Guías de películas para niños

Videos para niños de National Geographic

Interacción A través de Juegos

¿Qué niño no disfruta jugando? Una de las formas más efectivas de entretener, educar u ocupar a un niño en un sitio web es incluir una sección de «juegos». Casi todos los sitios web investigados para este artículo incluyen juegos que educan, estimulan y permiten la interacción directa, al tiempo que incorporan muchos de los elementos de diseño ya discutidos. A continuación se presentan algunos ejemplos.

CBeebies – Gordon el Gnomo de jardín

Toy Story – Woody’s Big Escape

los usuarios pueden crear, compartir y competir con sus propios coches personalizados.

Elementos imprimibles

A los niños les gusta tener algo tangible para llevar con ellos, para ayudarlos a recordar su experiencia. Las imágenes imprimibles y las páginas para colorear permiten a los niños tener un recuerdo de su experiencia, al tiempo que brindan a los propietarios de sitios web la oportunidad de mejorar y promover su marca fuera de la pantalla de la computadora. A continuación se presentan algunos ejemplos de páginas para colorear imprimibles en sitios web para niños.

Páginas para colorear de Pingu

Crayola Digi-Color

Páginas para colorear de Peppa Pig

Coloración en Línea de Thomas y Sus Amigos

Teletubbies – Imprimir A Color

Métodos no convencionales

Ya hemos discutido una serie de elementos que, en el diseño web típico moderno, ahora se consideran no convencionales. El sonido, la animación y los grandes gráficos molestos a menudo están mal vistos en el diseño web típico. En los sitios web para niños, estos elementos ayudan a la experiencia del usuario. A continuación se examinan otros elementos no convencionales y opciones de diseño.

Cambiar el cursor

Esto se ve absolutamente como una mala práctica en el diseño web estándar, pero puede ser una forma divertida y efectiva de agregar un elemento lúdico al tema del sitio web de un niño. Esto se puede hacer usando HTML dinámico, pero más a menudo se hace a través de Flash.

El cursor en el sitio web de Discovery Kids se convierte en un gráfico de trampa para osos.

El cursor en el sitio web de Barrio Sésamo va seguido de una estrella amarilla cuando se desplaza sobre elementos HTML estándar, y se convierte en una estrella amarilla rodeada de estrellas animadas más pequeñas cuando el cursor se mueve sobre elementos Flash en los que se puede hacer clic.

Navegación parlante

A veces una barra de navegación producirá efectos de sonido, pero en otros casos, los enlaces de navegación sonarán lo que representan con una voz alegre.

La barra de navegación PBS KIDS habla con las voces de los niños, cuando el usuario pasa el cursor sobre ella.

La barra de navegación CBeebies utiliza una voz para sonar el destino de cada elemento de navegación.

La barra de navegación Bob the Builder habla al usuario al pasar el ratón.

El Fifi y los Flowertots cuentan con una barra de navegación para hablar.

Rompiendo la rejilla

Mientras que las técnicas de diseño web modernas tradicionales han adoptado los beneficios y la estética del diseño basado en la rejilla, los sitios web para niños pueden liberarse de un diseño excesivamente estructurado para crear un mundo único que un niño disfrutará experimentando.

Esto no quiere decir que usar una cuadrícula como base del diseño sea incorrecto. Puede ser beneficioso comenzar con una rejilla y luego diseñar elementos fuera de la rejilla de manera controlada. Esta flexibilidad en el diseño y la disposición se demuestra en varios de los sitios ya discutidos, pero también es evidente en las barras de navegación de los ejemplos a continuación.

La barra de navegación en el sitio web de Bob Esponja está inclinada, en contra de lo convencional en el diseño web típico basado en cuadrículas.

El sitio web de Hannah Montana cuenta con gráficos de barra de navegación que rompen la cuadrícula.

El sitio web de In the Night Garden presenta un diseño de barra de navegación muy inusual que se parece poco al que se encuentra en un diseño de estructura convencional.

A continuación se muestran algunos ejemplos de sitios web que utilizan un formato más rígido basado en cuadrículas y, como resultado, no son tan únicos, memorables o cautivadores como algunos de los que ya se consideran en este artículo.

Kids WB es rígido y no tan memorable.

El sitio web de Crayola es un poco anticuado con su formato de cuadrícula y navegación vertical.

Neopets también está diseñado en una rejilla más estructurada.

Concedido, en algunos casos sería necesario un diseño basado en cuadrícula más sólido si el público era un público infantil mayor, como es el caso de SI Kids, que se muestra a continuación.

Asumir la responsabilidad

Si intenta llegar a la mente y el corazón de personas jóvenes e impresionables a través de una experiencia en línea, se le confía una gran responsabilidad. Los niños son mentalmente frágiles y se ven afectados fácilmente por lo que ven, oyen y tocan. Hay ciertos factores que deben abordarse en el sitio web de cada niño, para garantizar que no se cause daño a los niños.

Promoción de la educación

Los juegos y otros elementos interactivos deben crearse no solo para promover la marca e identidad de su empresa, sino para ayudar a educar y capacitar a las mentes jóvenes de una manera beneficiosa y positiva. Promover la educación a través de juegos y actividades demostrará que su empresa se preocupa por el usuario y cómo su experiencia en línea podría afectarlo en el futuro.

Los juegos de aprendizaje en línea de Fisher Price incluyen juegos que varían según el grupo de edad.

Funbrain se promociona como » El Sitio Educativo #1 de Internet para Niños y maestros de K-8.»

Información para padres

Los padres vigilarán de cerca los hábitos de Internet de sus hijos. Muchos sitios para niños son conscientes de esto, por lo que incluyen información dirigida a los padres. A veces, esto es en forma de propina, como es el caso del sitio web de juegos de Barrio Sésamo, o simplemente un elemento de navegación que apunta a la sección de un padre.

Sesame Street Games incluye una caja de «Propinas para padres».

BEN 10 tiene un enlace «Cosas Principales» en su barra de navegación principal.

Thomas el motor del tanque incluye un enlace «padres».

Pruebas de usabilidad

Finalmente, una de las mejores maneras de ayudar a construir una experiencia en línea exitosa para los niños es viendo a los niños navegar e interactuar con los juegos de su sitio y otras características únicas. No todas las empresas tendrán el presupuesto para realizar pruebas exhaustivas, pero casi todas tendrán la capacidad de realizar al menos una cantidad mínima de pruebas, incluso si se trata de un solo hijo. Esto le permitirá ver el sitio a través de los ojos de un niño y hacer las modificaciones necesarias, al igual que se haría en cualquier prueba de usabilidad.

Empresas como Disney, Plaza Sésamo y PBS, por supuesto, han estado estudiando el comportamiento de los niños durante años, por lo que muchos de los ejemplos mostrados anteriormente podrían utilizarse para formar la base de un sitio web para niños exitoso, incluso si no se realizan pruebas de usabilidad.

Conclusión

Aquí hay un resumen de las mejores prácticas convencionales y no convencionales para diseñar un sitio web para niños:

Mejores prácticas convencionales

• Cree elementos grandes y visualmente memorables
• Use colores vivos y brillantes que estimulen los sentidos
• Incorpore elementos de la naturaleza
• Cree profundidad en el diseño
• Agregue elementos de navegación grandes y fáciles de encontrar
• Usar video
• Incluir elementos imprimibles
• Romper la cuadrícula
• Hacer modificaciones basadas en pruebas de usabilidad

Mejores prácticas no convencionales

• Crear un estado de ánimo alegre y lúdico
• Usar animación caracteres
• Usar barras de navegación con gráficos pesados
• Usar animación Flash abundantemente
• Incrustar movimientos y sonidos que se activan al cargar la página
• Incluir una sección de «juegos»
• Cambiar el cursor para contribuir al tema
• Añadir voces a los cambios de navegación
• Ser responsable ante niños y padres

Un diseñador web que ha trabajado en un sitio web para niños probablemente diría que fue uno de los proyectos más divertidos e interesantes en los que han tenido el privilegio de trabajar. Si alguna vez tiene la oportunidad de crear una experiencia de usuario orientada a los niños, asegúrese de seguir algunos de los métodos probados demostrados en muchos de los sitios discutidos aquí, y su sitio web tendrá una buena oportunidad de ser un gran éxito con los niños.