{"id":288,"date":"2024-02-13T11:00:00","date_gmt":"2024-02-13T12:00:00","guid":{"rendered":"http:\/\/www.diveintoaccessibility.com\/?p=288"},"modified":"2024-10-14T16:08:58","modified_gmt":"2024-10-14T16:08:58","slug":"a-practical-guide-to-designing-for-children","status":"publish","type":"post","link":"http:\/\/www.diveintoaccessibility.com\/index.php\/2024\/02\/13\/a-practical-guide-to-designing-for-children\/","title":{"rendered":"A Practical Guide To Designing For Children"},"content":{"rendered":"<p>              <title>A Practical Guide To Designing For Children<\/title><\/p>\n<article>\n<header>\n<h1>A Practical Guide To Designing For Children<\/h1>\n<address>Vitaly Friedman<\/address>\n<p>                  2024-02-13T12:00:00+00:00<br \/>\n                  2024-10-14T15:35:03+00:00<br \/>\n                <\/header>\n<p><strong>Children<\/strong> start interacting with the web when they are 3&ndash;5 years old. How do we design for children? What do we need to keep in mind while doing so? And how do we meet the expectations of the <strong>most demanding users<\/strong> you can possibly find: parents? Well, let\u2019s find out.<\/p>\n<p>.course-intro{&#8211;shadow-color:206deg 31% 60%;background-color:#eaf6ff;border:1px solid #ecf4ff;box-shadow:0 .5px .6px hsl(var(&#8211;shadow-color) \/ .36),0 1.7px 1.9px -.8px hsl(var(&#8211;shadow-color) \/ .36),0 4.2px 4.7px -1.7px hsl(var(&#8211;shadow-color) \/ .36),.1px 10.3px 11.6px -2.5px hsl(var(&#8211;shadow-color) \/ .36);border-radius:11px;padding:1.35rem 1.65rem}@media (prefers-color-scheme:dark){.course-intro{&#8211;shadow-color:199deg 63% 6%;border-color:var(&#8211;block-separator-color,#244654);background-color:var(&#8211;accent-box-color,#19313c)}}<\/p>\n<p class=\"course-intro\">This article is <strong>part of our ongoing series<\/strong> on <a href=\"\/category\/design-patterns\">design patterns<\/a>. It\u2019s also a part of the video library on <a style=\"font-weight:700\" href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a>&nbsp;\ud83c\udf63 and is available in the <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\/interface-design-course-vitaly-friedman-spring\/\">live UX training<\/a> as well.<\/p>\n<h2 id=\"embrace-playing-encourage-small-wins\">Embrace Playing, Encourage Small Wins<\/h2>\n<p>Designing for children is difficult. Children tend to lose focus and motivation. They quit when they get bored, and they move on if they can\u2019t get anywhere quickly enough. They <strong>need steady achievements<\/strong>. So, as designers, we need to appreciate, reward, and encourage small wins to develop habits and support learning &mdash; with progress tracking and gamification.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/apps.apple.com\/us\/app\/fiete-math-learning-for-kids\/id1052109508\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"610\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/practical-guide-design-children\/designing-children-games-example.jpg\" alt=\"Vibrant, colorful, and playful: Fiete Math, a wonderful game for children, designed by Ahoiii.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Vibrant, colorful, and playful: <a href=\"https:\/\/apps.apple.com\/us\/app\/fiete-math-learning-for-kids\/id1052109508\">Fiete Math<\/a>, a well-designed game for children. (<a href=\"https:\/\/files.smashing.media\/articles\/practical-guide-design-children\/designing-children-games-example.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>As Deb Gelman, author of <em>Design for Kids<\/em> discovered, children <strong>communicate volumes by how they play<\/strong>, what they choose to play with, how long they choose to play with it, and when they decide to play with something else. Yet they don\u2019t get as disappointed when something isn\u2019t working. They just choose to browse or play something else.<\/p>\n<p>Most importantly, we can\u2019t design for children without testing. Even better: <strong>bring children to co-design their digital experiences<\/strong> and bring parents to co-design reliable guardrails. With a fun, smart, and safe product, parents will spread the word about you faster than you ever could.<\/p>\n<h2 id=\"always-focus-on-a-two-year-age-range\">Always Focus On A Two-Year Age Range<\/h2>\n<p>As designers, we should always keep in mind that <em>\u201cchildren\u201d<\/em> represent a very diverse range of behaviors and abilities. There are vast <strong>differences between age groups<\/strong> (3&ndash;5, 6&ndash;8, and 9&ndash;12) &mdash; both in terms of how users navigate but also how we communicate to them.<\/p>\n<p>In general, when designing for children, focus on a <strong>two-year age range<\/strong>, max. These days, children start interacting with the web at the age of 3&ndash;5. And the very first interactions they learn are swipe, scroll, video controls, and \u201cHome\u201d.<\/p>\n<h2 id=\"getting-parents-on-board\">Getting Parents On Board<\/h2>\n<p>Whenever you are designing for children, you always design for parents as well. In fact, parents are the <strong>most demanding users<\/strong> you can find. They have <strong>absolutely no mercy<\/strong> in reviews, requests, complaints, and ratings on the stores.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/grace-app.com\/\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"603\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/practical-guide-design-children\/Grace-parental-control-for-iOS.png\" alt=\"Something that parents need to rely on: Grace, a parental control app.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Something that parents need to rely on: <a href=\"https:\/\/grace-app.com\/\">Grace<\/a>, a parental control app. (<a href=\"https:\/\/files.smashing.media\/articles\/practical-guide-design-children\/2-grace-parental-control.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>That\u2019s not surprising. Parents need <strong>safety guarantees<\/strong>, regulations, and certifications &mdash; a sort of <em>reassurance<\/em> that you treat their safety and privacy seriously, especially when it comes to third-party integrations or advertising. In fact, they are often willing to pay for apps more just to avoid advertising.<\/p>\n<p>Parents often value <strong>reviews from teachers, educators<\/strong>, doctors, and other parents like themselves. And they need to have <strong>parental controls<\/strong> to set specific time limits, rules, access, and permissions.<\/p>\n<p>As <a href=\"https:\/\/www.linkedin.com\/in\/rodrigoseoane\/\">Rodrigo Seoane<\/a> has pointed out in an email, a major concern to keep in mind is \u201chow the majority of initiatives for kids rely on and create dependencies on extrinsic motivations. The reward model keeps their attention in the short term, but as a core gamified mechanic, it is problematic in the long run, reducing their cognitive capacity and creating a barrier to developing any intrinsic motivation.\u201d So whenever possible, design to <a href=\"https:\/\/medium.com\/@paulasg\/how-to-increase-players-intrinsic-motivation-d00368697d19\">increase intrinsic motivation<\/a>.<\/p>\n<h2 id=\"design-guidelines-for-children-friendly-design\">Design Guidelines For Children-Friendly Design<\/h2>\n<ul>\n<li><strong>Design large text<\/strong> (18\u201319px) with large tap targets (min 75\u00d775px).<\/li>\n<li>Use typefaces that approximate how children learn to write.<\/li>\n<li><strong>Translate text into attractive visuals<\/strong>, icons, sounds, characters.<\/li>\n<li><strong>Avoid bottom buttons<\/strong> as kids tap on them by mistake all the time.<\/li>\n<li><strong>Children expect feedback<\/strong> on every single action they perform.<\/li>\n<li><strong>Don\u2019t patronize<\/strong>: show age-appropriate content for the age range you\u2019re designing for.<\/li>\n<li><strong>Be transparent<\/strong>: children can\u2019t distinguish ads or promotions from real content.<\/li>\n<li>You\u2019re always designing for <strong>both children and parents<\/strong>.<\/li>\n<li>Parents are the most demanding users you can find. They have <strong>no mercy in reviews and ratings<\/strong>.<\/li>\n<li>Design <strong>parental controls<\/strong> for time limits, rules, and access.<\/li>\n<li>Instead of extrinsic rewards, design to <strong>increase intrinsic motivation<\/strong>.<\/li>\n<\/ul>\n<h3 id=\"useful-resources\">Useful Resources<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/raw.studio\/blog\/designing-for-children\/\">8 Things to Consider When Designing for Children<\/a>,\u201d by Jasmine Bilham<\/li>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/design-considerations-for-little-fingers-ad2a19ed3816\">Design Considerations for Little Fingers<\/a>,\u201d by Andrew Smyk<\/li>\n<li>\u201c<a href=\"https:\/\/www.eleken.co\/blog-posts\/ux-design-for-children-how-to-create-a-product-children-will-love\">How to Create a Product Children Will Love<\/a>,\u201d by Mariia Kasym<\/li>\n<li><a href=\"https:\/\/www.uxmatters.com\/topics\/design\/designing-for-children\/\">Designing For Children (7-part series)<\/a>, by Catalina Naranjo-Bock, Jonathan Evans, Paul Osborne<\/li>\n<li>\u201c<a href=\"https:\/\/www.nngroup.com\/articles\/childrens-websites-usability-issues\/\">Children\u2019s UX: Usability Issues in Designing for Young People<\/a>,\u201d by Katie Sherwin, Jakob Nielsen<\/li>\n<li>\u201c<a href=\"https:\/\/www.nngroup.com\/articles\/usability-testing-minors\/\">Usability Testing With Children<\/a>,\u201d by Alita Joyce<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2015\/08\/designing-web-interfaces-for-kids\/\">Designing Web Interfaces For Kids<\/a>,\u201d by Trine Falbe<\/li>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/designing-apps-for-young-kids-part-1-ff54c46c773b\">Designing Apps For Young Kids<\/a>,\u201d by Rubens Cantuni (Medium paywall)<\/li>\n<li>\u201c<a href=\"https:\/\/infodesign.com.au\/usabilityresources\/designingforchildren.html\">Designing For Children (PDF guidelines)<\/a>,\u201d by Gerry Gaffney, James Hunter<\/li>\n<li>\u201c<a href=\"https:\/\/www.invisionapp.com\/inside-design\/building-apps-for-children\/\">The Definitive Guide to Building Apps for Kids<\/a>,\u201d by Tanya Junell<\/li>\n<li><a href=\"https:\/\/medium.com\/@hellopeter\/useful-resources-for-designing-web-content-for-children-8171c94ab967\">Useful Resources When Designing For Children<\/a><\/li>\n<\/ul>\n<h3 id=\"digital-toolkits-for-children\">Digital Toolkits For Children<\/h3>\n<ul>\n<li><a href=\"https:\/\/playtestwithkids.org\/\">UX Research Toolkit For Playtesting With Kids<\/a> (UX Methods)<\/li>\n<li><a href=\"https:\/\/designingwithchildren.net\/\">Designing With Children<\/a> (Workshops and Case Studies)<\/li>\n<li><a href=\"https:\/\/studiolab.ide.tudelft.nl\/studiolab\/codesignwithkids\/tools\/\">Co-Design With Kids Toolkit<\/a><\/li>\n<li><a href=\"https:\/\/digitalfuturescommission.org.uk\/playful-by-design-toolkit\/\">Playful by Design Toolkit<\/a><\/li>\n<li><a href=\"https:\/\/decid.co.uk\/\">DeCID Handbook For Displaced Children<\/a><\/li>\n<li><a href=\"https:\/\/childrensdesignguide.org\/\">Designing For Children\u2019s Rights Guide<\/a><\/li>\n<\/ul>\n<h3 id=\"books-and-ebooks\">Books and eBooks<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.lxdlab.org\/motivation-matters\/pocket-guide\">Designing For Motivation (Pocket Guide)<\/a>, by Anamaria Dorgo, LxD Lab<\/li>\n<li><a href=\"https:\/\/www.designappsforkids.com\/\">Designing Digital Products For Kids<\/a>, by Rubens Cantuni<\/li>\n<li><a href=\"https:\/\/rosenfeldmedia.com\/books\/design-for-kids\/\">Design For Kids<\/a>, by Deb Gelman<\/li>\n<li><a href=\"https:\/\/www.jovis.de\/en\/book\/9783868597172\">Designing Spaces For Children<\/a>, by Nathalie Dziobek-Bepler<\/li>\n<\/ul>\n<h2 id=\"meet-smart-interface-design-patterns\">Meet Smart Interface Design Patterns<\/h2>\n<p>If you are interested in similar insights around UX, take a look at <a href=\"https:\/\/smart-interface-design-patterns.com\/\"><strong>Smart Interface Design Patterns<\/strong><\/a>, our <strong>10h-video course<\/strong> with 100s of practical examples from real-life projects \u2014 with a <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\/interface-design-course-vitaly-friedman-spring\/\">live UX training<\/a> starting March 8. Everything from mega-dropdowns to complex enterprise tables &mdash; with 5 new segments added every year.  <a href=\"https:\/\/www.youtube.com\/watch?v=aSP5oR9g-ss\">Jump to a free preview<\/a>.<\/p>\n<figure style=\"margin-bottom: 0\"><a href=\"https:\/\/smart-interface-design-patterns.com\/\"><img loading=\"lazy\" style=\"border-radius: 11px\" width=\"950\" height=\"492\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7cc4e1de-6921-474e-a3fb-db4789fc13dd\/b4024b60-e627-177d-8bff-28441f810462.jpeg\" alt=\"Smart Interface Design Patterns\" \/><\/a><figcaption class=\"op-vertical-bottom\">Meet <a href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a>, our video course on interface design &amp; UX.<\/figcaption><\/figure>\n<div class=\"btn--lined btn--lined--white-border\" style=\"margin-top: 0.75em;margin-bottom: 0.75em\"><a class=\"btn btn--large btn--green btn--text-shadow\" href=\"https:\/\/smart-interface-design-patterns.com\/\">Jump to the video course&nbsp;&rarr;<\/a><\/div>\n<\/p>\n<p class=\"ticket-price__desc\" style=\"font-size: .8em!important;text-align: center;line-height: 1.5;margin: 0\">100 design patterns &amp; real-life<br \/>\nexamples.<br \/>10h-video course + live UX training. <a href=\"https:\/\/www.youtube.com\/watch?v=aSP5oR9g-ss\">Free preview<\/a>.<\/p>\n<div class=\"signature\">\n  <img src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>A Practical Guide To Designing For Children A Practical Guide To Designing For Children Vitaly Friedman 2024-02-13T12:00:00+00:00 2024-10-14T15:35:03+00:00 Children start interacting with the web when [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/288"}],"collection":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":1,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":289,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/288\/revisions\/289"}],"wp:attachment":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/categories?post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/tags?post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}