Usability Beyond Design: Turning a Great Web Design Into a Great Web Experience

When I first started programming websites nearly 25 years ago, I was privileged to work in a small web team at a financial services company. We were eight people, responsible for the entire web experience for one of the largest mutual fund complexes in the country. Along with another programmer, two writers, two designers and a copy editor, we had an information architect devoted to improving our site’s structure and usability. It was from him that I realized how many things impact usability beyond visual design.

In the nonprofit world, all dimensions of usability are more important than ever. While a good visual design creates a strong impact on potential donors learning about your organization and taking action, looking beyond the visual design creates a broader impact, by considering the user’s experience beyond what they see on the page.

Broadly speaking, usability is the discipline of reducing the friction between your visitors and the goals of your website. Visual design is a huge component of usability. Here are a few factors that can help make your visitors’ experience that much smoother.

Your URL Is Your Business Card

Your website’s URL is the first experience your user has with your website. Think of it as a business card. Beyond the site name, the quality of the URLs for pages on your site can make them easier to share, as well as increase the overall professionalism of your site’s appearance.

While WordPress and many other content management systems create readable URLs by default, others provide cryptic locations such as “mysite.com/q=node/4.” While this works, readable URLs make it easier to share specific sections and pages in printed literature. They also make the entire browser a part of the experience, as the URL in the location bar matches what the user is seeing to add a level of coherence to that experience.

Once you create a URL, avoid changing it while it is relevant, the same way you would avoid changing a phone number on a business card. Someone somewhere has it coming up as a prior suggestion when typing your website into the location bar.

If your website is built as a single page application (SPA), you may notice that, even as you go from page to page, the URL might remain the same. SPAs require additional work to create URLs for each page of the application. If you don’t invest in this work, the only page available from a bookmark or printed material is the home page, which dramatically inhibits visitors from sharing your pages.

Use HTML to Define Your Content, Not Just Display It

While HTML can just be the scaffolding that your design hangs upon, it really shines when it actually defines the type of content it’s sending to the browser. When a page uses the proper HTML tags to define paragraphs headings and so on, the site naturally gets major benefits in search engine optimization and accessibility. Web crawlers from Google and other search engines view your page’s headings to get a sense of what is important to you. Proper headings also give visitors with screen readers a layout of the content on your page, so they can choose which sections they want to hear.

While most modern content management systems give you this functionality for the content you post, custom templates and pages may not have been built with the same focus on semantic HTML. By reviewing how custom sections are built, you can be sure that Google and alternative display devices receive the same quality output for your custom content as for your editorial content.

Consider Your Site From the Perspective of Visitors With Disabilities

One of the keys to considering usability beyond the visual design is considering usability for those who can’t take advantage of your site’s visual design.

According to a 2012 report from the U.S. Census Bureau, more than eight million people in the U.S. reported having difficulties seeing, while nearly 20 million people had difficulties with fine motor skills, such as lifting or grasping a pencil, a glass or a bag of groceries. Almost 33 million people with disabilities stated that they used the internet. A 2019 study from the UK found that almost 70% of users with disabilities click away from a site that isn’t accessible to them, and more than 90% of them don’t let the site owner know.

Several common accessibility improvements include:

• Using distinctive colors to indicate links and buttons, whether the mouse is hovering over them, clicking them or simply present on the page.
• Applying the same styling for focused elements as hovered elements, so that keyboard and mouse experiences are similar.
• Trying to use the site with only a keyboard. (This is especially important for designs that replace common form elements, like select dropdowns, with fancy HTML equivalents.)
• Using the appropriate HTML tags for functionality. Buttons are used for performing an action, such as submitting a form, while links are used for linking to another page or website, but both can be styled to look like each other. By keeping this distinction clear, visitors with disabilities can take advantage of how assistive technologies manage them differently. Sighted users can also take advantage of seeing where links will take them, while buttons don’t have that functionality built in.
• Inputting descriptive text for visual design elements. Examples include using “alt” attributes to images, as well as “title” attributes for icon-based buttons and links to give both sighted and visually impaired users clues as to what an image represents.

Most of these improvements can be accommodated within existing visual designs.

This exercise can be a heavy lift on an existing site, but reaps benefits for both people with or without disabilities. Visitors with disabilities feel welcomed to your cause. Visitors without disabilities benefit from more useful feedback for their interactions and easier form entry. Once that initial retrofit is complete, accessibility becomes part of the ongoing design process.

Consider Your Website’s Mobile Experience

Mobile experience can have an impact on your visual design, but it's often overlooked despite almost 30% of online donations coming from a mobile device in 2020. Especially as work-from-home culture expands, this number will undoubtedly increase as multiple devices are more readily available throughout the day.

Making a website usable on a mobile device means:

• ensuring that the site experience is responsive to the width of the device.
• that the most important actions are readily available near the top of the page.
• ensuring that actions are easily performed using fingers as well as mouse cursors.
• considering site performance on handhelds over cellular networks.

Most modern content management systems take this into account with their stock templates, but as templates are customized for your individual needs and your site expands beyond what the CMS provides, be sure this factor is still taken into account.

Keep Your Text From Stretching Too Wide or Squeezing Too Narrow

This can be a minor detail, but if your site includes many articles or online white papers, line length can make a difference to the comfort of your readers. While research indicates a wide range of ideal line lengths, most identify 60 to 65 characters per line, or 30 to 32.5 ems, as reasonable for most needs. (An em is a typographic measure, named after the width of the uppercase letter M.)

By keeping articles to this width, readers can read without having to scroll too much or expend additional effort tracking back to the beginning of the next line. (As an example, NonProfit PRO’s articles are 32.3 ems wide.)

The key takeaway from these tips is that usability doesn’t end with a good website design. By looking into topics such as URL design, content structure, accessibility and visual ergonomics, you can transform a great design into a great experience.