Conception De Sites Web Pour Enfants: Tendances Et Meilleures Pratiques

• 12 min lire
• Inspiration, Vitrines, Design Web, Enfants
• Partager sur Twitter, LinkedIn

Les sites Web conçus pour les enfants ont été largement négligés dans les articles et les résumés de conception Web, mais il existe de nombreux éléments de conception et mises en page magnifiques et intéressants présentés sur les sites Web pour enfants qui méritent discussion et analyse. Il existe également un certain nombre de bonnes pratiques exclusives à la conception de sites Web pour les sites pour enfants — pratiques qui ne devraient généralement pas être tentées sur un site Web typique.

Vous pouvez jeter un oeil à des articles connexes:

• Meilleures Pratiques Pour la Conception Web Pour Les Enfants
• Concevoir Pour les Enfants N’Est Pas un Jeu d’Enfant
• Concevoir des Interfaces Web Pour les Enfants
• Le Plaidoyer d’un Père Aux Développeurs d’Applications iPad Pour les Enfants

Cet article présentera un certain nombre de sites Web commerciaux populaires destinés aux enfants avec une analyse des tendances, des éléments et des techniques utilisés pour aider les enfants à rester intéressés et stimulés.

Conception qui stimule les sens

Les humains sont stimulés mentalement par un certain nombre de facteurs, et cela est particulièrement vrai avec les enfants. Les sites Web pour enfants qui réussissent mettent en œuvre un certain nombre d’éléments et de principes de conception qui créent un environnement adapté à la personnalité et aux intérêts de l’enfant.

Couleurs vives et vives

Les couleurs vives captureront et retiendront facilement l’attention d’un enfant pendant de longues périodes. Bien que le choix des couleurs soit un facteur primordial dans la conception de tout type de site Web, cela est particulièrement vrai lors de la conception d’un site Web pour enfants, car les couleurs font une grande impression sur les jeunes esprits des enfants. Les choix de couleurs et les combinaisons susceptibles d’être rejetés ou riés lors de la conception d’un site Web typique peuvent être les bienvenus sur un site Web pour enfants.

Combien de combinaisons de couleurs utilisées dans les captures d’écran ci-dessous réussiraient sur un site Web destiné à un public adulte? Pas beaucoup. Ainsi, lors de la conception d’un site destiné aux enfants, utilisez des couleurs vives et vives qui stimuleront visuellement de manière inoubliable.

PBS KIDS

Page d’accueil de Herman

Aire de jeux Funbrain

Bonne humeur

Les enfants se souviendront et reviendront sur un site Web si leur expérience est heureuse. Des éléments peuvent être incorporés dans le design pour garantir une ambiance joyeuse et positive.

Mickey Mouse Clubhouse crée une bonne humeur en faisant de Mickey lui-même un point focal visuel sur la page. Son visage heureux et son langage corporel contribuent à renforcer ce sentiment de bonheur, créant une atmosphère bienvenue.

Le site Play-Doh crée une bonne humeur en utilisant un enfant rayonnant comme point focal.

Le site web de Fifi et de Flowertots a un grand caractère Flowertot souriant en mise au point visuelle, créant une bonne humeur.

Éléments de la Nature

Les enfants sont stimulés par des éléments reconnaissables auxquels ils peuvent se rapporter. Parce que les expériences de vie des enfants sont limitées, certaines des choses qu’ils connaissent le plus se trouvent dans la nature. Les éléments naturels tels que les arbres, l’eau, la neige et les animaux sont utilisés dans les sites Web indiqués ci-dessous. Dans de nombreux cas, ces éléments sont surestimés par la taille ou la simplicité de conception.

Le site Web de Disney modifie son thème en fonction du produit promu. Dans cette capture d’écran, ils utilisent un paysage semblable au Grand Canyon pour créer une expérience visuelle mémorable.

Discovery Kids utilise un thème sous-marin.

Club Penguin présente un thème arctique.

CBC Kids utilise un thème saisonnier basé sur des graphismes simplistes et accrocheurs.

PopCap Games utilise un paysage herbeux devant de grands rayons de soleil.

Conception plus grande que nature

Les grands éléments de conception se sont révélés efficaces dans tous les types de conception Web, démontrés par le fait que les grandes typographies, les gros boutons et les grandes zones d’appel à l’action sont devenus monnaie courante dans le design moderne. Parce que les enfants sont naturellement attirés par des objets simples, évidents et reconnaissables, les sites Web conçus pour les enfants augmenteront leur efficacité grâce à l’utilisation de grands éléments de conception.

Personnages animés

