Digital Usability for kids from 'Generation Z' ('Generation SpongeBob')

Dreammachine Kids
About Usability

Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14

Dreammachine presentation, p. 1

Table of contents
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

About Dreammachine Kids
Introduction
About the development of kids
General tips
Specific guidelines for preschoolers (<8)
Specific web tips classified by age group
Specific mobile usability tips (touch, small screen,...)
Specific usability tips concerning games
Specific usability tips concerning digital educational tools
Doing research with kids
Other digital media and the future (the internet of things, etc.)
Cases
Conclusion and wrap up
Dreammachine Kids services
Next sessions + invite to subscribe



Some of the brands we have
worked for…



Services
Dreammachine creates your Digital Marketing campaigns to
B2C and B2B clients.
From strategic planning to execution and reporting.
Services include a.o. the following:
✚ Websites, contest sites, minisites including custom or Drupal CMS

✚ Banner campaigns
✚ Social Media
✚ E-coupon or e-voucher actions
✚ QR-codes with landing pages
✚ E-mail marketing

Besides our normal activities
as described at the left, in Jan
2014 we will open a
specialized department in
Digital Marketing to
preschoolers and kids.

✚ E-commerce (custom programming or Prestashop)
✚ Mobile sites, mobile apps
✚ Games
✚ Printing on demand solutions
✚ Digital Signage and Contact Center solutions through our partner N-Allo Group



The core „Dreamteam‟
Gerda Van Damme
Manager
Strategic Planner – Creative director

Guido Janssens
Manager
Technical Director

Fabrice Duchenois
Developer

Creating websites since
1995. Previous Product
Manager & Consumer
Marketing Manager at
Microsoft (MSN).

Programming websites
since 1995. Previous
coordinator international
multimedia (CD-i)
productions at Philips.

thewebfactory

thewebfactory

6 years at Paris leading
web agency Full Six
(former Grey
Interactive), 4 years
webmaster of HSBC
bank in Paris.



New business unit:
Dreammachine Kids
• Will be operational as from Jan 2014.
• Digital marketing services for
– products bought by/for kids
– products of which purchase decision is
influenced by kids
– lifetime brand building for kids

• A specific knowledge center is being
built, with a focus on:
–
–
–
–

Tailered content interesting kids
Usability concerns while developing for kids
Legal and ethical concerns
Digital media/channels to reach kids & their
mamas

• Age range: focus on 3 to 12, by
extension also 13-18.


Introduction

• Get the target age group involved: child
centric design.
• Success or failure to reach the goal
(often entertainment) has a huge impact
on the overall user experience.
• Quantitative usability metrics:
– Effectiveness
– Efficiency
– Satisfaction



Child-Centered Design (S. Idler).
• Accept the value of Child-Centered Design
• Get familiar with your target age group
• Get familiar with age appropriate research
methods



“Is the computer happy when I click here?”

ABOUT THE
DEVELOPMENT OF KIDS


The stages in development (Piaget)
•
•
•
•

Sensorimotor stage, 0-2 years
Preoperational stage, 2-6 years
Concrete operational stage, 7-12 years
Formal operational stage, 12 years and older



Sensorimotor stage, 0-2 years
• Development of
– body level functions , touch, feel, taste
– memory

• Starting from 8 to 12 months children realize that
objects that they don‟t see keep on existing.
Physical development:
• Important evolution of the motirics – the fine
motorics only follow afterwards



Preoperational stage, 2-6 years
•
•
•
•
•
•

•
•
•
•
•
•

Language – but they understand everything literally
Fine motorics
Self-consciousness and egocentrism.
Animism.
Memory develops.
Senses are well developed, but for the child it is difficult to
order and organize his impressions. He also has difficulties
for searching things.
Their reaction time is still 3x longer than the one of an adult
Their concentration is mostly limited to 8 to 15 minutes
Only one characteristic of an object at a time.
No understanding of hierarchies.
Learn by imitating and playing.
Concentrate on one single aspect of a task.



Concrete operational stage, 7-12
years
•
•
•
•
•
•
•
•
•
•

Development of:
Ability to compare lengths and quantities
Ability to concentrate on more than 1 aspect at the time
Ability to order, count and calculate
Figurative thinking
At 12 years, reaction time starts being comparable to the speed of an
adult.
Start to appreciate someone else‟s perspective.
They are able to understand hierarchies and reverse actions.
Their concentration becomes selective, adapted and planned. They
start to be able to solve problems.
They keep on learning by playing and imitating, but also planned
studying starts (school!)

