projektowanie stron internetowych Dla Dzieci: trendy i najlepsze praktyki

• 12 min Czytaj
• inspiracje, gabloty, projektowanie stron internetowych, dzieci
• Udostępnij na Twitterze, LinkedIn

strony internetowe przeznaczone dla dzieci zostały w dużej mierze pominięte w artykułach i podsumowaniach dotyczących projektowania stron internetowych, ale istnieje wiele pięknych i interesujących elementów i układów prezentowanych na stronach internetowych dla dzieci, które są warte dyskusji i analizy. Istnieje również wiele najlepszych praktyk, które są wyłącznie do projektowania stron internetowych dla dzieci – praktyk, których zwykle nie należy próbować na typowej stronie internetowej.

zapraszam do zapoznania się z podobnymi artykułami:

• Best Practices For Web Design For Kids
• Projektowanie dla dzieci nie jest dziecinnie proste
• projektowanie interfejsów internetowych Dla Dzieci
• apel taty do twórców aplikacji na iPada dla dzieci

Ten artykuł zaprezentuje wiele popularnych komercyjnych stron internetowych skierowanych do dzieci z analizą trendów, elementów i technik stosowanych w celu utrzymania zainteresowania i stymulacji dzieci.

projekt, który pobudza zmysły

ludzie są stymulowani umysłowo przez wiele czynników, a jest to szczególnie prawdziwe w przypadku dzieci. Udane strony internetowe dla dzieci wdrażają szereg elementów i zasad projektowania, które tworzą środowisko dostosowane do osobowości i zainteresowań dziecka.

jasne, żywe kolory

jasne kolory z łatwością uchwycą i zatrzymają uwagę dziecka przez długi czas. Chociaż wybór koloru jest podstawowym czynnikiem przy projektowaniu każdego rodzaju strony internetowej, jest to szczególnie ważne przy projektowaniu strony internetowej dla dzieci, ponieważ kolory robią duże wrażenie na młodych umysłach dzieci. Wybór kolorów i kombinacji, które prawdopodobnie zostałyby odrzucone lub wyśmiane podczas projektowania typowej strony internetowej, mogą być mile widziane na stronie internetowej dla dzieci.

ile kombinacji kolorów użytych na poniższych zrzutach ekranu odniosłoby sukces na stronie internetowej skierowanej do dorosłych odbiorców? Niewielu. Tak więc, projektując witrynę skierowaną do dzieci, używaj jasnych, żywych kolorów, które wizualnie stymulują w niezapomniany sposób.

PBS KIDS

Strona domowa Hermana

Funbrain Playground

radosny nastrój

dzieci zapamiętają i wrócą na stronę internetową, jeśli ich doświadczenie będzie szczęśliwe. Elementy mogą być włączone do projektu, aby zapewnić Wesoły, pozytywny nastrój.

Klub Myszki Miki tworzy radosny nastrój, sprawiając, że sam Mickey staje się wizualnym punktem na stronie. Jego szczęśliwa twarz i mowa ciała pomagają wzmocnić to szczęśliwe uczucie, tworząc przyjazną atmosferę.

strona Play-Doh tworzy radosny nastrój, wykorzystując rozświetlone dziecko jako punkt centralny.

witryna Fifi i Flowertots ma duży uśmiechnięty charakter Flowertot, tworząc radosny nastrój.

elementy natury

dzieci są stymulowane przez rozpoznawalne elementy, z którymi mogą się odnosić. Ponieważ doświadczenia życiowe dzieci są ograniczone, niektóre z rzeczy, które są najbardziej znane, znajdują się w naturze. Elementy naturalne, takie jak drzewa, woda, śnieg i zwierzęta, są wykorzystywane na poniższych stronach internetowych. W wielu przypadkach elementy te są przeceniane przez rozmiar lub prostotę projektowania.

strona Disney zmienia swój motyw w zależności od tego, jaki produkt jest promowany. Na tym zrzucie ekranu wykorzystują krajobraz podobny do Wielkiego Kanionu, aby stworzyć niezapomniane wrażenia wizualne.

