HOLE WORLD: About Web Design / HTML: Designing Websites for Seniors

If you can't see this email, click here

Web Design / HTML

Web Design / HTML

Design Basics

Learn HTML CSS XML

Careers

From Jennifer Kyrnin, your Guide to Web Design / HTML

Last week I talked about teaching kids HTML, so I thought it would be appropriate to talk about seniors this week. While I don't believe that seniors need anything special to learn how to write HTML, there are some things that younger designers (and possibly senior designers too) should consider when building websites. According to a recent Jakob Nielsen Alertbox, “websites are still substantially harder to use for seniors than for younger users.” (emphasis his). This means that if your website or business is trying to attract seniors or people getting close to being seniors there is a lot you can do to improve your sites and make them easier to use for that demographic.

Don't Be Afraid of Larger Font Sizes

One of the things that happens when you get older is your eyes get worse. I'm not a senior citizen, but I can tell that I can't see as well as I could 20 years ago. Designing for people above the age of 65 years old means that you need to use larger fonts. And by larger fonts, I don't mean moving from 8 point text to 10 point. For most seniors, 8 point text doesn't look like text any more, it looks like blurry line on the screen, and 10 point isn't much better. I recommend thinking in terms of 12 point text being your body text size at minimum, and larger than that for headlines and sub-heads.

But more importantly, use relative font sizes like ems to define your font size. Then your readers can use their browsers built-in zooming functions to increase the font size and not affect how your site looks. If you don't use a relative font size, your site text might not zoom at all or zoom poorly in relation to the rest of the content, which will destroy your design.

I like to make it easy for myself, so I always set my ems so that they are equivalent to 10px (on most computers) by adding the style:

body { font-size: 62.5%; }

To the top of all my style sheets. This sets 1 em to 62.5% of the base font size or 10px. Then I can easily create my text sizes in multiples of 10. For instance if I want my body text to be 12px, I write:

p { font-size: 1.2em; }

Search Related Topics: fonts font sizes web typography

Create Usable Links

Links are how people get around on websites, but if your links are hard to understand or hard to click on, seniors won't be able to use your site. Some things that make links difficult include:

Font size—just like with regular text, smaller font sizes can make links harder to see and click on. One way to make your links more accessible to seniors is to make them slightly larger than the surrounding text. For instance if your body text is 1.2ems, you can make the links 1.25ems or 1.3ems to make them stand out more. This also makes them easier to tap on mobile devices.
Colors—Link colors that don't stand out from the design may make your minimalist designer happy, but if people can't see the links, they won't click on them. Using standard link colors like blue for links and purple for visited makes them easier for seniors to find. But if your text is already blue, then choose another color.
No underlines—Most people are used to links having underlines at this point in the web industry, and as much as we designers might hate them, they do make the links stand out more. In fact, many seniors won't click on links that aren't underlined, even if they believe that they can, simply because they have been trained to think of links as underlined text.
Images, especially small ones, as links—It's okay to use buttons and other images as links as long as you make it very very clear that they are clickable. But if you're using a tiny icon as your link, remember that dexterity decreases as you get older, and trying to move a mouse to hit a tiny spot can be very frustrating, even for your younger customers.
Moving targets—Drop down menus are popular because they get much of the navigation out of the way, but they also hide that content such that many customers don't even know its there. Plus if the design moves, it can be difficult to hit that target with a mouse.

Search Related Topics: links a html tag anchors

Consider Iterative Design Rather Than Drastic Redesigns

Most people don't like change, and drastic redesigns can affect how your readers are able to use your website. By staying consistent in your design, navigation, layout, and styles you can help your senior customers feel comfortable and stay clear on what they are doing on your site.

Iterative design changes help all your customers, not just seniors, by making small changes that may amount to a major redesign over time, but give people the chance to follow along rather than simply getting lost. In the study the Nielsen group did half of the seniors in the study keep lists of steps and instructions for how to use the websites they visit. I know from watching my parents and other seniors that this is very common. But if your site changes drastically, especially things like navigation and the information architecture, these steps become invalid. And many people will simply give up rather than try to learn a new design.

Don't Forget to Visit the Site

If you have any questions about the content of the newsletter or web design, HTML, CSS, and so on. Please don't hesitate to reply to this email. Here are some of the most common questions I get asked every week: