Usability is paramount in creating a good website or web app. If your site isn’t user-friendly, the majority of visitors won’t come back, regardless of how good your content is. You need to do everything in your power to make sure every website you design or web application you create is as user-friendly as it can be.

So how do you do that, exactly? The answer is simple: you test the site for usability. This involves getting actual users to try the site and let you know what isn’t working for them, either through automated means or simply by telling you. Read on for more information on usability testing and some tools available to help you.

Sites Dedicated to Usability Testing

There are sites out there dedicated entirely to usability testing resources. If you’re really serious about creating user-friendly sites, they’re a great place to start gathering information.

Usability.gov

Usability.gov is a U.S. government-run website that covers all sorts of usability topics. The site is broken down into a few different sections: basics, methods, templates, articles, and guidelines. They also include additional government resources for usability. The usability guidelines are especially helpful, and individual sections can be downloaded as PDFs.

Usability Testing

Usability Testing is a blog that covers the basics of planning, designing, and conducting usability tests. They offer both articles and workshops on usability testing, both of which are valuable resources.

UsabilityNews.com

UsabilityNews.com aggregates usability-related news from all over the Internet. It’s a great resource for finding the most up-to-date information on all aspects of usability.

Useit.com

Useit.com is Jakob Nielsen’s website dedicated to usability and website design. It offers tons of useful and valuable content on usability, as well as links to his books on usability and other resources.

Usability Testing Articles and Guides

Most good website design and development blogs out there have resources for usability testing. Below are some of the better ones.

A List Apart published an article titled Usability Testing Demystified that helps to clarify what usability testing is all about, and takes some of the mystery out of the whole process. It’s a great resource if you’re unsure of how to approach usability testing, and need some direction.

A List Apart also published another excellent article titled The Myth of Usability Testing, which covers some of the downfalls of usability testing, and why usability testing is unreliable and unscientific at best. It also discusses how to account for this ureliability and compensate for it.

UserFocus has a very thorough list of 247 Web Usability Guidelines, broken down by category. It’s a very valuable resource for figuring out what needs to be tested, and is available as a downloadable Excel workbook.

Nielsen Norman Group has a free Usability of Rich Internet Applications and Web-Based Tools ebook available on their website. It includes usability guidelines based on the testing of 46 Flash applications.

Common Knowledge has a great post on usability testing on a budget called No Excuses – Budget Usability Testing that covers the basics of usability testing when you don’t have a lot of money available for your project.

Visual28 also has a post on low-cost usability testing, titled Usability Testing on a Budget. It offers some great strategies and methods of testing the usability of your sites without breaking the bank.

The U.S. Department of Health and Human Services offers a free ebook titled Research-Based Web Design & Usability Guidelines on their website. It’s a huge file, over 160MB, and includes a wealth of information backed by solid research for usability improvements, with the last chapter covering usability testing specifically (chapters can be downloaded individually).

Best Design Tuts has an article titled 15 Helpful Website Usability Facts & Guidelines that includes some excellent tips you can use in testing your site’s usability. They tips are compiled from a wide variety of sources.

Usereffect offers a free 25-point Website Usability Checklist on their site. It’s a valuable guide for designing your usability tests.

eduStyle has an excellent guide to Start a Usability Testing Program in 5 Days. It breaks steps down into a week-long plan, so by the end of single workweek, you’ll have a usability testing program in place.

FutureNow’s GrokDotCom has an excellent post on common mistakes made during usability testing, titled Top 6 User Testing Mistakes and How to Avoid Them. It provides a valuable outline for what not to do when creating your usability tests.

Smartisans.com has a great article, Remove Stumbling Blocks by Usability Testing, that covers the basics of usability testing. They use a real-world example of a failure in usability to illustrate the points made in the article.

Grundyhome.com has a guide to 3 Questions to Avoid in a Usability Test. It also includes the reasoning behind why you wouldn’t want to ask each specific question, and examples of how to better phrase each question.

The Communications Strategist offers up The DIY Guide to Web Usability Testing, which serves as an excellent guide for those who want to tackle their own usability testing. It includes things to beware of and watch for, as well as some general tips.