Discovery Kids używa podwodnego motywu.

Club Penguin prezentuje Arktyczny motyw.

CBC Kids wykorzystuje motyw sezonowy oparty na uproszczonej, przyciągającej wzrok grafice.

PopCap Games wykorzystuje trawiasty krajobraz przed dużymi promieniami słońca.

większy niż życie projekt

duże elementy projektu okazały się skuteczne we wszystkich rodzajach projektowania stron internetowych, o czym świadczy fakt, że duża typografia, duże przyciski i duże obszary wezwania do działania stały się powszechne w nowoczesnym designie. Ponieważ dzieci są naturalnie przyciągane do prostych, oczywistych i rozpoznawalnych obiektów, strony internetowe zaprojektowane dla dzieci zwiększą ich skuteczność dzięki zastosowaniu dużych elementów projektowych.

animowane postacie

Duże, animowane, mówiące postacie to fascynujący i urzekający sposób na przyciągnięcie i przyciągnięcie uwagi dziecka. Wiele witryn przeznaczonych dla dzieci skutecznie wykorzystuje ten element.

Barbie

Sąsiedztwo Pana Rogersa

Disney Princess

Thomas The Tank Engine

Barney& przyjaciele

głębia w projektowaniu

dzieci lubią pozwolić, aby ich wyobraźnia szalała w świecie, który wygląda i czuje się prawdziwy. Ten rodzaj atmosfery można stworzyć poprzez głębię w elementach konstrukcyjnych. Może to obejmować wytłaczane kształty, cienie, krajobrazy, ukośne efekty, błyszczące gradienty lub pływające obiekty. Często wiele z tych elementów jest obecnych w kreskówkowych wyświetlaczach, jak pokazano poniżej.

Webkinz” Centrum adopcji ” używa cieni, postaci przypominającej życie i innych trójwymiarowych elementów, aby stworzyć projekt, który ma głębię.

Poisson Rouge tworzy głęboką, realistyczną atmosferę za pomocą okna, które patrzy na słońce na zewnątrz, wraz z wieloma innymi trójwymiarowymi elementami.

Rainbow Magic tworzy głębię w ich projektowaniu poprzez animowaną scenę krajobrazową, która porusza się, gdy użytkownik unosi się nad różnymi elementami.

obszary nawigacji i wezwania do działania, które wyróżniają się

w każdym projekcie witryny obszary nawigacji i wezwania do działania powinny być punktami skupienia. Projektanci stron internetowych dla dzieci mogą uprościć te obszary, aby dzieci mogły łatwo nawigować. Nawigacja tekstowa na stronach internetowych dla dzieci nie byłaby tak skuteczna jak duże przyciski i grafika, ponieważ nie skupiałyby się na stronie.

Świnka Peppa ma poziomy pasek nawigacyjny, który zawiera duże ikony i łatwe do odczytania opisy dla każdego elementu.

strona internetowa Kubusia Puchatka zawiera pasek nawigacji w motywie „Las”, wykorzystując duże drewniane elementy graficzne, które nie zostaną pominięte przez użytkownika.

Ulica Sezamkowa ma łatwy do zlokalizowania poziomy pasek nawigacyjny wraz z dużymi obszarami wezwania do działania.

My Little Pony korzysta z nawigacji tekstowej, tworząc mniej graficzne doświadczenie, które pozwala skupić się na elementach treści. Może to być idealne w niektórych sytuacjach, ale na stronie internetowej dla dzieci pasek nawigacyjny oparty na grafice jest bardziej skuteczny.

interakcja użytkownika

prawdopodobnie jednym z najważniejszych sposobów na sukces witryny dla dzieci jest włączenie elementów, które umożliwiają dziecku interakcję z witryną w jakiś sposób. Dzieci nie chcą intensywnego czytania lub badań; chcą się bawić i bawić.

