Over the last few months I've sat through dozens of usability tests run by design agencies. Clients have asked me to oversee the tests to make sure that the agency really puts their design through its paces. This is a good thing as it shows that usability testing is now becoming a mainstream activity in the design community. But many of the usability tests I've sat through have been so poorly designed that it's difficult to draw any meaningful conclusions from them. No wonder that Fast Company mistakenly believe that user centred design doesn't work.

Picture a usability test

If I ask you to picture one of these usability tests, you'll probably conjure an image of a participant behind a one-way mirror, with video cameras and screen recording software. Although your picture would be accurate, there's something missing: the hand of an experimental psychologist (or an experienced user researcher) checking that other factors are in place behind the scenes. You need this guiding hand because the technology can often obscure the key goals and principles of usability testing. If I wear a white coat and dangle a stethoscope around my neck, it doesn't make me a medic. Similarly, if I record a picture-in-picture video of someone using a web site, it doesn't mean I'm running a usability test.

Here are 4 principles of usability testing that have been absent in many of the tests I've observed.

• Screen for behaviours not demographics.
• Test the red routes.
• Focus on what people do, not what they say.
• Don't ask users to redesign the interface.

more at the link below

 

HTML forms are one way a user can send data to Web sites. They are essential in almost every interaction one can have with a site, such as:

• Queries on search engines
• Providing information (tags, comments, personal data, logins/registering, etc)
• Finding/purchasing certain objects from e-catalogs

In most cases, forms usability will improve the usability of the entire site. The primary goal of form usability is making sure that the intended users are able to interact properly with the Web site while having a positive and convenient experience.

Tips for Achieving An Accessible HTML Form

1. Helping users understand the form will save them time and ensure that they provide correct input. On the other hand, instructions should be as concise as possible. Always take into account potential users and that your forms address to both new and experienced visitors.

2. All forms should always contain this essential information:

• Title – what the form is for
• Contact details to provide help with filling in the form
• Send or Submit button at the end, optionally Cancel button

3. Avoid using forms with a large number of fields to be completed.

4. Never ask for duplicate information (when the form has more than one page, this is a common mistake).

5. It helps to run a use-of-information audit a while after the release of the form to see if the information collected was actually ever used. If it wasn’t, it shouldn’t be collected any more.

6. Split your forms – long forms are confusing.

• If your form is too long, try dividing it into several pages, each fulfilling a different task (ex.: one for product details, one for personal data and one for payment and delivery details).
• Each page is individually validated, so it is easier to signal and fix mistakes.
• Ask questions in a logical order. This way, necessary data can be taken automatically from previous pages.
• If an e-form requires navigation through several pages, it should be easy to return to a previous step. This helps in case the user made a mistake or just changed his mind and shouldn’t have to start again, but just go back and modify the input.
• Conservation of filled data is very important. When going back to fix a problem, the user should find his form as filled in before. For example, there’s no reason why one should have to re-accept the terms of agreement because of a wrong area code.

7. Forms that look neat are easier to fill in. This requires:

• Examination of the layout of the form, including:
  • Text
  • Localization and accessibility
  • Have consistency in capitalization and punctuation marks. (Avoid ALL UPPER CASE sentences. Try to use sentence case or Title Case.)

Boxes should be aligned, both horizontally and vertically, along with the labels.

Try to structure your form within one single column, it is easier to read. In the case of two columns, users often just fail to notice the right-hand column. Two columns are recommended only in the case of a big amount of data being constantly referred to.

Always use a polite tone and run a spell checker and a grammar checker on your forms.

8. Take into account the three possible validation levels:

• Strict – user will not be allowed to proceed until entering proper information
• Soft – user can proceed, but receives a warning that the data is either missing or incorrect
• None – any input is accepted without warning.

Make your choice in correlation with how important is receiving valid data for your database. Usually, Strict and None levels are mixed in the same e-form.9. Make sure that mandatory fields are clearly marked.

• You may:
  • Use an asterisk and the word “required” in parentheses following the field (optionally, the reason why it is required).
  • Color the input area differently (don’t use red – it is usually reserved for error messages and might confuse the user).
  • Divide the form in two – mandatory and optional parts.
  • Use bold or italic text to signal required fields.

Either way you choose, always provide a legend (easy to find and understand) with the symbol’s meaning.

Don’t put in too many mandatory fields without explanation, this will lose customer’s trust (“Why do they need my home number too?”).

10. Return relevant error messages.

Replace cryptic messages with straightforward error messages that are easier to understand. Error messages should tell users what went wrong and offer a possible solution. This can be easily handled now with CSS.

11. Be especially careful with input fields and drop-down menus.