Sanjay Kumarux offers a step-by-step guide to usability testing, titled How to Conduct Usability Testing? that breaks down the entire process of usability testing into five easy-to-understand steps.

And of course, Wikipedia has an excellent overview of Usability Testing that’s worth checking out.

Usability Testing Tools and Methods

There are tons of tools and methods out there to help you more effectively test usability on your sites and apps. Here are some of the best ones to get you started.

10-Second Website Usability Testing

While 10-Second Website Usability Testing might sound like a myth or something that wouldn’t actually be helpful, this technique really does give you a good idea of how user-friendly your website is. In short, it involves evaluating your site with all the styling information turned off.

WebSort.net

WebSort.net is an excellent tool to use if you use the Card Sorting method for designing your site’s information architecture. It lets you conduct remote card sorting tests online. All you have to do is create a study and invite participants. The site takes care of the rest. A single study costs US$79, but you can also order a 5-pack (US$299) or subscribe to conduct unlimited studies (US$199/month).

Crazy Egg

Crazy Egg lets you create heat maps based on user clicks. It can give you insight into what visitors click on most often and what still needs to be improved to increase conversions and click-throughs. You can also view the raw data about where visitors are clicking, in addition to the heat maps. They have plans available that range from $9 to $99 per month, based on the number of visitors and pages you want to track.

Usabilla

Usabilla is a simple app for usability testing that can be set up in just five steps (create a test, select the pages you want to test, select your questions, invite users, and analyze the feedback you receive). You can test live pages or images, and it includes the ability to view click results as a heat map.

Silverback

Silverback offers what they call “guerilla usability testing”. They allow you to capture and record screen activity, record a participant’s voice, export your videos to Quicktime, and control your recordings while conducting usability tests. It’s only compatible with Macs, but you can try it free for 30 days (the full license is less than US$50).

userfly

Userfly makes it very simple to test your website’s usability with your real website visitors. It records every mouse movement and click visitors to your website make and installs with only a single line of code. You can run up to ten captures per month with their free account (which also saves recordings for 30 days), or up to 10,000 per month with their Enterprise account, which is $200/month.

fivesecondtest

Fivesecondtest can help provide valuable feedback on which parts of your site designs are standing out to visitors. Basically, visitors have five seconds to click on the most prominent parts of your website, and then describe what it is the clicked on. The service is mostly free (there are some premium features, too) and doesn’t even require registration.

UserTesting.com

UserTesting.com facilitates your usability testing by taking care of pretty much everything for you. You get a Flash video of exactly what testers did and said as they browsed your site, as well as a written summary of what they liked, didn’t like, and what might have made them leave your site. The cost is $29/tester.

Infomaki

Infomaki is a tool developed by the New York Public Library for rapidly testing mutliple site designs and language without disruption to website visitors. It’s open source and can make large-scale usability testing much simpler.

Chalkmark

Chalkmark lets you conduct testing on visitors’ first impressions of your site. To use it, you just set a task, upload an associated image, and invite participants. You can view results immediately, as they come in. The cost is US$109/month or US$559/year.

FeedbackArmy

FeedbackArmy is a usability testing service that’s simple to use and inexpensive. It only takes a couple minutes to set up a usability test, and you get 10 reponses for US$10. It’s one of the more inexpensive options for gathering usability info, and can be customized more than many similar options.

Screencasting Software

Using screencasting software in usability testing makes a lot of sense. After all, one of the primary goals of usability testing is to find where users are getting hung up. By capturing everything that happens on their screen, you can better determine exactly what is slowing them down.

ScreenFlow is one such software program. The Screening Room offers a great overview of how they used ScreenFlow in their own usability testing when launching their new site.

CamStudio is an open source screencasting software that works on Windows machines to capture everything you do on screen. Unlike many screencasting solutions, CamStudio is free.

Screencast-o-Matic is another free screencasting software that works within a browser, making it particularly well-suited to website usability testing where your users might not be centralized in one place.

If you’re really serious about screencasting (and will likely use software for more than just usability testing), Adobe Captivate might be the solution for you. It’s aimed at the educational market, so is probably overkill for many applications (especially since it’s nearly US$800), but it is an option.

