Digital Usability for kids from 'Generation Z' ('Generation SpongeBob')
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 817 views

After an introduction about the development of kids ('generation SpongeBob' or 'generation z'), this slidedeck covers general kids usability tips and more specific guidelines for preschoolers, ...

After an introduction about the development of kids ('generation SpongeBob' or 'generation z'), this slidedeck covers general kids usability tips and more specific guidelines for preschoolers, usability tips for mobile apps, games, educational tools.
The document also covers some tips for usability research with kids.
Finally also cases from Benetton and Woeffies are analyzed briefly.

Statistics

Views

Total Views
817
Views on SlideShare
714
Embed Views
103

Actions

Likes
1
Downloads
33
Comments
0

3 Embeds 103

http://www.dreammachine.be 91
http://drupal.dreammachine.be 9
http://dreammachine.be 3

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • What we see is that the boy needs about 3 minutes to find the first game. So what went wrong?
  • First of all: kids are NOT tech savvy. The stage of their mental development makes that they are not as tech savy as their parents. Design should take this into account.
  • For call to actions, children need clear real-life illustrations.At the left button, you see a link to recipes, but they are illustrated with flowers, birds and snails instead of cooking devices.Superman doesn’t lead to a game, but to color plates. It should at least show a pencil on top.
  • Children below 8-9 years want instant gratification when clicking on a link; when they get older they want still ‘quick’ gratification.
  • For this reason, the will never click on ‘how to play’, but immediately on ‘play’. The instructions should be behind the play button during the game.
  • Here we see the path you have to go through to get to the nearest game in the site. After a whole quest to gets to the games section, the child gets on a page saying ‘no plugin installed’. There is no gratification at all, this gives a very negative brand image towards the child. On this computer the latest version of Flash and Java where both installed.
  • Show tailored content
  • Content should be clearly ordered for each individual target group: boys, girls, age group, parents. The best way to do it is again in a concrete way – for example with an image of a boy and a girl, an image of a kid and a teen, and so on. Here everything is unclear and mixed up.
  • Avoidpdf where possible. It’s a technical environment the children do not know.
  • If you do not follow the rules, you won’t get the results that you want.
  • For example, in the Benneton community we see at the picture gallery that the real audience are mothers of preschoolers and that the rest of the audience almost doesn’t participate in the website.

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

  • Dreammachine Kids About Usability Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 1
  • Table of contents • • • • • • • • • • • • • • • About Dreammachine Kids Introduction About the development of kids General tips Specific guidelines for preschoolers (<8) Specific web tips classified by age group Specific mobile usability tips (touch, small screen,...) Specific usability tips concerning games Specific usability tips concerning digital educational tools Doing research with kids Other digital media and the future (the internet of things, etc.) Cases Conclusion and wrap up Dreammachine Kids services Next sessions + invite to subscribe Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 2
  • Some of the brands we have worked for… Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 3
  • Services Dreammachine creates your Digital Marketing campaigns to B2C and B2B clients. From strategic planning to execution and reporting. Services include a.o. the following: ✚ Websites, contest sites, minisites including custom or Drupal CMS ✚ Banner campaigns ✚ Social Media ✚ E-coupon or e-voucher actions ✚ QR-codes with landing pages ✚ E-mail marketing Besides our normal activities as described at the left, in Jan 2014 we will open a specialized department in Digital Marketing to preschoolers and kids. ✚ E-commerce (custom programming or Prestashop) ✚ Mobile sites, mobile apps ✚ Games ✚ Printing on demand solutions ✚ Digital Signage and Contact Center solutions through our partner N-Allo Group Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 4
  • The core „Dreamteam‟ Gerda Van Damme Manager Strategic Planner – Creative director Guido Janssens Manager Technical Director Fabrice Duchenois Developer Creating websites since 1995. Previous Product Manager & Consumer Marketing Manager at Microsoft (MSN). Programming websites since 1995. Previous coordinator international multimedia (CD-i) productions at Philips. thewebfactory thewebfactory 6 years at Paris leading web agency Full Six (former Grey Interactive), 4 years webmaster of HSBC bank in Paris. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 5
  • New business unit: Dreammachine Kids • Will be operational as from Jan 2014. • Digital marketing services for – products bought by/for kids – products of which purchase decision is influenced by kids – lifetime brand building for kids • A specific knowledge center is being built, with a focus on: – – – – Tailered content interesting kids Usability concerns while developing for kids Legal and ethical concerns Digital media/channels to reach kids & their mamas • Age range: focus on 3 to 12, by extension also 13-18. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 6
  • Introduction • Get the target age group involved: child centric design. • Success or failure to reach the goal (often entertainment) has a huge impact on the overall user experience. • Quantitative usability metrics: – Effectiveness – Efficiency – Satisfaction Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 7
  • Child-Centered Design (S. Idler). • Accept the value of Child-Centered Design • Get familiar with your target age group • Get familiar with age appropriate research methods Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 8
  • “Is the computer happy when I click here?” ABOUT THE DEVELOPMENT OF KIDS Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 9
  • 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 Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 10
  • Sensorimotor stage, 0-2 years • Development of – body level functions , touch, feel, taste – memory • Starting from 8 to 12 months children realize that objects that they don‟t see keep on existing. Physical development: • Important evolution of the motirics – the fine motorics only follow afterwards Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 11
  • Preoperational stage, 2-6 years • • • • • • • • • • • • Language – but they understand everything literally Fine motorics Self-consciousness and egocentrism. Animism. Memory develops. Senses are well developed, but for the child it is difficult to order and organize his impressions. He also has difficulties for searching things. Their reaction time is still 3x longer than the one of an adult Their concentration is mostly limited to 8 to 15 minutes Only one characteristic of an object at a time. No understanding of hierarchies. Learn by imitating and playing. Concentrate on one single aspect of a task. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 12
  • Concrete operational stage, 7-12 years • • • • • • • • • • Development of: Ability to compare lengths and quantities Ability to concentrate on more than 1 aspect at the time Ability to order, count and calculate Figurative thinking At 12 years, reaction time starts being comparable to the speed of an adult. Start to appreciate someone else‟s perspective. They are able to understand hierarchies and reverse actions. Their concentration becomes selective, adapted and planned. They start to be able to solve problems. They keep on learning by playing and imitating, but also planned studying starts (school!) Physical development: • Important evolution of the fine motorics, mainly the hand. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 13
  • Formal operational stage, 12 years and older Development of: • Abstract & deductive reasoning. They are able to consider many aspects together. • Spatial thinking • Logical analyzing options & drawing conclusions • Visual acuity (the ability to distinguish details in objects) is full grown now Physical development: • 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 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 14
  • Gelderblom... Designing for developmental appropriateness Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 15
  • Method: how does a child learn? Constructivism • Piaget thought that learning occurs through a process of adaptation, where children adapt to the environment. – Assimilation – Accommodation – Equilibration • Motivation and emotions The more a website or game resembles to the other websites or games a child has already seen, the more it will be easy for him (her) to understand the interface and to use it. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 16
  • An overview USABILITY GUIDELINES Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 17
  • Overview of important usability guidelines • • • • • • Hourcade: general principles How usability is similar for kids and adults (< Nielsen) Specific guidelines for preschoolers: Gelderblom Guidelines organized by agegroup (0 – 12): Liebal & Exner Children on the web (3-12): Nielsen Specific guidelines: – Mobile – Games – Educational software Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 18
  • Hourcade & other: general principles • Visual Design: About icons • Interaction Styles – – – – Direct Manipulation Menus Text-Based Interactions Using Pointing Devices • • • • Age-Appropriate Devices Pointing Dragging Use of Mouse Buttons • Use of sound Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 19
  • Icons • • • • • • easily distinguishable from each other can be recognized as interactive separate from the background Avoid visual complexity Sized to be easy clickable they represent actions or objects in a recognizable manner (metaphors) Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 20
  • Direct manipulation • Children need quick feedback • Reversibility of actions • Make actions incremental. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 21
  • Menus • Children experience menus (i.e., sets of choices) in software all the time. These choices should be visible (no pull down menus. Otherwise: – forgetting, – problems to understand hierarchy (esp. <7) • Text-Based Interactions can also be problematic : – Typing skills – Spelling • Using Pointing Devices Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 22
  • Pointing devices • Age appropriate pointing devices • Problems with pointing adults adult 5 years 5 years 4,5 years 4 years • Avoid drag & drop < 8 Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 23
  • The mouse buttons Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 24
  • How usability is similar for kids and adults (< Nielsen) • • • • • Initial Reaction Good Design Standardization Control Technical Interferences Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 25
  • Specific guidelines for preschoolers: Gelderblom Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 26
  • Guidelines organized by agegroup (0 – 12) : Liebal & Exner <2 Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 2-6 7-11 12-15 Dreammachine presentation, p. 27
  • Children on the web: Nielsen • The research: how it was done • Changes over time • The themes: – – – – – – – – Getting To Your Website General Interaction Interaction: Pointing Devices and Keyboard Forms, Passwords, and Memberships Navigation Search Homepages Text Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 – – – – – – – – Images Waiting Time Animation and Video Audio Advertisements System Errors and Help Content Characters Dreammachine presentation, p. 28
  • Nielsen: example of one chapter Interaction: Pointing Devices and Keyboard • Create big clicking targets. • For kids younger than 9, limit more complicated mouse gestures such as dragging, double click, and right click. • Avoid repeated clicking on an object to loop through different states. • Explain keyboard interaction for games. Do not require kids to use the keyboard to start a game. • Avoid defining new conventions for keys. • For children younger than 6, avoid requiring multiple key usage. • Do not move clickable targets when the cursor is on top of them. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 29
  • Specific guidelines: Mobile • Tablets (& hybrids?) • Mobile phones • Tablets for children • Apps versus mobile websites. very little usability research Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 30
  • Some differences between mouse & fingers as input device Extra differences: • the lack of a ‘normal’ keyboard • screen size • pre-defined buttons on & around the screen Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 31
  • Some tips Copy & content Design • Size problems – Design responsive – No horizontal scroll – Don‟t hide buttons • Other problems – Design should has to be recognized as the same site/game/app. – App elements need to give an indication of which of them is actually interactive. – Going back and forth with pages (e.g. in storybook): be consistent and use arrows, mind the placement (first priority: spaced from each other, second priority: use the bottom). App versus Website • Mainly for preschoolers, apps offer a safe and closed environment, in which it is more difficult to „escape‟ to other websites. Of course it‟s much more difficult to get an app published than a website… Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 32
  • Specific guidelines: Games Problems should be in the game play, not in the interface, or game mechanics. Examples of some concrete difficulties: • • • • Getting in and out of the game Perspective and Indirect Manipulation Cursor Shapes and Hotspots Modalities for input Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 33
  • Indirect manipulation Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 34
  • Cursor shape Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 35
  • The mechanics of playing a game Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 36
  • Example of the mechanics Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 37
  • Problems during gameplay • • • • • • • Knowledge problems Thought problems Memory problems Judgement problems Habit problems Omission problems Recognition problems • • • • Sensorimotor problems Knowledge inefficiency Habbit inefficiency Fun problems: – Challenge problems – Fantasy problems – Curiosity problems • Control problems  Prioritize what to fix – Judge impact severity – Judge frequency severity – Take into account the learning curve! Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 38
  • The path through a game at return visits • At a first visit, the child develops a mental map of a game, including decisions about which parts of the game are crucial to play or highly interesting. • Game sections that are not considered „important‟ will normally never be visited again at return visits. This is of course an important criterium for budget decisions. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 39
  • Specific guidelines: Educational software Educational software comes in many shapes and for many devices: – – – – – PC, laptop tables Surface LCD Digiboard, whiteboard (with s.t. adapted software) – – – – Demonstrating (e.g. LCD) E-learning, learning games,... Books Creative applications (e.g. painting apps, cartoon construction tools,...) Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 40
  • Design guidelines for usage of whiteboards • • • • • • • • Colour contrast Text should be large enough, fonts should be easy to read. Ensure that text is left aligned Design for interaction Facilitate thinking Design activities for creative group involvement Avoid scrolling Provide plenty of „white space‟, and avoid over-crowding the page with information. • Ensure that any interactive elements are within the typical users‟ reach envelope. • Screen size: full screen where possible • Use multimedia! Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 41
  • An overview RESEARCH WITH KIDS Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 42
  • Doing research with kids: the goals user tester informant to design design partner Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 43
  • Usability testing • • • • • The group When ? Where? Setting the scene 2 types of testing: – Quantitative – Formative testing Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 44
  • Some techniques • • • • • • • • • • Use a taxonomy of potential problems. Examine video tapes. Make children think aloud. Test unaided or aided interaction Benchmarking task-based analysis keep a diary card sorting use friendship trios and get natural feedback screen grabbing software Evaluate user journeys and content Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 45
  • Children as informants and co-creators • • • • • Survey style interviews Focus groups Contextual inquiry Kidreporter Mixing ideas Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 46
  • Expanding the topic: a shift in mindset • Digital kids‟ media in the museum... Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 47
  • The internet of things Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 48
  • Some examples: Woeffies (preschoolers), Benetton (kids + preschoolers) CASES Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 49
  • Analysis of an example... Benetton Kids Community In 2012 Benetton has launched an online hub „Benetton Kids Community‟, dedicated to and aimed at digital-savvy kids and their parents. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 50
  • 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 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 51
  • 4 usability axioms 1 Kids are NOT tech savvy Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 52
  • 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 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 53
  • Have clear real-life illustrations with call-to-actions. For call to actions, children need clear real-life illustrations. At the left button, you see a link to recipes, but they are illustrated with flowers, birds and snails instead of cooking devices. Superman doesn’t lead to a game, but to color plates. It should at least show a pencil on top. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 54
  • Text should be > 14 (12) pt and well contrasted • All text is very small • Some text is written white on yellow • Navigation texts are as small Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 55
  • 4 usability axioms 2 instant gratification Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 56
  • Children will always chose „PLAY‟ Kids will never click on ‘how to play’, but immediately on ‘play’. The instructions should be behind the play button during the game. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 57
  • „Fatal error‟ Here we see the path you have to go through to get to the nearest game in the site. After a whole quest to gets to the games section, the child gets on a page saying ‘no plugin installed’. There is no gratification at all, this gives a very negative brand image towards the child. Note: on this computer the latest version of Flash and Java where both installed. No plugin download was proposed either. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 58
  • 4 usability axioms 3 show tailored content Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 59
  • Separate content for different target users. Make it clear where to go. Intended for kids  for preschoolers   for parents (sign up)  for parents (pdf) Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 60
  • “Not for me” You should avoid the ‘not for me’experience. The videos are for preschoolers, while the games are rather for elder kids. When a child clicks on ‘how it works’, he gets an adult-layouted page with an ‘adult’ text. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 61
  • “For me?” Avoid pdf. Avoid pdf where possible. It’s a technical environment the children do not know. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 62
  • 4 usability axioms 4 if not... you will be punished Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 63
  • Result: mainly appealing to mothers For example, in the Benneton community we see at the picture gallery that the real audience are mothers of preschoolers and that the rest of the audience almost doesn’t participate in the website. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 64
  • So think before you start! 1 Kids are NOT technically savvy 2 Kids want instant gratification 3 Kids want to see tailored content 4 You will be punished for bad usability Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 65
  • Woeffies • A very limited budget production (<10K), certainly no budget for user testing. • For the smallest users (defined as „from foot measure 21 till 32‟). • Need to have all the games in html 5 for tablet users. • Part of the Woeffies website. • (Note: made by Dreammachine) Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 66
  • Embedded in adults‟ website as a „kids‟ corner‟. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 67
  • 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 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 68
  • Audio welcoming instruction with animation. Repeat animated message after a while, making clear where the „help‟ sits in case the child wants to return to it. No further animation in order not to distract from this message (except for turning sun). The cursor is replace with a bigger version of „the real thing‟. The clickable areas are very big. Because of the short attention span, games have been very short. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 69
  • Loading animation suggesting that the dog is hiding. Children seem to like this, but they try to follow where the dog is running, and are convinced that when they guess where he is, they „had seen the dog went there‟ (which is not true, the animation is fixed, the game is random). This kind of „usability problems‟ are not severe, as they don‟t compromise the satisfaction. Length of animation should be tested with users, as with the few users we tested there was no clear view on the ideal length. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 70
  • 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 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 71
  • 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 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 72
  • Instant gratification. When the dog is found, a hand shows „well done‟, while in the soundtrack we hear an applause. The child can feel in control. In user testing it might have been a good idea to test whether this hand is understood by the children, or whether it should have been applauding hands. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 73
  • 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 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 74
  • Another game the kids know from their paper games (apply standardization). Also the button back to the homepage is an icon based upon standardization on the one hand (house shape = homepage, or as kids say „the menu‟), and the button also fysically represents the visual as on the homepage. Button linking back to adults website. In a v2 we would put an intermediary screen here with a link back to the homepage of the kids site. After investigation drag-and-drop was avoided because of the usability problems it would cause for preschoolers. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 75
  • Another familiar game, playable from about 5 years on. Arrows indicate in which line the child should click next. This does not seem to be clear for all adults, so probably it would certainly for the kids be better to reprogram for a v2 (so that you can click in any line you want). Base rule of kids usability: what doesn‟t work for adults will certainly not work for kids. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 76
  • In almost all of the kids‟ website text has been avoided or moved to the borders of the website. Only here we put text in the image (which is repeated by the voice over), as parents‟ help will be called here anyway! Better would be of course to have an online colouring tool, if budget would have allowed it. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 77
  • • If the budget doesn‟t allow user testing, desk researching the most important usability guidelines certainly helps to make a better product. • The main issue to be resolved (may have impact on success) is the button „Mama klik hier‟: for the client it‟s important to have it prominent, for the kids it should be made clearer that they leave the kids‟ website. • In the mobile app version this has already been corrected by an intermediary screen. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 78
  • Conclusion: our top 10 • Consistency, standardization • Size and visibility of clickable areas, cursor • Overall readability (font size, contrast, page structured layout) • Don‟t hide navigation, don‟t rely on memory • Offer tailored content • Mobile: don‟t hide chrome • Instant gratification • Your game is too difficult • Keep the user in control • Stick to real life imagery that kids know Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 79
  • Some services that may interest you! DREAMMACHINE KIDS Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 80
  • Audience analysis • Creation of a small list of personas, with for each persona; – Description of a fictive person representing the target audience – Description of the stage of development (motoric, cognitive, social skills, etc.) with concrete examples for how this may translate into this specific fictive person – Usability guidelines based upon • • • the type and goal of the project (e.g. game app) the development stage of the persona gender – Description of the centers of interest of this person – If relevant: description of the school curriculum of the persona (e.g. a short resume of the themes of the current school year, the difficulty of writing / reading exercices, status of math knowledge, ...). – Internet, computer and mobile experience of this persona. • This set of personas will be extremely beneficial for the preparations and success of a project targeting kids. • Ideally a persona should be foreseen by age (one per year, spanning the total target audience) and gender. Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 81
  • Other strategic services • • • • Setup of agency briefs Analysis of existing projects Usability checkup Coming soon: usability testing with kids (Spring 2014) Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 82
  • Production of projects targeting kids • Including all stages from planning phase to execution (or any of the steps separately, e.g. composing an agency brief): online communities, kids‟ corners, online / mobile games, contests, educational applications, digital advertising campaigns...) • Top topical actions targeting kids & mums (back2school, Halloween,...) • Digital mama-marketing • In company trainings about Digital Marketing to Kids Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 83
  • OTHER CONFERENCES Subscribe for our free whitepapers and ask your invitations to our more in depth seminars by sending an e-mail to gerda@dreammachine.be. Free 2 hour conferences will be given from December to April in Brussels or Jumet (Charleroi Nord) about the following subjects : 1 Usability for kids: what every advertiser should be aware of. Charleroi Dec 19th 2014 2 Legal issues of digital marketing towards children: what you might do as a parent but cannot do as an advertiser. Brussels Feb 6th 2014 3 Generation SpongeBob: let your digital marketing strategy tap into this generation’s characteristics and digital media consumption. Charleroi Feb 27th 2014 4 Digital trends for advertisers to kids: 2014 trends and cases. Charleroi April 3rd 2014 Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 84
  • Sources Nielsen research: • http://www.nngroup.com/articles/childrens-websites-usability-issues/ http://www.nngroup.com/reports/children-on-the-web/ http://www.amazon.fr/Mobile-UsabilityJakob-Nielsen/dp/0321884485/ref=sr_1_1ie=UTF8&qid=1387560833 Gelderblom research: • http://dl.acm.org/citation.cfmid=1551798 • http://umkn-dsp01.unisa.ac.za/bitstream/handle/10500/2198/thesis.pdf Liebal & Exner:http://www.amazon.fr/Usability-für-Kids-Ergonomischen-Medienproduktion/dp/3834816248/ref=sr_1_1?ie=UTF8&qid=1387560627&sr=81&keywords=Liebal+exner • Interaction Design and Children / Juan Pablo Hourcade: http://books.google.be/books?id=ooSXP96R3ZcC • ICT in de onderbouw – Eduniek in onderwijs • design synthesis . spring 2006 . kids & media . bernard, king, mcgaw, paradis, tallackse • Iconic Interfaces For Kids On The Internet - Lorna Uden Alan Dix • Being Playful – learning from children - Alan Dix • Designing User Experiences for Children - By Heather Nam • Children‟s interaction and collaboration while using a multi-user interactive play system - Anna Persson • Human factors in educational software for young children / Afke Donker. • Towards a Framework for Design Guidelines for Young Children‟s Computer Games / Wolmet Barendregt and Mathilde M. Bekker • Usability, Playability, and Long-Term Engagement in Computer Games / Alessandro Febretti en Franca Garzotto • Towards the Wild: Evaluating museum installations in semi-realistic situations / Eva Hornecker and Emma Nicol • How the Position of Navigation Buttons Influences the Intuitive Operation of IPad Applications for Children in Middle Childhood / Sabina Idler • Identifying usability and fun problems in a computer game during first use and after some practice / W. Barendregt, M.M. Bekker, D.G. Bouwhuis, E. Baauw • DDesigning for Children – With focus on Play + Learn – Design for the Youngest / Alma Leora Culén Dreammachine | Rue Auguste Frison 56, 6040 Jumet (Charleroi) | +32 (0) 10 86 12 42 | www.dreammachine.be| 9.01.14 Dreammachine presentation, p. 85