• Important evolution of the fine motorics, mainly the hand.



Formal operational stage, 12 years
and older
Development of:
• Abstract & deductive reasoning. They are able
to consider many aspects together.
• Spatial thinking
• Logical analyzing options & drawing conclusions
• Visual acuity (the ability to distinguish details in
objects) is full grown now
• Only now children start being able to do mouse
movements which demand a precise
coordination between the eyes and the hand


Gelderblom... Designing for
developmental appropriateness



Method: how does a child learn?
Constructivism
• Piaget thought that learning occurs through a
process of adaptation, where children adapt to
the environment.
– Assimilation
– Accommodation
– Equilibration

• Motivation and emotions
The more a website or game resembles to the
other websites or games a child has already seen,
the more it will be easy for him (her) to understand
the interface and to use it.


An overview

USABILITY GUIDELINES


Overview of important usability
guidelines
•
•
•
•
•
•

Hourcade: general principles
How usability is similar for kids and adults (< Nielsen)
Specific guidelines for preschoolers: Gelderblom
Guidelines organized by agegroup (0 – 12): Liebal & Exner
Children on the web (3-12): Nielsen
Specific guidelines:
– Mobile
– Games
– Educational software



Hourcade & other: general
principles
• Visual Design: About icons
• Interaction Styles
–
–
–
–

Direct Manipulation
Menus
Text-Based Interactions
Using Pointing Devices
•
•
•
•

Age-Appropriate Devices
Pointing
Dragging
Use of Mouse Buttons

• Use of sound



Icons
•
•
•
•
•
•

easily distinguishable from each other
can be recognized as interactive
separate from the background
Avoid visual complexity
Sized to be easy clickable
they represent actions or objects in a
recognizable manner (metaphors)



Direct manipulation
• Children need quick feedback
• Reversibility of actions
• Make actions incremental.



