Snacksized Usability Tips #1

Lately, I’ve focused a lot on usability aspects of web design. With my recent articles, discussions have been leaning towards the why of usability, rather than the how.

I used to do me-centered web design. It was the portfolio-era of Flash websites, and the result was a stale product that was never being updated. This was okay, because I had no intention of doing anything else.

Usability allows for such sites. Because usability is not a set of rules you have to follow strictly. It is merely a set of guidelines that focus on the end-user, rather than yourself. As such, before you dismiss usability, think about the target audience for your website. Think about who will actually use it. Once you’ve decided on this, you’ll know what guidelines you should follow and what guidelines you should dismiss.

In the end, usability doesn’t mean useit.com and blue, underlined links. Thus, I present to you: Snacksized Usability Tips #1!

1. The title of your index page should be “Site name – Site description”

End-users will bookmark websites they like. If you have an overly clever <title>, such as :: WeLcOmE tO mY wEbSiTe ! ::, the bookmark has no indication as to what hides behind it.

If properly named, on the other hand, it will alphabetize itself properly, and clearly indicate the name of the site (which is what the user will scan the bookmarks list for), and a short description to remind what it was all about. For instance, noscope | snacksized portions of pointless stuff.

An additional benefit of a good <title> is that Google will treat you slightly better when someone searches for your site name.

2. Avoid frames at all costs

Frames prevent the use of good bookmarks, that is – deep bookmarks that take the user to what they tried to bookmark.

They complicate proper printing, and shrouds the use of the browser “back” button.

Additionally, Google doesn’t like frames, and you’ll rank lower than other pages with the same content.

3. Avoid popup windows

Popup windows are as intrusive as a salesman that enters your house without asking. They serve no technical purpose other than to let the designer have limited visual control. The price of this is rarely worth the effort, as the end-user will most likely be reminded of noisy popup advertisements. In addition, popup windows are usually presented without address bar, status bar or browser controls. As such, the end user has no idea what page their looking at, how to get back to where they came from, or when the page is done loading.

Instead, relinquish control and give more power to the user. Use popup windows only for tertiary information that would logically and traditionally be presented in popup windows. For instance, contextual help on an item. Additionally, it is a good idea to let the user know that clicking a link will open it in a popup window.

At the very least, make sure the status bar is present (preferably also the address bar). Finally, when opening the popup, make sure it’s small and by god don’t set focus or position of the window using JavaScript—you’ve already intruded enough on the client system.

4. Use default GUI widgets

Whenever possible, use default GUI widgets in favor of custom designed widgets. The GUI-widgets or Graphical User Interface widgets refer to scrollbars, push buttons, drop-down boxes, checkboxes, radio buttons etc. If you leave the appearance of these alone, they will usually look native to the users operating system, and thus get the benefit of already being known. In other words, the end-user will know, by heart, what it is they do.

5. Your search box should have a white background

When users are looking for something particular on your website, they’ll scan the page for a white rectangle. If you’ve gone and styled your search box with a special border and colored background, they won’t recognize it immediately. If they’re impatient, they’ll simply leave without searching at all. As such, leave the default style of the input box alone, or at the very least, make sure the background is white.

Additionally, search boxes are usually placed topmost or in the top right corner of a page, so this is where the user will look for it first. A wide and spacious search box encourages the use of more than one search word. Finally, the search button should signify the action being taken.

As such, “Search” is better than “Go”. If you do decide to go with “Go”, or perhaps a graphical search button, make sure that you describe that the input box is indeed a search box. For instance, you could write “Search website for…” right above the input box.

6. Logos are usually placed in the top left corner of the page

On most websites, the company logo is placed in the top left corner of the page. This is, in fact, so prevalent that it is easily a convention. Note, this applies only to the western world, not the Arabic world where the direction of reading is from the right to the left. See arabia.com for an example.

If you place your logo in the top left corner, the end-user will assume that’s your company logo. Additionally, this logo usually links to the index page of your website, a functionality the end-user will also know by experience.

If you do decide to do it otherwise, then at least consider providing a link to “Home” or “Index”, preferably towards the top of your page.

7. Hyperlinks are usually blue and underlined

This is neither a rule, nor a guideline, it is a fact. Default hypertext states that hyperlinks are blue and underlined. This is a convention any web surfer will know.

This doesn’t mean your links have to be blue and underlined, but it means that your links should clearly visually distinguish themselves from regular text. Visited links should have a clearly different color from active links and not yet visited links.

Underlined links are definitely the most readable design of a hyperlink, but if you choose not to have underlined links, consider having the links colored blue, weighted bold, or have a dotted or dashed underline. CSS Stylesheets allow you to have several different styles of links. With this in mind, it is a good idea to limit the different styles of links to a maximum of two styles for hypertext, navigation excluded.

8. Good links have good titles

When writing hyperlinks, never use link text such as “click here”. Google crawls your page and only reads text, and trust me, it’s already got plenty of hyperlinks entitled “click here”. Not only does this confuse Google, but it confuses the end user.

Instead, wrap your links around text that is descriptive of the action being taken. Also, consider using the title="Hyperlink Title" attribute. This attribute will show a tooltip-like description of the link on all modern browsers. On older browsers, this attribute is simply ignored.

Choose what works for you

Keep in mind, that the guidelines suggested here are based on behavioral studies conducted by various usability advocates. They merely state what worked best on the largest percentage of test subjects. Keep this in mind when you choose what guidelines you’ll follow, and what guidelines you’ll ignore. But when you do choose to ignore a guideline, let that be a conscious choice based on what will work for you and your target audience.

2 thoughts on “Snacksized Usability Tips #1”

  1. John says:

    Anytime I fiddle with any of my sites and/or blogs, I keep one thing in mind: laziness. I’m as lazy as any other internet surfer, and I won’t read something very long unless it has my interest. Likewise, when I scan a page, my eyes are trained from a decade of surfing to hit links of interest (it seems the internet is more about providing links to information than information itself, sometimes…). I utterly hate the “click here!” links. That forces me to read the sentence or two before and after it, which I seem to be directly opposed to doing. Thanks for mentioning a pet peeve of mine! 😉

Comments are closed.