Les grands personnages animés et parlants sont un moyen fascinant et captivant d’attirer et de retenir l’attention d’un enfant. De nombreux sites conçus pour les enfants utilisent efficacement cet élément.

Barbie

Le quartier de M. Rogers

Princesse Disney

Thomas le Moteur du Char

Barney & Amis

Profondeur de conception

Les enfants aiment laisser libre cours à leur imagination dans un monde qui semble et se sent réel. Ce genre d’atmosphère peut être créé grâce à la profondeur des éléments de conception. Cela peut inclure des formes extrudées, des ombres, des paysages, des effets biseautés, des dégradés brillants ou des objets flottants. Souvent, beaucoup de ces éléments sont présents dans des affichages de type dessin animé, comme indiqué ci-dessous.

Le « Centre d’adoption » de Webkinz utilise des ombres, un personnage vivant et d’autres éléments en 3 dimensions pour créer un design qui a de la profondeur.

Poisson Rouge crée une atmosphère profonde et réaliste en utilisant une fenêtre qui regarde le soleil à l’extérieur, ainsi qu’un certain nombre d’autres éléments tridimensionnels.

Rainbow Magic crée de la profondeur dans leur conception grâce à une scène de paysage animée en flash qui se déplace lorsque l’utilisateur survole différents éléments.

Les domaines de navigation et d’appel à l’action Qui Se démarquent

Dans toute conception de site Web, les domaines de navigation et d’appel à l’action devraient être des points focaux. Les concepteurs de sites Web pour enfants peuvent simplifier à l’excès ces zones afin que les enfants puissent naviguer facilement. La navigation textuelle sur les sites Web pour enfants ne serait pas aussi efficace que les gros boutons et graphiques, car ils manqueraient de focus visuel sur une page.

Peppa Pig a une barre de navigation horizontale qui comprend de grandes icônes et des descriptions faciles à lire pour chaque élément.

Le site Web de Winnie L’Ourson intègre leur barre de navigation dans leur thème « forêt », en utilisant de grands éléments graphiques en bois qui ne seront pas négligés par l’utilisateur.

Sesame Street dispose d’une barre de navigation horizontale facile à localiser, ainsi que de grandes zones d’appel à l’action.

My Little Pony utilise la navigation textuelle, créant une expérience moins graphique, ce qui permet de se concentrer sur les éléments de contenu. Cela peut être idéal dans certaines situations, mais sur un site Web pour enfants, une barre de navigation graphique est plus susceptible d’être efficace.

Interaction avec l’utilisateur

L’un des moyens les plus importants pour le succès d’un site Web pour enfants est probablement d’inclure des éléments qui permettent à un enfant d’interagir avec le site d’une manière ou d’une autre. Les enfants ne veulent pas faire des lectures ou des recherches intenses; ils veulent jouer et se divertir.

Sur un site Web typique, certains éléments de conception sont considérés comme distrayants, inutilisables et encombrants. Sur le site Web d’un enfant, ces mêmes éléments sont considérés comme un moyen efficace d’attirer les utilisateurs.

Interaction par l’animation et le son

Les effets et les expériences créés avec Adobe Flash sont découragés dans la conception Web moderne typique, mais sur les sites pour enfants, il n’y a presque pas d’autre option. Il est vrai que l’animation et les effets JavaScript ont parcouru un long chemin en raison des nombreuses bibliothèques JavaScript disponibles, mais la facilité avec laquelle des animations complexes peuvent être créées avec Flash fait de cette méthode le premier choix pour de nombreux sites Web commerciaux conçus pour les enfants.

Le site Pauly’s Playhouse, comme la plupart des sites Web présentés dans cet article, est entièrement construit en Flash.

Le site Web de Hot Wheels comprend une « voiture du jour » animée qui zoome sur l’écran lorsque la page se charge, créant une interaction visuelle.

Roary la voiture de course a une brève « introduction flash » avec un bouton « sauter ». C’est une tendance de la vieille école dans la conception Web typique, mais c’est un moyen efficace de s’adresser à un public axé sur les enfants. L’intro s’anime à travers une route jusqu’à ce que les personnages apparaissent à l’horizon. Cela aide l’utilisateur à se sentir comme s’il entrait personnellement dans le monde animé de Roary.

Le Yahoo! La barre de navigation pour enfants est créée avec Flash et crée des effets sonores et s’anime lorsque ses éléments sont survolés. Cette tendance est très courante sur de nombreux sites présentés dans cet article.

Interaction par vidéo