Menus
• Children experience menus (i.e., sets of
choices) in software all the time. These choices
should be visible (no pull down menus.
Otherwise:
– forgetting,
– problems to understand hierarchy (esp. <7)

• Text-Based Interactions can also be problematic
:
– Typing skills
– Spelling

• Using Pointing Devices



Pointing devices
• Age appropriate pointing devices
• Problems with pointing

adults

adult
5 years

5 years

4,5 years
4 years
• Avoid drag & drop < 8


The mouse buttons



How usability is similar for kids and
adults (< Nielsen)
•
•
•
•
•

Initial Reaction
Good Design
Standardization
Control
Technical Interferences



Specific guidelines for
preschoolers: Gelderblom



Guidelines organized by agegroup
(0 – 12) : Liebal & Exner

<2


2-6 7-11 12-15


Children on the web: Nielsen
• The research: how it was done
• Changes over time
• The themes:
–
–
–
–
–
–
–
–

Getting To Your Website
General Interaction
Interaction: Pointing Devices and Keyboard
Forms, Passwords, and Memberships
Navigation
Search
Homepages
Text


–
–
–
–
–
–
–
–

Images
Waiting Time
Animation and Video
Audio
Advertisements
System Errors and Help
Content
Characters


Nielsen: example of one chapter
Interaction: Pointing Devices and Keyboard
• Create big clicking targets.
• For kids younger than 9, limit more complicated mouse
gestures such as dragging, double click, and right click.
• Avoid repeated clicking on an object to loop through
different states.
• Explain keyboard interaction for games. Do not require
kids to use the keyboard to start a game.
• Avoid defining new conventions for keys.
• For children younger than 6, avoid requiring multiple
key usage.
• Do not move clickable targets when the cursor is on
top of them.


Specific guidelines: Mobile
• Tablets (& hybrids?)
• Mobile phones
• Tablets for children
• Apps versus mobile websites.
very little usability research



Some differences between mouse &
fingers as input device

Extra differences:
• the lack of a ‘normal’ keyboard
• screen size
• pre-defined buttons on & around the screen


Some tips
Copy & content
Design
• Size problems
– Design responsive
– No horizontal scroll
– Don‟t hide buttons

• Other problems
– Design should has to be recognized as the same site/game/app.
– App elements need to give an indication of which of them is actually
interactive.
– Going back and forth with pages (e.g. in storybook): be consistent and
use arrows, mind the placement (first priority: spaced from each other,
second priority: use the bottom).

App versus Website
• Mainly for preschoolers, apps offer a safe and closed environment, in
which it is more difficult to „escape‟ to other websites. Of course it‟s much
more difficult to get an app published than a website…



Specific guidelines: Games
Problems should be in the game play, not in the
interface, or game mechanics.

Examples of some concrete difficulties:
•
•
•
•

Getting in and out of the game
Perspective and Indirect Manipulation
Cursor Shapes and Hotspots
Modalities for input



Indirect manipulation



Cursor shape



The mechanics of playing a game



Example of the mechanics



Problems during gameplay
•
•
•
•
•
•
•

Knowledge problems
Thought problems
Memory problems
Judgement problems
Habit problems
Omission problems
Recognition problems

•
•
•
•

Sensorimotor problems
Knowledge inefficiency
Habbit inefficiency
Fun problems:
– Challenge problems
– Fantasy problems
– Curiosity problems

• Control problems

 Prioritize what to fix
– Judge impact severity
– Judge frequency severity
– Take into account the learning curve!


The path through a game at return
visits
• At a first visit, the child develops a mental map
of a game, including decisions about which parts
of the game are crucial to play or highly
interesting.
• Game sections that are not considered
„important‟ will normally never be visited again at
return visits. This is of course an important
criterium for budget decisions.



Specific guidelines: Educational
software
Educational software comes in many
shapes and for many devices:
–
–
–
–
–

PC, laptop
tables
Surface
LCD
Digiboard, whiteboard (with s.t. adapted
software)

–
–
–
–

Demonstrating (e.g. LCD)
E-learning, learning games,...
Books
Creative applications (e.g. painting apps,
cartoon construction tools,...)



Design guidelines for usage of
whiteboards
•
•
•
•
•
•
•
•

Colour contrast
Text should be large enough, fonts should be easy to read.
Ensure that text is left aligned
Design for interaction
Facilitate thinking
Design activities for creative group involvement
Avoid scrolling
Provide plenty of „white space‟, and avoid over-crowding the
page with information.
• Ensure that any interactive elements are within the typical
users‟ reach envelope.
• Screen size: full screen where possible
• Use multimedia!


An overview

RESEARCH WITH KIDS


Doing research with kids: the goals

user
tester
informant to design
design partner



Usability testing
•
•
•
•
•

The group
When ?
Where?
Setting the scene
2 types of testing:
– Quantitative
– Formative testing



Some techniques
•
•
•
•
•
•
•
•
•
•

Use a taxonomy of potential problems.
Examine video tapes.
Make children think aloud.
Test unaided or aided interaction
Benchmarking task-based analysis
keep a diary
card sorting
use friendship trios and get natural feedback
screen grabbing software
Evaluate user journeys and content



Children as informants and
co-creators
•
•
•
•
•

Survey style interviews
Focus groups
Contextual inquiry
Kidreporter
Mixing ideas



Expanding the topic: a shift in
mindset

• Digital kids‟ media in the museum...



The internet of things



Some examples: Woeffies (preschoolers), Benetton (kids +
preschoolers)

CASES


Analysis of an example...

Benetton Kids Community
In 2012 Benetton has launched an online hub „Benetton Kids Community‟,
dedicated to and aimed at digital-savvy kids and their parents.


Confusion...

What we see is that
the boy needs about 3
minutes to find the
first game. So what
went wrong?



4 usability axioms

1 Kids are NOT tech savvy



Show users where you are in the
website structure

Website header is different
at each visit of the homepage:
leads to confusion.



Have clear real-life illustrations
with call-to-actions.
For call to actions, children
need clear real-life
illustrations.
At the left button, you see
a link to recipes, but they
are illustrated with
flowers, birds and snails
instead of cooking devices.
Superman doesn’t lead to
a game, but to color plates.
It should at least show a
pencil on top.



Text should be > 14 (12) pt and
well contrasted
• All text is very small
• Some text is written white on yellow
• Navigation texts are as small



4 usability axioms

2 instant gratification



Children will always chose „PLAY‟
Kids will never
click on ‘how to
play’, but
immediately on
‘play’. The
instructions
should be
behind the play
button during
the game.



„Fatal error‟

Here we see the path you have to go through to get to the nearest game in the
site. After a whole quest to gets to the games section, the child gets on a page
saying ‘no plugin installed’. There is no gratification at all, this gives a very negative
brand image towards the child. Note: on this computer the latest version of Flash
and Java where both installed. No plugin download was proposed either.


4 usability axioms

3 show tailored content



Separate content for different target users.
Make it clear where to go.

Intended for kids 

for preschoolers 

 for parents (sign up)

 for parents (pdf)


“Not for me”

You should avoid the ‘not for me’experience.
The videos are for preschoolers, while the
games are rather for elder kids. When a
child clicks on ‘how it works’, he gets an
adult-layouted page with an ‘adult’ text.



“For me?” Avoid pdf.
Avoid pdf where possible.
It’s a technical environment
the children do not know.



4 usability axioms

4 if not... you will be punished



Result: mainly appealing to mothers

For example, in the
Benneton
community we see
at the picture
gallery that the real
audience are
mothers of
preschoolers and
that the rest of the
audience almost
doesn’t participate
in the website.



So think before you start!

1

Kids are NOT technically savvy

2

Kids want instant gratification

3

Kids want to see tailored content

4

You will be punished for bad usability



Woeffies
• A very limited budget production (<10K),
certainly no budget for user testing.
• For the smallest users (defined as „from foot
measure 21 till 32‟).
• Need to have all the games in html 5 for tablet
users.
• Part of the Woeffies website.
• (Note: made by Dreammachine)



Embedded in adults‟
website as a „kids‟ corner‟.



Loading showing progress in order
to give the child a feeling of control.
Warning to put the sound. As we
come straight from the adults
website here, we also add it in text
format for the parents.
Icon: we might have tested if the
child understands this icon. On
many computer keyboards the
sound button looks like this. An
image of an ear might have been a
test variant, but then the child
would not know which button to
press.



Audio welcoming instruction with
animation.
Repeat animated message after a
while, making clear where the „help‟
sits in case the child wants to return
to it.
No further animation in order not to
distract from this message (except
for turning sun).
The cursor is replace with a bigger
version of „the real thing‟. The
clickable areas are very big.
Because of the short attention
span, games have been very short.


Loading animation suggesting that
the dog is hiding. Children seem to
like this, but they try to follow where
the dog is running, and are
convinced that when they guess
where he is, they „had seen the dog
went there‟ (which is not true, the
animation is fixed, the game is
random). This kind of „usability
problems‟ are not severe, as they
don‟t compromise the satisfaction.
Length of animation should be
tested with users, as with the few
users we tested there was no clear
view on the ideal length.



Preschoolers are not yet able to
search by viewing a scenery with
selectivity for one object. They like
the game, click around on the
image, but having some objects
animated is crucial for this reason.
Also, kids love sound.
To avoid scrolling, the site is
conceived to adapt to the screen
size when you resize the window.



Other example of animation to keep
the attention going: the see-saw.



Instant gratification. When the dog
is found, a hand shows „well done‟,
while in the soundtrack we hear an
applause. The child can feel in
control.
In user testing it might have been a
good idea to test whether this hand
is understood by the children, or
whether it should have been
applauding hands.



Other example of animation with
sound: the bird coming out of the
clock when clicking it.



Another game the kids know from their
paper games (apply standardization).
Also the button back to the homepage is
an icon based upon standardization on
the one hand (house shape = homepage,
or as kids say „the menu‟), and the button
also fysically represents the visual as on
the homepage.
Button linking back to adults website. In a
v2 we would put an intermediary screen
here with a link back to the homepage of
the kids site.
After investigation drag-and-drop was
avoided because of the usability
problems it would cause for preschoolers.



Another familiar game, playable
from about 5 years on.
Arrows indicate in which line the
child should click next. This does
not seem to be clear for all adults,
so probably it would certainly for
the kids be better to reprogram for a
v2 (so that you can click in any line
you want). Base rule of kids
usability: what doesn‟t work for
adults will certainly not work for
kids.



In almost all of the kids‟ website text
has been avoided or moved to the
borders of the website.
Only here we put text in the image
(which is repeated by the voice
over), as parents‟ help will be called
here anyway!
Better would be of course to have
an online colouring tool, if budget
would have allowed it.



• If the budget doesn‟t allow user testing,
desk researching the most important
usability guidelines certainly helps to make
a better product.
• The main issue to be resolved (may have
impact on success) is the button „Mama klik
hier‟: for the client it‟s important to have it
prominent, for the kids it should be made
clearer that they leave the kids‟ website.

• In the mobile app version this has already
been corrected by an intermediary screen.



Conclusion: our top 10
• Consistency, standardization
• Size and visibility of clickable areas, cursor
• Overall readability (font size, contrast, page
structured layout)
• Don‟t hide navigation, don‟t rely on memory
• Offer tailored content
• Mobile: don‟t hide chrome
• Instant gratification
• Your game is too difficult
• Keep the user in control
• Stick to real life imagery that kids know


Some services that may interest you!

DREAMMACHINE KIDS


Audience analysis
•

Creation of a small list of personas, with for each persona;
– Description of a fictive person representing the target audience
– Description of the stage of development (motoric, cognitive, social skills, etc.) with
concrete examples for how this may translate into this specific fictive person
– Usability guidelines based upon
•
•
•

the type and goal of the project (e.g. game app)
the development stage of the persona
gender

– Description of the centers of interest of this person
– If relevant: description of the school curriculum of the persona (e.g. a short resume
of the themes of the current school year, the difficulty of writing / reading exercices,
status of math knowledge, ...).
– Internet, computer and mobile experience of this persona.

• This set of personas will be extremely beneficial for the preparations
and success of a project targeting kids.
• Ideally a persona should be foreseen by age (one per year, spanning
the total target audience) and gender.



Other strategic services
•
•
•
•

Setup of agency briefs
Analysis of existing projects
Usability checkup
Coming soon: usability testing with kids (Spring 2014)



Production of projects targeting
kids
• Including all stages from planning phase to
execution (or any of the steps separately, e.g.
composing an agency brief): online
communities, kids‟ corners, online / mobile
games, contests, educational applications,
digital advertising campaigns...)
• Top topical actions targeting kids & mums
(back2school, Halloween,...)
• Digital mama-marketing
• In company trainings about Digital Marketing to
Kids