• All input fields should be clearly labeled. This won’t bother experienced users, but it will be helpful for rookies. Users expect input field labels to be just above the input box, to the left.
• Try to replace all drop-down list boxes with text fields. Drop-downs are harder to use when providing a larger number of options. Try to use them only for important data or to position them below more important input fields.
• Give the user room to type – at least 20 characters for first and last name fields, minimum 50 characters wide by 10 lines tall for text fields.
• Provide default answers where possible, letting your customer over-ride your choices of answer

12. Have your form tested out by real users before releasing it.

Ask some real target-users to fill in your form. Analyze feedback, adapt to their needs. On top of all the tips above stands the rule of common sense: do your users understand what you ask from them? You can judge the accessibility of your html form by how many filled in forms contain mistaken information. Also find out more about how can you gain website accessibility.

Should we consider usability of forms?

Nobody likes filling in forms, but they are always the only means to a purpose, what stands between you and getting what you need (may that be logging into your e-mail, ordering a software product or just searching for some information). Even though users know forms are necessary, they still just won’t enjoy filling them in.

A simple lesson of economics goes like this. We are given two manufacturers, who both make the same alarm clock, with the exact same functions. One of them adds the possibility to choose the alarm sound. His clocks will be more successful. With a small price, he obtains a greater profit.

The Internet provides endless possibilities. In most cases the user can abandon your form and try a different Web site. What can make the difference between your company and the competitors? Might be your to-the-point, easier to use html forms.

There you have it folks. Good usability trumps brand loyalty.

Myth #25: Aesthetics are not important if you have good usability There are usability practitioners who completely dismiss the importance of aesthetics, often citing unattractive but popular websites such as Craigslist. However, aesthetics do have a function. Attractive things work better. Studies show that emotions play an important role in the users’ experience. If a website has a pleasant visual design, users are more relaxed, tend to find the website more credible and easier to use. A positive first impression — usually based on looks rather than interaction — determines the value of the website on the user’s behalf. Aesthetics also tell a good many about your brand, product or service. They show that you care.

I completely agree with this. It doesn't matter if you have built the most user friendly site in the world if it's not visually appealing no one wants to use it. Usability and design go hand in hand.

Starbucks is taking a tip from its users and designing its upcoming web landing portal Starbucks Digital Network to be optimized first for mobile devices instead of traditional web browsers.

Adam Brotman, VP of digital ventures for Starbucks, spoke at the Think Mobile conference today, emphasizing how the new site will shine on smartphones and tablets, which account for the vast majority of connections to Starbucks’ free Wi-Fi network. Brotman explained how the site will be built in HTML5, will respond to touch and swipes, and will be optimized first for iOS, Android and BlackBerry devices. This is a huge change from companies that traditionally optimize their web sites for Safari, Firefox, Chrome or Internet Explorer and expect users to view them on a PC or laptop.

Brotman said the site will rely heavily on moving tiles that will create a touch-friendly experience, and it will integrate with mobile services like Foursquare. “Our customers have told us they want this to be mobile,” Brotman said in an interview. “We spent a lot of time on visual design asking how do we design a site that felt like a tablet or phone in a good way, even when it’s on a laptop.”

Speed Matters

Responsiveness matters for two reasons:

• Human limitations, especially in the areas of memory and attention (as further discussed in our seminar on The Human Mind and Usability). We simply don't perform as well if we have to wait and suffer the inevitable decay of information stored in short-term memory.
• Human aspirations. We like to feel in control of our destiny rather than subjugated to a computer's whims. Also, when companies make us wait instead of providing responsive service, they seem either arrogant or incompetent.

Good read about helping users avoid logging into the registration form on a website when they have already registered.

Continue reading: http://blog.leahculver.com/2009/11/log-in-or-sign-up.html

LAS VEGAS--Microsoft often talks about the importance of search being more than just 10 blue links. However, it turns out that at least the "blue" part of that is very important.

When Microsoft was designing what would eventually become Bing, it tested a vast number of colors and it turned out that the one that users engaged with the most was indeed blue. More specifically, it was a shade of blue quite similar to the one used by Google.

Paul Ray, a user experience manager for Bing said on Tuesday that choosing that specific blue (#0044CC for you color enthusiasts) over some other hues amounted to an additional $80 million in annual revenue, when one factors in the additional clicks on advertisements and increased user engagement.

"That blue was worth at least $80 million," Ray said, during a presentation at the Mix10 trade show here.

So the question stands, can we test usability before our project goes live? Why is it important? And, most importantly: how can we test before launch?

Good Read: http://thephuse.com/2010/02/how-to-test-usability-before-your-site-goes-live/