UsableWebb

Providing highly relevant user feedback

Garrett Nafzinger — Tue, 16 Sep 2008 00:55:05 +0000

Web sites 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 realize the problem and the solution, you must understand how your application will be used.

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

mg class=”flickr-medium” style=”border: 1px solid black;” src=”http://farm4.static.flickr.com/3174/2836265453_5069b93b4f_o.png” border=”1″ alt=”hellotxt.com post window” />

In the screenshot above, HelloTxt.com provides no indication they will shorten (or trim) long links automatically when posted.

If you have shortened the link or you’re posting a short link to begin with, the resulting hellotxt.com link (posted on Twitter in screenshot above), is often longer than your original link.

Ping.fm provides relevant user feedback by indicating links will be automatically shortened, before posted. You can disable Ping.fm link shortening by putting an asterisk in front of the desired link in your post. The tidbit about the asterisk, is found in posting tips.

Periodically check your site for broken links

Garrett Nafzinger — Wed, 03 Sep 2008 14:48:16 +0000

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).

Click here and other meaningless link text

Garrett Nafzinger — Tue, 17 Jun 2008 04:06:54 +0000

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

Garrett Nafzinger — Mon, 09 Jun 2008 02:35:28 +0000

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?

Welcome to UsableWebb

Garrett Nafzinger — Sun, 08 Jun 2008 21:30:45 +0000

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.