UX for Senior Users

Accessibility helps makes your apps usable to users with different abilities. When you have older users, accessibility matters. You want their user experience with your app to be easy and memorable.

Two seniors using a tablet
Photo by Nicole De Khors from Burst

Many senior users have difficulty using apps and websites. The fonts may be too small, the colors make it hard to read and navigation isn’t obvious. How do you make the UX for older users better?

Make it readable

Start by choosing fonts that are easy to read. Descriptive fonts can be challenging to read. Use them sparingly.

Font sizes are tricky to get right. If you choose a size that is too small, you text becomes too hard to read. Make it too large and users can’t won’t read it as well. What looks good with one font won’t work for another. CSS-Tricks explains how to resize your fonts.

Use color and contrast to help guide your users

Color and contrast can help user perform tasks, keep track of where they are and pick out links from text. Choosing the right colors for you users can be challenging. Some color combinations are difficult for users with vision problems. The Web Accessibility Guidelines v1.0 explains Contrast and Color. Plus, it gives you a sample color palette to choose from.

Make things easy to click

Older users can have trouble clicking on buttons and links. You want to make the big enough so they can click on them.

Use UI patterns that are easy to remember

Establish a design style that is consistent and easy to use. Use icons, fonts, text, photos and other design patterns to help reduce the learning curve. Include breadcrumbs to help users keep track of where they are.

Learn more about UX for Seniors

5 Tips For Improving Your UX Writing

How can you make your users’ experience better? By using UX Writing, also known as microcopy. It is the small bits of copy that goes unnoticed. When UX Writing is good, it helps guide your users through the user interface of your app or software. They can get things done quickly and easily without frustration or support calls.

5 Tips for Improving UX Writing
Photo by Shopify Partners from Burst

Where do you use it?

You’ll find microcopy everywhere in your interface. Typical uses are:

  • Buttons
  • Headings
  • Success and error messages
  • Form labels
  • Pop-ups
  • Instructions
  • Tooltips
  • Navigation menus

How do you improve your UX Writing?

1. Keep it short and concise

Good UX Writing is short and concise. It helps to guide the user through their task. People scan words when using an app or website. Make it easier for them to understand what is happening.

2. Use simple words

Avoid difficult, technical terms. Use short and simple words. Include action words like save, create or cancel. You want your copy to be clear and easy to understand.

3. Use structural element to make it easier to read

Depending on your copy, you may need to add structural elements to make it stand out. Use a combination of color, icons and bold or italic text for error messages. Headings, numbered or bulleted lists and sidebars for other important information.

4. Edit

No matter what you write, editing makes it better. Edit your copy using a tool like Hemingway Editor to help make it readable and easy to understand.

5. Test

You want to get feedback from people who match your users. Your coworkers may miss things that your users might have trouble with. If they have trouble understanding something, you should rewrite it. Sometimes a different word makes the interface work better.

Find out more about writing good microcopy

How do you reduce website bloat?

Why is my website slow? It is a common question developers, designers, bloggers and even your visitors ask. No website is immune from having speed issues.

How Do You Reduce Website Bloat
Photo by Farzad Nazifi on Unsplash

What causes website bloat?

How you designed and built the site affects its speed. Things like images, videos, CSS and code can impact your site. Even your server can affect how the site performs.

What can you do to speed up your site?

1. Optimize your images

You may be using images created in file formats that aren’t designed for the web. They may be large in file size as well. You can use an optimize tool to shrink the file size down without noticeable loss in quality. When you optimize an image, it loads faster on your site.

2. Get rid of unnecessary images

Check your web server for unused images. Unused images can affect user experience and performance of your site. If you aren’t using these images, delete them off your server. WordPress users can clean up their images using plugins or manually. If you have Windows, you can use Powershell to find and remove used images.

3. Optimize your videos and other files

Large files can slow a web site down. Files like videos or PDFs get quite large. You can optimize them before uploading. For PDFS, you can use Adobe Acrobot Pro’s PDF Optimizer to make them faster for the web. With videos, you can use a video hosting service like Vimeo or YouTube to host your videos. Then, you can embed them on your page.

