In my last posting (Usability Basics: Keep the User Informed) I talked about how the interaction with other humans differ from interactions online because of something called a feedback loop- the ability we have of constantly assessing the verbal and non-verbal communication that is happening.

Helping a user prevent errors is another way of closing that feedback loop online to create usable sites. In the physical world we come up against real boundaries that signal to us about potential problems. I don’t need messaging on the side of an eight ounce glass telling me not to put more than 8 ounces in it, otherwise I’ll have a mess- I can see how much the glass will hold. Online we’re not always privvy to such physical cues, in which case we do need assistance via messages, instant feedback, or imposed limits in order to avoid problems.

One of the most visible ways this usability principle is applied online is with creating passwords. How many times have we created a password, only to be presented with an error telling us that we didn’t do it right. Oh, you forgot to include a number, or capital letter. Preventing errors is all about being upfront with users and giving them (us!) the information we need to avoid extra clicks, extra time, more page reloads, etc. Let’s look at Drupal 6. This version uses messages to help me prevent making an error when creating a password. The site checks the password on the fly, telling us how many characters we must use, recommendations on the types of characters to use, as well as providing a “strength” meter to show us how well we’ve done before we submit the form for procesing. Nice.

Another way sites are endeavoring to help prevent errors is through the use of Ajax to validate field values and provide instant feedback. Kayak.com does a good job of helping users prevent errors. When searching for a flight I begin typing in the name of a city and the site returns a list of potential matches. This actually satisfies two usability principles- helping me to prevent errors by displaying only valid city names and ; and it relieves me from having to remember the three letter airport identifier. Good job.

Using imposed limits to help avoid errors is very common when selecting calendar dates. The Wachovia website uses text fields with the proper date format listed below the field. This is better than not having any format information, but I can still enter an improper date and submit the form. A better solution is to force the user to select a date from either a drop down list or via a calendar widget. This ensure the date is entered correctly the first time and helps the user avoid making an error.

Helping prevent errors is communicating to your site visitors about rules they must follow, boundaries they must operate within, and values that are expected to ensure they can keep moving forward. This is one important piece of creating usable websites, designing positive interactions, and keeping processes as transparent as possible.

When we interact with another human (hey, remember those?!) we’re in a constant feedback loop- we can see his or her facial expressions, hear variations in voice tonality, observe changes in body language, and even anticipate responses based on what we know about his or her personality. Interacting with websites (or software) is vastly different. Unless a clever engineer or smart usability consultant was involved the interaction can seem more like talking to a brick wall than a modern communication medium. 

In the old days of green screens and modal systems no news was good news. If you executed a command in unix and simply got a new command prompt then you knew all was well. But in modern times when users can do one of many differnt things (and many of whom aren’t quite as technical as one needed to be in days of command-line computing) feedback is essential.

One of the basic tenants of usability is the principle of keeping the end user of the system informed about the current state of the system. This means that the system acknowledges our actions through visual or audbile responses. It can be a subtle response, but a subtle response is better than no response. Let’s look at a few examples. 

The Brookings Institute provides public policy research. Their website is very nice looking and creates a high sense of credibility. However, when I navigate to the various sections of the website- like moving from the home page to World, or Economy- the site provides no feedback that I’m in another section.

Contrast this to the Council on Foreign Relations website. When I click the navigation item for “Think Tank” I can see that the tab stays highlighted and the breadcrumb trail shows “Home->Think Tank”. Through these subtle cues I understand that I’m in a differnt part of the site, even if the page structures are the same.

What other ways should a site communicate with an end user to keep him or her informed? 

 - When I login, welcome me and show me my username

 - When I move to page 2, show me that it’s page 2

 - When I submit a contact form, tell me it’s been successfully submitted

Keeping the user informed keeps him or her engaged in the site because it them moves from a one-way conversation to true interaction (inter- between). When the user understands what just happened he’s more likely to know what to do next. 

Is your website talking back to you?

