Best practices for naming documents/files for web

Posted Apr 8th, 2009 by Garrett Nafzinger in in Best Practices, Quality

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.

Remove spaces from file names

(hyphens are okay to separate words)

Some web browsers may not recognize the spaces. Spaces can also cause links sent in e-mail to break.

  • Marketing Brochure.pdf
  • should be changed to:
  • MarketingBrochure.pdf

Remove any non-alphanumeric characters

(hyphens are okay to separate words)
Non-alphanumeric characters cause problems in web browsers and e-mail programs.
  • New Brochure #1.pdf
  • should be changed to:
  • NewBrochure1.pdf

Simple is better

Descriptive file names help users identify file contents (some users may stumble upon your file via search). However, overly descriptive file names create long web addresses.

  • Letter From a Reader on March 15.pdf
  • should be changed to:
  • LetterFromReader.pdf

Be consistent and thoughtful

(use dates only when relevant)
If you have a weekly or monthly PDF newsletter, be consistent and thoughtful when naming your files.Use dates in your file name only when they are relevant to the content.

Use the following date syntax in file names: YYYYMMDD.pdf.

  • CompanyNews030209.pdf
  • should be changed to:
  • CompanyNews20090309.pdf

Following this date format will ensure your files are sorted chronologically in search results.

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.

Writing succinctly

Posted Dec 2nd, 2008 by Garrett Nafzinger in in Writing

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:

Providing highly relevant user feedback

Posted Sep 15th, 2008 by Garrett Nafzinger in in Usability

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 post window
HelloTxt.com provides no indication they will shorten links automatically when posted.

hellotxt.com post result on twitter

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 post window

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.

Periodically check your site for broken links

Posted Sep 3rd, 2008 by Garrett Nafzinger in in Quality

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 (Open Apple - cmd key 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 Open Apple - cmd key Tab) on your keyboard, to close a tab press Ctrl-W (or Open Apple - cmd key W).

Click here and other meaningless link text

Posted Jun 16th, 2008 by Garrett Nafzinger in in Usability

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

Making the desired action more apparent

Posted Jun 8th, 2008 by Garrett Nafzinger in in Usability

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:
CaringBridge Web site 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:
CaringBridge Web site After

Your thoughts?

Welcome to UsableWebb

Posted Jun 8th, 2008 by Garrett Nafzinger in in Site

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.

Categories

Recommended sites

Google Friend Connect