For more screencasting options (there are plenty of them out there), check out Mashable’s 12 Screencasting Tools for Creating Video Tutorials or Wikipedia’s List of Screencasting Software.

Additional Roundups and Resources

Some other blogs out there have already compiled some excellent resource lists covering usability testing-related topics. The best are included below.

Grundyhome.com has a very thorough guide to usability testing, called the Ultimate Usability Testing Toolkit, which offers up a ton of great tools and methods, along with exactly how to implement them. Items included are well-categorized, making it a very easy toolkit to use despite it’s broad scope.

Speckyboy Design Magazine has an excellent roundup of usability guides, titled An Introduction to Understanding and Implementing Web Usability that includes a ton of great resources (some of which have been mentioned above already).

Tripwire Magazine has a great roundup of usability and other testing tools, titled 40+ Freelancer Tools and Services for Testing Web Projects. While it includes more than just usability testing information, it does include a number of valuable tools that can be helpful in determining your site’s usability.

Inspect Element offers a roundup and evaluation of some top usability testing tools, titled Review of Easy and Inexpensive Tools for Usability Testing, which lists the pros and cons of each tool listed.

Useful Usability has a roundup of 15 Valuable Usability PDFs You Never Heard Of. The list includes some excellent resources for creating user-friendly designs, including some that can help you design more effective usability tests.

Webdesigner Depot offers valuable coverage of 10 Tools to Improve Your Site’s Usability on a Low Budget. It includes reviews of ten tools, including what they’re best suited for.

Related Posts

Be sure to check out our previous usability articles:

10 Useful Usability Findings and Guidelines
9 Common Usability Mistakes in Web Design
Optimizing Conversion Rates: It’s All About Usability
30 Usability Issues To Be Aware Of
10 Usability Nightmares You Should Be Aware Of

  

by György Fekete

Comment forms are an essential part of our blogs, social networks and websites. Comment forms are our websites’ communication channel. Through these forms we get feedback on our content; therefore, it’s necessary to design them in such a way that they are easy to understand by our user base.

A good comment form should align with our website’s main design, but at the same time it should be interesting enough to encourage easy commenting. It must be usable and accessible if we want to capture all of our visitors’ feedback.

We searched for some examples and found original and creative ones. Below we present these examples along with a few guidelines that a designer should follow to make a great comment form.

Guidelines And Best Practices

Even a relatively simple-looking comment form can hide a very complex design behind it. There are many variables that a designer should take in consideration. The ones presented in this article are the most important and can be applied not just to comment forms but to Web forms in general.

1. Keep it simple

People don’t like filling in (yet more) comment forms, because there’s usually only one field that changes for them: the message text field. All of the other fields generally remain the same.

A good design should take this into consideration. When you design a comment form, make sure you don’t include text fields that are not necessary. For example asking users to write their country or phone number in a comment field is a mistake because it has no relevance to the form itself. The only purpose of a comment form is to get the user’s feedback and to communicate with the user.

The following comment form makes this mistake, although it does make it an optional text field.

Keeping the comment form simple enough reduces completion time, another essential attribute that a comment form should have.

Another good practice that contributes to reduced completion time is to top-align the form labels with their associated fields. This improves text scanning. Top-aligned labels should be used when a user is already familiar with the fields that need to be filled: for example, name, email address, etc.

A designer should use spacing and contrast when designing comment forms; these effects also improve text scanning. The following screenshot demonstrates this.

2. Give meaning to the form elements

A comment form stands in for the content author or website owner. Users are not robots; they’re human beings. When they post their comments, it’s like they are talking to the content author. People do not speak in keywords like “Comment” or “Feedback”; instead, they speak in gentler, more meaningful ways, like “Share your thoughts with us.” This is what a comment form should do: communicate its purpose in a meaningful way.

Instead of plain old titles such as “Comment here,” a designer should give meaningful, more natural-sounding titles like “Leave a comment” or “Add your opinion.”

Another example is when a user is asked to fill in his or her website address, but the label of the text field just says “URL.” There are users who are not familiar with this term, so a designer should also include a definition, the meaning of that expression.

