UsableWebb

To ensure users don’t have trouble downloading documents (such as Word files or PDF’s), follow these guidelines when naming files to be uploaded and used on your Web site.

An example of why this matters

Together Rx Access offers press materials in Word format only. The Word files at the link below contain spaces in the file names, try opening these using Internet Explorer. After you open the file in IE, click the back button.

http://www.togetherrxaccess.com/Tx/jsp/about_press.jsp

Did your PC freeze up? I tested this on three Windows XP computers with IE 7 and my machine froze each time when I tried to use the back button to navigate back to the press materials page.

Below is a paragraph I found on the home page of a popular medical association.

Before: As XYZ association keeps tabs on persistent issues with health plans that impede your ability to care for patients, a few have come to the forefront recently. In response, we’ve created new letter templates for our members that should simplify the process of communicating these issues to health plans. Among other things, the letters address fair payment for immunizations, group visits and mental health services. Easy to download from our Web site, these templates were designed to help you make your practice less about the process, and more about the patients.

I’ve rewritten the paragraph (below) to be more web-friendly.

After: In response to your requests, we have created templates to simplify communication to health plans regarding issues that impede your ability to care for patients. The templates address fair payment for immunizations, group visits and mental health services.

More information:

• Plain Language: Wordiness Made Spare
• The Seven Qualities of Highly Successful Web Writing

Web site features and functionality continue to grow, making it important to carefully consider and display only the most relevant feedback to your users.

I came across this example when trying to find a service to update my status on various social networks. To help uncover the problem and the solution you must understand how your application will be used.

This example discusses the default link or trimming behavior on HelloTxt.com and Ping.fm, popular web status update services. Link trimming is important because many micro-blogs, such as Twitter, Yammer and Facebook limit your post to about 140 characters.

HelloTxt.com provides no indication they will shorten links automatically when posted.

If you have shortened the link or you’re posting a short link, the hellotxt.com link (posted on Twitter above) may be longer than your original link.

Ping.fm provides relevant user feedback by indicating links will be automatically trimmed. You can disable Ping.fm link shortening by putting an asterisk in front of the desired link.

Use tools such as Mozilla Firefox and the Link Evaluator extension to quickly check all links on a given page. Another way to check links is to use Firefox or Internet Explorer 7, and hold down Ctrl ( on Mac) on your keyboard as you click each link. The new links will open in tabs of the current browser window. Quickly flip through the tabs by pressing Ctrl-Tab (or Tab) on your keyboard, to close a tab press Ctrl-W (or W).

The urge to insert the phrase “click here” or “more” is somewhat common among content contributors when creating links on a page. Non-descriptive link text makes your site difficult to scan and causes accessibility and search engine optimization (SEO) issues. Replacing the phrase click here with a meaningful word or phrase (which makes sense out of context) will make your site more user-friendly.

Example 1
Before: For the latest news, Click here.
After: Read the latest news on Medicare Bill (HR 6331).

Example 2
Before: To download the registration form, click here.
After: Download the Spring Fling Registration Form (PDF file).

More Information

• Trigger words – users love ‘em!
  
• Don’t ‘click here’: writing meaningful link text
• Don’t say “click here” not everyone will be clicking

A common goal of usability and user-centered design is making the desired action as clear as possible.

The first thing you’ll notice about the webcast player page (below) is the Download Player/ System Requirements stand out nearly as much as the desired action (viewing the webcast).

Before:

To solve this:
I moved the download player links below the System Requirements & Settings. I also removed a lot of unnecessary copy from the page. If there are more specific requirements, they could be listed along with the other bullets or added to the help section.

We’ll discuss click here as link text in a separate post. For now, resist the temptation to link click here text. The linked text should state what will happen when someone clicks.

After:

Your thoughts?

We will focus usability examples and ideas for improving user experience on the web. Posts will include a specific examples with before and after screen shots, and explanation of the changes.