4. Optimize your CSS

CSS files can get large and unruly after a while. Optimizing and managing them can be a challenge. It can be hard to find unused styles. You can use a tool like Helium CSS to find them. By getting rid of unused styles, you can reduce the size of your CSS.
Some of your styles are used more often than others. Print styles are used when a page is printed. You may want to separate them into their own file. With frequently used CSS, you may want to consider using inline styles instead. Before uploading your CSS, you can use a minifier to reduce the amount of whitespace it uses.

5. Check your code for speed issues

Are you using old code? If you are, you may need to rewrite, refactor or even replace it. Look at older code and decide if you need to keep it. If not, remove it.

6. Review the content of your page.

You may have too many items on your page. Do you have old or outdated content? If so, you can remove them. Review the rest of the items on the page to see if you can remove some content and still achieve the same goals of the page.

Summary

Preventing website bloat can be a full time job. By changing your development process to include optimization. You can prevent it from getting slow.

Creating notification bar for emergencies and announcements

What is a notification bar?

A notification bar is a horizontal bar that appears at the top or bottom of your website. You can display emergency messages or announcements to your visitors. Messages about closings, updates, news or sales offers.

Create a Notification Bar for Website
Image by Gerd Altmann from Pixabay

How can you add a notification bar to your website?

It depends on how you want to do it. If you like to write code, you can make it yourself with HTML and CSS. If not, you can add a plugin or a third-party tool to your website.

1. Make your own

Are you using Bootstrap? Bootstrap has alerts. You can create your own bar with Bootstrap alerts. If you are using a different CSS framework, you can write your own.

See the Pen
Alert Animation (feat. Material Icons by Google)
by Ryan Young (@rcyou)
on CodePen.

2. Use a plugin to display message on your WordPress site

If you have a WordPress website, you may not want to edit your theme. Instead, you can add a plugin. WPBeginner explains how to use the plugins Optin Monster or Simple Notices for displaying important messages on your blog. If you are already using the plugin Advanced Custom Fields, you create custom emergency messages with it.

3. Use a third-party tool

You can choose to use a third-party tool like Getsitecontrol. They offer different ways of creating announcement bars for your website. You can add a sticky announcement bar or a slide-in banner that appears from the side.

Emergencies can occur at any time. You need to have a way of communicating with your customers and staff. Whether you make your own or use a tool, you can ensure that everyone can keep up to date on what is happening.

How to Pick Colors for Better Readability

Have you thought about the readability of your website? The colors you choose can impact how readable people find your website to be. If people can’t read your website, they may become frustrated and go somewhere else. How do you choose the best colors? By testing your color combinations for contrast.

How to Pick Colors For Better Readability
Image by vixrealitum from Pixabay

What is color contrast?

Contrasting colors or complementary colors are from different segments of the color wheel. For example, red is a warm color and blue is a cool color. They appear on different segments of the color wheel which makes them contrasting colors.

By using contrasting colors in web design, you provide enough contrast between content and background so that your website is readable to as many people as possible. You want to make sure your buttons, body text, logos and other content has the right amount of contrast.

1. Choose a color palette

For some projects, you may have a pre-existing color palette to work with. If you don’t, use a tool like Material Palette or Colormind to choose a color palette. Or choose from these 90 Accessible Color Classes to build your palette.

2. Find a color contrast analyzer

You can find many color contrast testing tools on the web. Pick one that works for you. Here are a few to test out:

3. Pick your primary colors

Is your theme light or dark? You want to pick colors that work best with the types of colors for your theme.

4. Choose colors for the body text

You may need more than one color for the body text. Each color can be for a specific task like headers, body and sub-headers.

Buttons and links tell users that you want them to do something. You want to pick colors that draw attention to them and easy to read.

6. Establish color combinations

You may need to add error messages, calls to action or other areas for users to pay attention to.

7. Check your results

After you build your website, use the accessibility checker in the browser for any additional issues. If you find problems, use a contract analyzer and retest.

Learn more about readable colors