3. Identify required fields

Not knowing which text fields are required and which are optional just increases confusion. A designer should clearly separate required fields from the rest by marking them.

Marking required fields with text (e.g. “required“) is good, but using the “*” character is often simpler and better because it’s widely used for this purpose and gives a visual representation of the text “required.”

4. Guide the user in filling the form

The primary goal of every comment form is successful completion by the user. Every comment form should have a solid design behind it that guides the user from start to finish. Every form has its own completion flow. Don’t break this flow.

Many users interact with comment forms by using the Tab key to switch from one text field to the next. A designer should implement proper HTML markup so that tabbing works as expected.

The form in the following screenshot breaks the completion flow. The mistake lies in the placement of the “Submit” button. It should be placed after the check box “Notify me of follow-up comments via e-mail.”

5. Minimize the pain

Every interaction with a comment form triggers complex actions in the user’s brain. Every text field can be considered a question that the author asks of the user. Knowing this, we should construct a comment form so that it “asks” easy, familiar “questions” first, such as “Name” and “Email address.”

It is a bad practice to place the message field first in the comment form, because this demands a more intense thought process of the user and it could result in the user not completing the form. Always place the more demanding fields at the end.

6. Validate on the fly and efficiently

Using AJAX to validate email addresses is essential and contributes to completion flow. If we were to use server-side validation, the page would have to refresh and the user wouldn’t get instant feedback about whether the fields were completed correctly.

Also keep in mind usability and AJAX’s obtrusive nature. A developer should emphasize unobtrusive, on-the-fly validation.

In some cases, it is not obvious at first that a text field requires validation, often resulting in poor usability. For example, it is a mistake to validate a “Name” text field to contain only alphabetical characters and nothing else, because then people with names such as “O’neil” are left out.

If a comment form’s text fields are constrained to a specified maximum character count, then the designer should indicate this next to the relevant field. Many comment forms use reverse counting, meaning they count down from the maximum allowed characters to let users know how many characters they have left to use.

7. Avoid CAPTCHAs if possible

CAPTCHA stands for “Completely Automated Public Turing test to tell Computers and Humans Apart.” The most widely used type of this is text embedded as an image to test verify whether a user is human or a spambot.

These kinds of tests should be avoided if possible. A more accessible solution is to use a third-party spam filter service, such as Akismet.

8. Don’t break habit

When designing your comment forms, always keep in mind the famous quote “Don’t try to reinvent the wheel.” There are many designs that have been tested and just work. Don’t try to come up with your own, because it will most likely fail.

You should align your design with traditional comment form designs, meaning you should include three, or at most four, fields, such as “Name,” “Email address,” “Website URL,” and “Message (Comment).”

9. Keep in mind localization

It is most likely that not only English-speaking users visit your website and comment on your content. Designers shouldn’t discriminate against these visitors; instead, they should keep in mind the peculiarities of different languages.

For example, in many European countries, names are written in reverse order, last name first and first name last. And many people, mostly in Arab cultures, have more than two names. If a designer includes only two fields, “First name” and “Last name,” then these people won’t be able to write their name completely.

A best practice is to simplify this type of text field and just include a “Name” field.

10. Do not use visual elements excessively

It’s true in many cases that an image is worth a thousand words, but it’s not a good motto to follow when designing comment forms.

A designer can use icons and other visual elements moderately but should keep in mind that different icon styles confuse visitors.

In the following screenshot, the icon in the third field does not entirely convey that the field should contain a website address; and not including a descriptive label next to each field can confuse users even more.

Comment Form Showcase

AisleOne.net

iso50.com

cssVault.com

daily.creattica.com

designsojourn.com

elitistsnob.com

hicksdesign.co.uk

ideas.veer.com

inspiredology.com

lucyblackmore.co.uk

typeneu.com

underconsideration.com

wilsonminer.com

About the author

György Fekete is a Web developer with five years of experience in Web design and development. He is the founder of Primal Skill Ltd., an established Romanian Web design and development studio. He also blogs about Web design, development, business and startups at blog.primalskill.com. (al)