navrhování webových stránek pro děti: trendy a osvědčené postupy

• 12 min read
• Inspirace, vitríny, Web Design, děti
• Sdílet na Twitteru, LinkedIn

webové stránky určené pro děti byly do značné míry přehlíženy v článcích o webovém designu a zaokrouhlování, ale na dětských webových stránkách je mnoho krásných a zajímavých designových prvků a rozvržení, které si zaslouží diskusi a analýzu. Existuje také řada osvědčených postupů, které jsou exkluzivní pro webdesign pro dětské weby-postupy, které by se obvykle neměly pokoušet na typickém webu.

možná se budete chtít podívat na související články:

• osvědčené postupy pro Web Design pro děti
• navrhování pro děti není dětská hra
• navrhování webových rozhraní pro děti
• táta prosba vývojářům iPad aplikací pro děti

tento článek představí řadu populárních komerčních webových stránek zaměřených na děti s analýzou trendů, prvků a technik používaných k udržení zájmu dětí a stimulace.

Design, který stimuluje smysly

lidé jsou mentálně stimulováni řadou faktorů, a to platí zejména u dětí. Úspěšné dětské webové stránky implementují řadu prvků a principů designu, které vytvářejí prostředí vhodné pro osobnost a zájmy dítěte.

jasné, živé barvy

jasné barvy snadno zachytí a udrží pozornost dítěte po dlouhou dobu. Ačkoli výběr barev je primárním faktorem při navrhování jakéhokoli typu webových stránek, to platí zejména při navrhování webových stránek pro děti, protože barvy dělají velký dojem na mladé mysli dětí. Výběr barev a kombinace, které by pravděpodobně byly odmítnuty nebo se smály při navrhování typického webu, mohou být uvítány na webu pro děti.

kolik barevných kombinací použitých na screenshotech níže by uspělo na webových stránkách zaměřených na dospělé publikum? Moc ne. Takže při navrhování stránek zaměřených na děti používejte jasné, živé barvy, které vizuálně stimulují nezapomenutelným způsobem.

PBS KIDS

Hermanova domovská stránka

Funbrain hřiště

šťastná nálada

děti si budou pamatovat a vrátit se na web, pokud jejich zkušenost je šťastná. Prvky mohou být začleněny do návrhu, aby bylo zajištěno, že je prezentována veselá, pozitivní nálada.

Mickey Mouse Clubhouse vytváří šťastnou náladu tím, že Mickey sám vizuální ohnisko na stránce. Jeho šťastná tvář a řeč těla pomáhají zlepšit tento šťastný pocit a vytvářejí vítanou atmosféru.

Web Play-Doh vytváří šťastnou náladu pomocí zářícího dítěte jako ohniska.

webové stránky Fifi a Flowertots mají ve vizuálním zaměření velkou usměvavou postavu Flowertot, která vytváří šťastnou náladu.

prvky z přírody

děti jsou stimulovány rozpoznatelnými prvky, se kterými se mohou vztahovat. Protože zkušenosti dětí v životě jsou omezené, některé z věcí, které jsou nejvíce obeznámeny, se nacházejí v přírodě. Na níže uvedených webových stránkách se používají přírodní prvky, jako jsou stromy, voda, sníh a zvířata. V mnoha případech jsou tyto prvky příliš zdůrazněny velikostí nebo jednoduchostí designu.

web Disney mění své téma v závislosti na tom, jaký produkt je propagován. Na tomto snímku obrazovky používají krajinu podobnou Grand Canyonu k vytvoření nezapomenutelného vizuálního zážitku.

Discovery Kids používá podvodní téma.

Club Penguin představuje arktické téma.

CBC Kids používá sezónní téma založené na zjednodušující, poutavé grafice.

PopCap Games používá travnatou krajinu před velkými paprsky slunce.

větší než život Design

velké konstrukční prvky se ukázaly být účinné ve všech typech webdesignu, což dokazuje skutečnost, že velká typografie, velká tlačítka a velké oblasti výzvy k akci se staly samozřejmostí v moderním designu. Protože děti jsou přirozeně přitahovány k jednoduchým, zřejmým a rozpoznatelným objektům, webové stránky určené pro děti zvýší jejich účinnost pomocí velkých designových prvků.

animované postavy

Velké, animované, mluvící postavy jsou fascinující a podmanivý způsob, jak chytit a držet pozornost dítěte. Mnoho stránek určených pro děti tento prvek efektivně využívá.