OTHER CONFERENCES
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars
by sending an e-mail to gerda@dreammachine.be.
Free 2 hour conferences will be given from December to April in Brussels or Jumet
(Charleroi Nord) about the following subjects :

1

Usability for kids: what every advertiser should be aware of.

Charleroi

Dec 19th 2014

2

Legal issues of digital marketing towards children: what you might do as a parent
but cannot do as an advertiser.

Brussels

Feb 6th 2014

3

Generation SpongeBob: let your digital marketing strategy tap into this
generation’s characteristics and digital media consumption.

Charleroi

Feb 27th 2014

4

Digital trends for advertisers to kids: 2014 trends and cases.

Charleroi

April 3rd 2014



Sources
Nielsen research:
• http://www.nngroup.com/articles/childrens-websites-usability-issues/ http://www.nngroup.com/reports/children-on-the-web/ http://www.amazon.fr/Mobile-UsabilityJakob-Nielsen/dp/0321884485/ref=sr_1_1ie=UTF8&qid=1387560833
Gelderblom research:
• http://dl.acm.org/citation.cfmid=1551798
• http://umkn-dsp01.unisa.ac.za/bitstream/handle/10500/2198/thesis.pdf
Liebal & Exner:http://www.amazon.fr/Usability-für-Kids-Ergonomischen-Medienproduktion/dp/3834816248/ref=sr_1_1?ie=UTF8&qid=1387560627&sr=81&keywords=Liebal+exner
• Interaction Design and Children / Juan Pablo Hourcade: http://books.google.be/books?id=ooSXP96R3ZcC
• ICT in de onderbouw – Eduniek in onderwijs
• design synthesis . spring 2006 . kids & media . bernard, king, mcgaw, paradis, tallackse
• Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dix
• Being Playful – learning from children - Alan Dix
• Designing User Experiences for Children - By Heather Nam
• Children‟s interaction and collaboration while using a multi-user interactive play system - Anna Persson
• Human factors in educational software for young children / Afke Donker.
• Towards a Framework for Design Guidelines for Young Children‟s Computer Games / Wolmet Barendregt and Mathilde M. Bekker
• Usability, Playability, and Long-Term Engagement in Computer Games / Alessandro Febretti en Franca Garzotto
• Towards the Wild: Evaluating museum installations in semi-realistic situations / Eva Hornecker and Emma Nicol
• How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood / Sabina Idler
• Identifying usability and fun problems in a computer game during first use and after some practice / W. Barendregt, M.M. Bekker, D.G. Bouwhuis, E. Baauw
•

DDesigning for Children – With focus on Play + Learn – Design for the Youngest / Alma Leora Culén



Digital Usability for kids from 'Generation Z' ('Generation SpongeBob')

Recomendados

Recomendados

Más contenido relacionado

Similar a Digital Usability for kids from 'Generation Z' ('Generation SpongeBob')

Similar a Digital Usability for kids from 'Generation Z' ('Generation SpongeBob') (20)

Más de Dreammachine

Más de Dreammachine (8)

Último

Último (20)

Digital Usability for kids from 'Generation Z' ('Generation SpongeBob')

Notas del editor