La télévision est connue pour captiver un public d’enfants pendant des heures, c’est pourquoi les « dessins animés du samedi matin » font depuis des décennies partie lucrative des horaires de diffusion de nombreux réseaux de télévision. De même, la vidéo sur le site Web d’un enfant ajoute un aspect amusant, interactif et éducatif au contenu d’un site.

Vidéo CBC pour enfants

Yahoo! Guides de films pour enfants

National Geographic Kids – Videos

Interaction à travers les jeux

Quel enfant n’aime pas jouer à des jeux? L’un des moyens les plus efficaces de divertir, d’éduquer ou d’occuper un enfant sur un site Web consiste à inclure une section « jeux ». Presque tous les sites Web étudiés pour cet article incluent des jeux qui éduquent, stimulent et permettent une interaction directe, tout en incorporant de nombreux éléments de conception déjà discutés. Voici quelques exemples.

CBeebies – Gordon le Nain de Jardin

Histoire de Jouets – La Grande Évasion de Woody

Le Monde des Voitures de Disney Pixar permet les utilisateurs de créer, partager et courir leurs propres voitures personnalisées.

Éléments imprimables

Les enfants aiment avoir quelque chose de tangible à emporter avec eux, pour les aider à se souvenir de leur expérience. Les images imprimables et les pages à colorier permettent aux enfants d’avoir un souvenir de leur expérience, tout en donnant aux propriétaires de sites Web l’occasion d’améliorer et de promouvoir leur marque en dehors de l’écran d’ordinateur. Voici quelques exemples de pages à colorier imprimables sur les sites Web pour enfants.

Pages à colorier Pingu

Crayola Digi-Color

Pages à Colorier Peppa Pig

Coloriage En Ligne Thomas et Ses Amis

Teletubbies – Impression En Couleur

Méthodes non conventionnelles

Nous avons déjà discuté d’un certain nombre d’éléments qui, dans la conception Web typique moderne, sont maintenant considérés comme non conventionnels. Le son, l’animation et les grands graphiques envahissants sont souvent mal vus dans la conception Web typique. Sur les sites Web pour enfants, ces éléments aident l’expérience utilisateur. D’autres éléments et choix de conception non conventionnels sont discutés ci-dessous.

Changer le curseur

Ceci est absolument considéré comme une mauvaise pratique dans la conception Web standard, mais peut être un moyen amusant et efficace d’ajouter un élément ludique au thème d’un site Web pour enfants. Cela peut être fait en utilisant du HTML dynamique, mais le plus souvent via Flash.

Le curseur sur le site Web de Discovery Kids se transforme en un graphique de piège à ours.

Le curseur sur le site Web de Sesame Street est suivi d’une étoile jaune lorsqu’il survole des éléments HTML standard, et se transforme en une étoile jaune entourée d’étoiles animées plus petites lorsque le curseur est déplacé sur des éléments Flash cliquables.

Navigation parlante

Parfois, une barre de navigation produira des effets sonores, mais dans d’autres cas, les liens de navigation résonneront ce qu’ils représentent d’une voix joyeuse.

La barre de navigation PBS KIDS parle à l’aide de voix d’enfants, lorsque l’utilisateur la survole.

La barre de navigation CBeebies utilise une voix pour indiquer la destination de chaque élément de navigation.

La barre de navigation Bob the Builder s’adresse à l’utilisateur au passage de la souris.

Le Fifi et les Flowertots comporte une barre de navigation parlante.

Briser la grille

Alors que les techniques de conception Web modernes traditionnelles ont embrassé les avantages et l’esthétique de la conception basée sur une grille, les sites Web pour enfants peuvent se libérer d’une mise en page trop structurée pour créer un monde unique qu’un enfant appréciera de vivre.

Cela ne veut pas dire que l’utilisation d’une grille comme base de la conception est erronée. Il peut être avantageux de commencer par une grille, puis de concevoir des éléments extérieurs à la grille de manière contrôlée. Cette flexibilité dans la conception et la mise en page est démontrée sur un certain nombre de sites déjà discutés, mais est également évidente dans les barres de navigation des exemples ci-dessous.

La barre de navigation sur le site Spongebob Squarepants est inclinée, ce qui va à l’encontre de la convention dans la conception Web typique basée sur une grille.

Le site Web de Hannah Montana présente des graphiques de barre de navigation qui brisent la grille.

Le site Web In the Night Garden présente un design de barre de navigation très inhabituel qui ressemble peu à celui d’un design à structure conventionnelle.

Voici quelques exemples de sites Web qui utilisent un format plus rigide, basé sur une grille, et par conséquent ne sont pas aussi uniques, mémorables ou captivants que certains de ceux déjà considérés dans cet article.