Barbie

Pan Rogers‘ Neighborhood

Disney Princess

Thomas Tankový Motor

Barney & Friends

hloubka v designu

děti rádi nechávají své představy běžet divoce ve světě, který vypadá a cítí se skutečný. Tento druh atmosféry lze vytvořit hloubkou v konstrukčních prvcích. To může zahrnovat extrudované tvary, stíny, krajiny, zkosené efekty, lesklé přechody nebo plovoucí objekty. Mnoho z těchto prvků je často přítomno v kreslených displejích, jak je uvedeno níže.

Webkinz „adopční centrum“ používá stíny, životní charakter a další 3-dimenzionální prvky k vytvoření návrhu, který má hloubku.

Poisson Rouge vytváří hlubokou, realistickou atmosféru pomocí okna, které se dívá ven na slunce, spolu s řadou dalších 3-dimenzionálních prvků.

Rainbow Magic vytváří hloubku v jejich designu prostřednictvím Flash animované krajinné scény, která se pohybuje, když se uživatel vznáší nad různými prvky.

navigační a Call-To-Action oblasti, které vynikají

v jakémkoli designu webových stránek, navigace a call-to-action oblasti by měly být ústředními body. Návrháři webových stránek pro děti mohou tyto oblasti zjednodušit, aby se děti mohly snadno pohybovat. Textová navigace na webových stránkách dětí by nebyla tak účinná jako velká tlačítka a grafika, protože by jim chybělo vizuální zaměření na stránku.

Peppa Pig má horizontální navigační lištu, která obsahuje velké ikony a snadno čitelné popisy pro každou položku.

webové stránky Medvídek Pú začleňují svůj navigační panel do svého“ lesního “ tématu pomocí velkých dřevěných grafických prvků, které uživatel nepřehlédne.

Sesame Street má snadno lokalizovatelný horizontální navigační panel spolu s velkými oblastmi volání k akci.

Můj malý Pony používá textovou navigaci a vytváří méně grafický zážitek, který umožňuje zaměřit se na prvky obsahu. To může být v některých situacích ideální, ale na webových stránkách pro děti bude pravděpodobně efektivní grafický navigační panel.

interakce s uživatelem

pravděpodobně jedním z nejdůležitějších způsobů, jak dětský web uspět, je zahrnout prvky, které dítěti umožňují nějakým způsobem komunikovat s webem. Děti nechtějí dělat intenzivní čtení nebo výzkum; chtějí hrát a bavit se.

na typickém webu jsou některé konstrukční prvky považovány za rušivé, nepoužitelné a těžkopádné. Na webových stránkách dítěte jsou tytéž prvky považovány za účinný prostředek k přilákání uživatelů.

interakce prostřednictvím animace a zvuku

efekty a zážitky vytvořené pomocí Adobe Flash jsou odrazovány v typickém moderním webovém designu, ale na dětských stránkách neexistuje téměř žádná jiná možnost. Je pravda, že animace a efekty JavaScriptu prošly dlouhou cestu kvůli mnoha dostupným knihovnám JavaScriptu, ale snadnost, s jakou lze pomocí Flash vytvářet složité animace, činí tuto metodu první volbou pro mnoho komerčních webů určených pro děti.

Web Pauly ‚ s Playhouse, stejně jako většina webových stránek uvedených v tomto článku, je postaven výhradně ve Flashi.

Web Hot Wheels obsahuje animované „auto dne“, které se při načtení stránky přiblíží na obrazovku a vytvoří vizuální interakci.

Roary závodní vůz má krátké „flash intro“ s tlačítkem „přeskočit“. Jedná se o trend ze staré školy v typickém webdesignu, ale je účinným prostředkem stravování pro dětské publikum. Intro se animuje cestou, dokud se postavy neobjeví na obzoru. To pomáhá uživateli cítit se, jako by osobně vstupoval do Roaryho animovaného světa.

Yahoo! Kids navigation bar je vytvořen s bleskem a dělá zvukové efekty a oživuje, když jsou jeho položky vznášela nad. Tento trend je velmi běžný na mnoha webech uvedených v tomto článku.

interakce prostřednictvím videa