na typowej stronie internetowej niektóre elementy projektu są postrzegane jako rozpraszające, bezużyteczne i uciążliwe. Na stronie internetowej dziecka te same elementy są postrzegane jako skuteczny sposób przyciągania użytkowników.

interakcja poprzez animację i dźwięk

efekty i doświadczenia stworzone za pomocą Adobe Flash są odradzane w typowym nowoczesnym projektowaniu stron internetowych, ale na stronach dla dzieci nie ma prawie innej opcji. To prawda, że animacja JavaScript i efekty przeszły długą drogę ze względu na wiele dostępnych bibliotek JavaScript, ale łatwość tworzenia złożonych animacji za pomocą Flasha sprawia, że ta metoda jest pierwszym wyborem dla wielu komercyjnych stron internetowych zaprojektowanych dla dzieci.

strona Pauly ’ s Playhouse, podobnie jak większość stron opisanych w tym artykule, jest zbudowana w całości we Flashu.

strona Hot Wheels zawiera animowany „samochód dnia”, który przybliża ekran podczas ładowania strony, tworząc wizualną interakcję.

Roary samochód wyścigowy ma krótkie „flash intro” z przyciskiem „pomiń”. Jest to oldschoolowy trend w typowym projektowaniu stron internetowych, ale jest skutecznym środkiem obsługi odbiorców opartych na dzieciach. Intro animuje drogę, aż bohaterowie pojawią się na horyzoncie. Pomaga to użytkownikowi poczuć się tak, jakby osobiście wkraczał w animowany świat Roary ’ ego.

Pasek nawigacyjny dla dzieci jest tworzony za pomocą lampy błyskowej i tworzy efekty dźwiękowe i animuje, gdy jego elementy są zawieszone. Ten trend jest bardzo powszechny w wielu witrynach opisanych w tym artykule.

interakcja poprzez Wideo

telewizja jest znana z urzekania widowni dziecięcych na wiele godzin, dlatego „Saturday morning cartoons” od dziesięcioleci są lukratywną częścią harmonogramów transmisji dla wielu sieci telewizyjnych. Podobnie wideo na stronie internetowej dziecka dodaje zabawny, interaktywny i edukacyjny aspekt do treści witryny.

Kids’ CBC – Video

Yahoo! Poradniki Filmowe Dla Dzieci

National Geographic Kids – Filmy

interakcja poprzez gry

jakie dziecko nie lubi grać w gry? Jednym z najskuteczniejszych sposobów zabawiania, edukowania lub w inny sposób zajmowania dziecka na stronie internetowej jest umieszczenie sekcji „Gry”. Prawie wszystkie strony internetowe badane w tym artykule zawierają gry, które kształcą, stymulują i umożliwiają bezpośrednią interakcję, a także zawierają wiele już omówionych elementów projektu. Poniżej kilka przykładów.

CBeebies – Gordon The Garden Gnome

Toy Story – wielka ucieczka Woody 'ego

świat samochodów Disney Pixar pozwala użytkowników, aby tworzyć, udostępniać i ścigać się własnymi niestandardowymi samochodami.

elementy do wydruku

dzieci lubią mieć coś namacalnego do zabrania ze sobą, aby pomóc im zapamiętać swoje wrażenia. Drukowane zdjęcia i kolorowanki pozwalają dzieciom na pamiątkę swoich doświadczeń, dając jednocześnie właścicielom witryn możliwość wzmocnienia i promowania swojej marki poza ekranem komputera. Poniżej znajdują się przykłady kolorowanek do wydruku na stronach internetowych dla dzieci.

kolorowanki Pingu

kolorowanki Crayola Digi-Color

kolorowanki Świnka Peppa

Tomek i przyjaciele kolorowanki online

Teletubisie – Drukuj w Kolorze

niekonwencjonalne metody

omówiliśmy już wiele elementów, które w nowoczesnym typowym projektowaniu stron internetowych są obecnie uważane za niekonwencjonalne. Dźwięk, animacja i duża natrętna grafika są często źle postrzegane w typowym projektowaniu stron internetowych. Na stronach internetowych dla dzieci elementy te pomagają użytkownikowi. Inne niekonwencjonalne elementy i wybory projektowe są omówione poniżej.