Kids WB est rigide et pas aussi mémorable.

Le site web Crayola est un peu old-school avec son format de grille et sa navigation verticale.

Neopets est également conçu sur une grille plus structurée.

Certes, dans certains cas, une conception basée sur une grille plus solide serait nécessaire si le public était un public d’enfants plus âgés, comme c’est le cas avec SI Kids, illustré ci-dessous.

Prendre ses responsabilités

Si vous essayez d’atteindre l’esprit et le cœur de jeunes personnes impressionnables grâce à une expérience en ligne, une lourde responsabilité vous est confiée. Les enfants sont mentalement fragiles et facilement affectés par ce qu’ils voient, entendent et touchent. Il y a certains facteurs qui doivent être abordés sur le site Web de chaque enfant, pour s’assurer qu’aucun mal n’est causé aux enfants.

Promotion de l’éducation

Les jeux et autres éléments interactifs doivent être créés non seulement pour promouvoir la marque et l’identité de votre entreprise, mais aussi pour aider à éduquer et à former les jeunes esprits de manière bénéfique et positive. La promotion de l’éducation par le biais de jeux et d’activités montrera que votre entreprise se soucie de l’utilisateur et de la façon dont son expérience en ligne pourrait l’affecter à l’avenir.

Les jeux d’apprentissage en ligne de Fisher Price comprennent des jeux qui varient selon le groupe d’âge.

Funbrain se présente comme « Le site d’éducation #1 d’Internet pour les enfants de la Maternelle à la 8e année et les enseignants. »

Information pour les parents

Les parents surveilleront de près les habitudes Internet de leurs enfants. De nombreux sites pour enfants en sont conscients, ils incluent donc des informations destinées aux parents. Parfois, cela prend la forme d’un pourboire, comme c’est le cas avec le site Web de Sesame Street games, ou simplement d’un élément de navigation qui pointe vers la section d’un parent.

Sesame Street Games comprend une boîte « Pourboire parent ».

BEN 10 a un lien « Parent Stuff » dans sa barre de navigation principale.

Thomas le moteur du char comprend un lien « parents ».

Tests d’utilisabilité

Enfin, l’une des meilleures façons d’aider à créer une expérience en ligne réussie pour les enfants consiste à regarder les enfants naviguer et interagir avec les jeux de votre site et d’autres fonctionnalités uniques. Toutes les entreprises n’auront pas le budget pour des tests approfondis, mais presque toutes auront la capacité de faire au moins un minimum de tests — même si c’est avec un seul enfant. Cela vous permettra de voir le site à travers les yeux d’un enfant et d’apporter les modifications nécessaires, comme cela se ferait dans tous les tests d’utilisabilité.

Des entreprises comme Disney, Sesame Street et PBS, bien sûr, étudient le comportement des enfants depuis des années, de sorte que de nombreux exemples présentés ci-dessus pourraient être utilisés pour constituer la base d’un site Web pour enfants réussi, même si aucun test d’utilisabilité n’est effectué.

Conclusion

Voici un résumé des meilleures pratiques conventionnelles et non conventionnelles pour la conception d’un site Web pour les enfants:

Meilleures pratiques conventionnelles

• Créer des éléments de grande taille et visuellement mémorables
• Utiliser des couleurs vives et vives qui stimulent les sens
• Incorporer des éléments de la nature
• Créer de la profondeur dans la conception
• Ajouter des éléments de navigation de grande taille et faciles à trouver
• Utiliser la vidéo
• Inclure des éléments imprimables
• Briser la grille
• Apporter des modifications basées sur des tests d’utilisabilité

Meilleures pratiques non conventionnelles

• Créer une ambiance joyeuse et ludique
• Utiliser des images animées caractères
• Utiliser des barres de navigation graphiques
• Utiliser abondamment l’animation Flash
• Intégrer des mouvements et des sons qui se déclenchent au chargement de la page
• Inclure une section « jeux »
• Changer le curseur pour contribuer au thème
• Ajouter des voix aux reports de navigation
• Être responsable envers les enfants et les parents

Un concepteur Web qui a travaillé sur un site Web pour enfants dirait probablement que c’était l’un des projets les plus amusants et les plus intéressants sur lesquels il a eu le privilège de travailler. Si jamais vous avez la possibilité de créer une expérience utilisateur orientée vers les enfants, assurez-vous de suivre certaines des méthodes éprouvées démontrées sur de nombreux sites discutés ici, et votre site Web aura de bonnes chances d’être un grand succès auprès des enfants.