{"id":290,"date":"2024-02-06T07:00:00","date_gmt":"2024-02-06T08:00:00","guid":{"rendered":"http:\/\/www.diveintoaccessibility.com\/?p=290"},"modified":"2024-10-14T16:08:58","modified_gmt":"2024-10-14T16:08:58","slug":"a-guide-to-designing-for-older-adults","status":"publish","type":"post","link":"http:\/\/www.diveintoaccessibility.com\/index.php\/2024\/02\/06\/a-guide-to-designing-for-older-adults\/","title":{"rendered":"A Guide To Designing For Older Adults"},"content":{"rendered":"<p>              <title>A Guide To Designing For Older Adults<\/title><\/p>\n<article>\n<header>\n<h1>A Guide To Designing For Older Adults<\/h1>\n<address>Vitaly Friedman<\/address>\n<p>                  2024-02-06T08:00:00+00:00<br \/>\n                  2024-10-14T15:35:03+00:00<br \/>\n                <\/header>\n<p>Today, one billion people are <strong>60 years or older<\/strong>. That\u2019s 12% of the entire world population, and the age group is growing faster than any other group. Yet, online, the needs of older adults are often overlooked or omitted. So what do we need to consider to make our designs more <strong>inclusive for older adults<\/strong>? Well, let\u2019s take a closer look.<\/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=\"make-users-feel-independent-and-competent\">Make Users Feel Independent And Competent<\/h2>\n<p>When designing for older adults, we shouldn\u2019t make our design decisions based on stereotypes or assumptions that are often not true at all. Don\u2019t assume that older adults struggle to use digital. Most users are healthy, active, and have a solid income.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/uxdesign.cc\/golden-microcopy-helping-older-users-use-your-product-f0f1b173aa3e\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"647\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/guide-designing-older-adults\/1-designing-older-adults.png\" alt=\"Various icons with large tap areas and descriptive labels, such as low crime, near great parks, and so on, that describe a dream house\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Older adults need large tap areas for better precision, but everyone can benefit from it. (Image source: \u201c<a href=\"https:\/\/uxdesign.cc\/golden-microcopy-helping-older-users-use-your-product-f0f1b173aa3e\">How To Write Better Microcopy For Older Adults<\/a>\u201d) (<a href=\"https:\/\/files.smashing.media\/articles\/guide-designing-older-adults\/1-designing-older-adults.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>They might use the web <em>differently<\/em> than younger users, but that doesn\u2019t mean we need to design a \u201cbarebones\u201d version for them. What we need is a <strong>reliable, inclusive digital experience<\/strong> that helps everyone feel independent and competent.<\/p>\n<p>Good accessibility is good for everyone. To make it happen, we need to <strong>bring older adults into our design process<\/strong> and find out what their needs are. This doesn\u2019t only benefit the older audience but improves the overall UX &mdash; for everyone.<\/p>\n<h2 id=\"one-task-at-a-time-and-error-messages\">One Task At A Time and Error Messages<\/h2>\n<p>When designing for older users, keep in mind that there are significant <strong>differences in age groups<\/strong> 60\u201365, 65\u201370, 70\u201375, and so on, so explore design decisions for each group individually.<\/p>\n<p>Older adults often <strong>read and analyze every word<\/strong> (so-called <em>Stroop effect<\/em>), so give them enough time to achieve a task, as well as control the process. So avoid disappearing messages so that users can close them themselves when they are ready or present only 1 question at a time in a form.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/guide-designing-older-adults\/2-error-messages.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"468\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/guide-designing-older-adults\/2-error-messages.png\" alt=\"An error message with an error summary from Gov.uk.\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Place error messages above the input and add an error summary to highlight errors prominently. (An example from <a href=\"https:\/\/www.gov.uk\/\">Gov.uk<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/guide-designing-older-adults\/2-error-messages.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Older adults also often <strong>struggle with precise movements<\/strong>, so avoid long, fine drag gestures and precision. If a user performs an action, they didn\u2019t mean to and runs into an error, be sure your error messages are helpful and forgiving, as older adults often view error messages as a personal failure.<\/p>\n<p>As Peter Sylwester <a href=\"https:\/\/www.linkedin.com\/feed\/update\/urn:li:ugcPost:7158723543181008896?commentUrn=urn%3Ali%3Acomment%3A%28ugcPost%3A7158723543181008896%2C7158817716512972800%29&amp;dashCommentUrn=urn%3Ali%3Afsd_comment%3A%287158817716512972800%2Curn%3Ali%3AugcPost%3A7158723543181008896%29\">has suggested<\/a>, sensory reaction times peak at about the age of 24 and then degrade slowly as we age. Most humans maintain fine motor skills and decent reaction times well into old age. Therefore, error messages and small updates and prompts should almost always be a consideration. One good way to facilitate reaction time is to keep errors and prompts close to the <strong>center of attention<\/strong>.<\/p>\n<p>As always, when it comes to accessibility, watch out for <strong>contrast<\/strong>. Particularly, shades of blue\/purple and yellow\/green are often difficult to distinguish. When using icons, it is also a good idea to add descriptive labels to ensure everyone can make sense of them, no matter their vision.<\/p>\n<h2 id=\"guidelines-for-designing-for-older-adults\">Guidelines For Designing For Older Adults<\/h2>\n<ul>\n<li>Avoid <strong>disappearing messages<\/strong>: let users close them.<\/li>\n<li>Avoid long, fine drag gestures and <strong>precision<\/strong>.<\/li>\n<li>Avoid <strong>floating labels<\/strong> and use static field labels instead.<\/li>\n<li>Don\u2019t rely on <strong>icons<\/strong> alone: add descriptive labels.<\/li>\n<li>Ask for <strong>explicit confirmation<\/strong> for destructive actions.<\/li>\n<li>Add a <strong>\u201cBack\u201d link<\/strong> in addition to the browser\u2019s \u201cBack\u201d button.<\/li>\n<li>In forms, present one question or <strong>one topic per screen<\/strong>.<\/li>\n<li>Use sufficient <strong>contrast<\/strong> (particularly shades of blue\/purple and yellow\/green can be hard to distinguish).<\/li>\n<li>Make <strong>error messages<\/strong> helpful and forgiving.<\/li>\n<\/ul>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>We should be careful not to make our design decisions based on assumptions that are often not true at all. <strong>We don\u2019t need a \u201cbarebones\u201d version<\/strong> for older users. We need a reliable, inclusive product that helps people of all groups feel independent and competent.<\/p>\n<p><strong>Bring older adults in your design process<\/strong> to find out what their specific needs are. It\u2019s not just better for that specific target audience \u2014 good accessibility is better for everyone. And huge kudos to wonderful people contributing to a topic that is often forgotten and overlooked.<\/p>\n<h3 id=\"useful-resources\">Useful Resources<\/h3>\n<ul>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/golden-microcopy-helping-older-users-use-your-product-f0f1b173aa3e\">How To Write Better Microcopy For Older Adults<\/a>,\u201d by Michal Halperin Ben Zvi and Kinneret Yifrah<\/li>\n<li>\u201c<a href=\"https:\/\/medium.com\/salesforce-ux\/what-you-can-learn-from-older-adults-about-accessible-design-63181b450863\">What You Can Learn From Older Adults About Accessible Design<\/a>,\u201d by Becca Selah<\/li>\n<li>\u201c<a href=\"https:\/\/www.toptal.com\/designers\/ui\/ui-design-for-older-adults\">A Guide to Interface Design For Older Adults<\/a>,\u201d by Sergei P.<\/li>\n<li>\u201c<a href=\"https:\/\/www.uxmatters.com\/mt\/archives\/2017\/04\/designing-user-interfaces-for-an-aging-population.php\">Designing User Interfaces for an Aging Population<\/a>,\u201d by Jeff Johnson and Kate Finn<\/li>\n<li><a href=\"https:\/\/www.thejoint.org.il\/en\/log-in-guidebook\/\">Age-Friendly Digital Design Toolkit<\/a> (PDF guide, email required)<\/li>\n<li><a href=\"https:\/\/ageing-better.org.uk\/news\/age-positive-image-library-launched\">Age-Positive Image Library<\/a><\/li>\n<li>\u201c<a href=\"https:\/\/medium.com\/digital-assistant-academy\/voice-design-strategies-for-the-elderly-population-17ea9c83859f\">Voice Design Strategies for the Elderly Population<\/a>,\u201d by Shyamala Prayaga<\/li>\n<li>\u201c<a href=\"https:\/\/www.smashingmagazine.com\/2019\/11\/online-environments-older-users\/\">Creating Online Environments That Work Well For Older Users<\/a>,\u201d by Barry Rueger<\/li>\n<li>\u201c<a href=\"https:\/\/www.nngroup.com\/articles\/usability-testing-older-adults\/\">Usability Testing With Older Adults<\/a>,\u201d by Megan Chan<\/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, il)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>A Guide To Designing For Older Adults A Guide To Designing For Older Adults Vitaly Friedman 2024-02-06T08:00:00+00:00 2024-10-14T15:35:03+00:00 Today, one billion people are 60 years [&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\/290"}],"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=290"}],"version-history":[{"count":1,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"predecessor-version":[{"id":291,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/290\/revisions\/291"}],"wp:attachment":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}