Zmiana kursora

jest to absolutnie postrzegane jako zła praktyka w standardowym projektowaniu stron internetowych, ale może być zabawnym, skutecznym sposobem na dodanie zabawnego elementu do motywu strony internetowej dla dzieci. Można to zrobić za pomocą dynamicznego HTML, ale częściej odbywa się to za pomocą Flasha.

kursor na stronie Discovery Kids zamienia się w grafikę pułapki na niedźwiedzia.

kursor na stronie internetowej Ulicy Sezamkowej jest śledzony przez żółtą gwiazdę, gdy unosi się nad standardowymi elementami HTML, i zamienia się w żółtą gwiazdę otoczoną mniejszymi animowanymi gwiazdami, gdy kursor zostanie przesunięty nad klikalnymi elementami Flash.

Gadająca Nawigacja

czasami pasek nawigacji daje efekty dźwiękowe, ale w innych przypadkach linki nawigacyjne będą brzmiały wesoły głos.

pasek nawigacyjny PBS KIDS mówi za pomocą głosów dziecięcych, gdy użytkownik najeżdża nad nim.

pasek nawigacyjny CBeebies wykorzystuje głos, aby odczytać cel każdego elementu nawigacji.

pasek nawigacyjny Boba Budowniczego mówi do Użytkownika za pomocą mouseover.

Fifi i Flowertots posiadają mówiący pasek nawigacyjny.

Breaking The Grid

podczas gdy tradycyjne nowoczesne techniki projektowania stron internetowych uwzględniają zalety i estetykę projektowania opartego na siatce, strony internetowe dla dzieci mogą uwolnić się od zbyt uporządkowanego układu, aby stworzyć wyjątkowy świat, który dziecko będzie cieszyć.

nie oznacza to, że używanie siatki jako podstawy projektu jest błędne. Korzystne może być rozpoczęcie od siatki, a następnie zaprojektowanie elementów poza siatką w kontrolowany sposób. Ta elastyczność w projektowaniu i układach jest pokazana na wielu już omówionych stronach, ale jest również widoczna na paskach nawigacyjnych poniższych przykładów.

pasek nawigacji na stronie Spongebob Squarepants jest pochylony, wbrew konwencji typowego projektowania stron opartych na siatce.

strona Hannah Montana zawiera grafikę paska nawigacji, która łamie siatkę.

strona internetowa In The Night Garden ma bardzo nietypowy design paska nawigacyjnego, który nie przypomina tego, co można znaleźć w konwencjonalnym projekcie.

Poniżej znajdują się przykłady stron internetowych, które wykorzystują bardziej sztywny format oparty na siatce, w wyniku czego nie są tak wyjątkowe, zapadające w pamięć ani urzekające, jak niektóre z tych już rozważanych w tym artykule.

Kids WB jest sztywny i nie tak niezapomniany.

strona Crayola jest nieco oldschoolowa z formatem siatki i pionową nawigacją.

Neopets jest również zaprojektowany na bardziej uporządkowanej siatce.

przyznane, w niektórych przypadkach silniejszy projekt oparty na siatce byłby konieczny, jeśli publiczność byłaby starszą publicznością dziecięcą, jak to ma miejsce w przypadku dzieci SI, pokazanych poniżej.

branie odpowiedzialności

jeśli próbujesz dotrzeć do umysłów i serc młodych, wrażliwych ludzi za pośrednictwem doświadczenia online, powierzono ci poważną odpowiedzialność. Dzieci są wrażliwe psychicznie i łatwo wpływają na to, co widzą, słyszą i dotykają. Istnieją pewne czynniki, które należy uwzględnić na każdej stronie internetowej dla dzieci, aby zapewnić, że dzieci nie wyrządzą krzywdy.

promowanie edukacji