je známo, že televize uchvátí dětské publikum celé hodiny, a proto jsou „sobotní ranní karikatury“ po celá desetiletí lukrativní součástí vysílacích plánů pro mnoho televizních sítí. Podobně video na webových stránkách dítěte přidává obsah webu zábavný, interaktivní a vzdělávací aspekt.

dětské CBC-Video

Yahoo! Dětské Filmové Průvodce

National Geographic Kids-videa

interakce prostřednictvím her

Jaké dítě nemá rád hraní her? Jedním z nejúčinnějších způsobů, jak pobavit, vzdělávat nebo jinak zabírat dítě na webu, je zahrnout sekci „Hry“. Téměř všechny webové stránky zkoumané pro tento článek zahrnují hry, které vzdělávají, stimulují a umožňují přímou interakci a zároveň obsahují mnoho již diskutovaných konstrukčních prvků. Níže jsou uvedeny některé příklady.

CBeebies-Gordon The Garden Gnome

Toy Story-Woodyho Velký útěk

Svět automobilů Disney Pixar umožňuje uživatelům vytvářet, sdílet a závodit s vlastními vozy.

tisknutelné prvky

děti chtějí mít s sebou něco hmatatelného, aby jim pomohly vzpomenout si na své zkušenosti. Tisknutelné obrázky a omalovánky umožňují dětem mít památku svých zkušeností, a zároveň dává majitelům webových stránek příležitost vylepšit a propagovat svou značku mimo obrazovku počítače. Níže uvádíme několik příkladů tisknutelných barevných stránek na webových stránkách dětí.

Pingu omalovánky

Crayola Digi-Color

Peppa Pig omalovánky

Thomas a přátelé Online Coloring

Teletubbies – tisk na barvu

nekonvenční metody

již jsme diskutovali o řadě prvků, které jsou v moderním typickém webdesignu nyní považovány za nekonvenční. Zvuk, animace, a velké dotěrné grafiky jsou často odsuzován v typickém webdesignu. Na webových stránkách dětí tyto prvky pomáhají uživatelskému zážitku. Další nekonvenční prvky a možnosti designu jsou popsány níže.

Změna kurzoru

toto je absolutně považováno za špatnou praxi ve standardním webdesignu,ale může to být zábavný a efektivní způsob přidání hravého prvku do tématu webových stránek pro děti. To lze provést pomocí dynamického HTML, ale častěji se provádí pomocí blesku.

kurzor na webu Discovery Kids se změní na grafiku lapající medvědí pasti.

kurzor na webových stránkách Sesame Street je následován žlutou hvězdou, když se vznáší nad standardními prvky HTML, a změní se na žlutou hvězdu obklopenou menšími animovanými hvězdami, když je kurzor přesunut přes klikací Flash prvky.

mluvící navigace

někdy navigační lišta vytvoří zvukové efekty,ale v jiných případech navigační odkazy zazní veselým hlasem.

navigační lišta PBS KIDS mluví pomocí dětských hlasů, když se nad ním uživatel vznáší.

navigační lišta CBeebies používá hlas k vyznění cíle každé navigační položky.

Navigační lišta Bob Builder mluví k uživateli při přejíždění myší.

Fifi a Flowertots mají mluvící navigační lištu.

Breaking the Grid

zatímco tradiční moderní techniky webového designu přijaly výhody a estetiku designu založeného na mřížce, webové stránky dětí se mohou osvobodit od příliš strukturovaného rozvržení a vytvořit jedinečný svět, který si dítě užije.

to neznamená, že použití mřížky jako základu návrhu je špatné. Může být výhodné začít s mřížkou, pak navrhovat prvky mimo mřížku kontrolovaným způsobem. Tato flexibilita v designu a rozvržení je demonstrována na řadě již diskutovaných webů, ale je také patrná v navigačních lištách níže uvedených příkladů.

navigační lišta na webových stránkách Spongebob Squarepants je šikmá, což je v rozporu s konvencí v typickém webovém designu založeném na mřížce.

webová stránka Hannah Montana obsahuje grafiku navigačního panelu, která narušuje mřížku.

webová stránka In the Night Garden obsahuje velmi neobvyklý design navigačního panelu, který se málo podobá designu, který se nachází v konvenčně strukturovaném designu.

níže jsou uvedeny některé příklady webových stránek, které využívají pevnější formát založený na mřížce a v důsledku toho nejsou tak jedinečné, nezapomenutelné nebo podmanivé jako některé z těch, které jsou již v tomto článku zvažovány.