It wasn’t until after I got my Kindle, Amazon’s electronic book, that it dawned on me- “Why didn’t Amazon do this years ago?” Considering they’re one of the biggest channels for moving books one would have thought selling a device that taps into their distribution channel as seamlessly as the Kindle does would be a no-brainer. Eventually Amazon had its “ah-ha” moment, probably after witnessing the popularity of the iPod and the iTunes music store.

While electronic books have been around for years it seems they never really took off. Factors contributing the slow adoption most likely include limitations of the display and battery life but moreso because the distribution channel hasn’t been seamless. First one had to find a book in an ebook format and then transfer it via computer to ebook itself. What makes the Kindle unique- and not just a collection of circuits and memory- is the display technology and the ease in which books can be purchased and downloaded.

The display uses “electronic ink” as opposed to a backlit LCD. This makes reading- the primary function of the Kindle- easy. At 167 ppi this is more than the typical computer monitor. I’ve used the Kindle outside in bright light and it’s just like reading a printed page. The device itself is about as big as a modern paperback and is lightweight and easy to hold. It comes with a leather case, but isn’t secure in the case, so I usually take it out for reading, for fear of it slipping out.

There are also a handful of features built into the Kindle that make experience of reading better. I’m able to adjust the font size to one of six levels for any text I’m reading. This is a great boon to accessibility for those with visual impairments. And while I’m reading if I come across a word I don’t know I can scroll to that line, click the wheel and selec the Look Up option. The Kindle has a built-in dictionary and will display a page with each unique word and its definition. Additionally I can “highlight” text, clip portions of text and dog ear pages.

The second remarkable technology is the built-in wireless. This isn’t wi-fi, but what Amazon calls Whispernet- Sprint’s national high-speed (EVDO) data network. What’s so special about that? Well, first, it’s FREE! Second, and more importantly, is that the Kindle can connect to the Amazon store wirelessly and download a book in about a minute (of course I pay for the book, but not the connection).This untethers the Kindle from the computer to transfer books and creates the seamless channel from distribution to consumption. Besides connecting to the Amazon store wireless I can also connect to the Internet wirelessly. This isn’t a feature that they want to promote necessarily, since the very basic browser is within a menu item called “Experiemental,” but it’s there and with it I can browse sites, blogs, and more.

Because the Kindle was able to oversome those three big hurdles in adoption (availability of books, transferring books to the device and quality of display) I think it has shot at becoming ubiquituous. It does what it’s supposed to do- deliver books and make them easily readable- and does it well. Of course, the Kindle does have some quarks that will hopefully be addressed in future models. For instance, I’m limited as far as the display of images (with only 4-level gray scale), but again, this device is for reading. The chiclet-like keyboard also isn’t conducive to lots of typing, but by using a service like Google Reader its’ possible to aggregate various blogs and avoid having to do much typing.

The interface is very simple- basically a list of the items on the Kindle that I can read. And the controls are equally as simple. The main naviation controls are physical buttons (more like paddles) for the “Next Page” and “Previous Page” functions, placed on the right and left sides of the device, respectively. Then there’s the wheel. I’m intrigued by the wheel because, while it does what it should, I can’t help but wonder if there was a better way. The wheel is like a jog wheel- it scrolls up and down and also acts like a button in that it can be pressed. Since the screen is not a touch screen the viewer needs some way of selecting a book to read, a link on the browser page, or the font size to be displayed.

Above the wheel is a display column, separate from the main Kindle display. This columnar display houses a silver marker that moves up and down with the scrolling of the wheel and aligns with the various menu options. When it’s placed next to the menu option you want you click the wheel to select it. This also goes for links on a web page. If there are multiple links on a web page a menu will appear with a list of the optional links and one uses the wheel to select the specific link. Not extremely effecient, but not horrible either.

