Steve Krug’s fantastic introduction to web usability, Don’t Make Me Think, begins by presenting two views of website content:

1. The Website is a novel - It is carefully designed to be read and understood completely. This is how the website builder thinks.

2. The Website is a billboard - It will be glanced at quickly, stripped of the required information, and forgotten as soon as the visitor moves on. This is how the website’s visitor thinks.

Krug asserts that as designers, we need to build better billboards.

It can be a tough step for a designer to take. We tend to labor over design decisions like font sizes, colors, and placement of elements on the page. It’s painful to think that the hours spent crafting an aesthetically pleasing website will go unnoticed during the three seconds that a visitor spends on it.

However, that is the reality that we live with. To become better designers we have to understand more than color wheels and grid layouts. A good web designer needs to be concerned with interaction as much as presentation.

Just now I had an experience on a PopSci.com that made this point very clear.

I arrived at an article about videogame technology through a link on Digg. The article is presented as series of images with accompanying text.

I briefly glanced at the image of a computer chip and decided to save that for later. My eyes moved quickly to the right to find the article proper. I read through the text under the heading “1. Processing Power.” The numbered heading told me to expect more sections. My brain subconsciously stored that away.

When I got to the end of the first section I was hooked.  I quickly clicked the “next” link and the page disappeared.

Wait, what? Where did that interesting article go? I pulled the page up again. Looking closely, my mistake immediately became clear. The “next” link I thought I clicked was actually a “X Close this Window” link.

It was the right color (orange) and in the right place (lower-right of the article) which turned out to be just enough information to make a “click commitment.” Experience on the web has taught me that multi part articles tend to have their navigation in that spot. That was a mistake.

I completely missed the “Previous | Next” links that appeared above the image. Those didn’t seem to apply to the article anyway. And I was initially confused as to why the article would have a “Close this Window” link anyway.

Further investigation on the PopSci.com revealed that the article appears in a pop-up window when accessed from their homepage. The Digg link made it appear in a full browser window. That distinction does very little to affect the layout of the page. However it had a huge impact on how I interacted with the it. I don’t normally expect a normal web page to offer me a close link in the middle of an article.

You may be tempted to write it off as user error and go about your business. However, in the real world these split second judgements occur every time someone visits your site. In this case it spawned a blog post. A less positive outcome would be me giving up when the site disappeared and moving on to one of the other myriad things demanding my attention. 

Your job as an interaction designer is to help your visitors fall into the pit of success. Make it easy for them to succeed when they are on your site. Succeeding can mean finding a piece of information, posting a comment easily, updating a personal setting, or going to section two of the article they are reading.

Filed under article, design, opinion, website.
You can follow any responses to this entry through the comments feed. You can leave a response, or trackback from your own site.

« New Feeds: September   |   Full-text feeds are working and why you should care »