děti WB je tuhý, a ne tak památný.

webová stránka Crayola je poněkud Stará škola s formátem mřížky a vertikální navigací.

Neopets je také navržen na strukturovanější mřížce.

je pravda, že v některých případech by byl nutný silnější design založený na mřížce, pokud by publikum bylo starší dětské publikum, jako je tomu u dětí SI, jak je uvedeno níže.

převzetí odpovědnosti

pokud se pokoušíte prostřednictvím online zážitku oslovit mysl a srdce mladých, citlivých lidí, je vám svěřena závažná odpovědnost. Děti jsou mentálně křehké a snadno ovlivněné tím, co vidí, slyší a dotýkají se. Existují určité faktory, které je třeba řešit na webových stránkách každé děti, zajistit žádné škody je přinášet dětem.

podpora vzdělávání

hry a další interaktivní prvky by měly být vytvořeny nejen proto, aby propagovaly značku a identitu vaší společnosti, ale aby pomohly vzdělávat a trénovat mladé mysli prospěšným a pozitivním způsobem. Podpora vzdělávání prostřednictvím her a aktivit ukáže, že vaše společnost se stará o uživatele a jak by je jejich online zážitek mohl v budoucnu ovlivnit.

online vzdělávací hry od Fisher Price zahrnují hry, které se liší podle věkové skupiny.

Funbrain se propaguje jako “ internetová vzdělávací Stránka # 1 pro děti a učitele K-8.“

informace pro rodiče

rodiče budou pečlivě sledovat internetové návyky svých dětí. Mnoho dětských stránek si toho je vědomo, takže obsahují informace zaměřené na rodiče. Někdy je to ve formě tipu, jako je tomu u webových stránek Sesame Street games, nebo jednoduše navigační položka, která ukazuje na část rodiče.

Sesame Street Games obsahuje pole“ Rodičovský Tip“.

BEN 10 má v primární navigační liště odkaz“ nadřazené věci“.

Thomas Tankový motor obsahuje odkaz“ rodiče“.

testování použitelnosti

konečně, jedním z nejlepších způsobů, jak pomoci vybudovat úspěšný online zážitek pro děti, je sledování dětí navigovat a komunikovat s hrami vašeho webu a dalšími jedinečnými funkcemi. Ne všechny společnosti budou mít rozpočet na rozsáhlé testování — ale téměř všechny budou mít možnost provést alespoň minimální množství testování-i když je to jen s jedním dítětem. To vám umožní vidět web očima dítěte a provést jakékoli nezbytné úpravy, stejně jako v jakýchkoli testech použitelnosti.

společnosti jako Disney, Sesame Street a PBS samozřejmě studují chování dětí po celá léta, takže mnoho z výše uvedených příkladů by mohlo být využito k vytvoření základu pro úspěšné dětské webové stránky, i když není provedeno žádné testování použitelnosti.

závěr

zde je shrnutí konvenčních i nekonvenčních osvědčených postupů pro navrhování webových stránek pro děti:

konvenční osvědčené postupy

• Vytvořte prvky, které jsou velké a vizuálně zapamatovatelné
• používejte jasné, živé barvy, které stimulují smysly
• začleňte prvky z přírody
• Vytvořte hloubku v designu
• přidejte navigační prvky, které jsou velké a snadno dostupné
• použijte video
• zahrňte tisknutelné prvky
• rozbijte mřížku
• proveďte úpravy na základě testování použitelnosti

nekonvenční osvědčené postupy

• vytvořte šťastnou, hravou náladu
• použijte animované znaky
• použijte grafické těžké navigační lišty
• použijte flash animaci hojně
• vložte pohyby a zvuky, které spouštějí při načítání stránky
• zahrňte sekci „Hry“
• změňte kurzor tak, aby přispěl k tématu
• přidejte hlasy k navigačním rolloverům
• buďte odpovědní dětem i rodičům

webdesignér, který pracoval na dětský web by pravděpodobně řekl, že to byl jeden z nejzábavnějších a nejzajímavějších projektů, na kterých měli tu čest pracovat. Pokud máte někdy příležitost vytvořit uživatelský zážitek, který je zaměřen na děti, nezapomeňte dodržovat některé z osvědčených metod prokázaných na mnoha zde diskutovaných webech a váš web bude mít dobrou šanci být velkým hitem s dětmi.