Now that I’ve used the Kindle for two months I’m still really pleased with its performance (with the wireless turned off the battery really lasts a long time), convenience (books, magazine, and blogs at my finger tips), and overall ease of use (I turn it on and begin reading). I’ve read reviews where customers think the Kindle should become more of a “mobile device.” Frankly, I don’t wanted a bloated device where people can cal/email/IM/twitter/blog/etc me while I’m reading. For those frenetic multi-taskers who have the attention span of a gnat then read away on the iPhone. I’m a happy Kindle customer who will continue to purchase books through Amazon, read for pleasure, and appreciate the times when I’m not ubiquitously “connected.”

I’m only going to focus on the “call to donate,” but the three criteria they used are:

1. Does the Home Page Effectively Introduce the Organization? This includes elements like branding and effectively communicating who the organization is and what they do.

2. Does the Home Page have a Compelling Call to Donate? This includes the placement of the Donate link(s) and also appealing to various users types (hmm..sounds a bit like Persuasion Architecture).

3. Does the Site Use Effective Layout – Both Content Allocation and Design? How well does the site focus the user’s eye? Does it have engaging and well organized content? Appropriate and appealing design for your audience?

With these three questions in mind it’s possible to actually make some tweaks to a site that can help it achieve its goals (readership, usability, donations, etc.) Taking the second criteria of a compelling call to donate I looked at a few sites of non-profits to see how they fare.

Site 1: Montana Conservation Voters

You can see from their home page that there isn’t any one element that stands out or has prominence over another. As as far as the donate button- well, it’s a link in the header entitled “Want to Contribute?” :-\ Compelling? Eye catching? Want to contribute? Um. No.

Okay, I’ll bite. I clicked the link and the donate page isn’t half bad (nor is it half good). The good part is that the form for donating is right here so the site visitor doesn’t have to go any further. The bad part is the rather bland text at the top of the form. It explains (in one sentence) what the contribution is for; however, how about some examples of where the money goes, what exactly has been funded with it and the difference it’s made. Just a thought.

Site 2: Creative Commons

This homepage has a lot of good elements, but as far as donating it falls short. First, there is a link in the global navigaiton called “Support.” When I thnk of support, I think of online help, forums, or other supporting materials. This might not be obvious and actually confuse visitors who are looking for genuine support information. I recommend calling it like it is and put a Donate link the global nav, or i the header along with the Search and License options.

Second, when I do click the Support tab the option to give is now called “Donate.” Besides the change in terminology the visitor must now click the Donate link, further slowing him down and providing ample opportunity to click something else and forgo the donation altogether.

If I actually do click on the Donate link I’m taken to another page that lists suggested amounts and show icons for the gifts I can potentially receive for giving at certain levels. Cute.

This page does tell me Creative Commons is a charitable organization, offers me alternate methods of giving, and provides options for one-time or montly gifts (presumabley monthly donations and not gifts in the same sense as the gifts listed on the page). Good information indeed, but it’s missing something critical- What do my donations do? Where does the money go? What gets funded? Hmm. For some types of visitors this information will be critical.

Now I’d like to look at a site that’s doing it right….

Yikes. I just did a search for “aids charity” and looked at ten websites. Only one of them (http://www.aidshealth.org) had a semi clear and somewhat prominent Donate call to action. Unfortunately clicking on the donate button took me to a very text heavy page with another donate link; clicking that took me another page; and clicking that donate link opened another browser window. *sigh*

For those non-profits who may be reading this here are few things to keep in mind:

1. If you rely on Donations make it prominent. Ain’t no shame in asking!

2. Use plain language- donate, contribute, give. Don’t mask it behind a euphemism.

3. The Donate link should link to the donation form itself- why burden the giver with extra clicks?

4. Talk to the various types of givers (ala persuasion architecture): What will the donation be used for? How will it help? Where is it going? Who else has donated? Why is it important to you? To me? Resolve any questions now to make donating easier.

Clearly there’s much work to be done in the world of non-profits to strengthen the call to give. In these days of economic uncertainty it’s even more crucial to do all we can to ensure the good work these organizations are doing can continue. We’re here to help.