Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 1
Dreammachine Kids About Usability
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 2
Table of contents
bull About Dreammachine Kidsbull Introductionbull About the development of kidsbull General tipsbull Specific guidelines for preschoolers (lt8)bull Specific web tips classified by age groupbull Specific mobile usability tips (touch small screen) bull Specific usability tips concerning games bull Specific usability tips concerning digital educational toolsbull Doing research with kidsbull Other digital media and the future (the internet of things etc)bull Casesbull Conclusion and wrap upbull Dreammachine Kids servicesbull Next sessions + invite to subscribe
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 3
Some of the brands we have worked forhellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 4
Services include ao 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
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
Services
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
Dreammachine creates your Digital Marketing campaigns to B2C and B2B clients From strategic planning to execution and reporting
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 5
The core lsquoDreamteamrsquo
Gerda Van DammeManager
Strategic Planner ndash Creative director
Guido JanssensManager
Technical Director
Fabrice DuchenoisDeveloper
thewebfactory
Creating websites since 1995 Previous Product Manager amp Consumer Marketing Manager at Microsoft (MSN)
thewebfactoryProgramming websites since 1995 Previous coordinator international multimedia (CD-i) productions at Philips
6 years at Paris leading web agency Full Six (former Grey Interactive) 4 years webmaster of HSBC bank in Paris
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 6
New business unit Dreammachine Kidsbull Will be operational as from Jan 2014bull Digital marketing services for
ndash products bought byfor kidsndash products of which purchase decision is
influenced by kidsndash lifetime brand building for kids
bull A specific knowledge center is being built with a focus on
ndash Tailered content interesting kidsndash Usability concerns while developing for kidsndash Legal and ethical concernsndash Digital mediachannels to reach kids amp their
mamas
bull Age range focus on 3 to 12 by extension also 13-18
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 7
Introduction
bull Get the target age group involved child centric design
bull Success or failure to reach the goal (often entertainment) has a huge impact on the overall user experience
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 8
Child-Centered Design (S Idler)
bull Accept the value of Child-Centered Designbull Get familiar with your target age groupbull Get familiar with age appropriate research
methods
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 2
Table of contents
bull About Dreammachine Kidsbull Introductionbull About the development of kidsbull General tipsbull Specific guidelines for preschoolers (lt8)bull Specific web tips classified by age groupbull Specific mobile usability tips (touch small screen) bull Specific usability tips concerning games bull Specific usability tips concerning digital educational toolsbull Doing research with kidsbull Other digital media and the future (the internet of things etc)bull Casesbull Conclusion and wrap upbull Dreammachine Kids servicesbull Next sessions + invite to subscribe
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 3
Some of the brands we have worked forhellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 4
Services include ao 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
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
Services
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
Dreammachine creates your Digital Marketing campaigns to B2C and B2B clients From strategic planning to execution and reporting
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 5
The core lsquoDreamteamrsquo
Gerda Van DammeManager
Strategic Planner ndash Creative director
Guido JanssensManager
Technical Director
Fabrice DuchenoisDeveloper
thewebfactory
Creating websites since 1995 Previous Product Manager amp Consumer Marketing Manager at Microsoft (MSN)
thewebfactoryProgramming websites since 1995 Previous coordinator international multimedia (CD-i) productions at Philips
6 years at Paris leading web agency Full Six (former Grey Interactive) 4 years webmaster of HSBC bank in Paris
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 6
New business unit Dreammachine Kidsbull Will be operational as from Jan 2014bull Digital marketing services for
ndash products bought byfor kidsndash products of which purchase decision is
influenced by kidsndash lifetime brand building for kids
bull A specific knowledge center is being built with a focus on
ndash Tailered content interesting kidsndash Usability concerns while developing for kidsndash Legal and ethical concernsndash Digital mediachannels to reach kids amp their
mamas
bull Age range focus on 3 to 12 by extension also 13-18
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 7
Introduction
bull Get the target age group involved child centric design
bull Success or failure to reach the goal (often entertainment) has a huge impact on the overall user experience
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 8
Child-Centered Design (S Idler)
bull Accept the value of Child-Centered Designbull Get familiar with your target age groupbull Get familiar with age appropriate research
methods
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 3
Some of the brands we have worked forhellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 4
Services include ao 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
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
Services
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
Dreammachine creates your Digital Marketing campaigns to B2C and B2B clients From strategic planning to execution and reporting
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 5
The core lsquoDreamteamrsquo
Gerda Van DammeManager
Strategic Planner ndash Creative director
Guido JanssensManager
Technical Director
Fabrice DuchenoisDeveloper
thewebfactory
Creating websites since 1995 Previous Product Manager amp Consumer Marketing Manager at Microsoft (MSN)
thewebfactoryProgramming websites since 1995 Previous coordinator international multimedia (CD-i) productions at Philips
6 years at Paris leading web agency Full Six (former Grey Interactive) 4 years webmaster of HSBC bank in Paris
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 6
New business unit Dreammachine Kidsbull Will be operational as from Jan 2014bull Digital marketing services for
ndash products bought byfor kidsndash products of which purchase decision is
influenced by kidsndash lifetime brand building for kids
bull A specific knowledge center is being built with a focus on
ndash Tailered content interesting kidsndash Usability concerns while developing for kidsndash Legal and ethical concernsndash Digital mediachannels to reach kids amp their
mamas
bull Age range focus on 3 to 12 by extension also 13-18
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 7
Introduction
bull Get the target age group involved child centric design
bull Success or failure to reach the goal (often entertainment) has a huge impact on the overall user experience
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 8
Child-Centered Design (S Idler)
bull Accept the value of Child-Centered Designbull Get familiar with your target age groupbull Get familiar with age appropriate research
methods
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 4
Services include ao 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
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
Services
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
Dreammachine creates your Digital Marketing campaigns to B2C and B2B clients From strategic planning to execution and reporting
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 5
The core lsquoDreamteamrsquo
Gerda Van DammeManager
Strategic Planner ndash Creative director
Guido JanssensManager
Technical Director
Fabrice DuchenoisDeveloper
thewebfactory
Creating websites since 1995 Previous Product Manager amp Consumer Marketing Manager at Microsoft (MSN)
thewebfactoryProgramming websites since 1995 Previous coordinator international multimedia (CD-i) productions at Philips
6 years at Paris leading web agency Full Six (former Grey Interactive) 4 years webmaster of HSBC bank in Paris
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 6
New business unit Dreammachine Kidsbull Will be operational as from Jan 2014bull Digital marketing services for
ndash products bought byfor kidsndash products of which purchase decision is
influenced by kidsndash lifetime brand building for kids
bull A specific knowledge center is being built with a focus on
ndash Tailered content interesting kidsndash Usability concerns while developing for kidsndash Legal and ethical concernsndash Digital mediachannels to reach kids amp their
mamas
bull Age range focus on 3 to 12 by extension also 13-18
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 7
Introduction
bull Get the target age group involved child centric design
bull Success or failure to reach the goal (often entertainment) has a huge impact on the overall user experience
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 8
Child-Centered Design (S Idler)
bull Accept the value of Child-Centered Designbull Get familiar with your target age groupbull Get familiar with age appropriate research
methods
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 5
The core lsquoDreamteamrsquo
Gerda Van DammeManager
Strategic Planner ndash Creative director
Guido JanssensManager
Technical Director
Fabrice DuchenoisDeveloper
thewebfactory
Creating websites since 1995 Previous Product Manager amp Consumer Marketing Manager at Microsoft (MSN)
thewebfactoryProgramming websites since 1995 Previous coordinator international multimedia (CD-i) productions at Philips
6 years at Paris leading web agency Full Six (former Grey Interactive) 4 years webmaster of HSBC bank in Paris
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 6
New business unit Dreammachine Kidsbull Will be operational as from Jan 2014bull Digital marketing services for
ndash products bought byfor kidsndash products of which purchase decision is
influenced by kidsndash lifetime brand building for kids
bull A specific knowledge center is being built with a focus on
ndash Tailered content interesting kidsndash Usability concerns while developing for kidsndash Legal and ethical concernsndash Digital mediachannels to reach kids amp their
mamas
bull Age range focus on 3 to 12 by extension also 13-18
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 7
Introduction
bull Get the target age group involved child centric design
bull Success or failure to reach the goal (often entertainment) has a huge impact on the overall user experience
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 8
Child-Centered Design (S Idler)
bull Accept the value of Child-Centered Designbull Get familiar with your target age groupbull Get familiar with age appropriate research
methods
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 6
New business unit Dreammachine Kidsbull Will be operational as from Jan 2014bull Digital marketing services for
ndash products bought byfor kidsndash products of which purchase decision is
influenced by kidsndash lifetime brand building for kids
bull A specific knowledge center is being built with a focus on
ndash Tailered content interesting kidsndash Usability concerns while developing for kidsndash Legal and ethical concernsndash Digital mediachannels to reach kids amp their
mamas
bull Age range focus on 3 to 12 by extension also 13-18
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 7
Introduction
bull Get the target age group involved child centric design
bull Success or failure to reach the goal (often entertainment) has a huge impact on the overall user experience
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 8
Child-Centered Design (S Idler)
bull Accept the value of Child-Centered Designbull Get familiar with your target age groupbull Get familiar with age appropriate research
methods
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 7
Introduction
bull Get the target age group involved child centric design
bull Success or failure to reach the goal (often entertainment) has a huge impact on the overall user experience
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 8
Child-Centered Design (S Idler)
bull Accept the value of Child-Centered Designbull Get familiar with your target age groupbull Get familiar with age appropriate research
methods
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 8
Child-Centered Design (S Idler)
bull Accept the value of Child-Centered Designbull Get familiar with your target age groupbull Get familiar with age appropriate research
methods
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 9
ABOUT THE DEVELOPMENT OF KIDS
ldquoIs the computer happy when I click hererdquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 10
The stages in development (Piaget)
bull Sensorimotor stage 0-2 years bull Preoperational stage 2-6 years bull Concrete operational stage 7-12 yearsbull Formal operational stage 12 years and older
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 11
Sensorimotor stage 0-2 years
bull Development ofndash body level functions touch feel tastendash memory
bull Starting from 8 to 12 months children realize that objects that they donrsquot see keep on existing
Physical developmentbull Important evolution of the motirics ndash the fine
motorics only follow afterwards
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 12
Preoperational stage 2-6 years
bull Language ndash but they understand everything literallybull Fine motorics bull Self-consciousness and egocentrismbull Animism bull Memory develops bull Senses are well developed but for the child it is difficult to
order and organize his impressions He also has difficulties for searching things
bull Their reaction time is still 3x longer than the one of an adult bull Their concentration is mostly limited to 8 to 15 minutes bull Only one characteristic of an object at a time bull No understanding of hierarchies bull Learn by imitating and playingbull Concentrate on one single aspect of a task
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 13
Concrete operational stage 7-12 years
bull Development ofbull Ability to compare lengths and quantitiesbull Ability to concentrate on more than 1 aspect at the timebull Ability to order count and calculatebull Figurative thinking bull At 12 years reaction time starts being comparable to the speed of an
adultbull Start to appreciate someone elsersquos perspectivebull They are able to understand hierarchies and reverse actions bull Their concentration becomes selective adapted and planned They
start to be able to solve problemsbull They keep on learning by playing and imitating but also planned
studying starts (school)
Physical developmentbull Important evolution of the fine motorics mainly the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 14
Formal operational stage 12 years and older Development ofbull Abstract amp deductive reasoning They are able
to consider many aspects togetherbull Spatial thinkingbull Logical analyzing options amp drawing conclusionsbull Visual acuity (the ability to distinguish details in
objects) is full grown now
Physical developmentbull Only now children start being able to do mouse
movements which demand a precise coordination between the eyes and the hand
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 15
Gelderblom Designing for developmental appropriateness
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 16
Method how does a child learn
Constructivismbull Piaget thought that learning occurs through a
process of adaptation where children adapt to the environment
bull Motivation and emotionsThe 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 17
USABILITY GUIDELINESAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 18
Overview of important usability guidelinesbull Hourcade general principlesbull How usability is similar for kids and adults (lt Nielsen)bull Specific guidelines for preschoolers Gelderblombull Guidelines organized by agegroup (0 ndash 12) Liebal amp Exnerbull Children on the web (3-12) Nielsenbull Specific guidelines
ndash Mobilendash Gamesndash Educational software
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 19
Hourcade amp other general principles
bull Visual Design About icons bull Interaction Styles
ndash Direct Manipulation ndash Menusndash Text-Based Interactionsndash Using Pointing Devices
bull Age-Appropriate Devices bull Pointing bull Draggingbull Use of Mouse Buttons
bull Use of sound
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 20
Icons
bull easily distinguishable from each other bull can be recognized as interactivebull separate from the backgroundbull Avoid visual complexity bull Sized to be easy clickablebull they represent actions or objects in a
recognizable manner (metaphors)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 21
Direct manipulation
bull Children need quick feedbackbull Reversibility of actionsbull Make actions incremental
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 22
Menus
bull Children experience menus (ie sets of choices) in software all the time These choices should be visible (no pull down menus Otherwise
ndash forgetting ndash problems to understand hierarchy (esp lt7)
bull Text-Based Interactions can also be problematic
ndash Typing skillsndash Spelling
bull Using Pointing Devices
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 23
Pointing devices
bull Age appropriate pointing devicesbull Problems with pointing
bull Avoid drag amp drop lt 8
adults
5 years
4 years
adult
5 years
45 years
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 24
The mouse buttons
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 25
How usability is similar for kids and adults (lt Nielsen)bull Initial Reactionbull Good Designbull Standardizationbull Controlbull Technical Interferences
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 26
Specific guidelines for preschoolers Gelderblom
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 27
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
lt2 2-6 7-11 12-15
SAMPLE
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 28
Children on the web Nielsen
bull The research how it was donebull Changes over timebull The themes
ndash Getting To Your Website ndash General Interactionndash Interaction Pointing Devices and Keyboard ndash Forms Passwords and Memberships ndash Navigationndash Search ndash Homepagesndash Text
ndash Images ndash Waiting Time ndash Animation and Video ndash Audio ndash Advertisements ndash System Errors and Help ndash Content ndash Characters
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 29
Nielsen example of one chapter
Interaction Pointing Devices and Keyboard
bull Create big clicking targetsbull For kids younger than 9 limit more complicated mouse
gestures such as dragging double click and right click bull Avoid repeated clicking on an object to loop through
different states bull Explain keyboard interaction for games Do not require
kids to use the keyboard to start a gamebull Avoid defining new conventions for keysbull For children younger than 6 avoid requiring multiple
key usage bull Do not move clickable targets when the cursor is on
top of them
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 30
Specific guidelines Mobile
bull Tablets (amp hybrids)bull Mobile phonesbull Tablets for children
bull Apps versus mobile websites
very little usability research
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 31
Some differences between mouse amp fingers as input device
Extra differencesbull the lack of a lsquonormalrsquo keyboard bull screen sizebull pre-defined buttons on amp around the screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 32
Some tips
Copy amp content
Designbull Size problems
ndash Design responsivendash No horizontal scrollndash Donrsquot hide buttons
bull Other problemsndash Design should has to be recognized as the same sitegameapp ndash App elements need to give an indication of which of them is actually
interactivendash Going back and forth with pages (eg in storybook) be consistent and
use arrows mind the placement (first priority spaced from each other second priority use the bottom)
App versus Websitebull Mainly for preschoolers apps offer a safe and closed environment in
which it is more difficult to lsquoescapersquo to other websites Of course itrsquos much more difficult to get an app published than a websitehellip
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 33
Specific guidelines Games
Problems should be in the game play not in the interface or game mechanics
Examples of some concrete difficultiesbull Getting in and out of the gamebull Perspective and Indirect Manipulationbull Cursor Shapes and Hotspots bull Modalities for input
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 34
Indirect manipulation
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 35
Cursor shape
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 36
The mechanics of playing a game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 37
Example of the mechanics
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 38
Prioritize what to fixndash Judge impact severityndash Judge frequency severityndash Take into account the learning curve
bull Sensorimotor problemsbull Knowledge inefficiency bull Habbit inefficiencybull Fun problems
ndash Challenge problemsndash Fantasy problemsndash Curiosity problems
bull Control problems
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 39
The path through a game at return visitsbull 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
bull Game sections that are not considered lsquoimportantrsquo will normally never be visited again at return visits This is of course an important criterium for budget decisions
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 40
Specific guidelines Educational software
Educational software comes in many shapes and for many devices
ndash PC laptopndash tablesndash Surfacendash LCDndash Digiboard whiteboard (with st adapted
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 41
Design guidelines for usage of whiteboardsbull Colour contrast bull Text should be large enough fonts should be easy to read bull Ensure that text is left alignedbull Design for interactionbull Facilitate thinkingbull Design activities for creative group involvementbull Avoid scrolling bull Provide plenty of lsquowhite spacersquo and avoid over-crowding the
page with informationbull Ensure that any interactive elements are within the typical
usersrsquo reach envelopebull Screen size full screen where possiblebull Use multimedia
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 42
RESEARCH WITH KIDSAn overview
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 43
Doing research with kids the goals
usertesterinformant to design design partner
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 44
Usability testing
bull The groupbull When bull Wherebull Setting the scenebull 2 types of testing
ndash Quantitativendash Formative testing
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 45
Some techniques
bull Use a taxonomy of potential problemsbull Examine video tapesbull Make children think aloudbull Test unaided or aided interactionbull Benchmarking task-based analysisbull keep a diarybull card sortingbull use friendship trios and get natural feedbackbull screen grabbing softwarebull Evaluate user journeys and content
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 46
Children as informants and co-creatorsbull Survey style interviewsbull Focus groupsbull Contextual inquirybull Kidreporterbull Mixing ideas
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 47
Expanding the topic a shift in mindset
bull Digital kidsrsquo media in the museum
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 48
The internet of things
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 49
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 50
Analysis of an example
Benetton Kids CommunityIn 2012 Benetton has launched an online hub lsquoBenetton Kids Communityrsquo dedicated to and aimed at digital-savvy kids and their parents
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 51
Confusion
What we see is that the boy needs about 3 minutes to find the first game So what went wrong
>
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 52
4 usability axioms
Kids are NOT tech savvy1
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 53
Show users where you are in the website structure
Website header is different at each visit of the homepage leads to confusion
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 54
Have clear real-life illustrations with call-to-actions
For call to actions children need clear real-life illustrationsAt the left button you see a link to recipes but they are illustrated with flowers birds and snails instead of cooking devicesSuperman doesnrsquot lead to a game but to color plates It should at least show a pencil on top
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 55
Text should be gt 14 (12) pt and well contrastedbull All text is very small bull Some text is written white on yellow bull Navigation texts are as small
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 56
4 usability axioms
instant gratification2
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 57
Children will always chose lsquoPLAYrsquo
Kids will never click on lsquohow to playrsquo but immediately on lsquoplayrsquo The instructions should be behind the play button during the game
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 58
lsquoFatal errorrsquo
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 lsquono plugin installedrsquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 59
4 usability axioms
show tailored content3
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 60
Separate content for different target users Make it clear where to go
for preschoolers for parents (sign up)
for parents (pdf)
Intended for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 61
ldquoNot for merdquo
You should avoid the lsquonot for mersquo-experience The videos are for preschoolers while the games are rather for elder kids When a child clicks on lsquohow it worksrsquo he gets an adult-layouted page with an lsquoadultrsquo text
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 62
ldquoFor merdquo Avoid pdf
Avoid pdf where possible Itrsquos a technical environment the children do not know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 63
4 usability axioms
if not you will be punished4
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 64
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 doesnrsquot participate in the website
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 65
So think before you start
Kids are NOT technically savvy
Kids want instant gratification
Kids want to see tailored content
You will be punished for bad usability
1234
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 66
Woeffies
bull A very limited budget production (lt10K) certainly no budget for user testing
bull For the smallest users (defined as lsquofrom foot measure 21 till 32rsquo)
bull Need to have all the games in html 5 for tablet users
bull Part of the Woeffies websitebull (Note made by Dreammachine)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 67
Embedded in adultsrsquo website as a lsquokidsrsquo cornerrsquo
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 68
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 69
Audio welcoming instruction with animation
Repeat animated message after a while making clear where the lsquohelprsquo 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 lsquothe real thingrsquo The clickable areas are very big
Because of the short attention span games have been very short
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 70
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 lsquohad seen the dog went therersquo (which is not true the animation is fixed the game is random) This kind of lsquousability problemsrsquo are not severe as they donrsquot 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 71
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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 72
Other example of animation to keep the attention going the see-saw
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 73
Instant gratification When the dog is found a hand shows lsquowell donersquo 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 74
Other example of animation with sound the bird coming out of the clock when clicking it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 75
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 lsquothe menursquo) 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
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 76
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 doesnrsquot work for adults will certainly not work for kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 77
In almost all of the kidsrsquo 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 parentsrsquo help will be called here anyway
Better would be of course to have an online colouring tool if budget would have allowed it
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 78
bull If the budget doesnrsquot allow user testing desk researching the most important usability guidelines certainly helps to make a better product
bull The main issue to be resolved (may have impact on success) is the button lsquoMama klik hierrsquo for the client itrsquos important to have it prominent for the kids it should be made clearer that they leave the kidsrsquo website
bull In the mobile app version this has already been corrected by an intermediary screen
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 79
Conclusion our top 10
bull Consistency standardizationbull Size and visibility of clickable areas cursorbull Overall readability (font size contrast page
structured layout)bull Donrsquot hide navigation donrsquot rely on memorybull Offer tailored contentbull Mobile donrsquot hide chromebull Instant gratificationbull Your game is too difficultbull Keep the user in controlbull Stick to real life imagery that kids know
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 80
DREAMMACHINE KIDSSome services that may interest you
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 81
Audience analysis
bull Creation of a small list of personas with for each personandash Description of a fictive person representing the target audiencendash Description of the stage of development (motoric cognitive social skills etc) with
concrete examples for how this may translate into this specific fictive personndash Usability guidelines based upon
bull the type and goal of the project (eg game app)bull the development stage of the personabull gender
ndash Description of the centers of interest of this personndash If relevant description of the school curriculum of the persona (eg a short
resume of the themes of the current school year the difficulty of writing reading exercices status of math knowledge )
ndash Internet computer and mobile experience of this persona
bull This set of personas will be extremely beneficial for the preparations and success of a project targeting kids
bull Ideally a persona should be foreseen by age (one per year spanning the total target audience) and gender
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 82
Other strategic services
bull Setup of agency briefsbull Analysis of existing projectsbull Usability checkupbull Coming soon usability testing with kids (Spring 2014)
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 83
Production of projects targeting kids
bull Including all stages from planning phase to execution (or any of the steps separately eg composing an agency brief) online communities kidsrsquo corners online mobile games contests educational applications digital advertising campaigns)
bull Top topical actions targeting kids amp mums (back2school Halloween)
bull Digital mama-marketingbull In company trainings about Digital Marketing to
Kids
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 84
Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerdadreammachinebe
Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects
Usability for kids what every advertiser should be aware of
Legal issues of digital marketing towards children what you might do as a parent but cannot do as an advertiser
Generation SpongeBob let your digital marketing strategy tap into this generationrsquos characteristics and digital media consumption
Digital trends for advertisers to kids 2014 trends and cases
OTHER CONFERENCES
12
34
Charleroi
Brussels
Charleroi
Charleroi
Dec 19th 2014
Feb 6th 2014
Feb 27th 2014
April 3rd 2014
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
ldquoNot for merdquo
ldquoFor merdquo Avoid pdf
4 usability axioms (4)
Result mainly appealing to mothers
So think before you start
Woeffies
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
Conclusion our top 10
DREAMMACHINE KIDS
Audience analysis
Other strategic services
Production of projects targeting kids
Slide 84
Sources
Dreammachine | Rue Auguste Frison 56 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | wwwdreammachinebe | 1 mei 2023 Dreammachine presentation p 85
httpwwwamazonfrMobile-Usability-Jakob-Nielsendp0321884485ref=sr_1_1ie=UTF8ampqid=1387560833 Gelderblom researchbull httpdlacmorgcitationcfmid=1551798bull httpumkn-dsp01unisaaczabitstreamhandle105002198thesispdfLiebal amp ExnerhttpwwwamazonfrUsability-fuumlr-Kids-Ergonomischen-Medienproduktiondp3834816248ref=sr_1_1ie=UTF8ampqid=1387560627ampsr=8-1ampkeywords=Liebal+exner bull Interaction Design and Children Juan Pablo Hourcade httpbooksgooglebebooksid=ooSXP96R3ZcCbull ICT in de onderbouw ndash Eduniek in onderwijsbull design synthesis spring 2006 kids amp media bernard king mcgaw paradis tallacksebull Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dixbull Being Playful ndash learning from children - Alan Dixbull Designing User Experiences for Children - By Heather Nambull Childrenrsquos interaction and collaboration while using a multi-user interactive play system - Anna Perssonbull Human factors in educational software for young children Afke Donkerbull Towards a Framework for Design Guidelines for Young Childrenrsquos Computer Games Wolmet Barendregt and Mathilde M Bekkerbull Usability Playability and Long-Term Engagement in Computer Games Alessandro Febretti en Franca Garzottobull Towards the Wild Evaluating museum installations in semi-realistic situations Eva Hornecker and Emma Nicolbull How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood Sabina Idlerbull Identifying usability and fun problems in a computer game during first use and after some practice W Barendregt MM Bekker DG Bouwhuis E Baauw
bull DDesigning for Children ndash With focus on Play + Learn ndash Design for the Youngest Alma Leora Culeacuten
Dreammachine Kids
Table of contents
Some of the brands we have worked forhellip
Services
The core lsquoDreamteamrsquo
New business unit Dreammachine Kids
Introduction
Child-Centered Design (S Idler)
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
Gelderblom Designing for developmental appropriateness
Method how does a child learn
Usability guidelines
Overview of important usability guidelines
Hourcade amp other general principles
Icons
Direct manipulation
Menus
Pointing devices
The mouse buttons
How usability is similar for kids and adults (lt Nielsen)
Specific guidelines for preschoolers Gelderblom
Guidelines organized by agegroup (0 ndash 12) Liebal amp Exner
Children on the web Nielsen
Nielsen example of one chapter
Specific guidelines Mobile
Some differences between mouse amp fingers as input device
Some tips
Specific guidelines Games
Indirect manipulation
Cursor shape
The mechanics of playing a game
Example of the mechanics
Problems during gameplay
The path through a game at return visits
Specific guidelines Educational software
Design guidelines for usage of whiteboards
Research with kids
Doing research with kids the goals
Usability testing
Some techniques
Children as informants and co-creators
Expanding the topic a shift in mindset
The internet of things
CASES
Benetton Kids Community
Confusion
4 usability axioms
Show users where you are in the website structure
Have clear real-life illustrations with call-to-actions
Text should be gt 14 (12) pt and well contrasted
4 usability axioms (2)
Children will always chose lsquoPLAYrsquo
lsquoFatal errorrsquo
4 usability axioms (3)
Separate content for different target users Make it clear wher