Gry i inne elementy interaktywne powinny być tworzone nie tylko po to, aby promować markę i tożsamość Twojej firmy, ale aby pomóc edukować i szkolić młode umysły w korzystny i pozytywny sposób. Promowanie edukacji poprzez gry i działania pokaże, że Twoja firma dba o użytkownika i jak jego doświadczenie online może wpłynąć na niego w przyszłości.

Gry edukacyjne online od Fisher Price zawierają gry, które różnią się w zależności od grupy wiekowej.

Funbrain Promuje się jako „internetowa strona edukacyjna nr 1 Dla Dzieci i nauczycieli K-8.”

informacje dla rodziców

rodzice będą uważnie obserwować zwyczaje internetowe swoich dzieci. Wiele witryn dla dzieci jest tego świadomych, więc zawierają informacje skierowane do rodziców. Czasami jest to wskazówka, jak ma to miejsce w przypadku strony internetowej Gry z Ulicy Sezamkowej, lub po prostu element nawigacyjny, który wskazuje na sekcję rodzica.

gry z Ulicy Sezamkowej zawierają pudełko „Wskazówka dla rodziców”.

BEN 10 mA link „rzeczy rodziców” w głównym pasku nawigacyjnym.

Thomas Silnik zbiornika zawiera link” rodzice”.

testowanie użyteczności

wreszcie, jednym z najlepszych sposobów na zbudowanie udanego doświadczenia online dla dzieci jest obserwowanie, jak dzieci poruszają się i wchodzą w interakcje z grami i innymi unikalnymi funkcjami witryny. Nie wszystkie firmy będą miały budżet na szeroko zakrojone testy, ale prawie wszystkie będą miały możliwość wykonania przynajmniej minimalnej ilości testów — nawet jeśli dotyczy to tylko jednego dziecka. Pozwoli to zobaczyć witrynę oczami dziecka i wprowadzić wszelkie niezbędne modyfikacje, tak samo jak w przypadku wszelkich testów użyteczności.

firmy takie jak Disney, Ulica Sezamkowa i PBS, oczywiście, badają zachowanie dzieci od lat, więc wiele z powyższych przykładów można wykorzystać, aby stworzyć podstawę udanej strony internetowej dla dzieci, nawet jeśli nie przeprowadzono testów użyteczności.

podsumowanie

oto podsumowanie zarówno konwencjonalnych, jak i niekonwencjonalnych najlepszych praktyk projektowania strony internetowej dla dzieci:

najlepsze praktyki konwencjonalne

• twórz duże i niezapomniane wizualnie elementy
• używaj jasnych, żywych kolorów, które pobudzają zmysły
• Włącz elementy z natury
• twórz głębię w projekcie
• dodaj duże i łatwe do znalezienia elementy nawigacyjne
• użyj wideo
• Dołącz elementy do druku
• przerwij siatkę
• dokonuj modyfikacji na podstawie testów użyteczności

niekonwencjonalne najlepsze praktyki

• stwórz radosny, zabawny nastrój
• użyj animacji postacie
• użyj graficznych pasków nawigacyjnych
• użyj animacji Flash
• osadzaj ruchy i dźwięki, które wyzwalają się na stronie załaduj
• Dołącz sekcję „gry”
• Zmień kursor, aby przyczynić się do tematu
• Dodaj głosy do najazdu nawigacji
• być odpowiedzialnym zarówno przed dziećmi, jak i rodzicami

projektant stron internetowych, który pracował nad stroną internetową dla dzieci, prawdopodobnie powiedziałby, że był to jeden z najbardziej zabawnych i interesujących projektów, nad którymi mieli zaszczyt pracować. Jeśli kiedykolwiek będziesz miał okazję stworzyć doświadczenie użytkownika, które jest skierowane do dzieci, pamiętaj, aby postępować zgodnie z niektórymi sprawdzonymi metodami demonstrowanymi na wielu omawianych tutaj stronach, a Twoja strona będzie miała szansę stać się wielkim hitem wśród dzieci.