Five Simple but Essential Web Usability Tips

Jan 2 2010 by Brujo Owoh | 23 Comments

The web has become a part of our lives. Folks from all walks of life, from upscale parts of New York to dirt road villages you probably will never hear of in Burundi, are all a part of what we call "the internet". The reasons they use the web is highly varied: it could be to search for news articles, directions to the nearest pub, the winter/fall clothing trends, post-grad research, or shopping for a handbag, the list is endless. It could be anyone too. It’d be impossible to try to classify web users in any particular demographic range.

Five Simple but Essential Web Usability Tips

On top of the web’s ubiquity, the web has gotten to an interactive all time high. Users don’t just seek information, they interact with it in more novel ways than we can ever imagine.

And it’s only going to get better: we are seeing a myriad of emerging web apps and website trends that are revolutionizing the way we use and obtain information on the web.

With this concept in mind, usability, how effortless it is to interact and use your website, is critical to its success. This article discusses five important usability tips that your site can’t live without.

1. Have a search feature

A basic site feature nowadays is a search feature. It allows your users to jump to the pages that may contain the information they’re currently seeking.

Locate the search box where users can immediately find it. Placing it on the top left or top right of the webpage will ensure that users see it almost immediately. Make it stand out.

The submit button can also be made to stand out by using vivid colors that fits the design theme.

Have a search featureThe "GO" button on Amazon.com is bright orange, congruent with the company colors, to help users quickly see it.

Very often, the magnifying glass icon is used to associate the search function and is now becoming a reasonably identifiable symbol for "site search".

Have a search featureUbisoft uses the magnifying glass icon to identify their search input field.

Have a search featureOn deviantART, the search is identified with a magnifying glass icon and the word "Search…"

2. Pay special attention to web page organization and layout

The use of headings, lists, and consistent structure cannot be overly emphasized. Users tend to scan through web pages in an F-shaped pattern. They pick out what stands out from the rest of the text: headings, links, bold text and bullet points. Use headings and subheadings that are eye-catching so that users can focus on them and quickly process the content while scanning through the page.

Pay special attention to web page organization and layout

Use CSS for layout and style where possible. This ensures that structure and presentation are kept totally separated, giving you an edge when it comes to experimenting on page organization and structure by trial and error.

3. Keep the user interface consistent

A good interface design influences user behavior, prompting them to take an action or route that will result in their desired outcome. This ultimately translates to saying that the design should be intuitive. Keeping the interface simple makes navigation easier for the user. First time users quickly become regulars if the interface design is clear and consistent.

Use a global navigation that appears on every page of your site in the same place. Make your buttons or links consistent with the central theme of the website. Choose the right color schemes.

Keep the User Interface consistentApple features a primary navigation that visually indicates what section you’re in.

Keep the User Interface consistentWhen hovering over a primary menu item, it becomes recessed, indicating that it’s the focused element.

4. Structure web forms correctly

When you have web forms on your site, you want to make it as easy as possible to fill out. To illustrate key design tips for designing usable web forms, let’s look at the Yahoo! sign up form.

Structure web forms correctly

In the figure above, you can see that there are text hints in the input fields for First Name, Last Name, birth Day and birth Year so that there’s no ambiguity to the order that the input fields require. For example, there is no question as how to format your name: Last Name, First Name or First Name, Last Name.

You can remove these inline hints when the user focuses on the input field.

https://edit.yahoo.com/registration

Group form items into logical chunks so that each section has a distinct topic; this makes it easier to quickly fill out form items.

https://edit.yahoo.com/registration

In the figure above, you can see three logical groupings of web form input fields: (1) information about the user, (2) account information, (3) alternative contact information. Grouping it this way makes it easier to fill out related data in chunks.

Whenever a user performs a certain action, give them feedback and/or confirmation so that they aren’t left guessing as to whether they’ve filled out the form correctly or not. This avoids needless repetition of action (such as filling out the form again to ensure that they have in fact been successful in submitting it).

https://edit.yahoo.com/registration

Shown above is how the Yahoo! sign up form deals with errors in filling out the web form. It gives instant inline feedback so that the user immediately knows that the information they provided is erroneous or lacking. The feedback provided for web form errors are: What the error is and suggestions on how to correct the errors.

5. Make help features available

A good user interface will be intuitive and logical enough so that users will know straight away what to do in order to get what they want, but the level of technical know-how that each user has will be different.

In addition, help features can be a way to prevent the user from being discouraged from using your site; if they can’t figure it out and there’s no way for them to seek help, then they’ll look for a site that they can figure out.

Some help features to consider:

  • FAQ or Q&A Page
  • Help Pages/Documentation: Check out Google’s Help Pages for inspiration.
  • Site Map: for locating web pages and seeing the site organization.
  • Support ticketing system
  • Help forums

Related Content

About the Author

Brujo Owoh is an university student majoring in Multimedia Systems. He specializes in web design and 2D animation. In his spare time, he enjoys reading fiction, hanging out with his mates, or keeping up with design trends on Twitter. Want to hire him or connect with him? Get in touch on Twitter: @Brujo2.

23 Comments

Bart

January 1st, 2010

Very good article, definitely going to use this!

First comment on the first day of the year.

michelle

January 1st, 2010

great article and a great start to a new year :) thanks

Chris McCorkle

January 1st, 2010

Hmm… Nice job referencing your own site… =) Thanks for the post!

Liam McCabe

January 1st, 2010

A good article Brujo. You covered some good points.

I always wonder whether it is essential to have a search box on a website. I can see why a content heavy website would want one but why not just visit google?

That said each website is different and so many could probably live without these usability tips. Maybe this article is focused towards blogs, marketplaces, news websites etc

Abhisek @ AbhiTech

January 1st, 2010

Wow! what an article! Loved it. This is the first time I heard someone stressing on help features. :-)

Ben

January 1st, 2010

What’s the difference between “Pay special attention to web page organization and layout”, “Keep the user interface consistent” and “Structure web forms correctly”?

Diego R

January 1st, 2010

Most of these usability tips should be pretty obvious but most individuals tend to forget about the needs of the users and more about what they want.

Lisa Kerr

January 1st, 2010

Excellent article, you covered everything! Very good job. I especially liked the “Last Name hint disappears when you begin typing”. Very thorough!

Optimierung

January 1st, 2010

@
…. whether it is essential to have a search box…
The 2nd reason: You can also track what people do NOT find on the website… So it’s an excellent feature to update the content.

Chris McCorkle

January 1st, 2010

A big mistake many people make is to confuse usability with accessibility. Not only are the two very different, but the tendency seems to be that one is deemed less important than the other. Although they must both be taken seriously, it’s true that many of the ideals surrounding accessibility still apply to usability and vice versa.

Optimization a site’s usability will help to make it more accessible, or at least provide a better frame to build upon. If your wider audience finds the site hard to use, it’ll almost certainly be problematic for those with disabilities or learning difficulties. By the same token, the degree of consideration that goes into addressing accessibility is just as valid when it comes to usability.

ajay

January 2nd, 2010

Great Article! Thanks.

Charles Fabuel

January 2nd, 2010

Nice post. That tips are very useful for all projects

Soapbox

January 3rd, 2010

Nice article. I find alignment is a big one too… simple but effective way of making a layout feel “logical to the eye” – especially important since, as you say, people scan more than read.

cchana

January 4th, 2010

nice tips, point 2 is key for me. sometimes structure has far less importance than it should have.

point 1 is a good one, but i find that search is hard to get right. using google’s site search isn’t always perfect, you have to wait to be crawled before it’s up to date after all!

If you have the time/resources to do an in-house, wild card search feature, then it’s definitely something worth doing.

Jon Crim

January 4th, 2010

Nice article. I think these are a great set of tips #5 Make Help Features Available is one i haven’t heard mentioned in a while – key for an eCommerce website.

Vijendra Mishra

January 5th, 2010

Nice Post … I think we should follow these tips on our website.

Amber Weinberg

January 7th, 2010

I don’t agree that every site needs a search feature either. Especially the normal 5 page brochure site. But great tips nonetheless :)

Elijah

January 20th, 2010

Thanks! for your post

Colin

January 25th, 2010

I have to agree on the FAQ page part. These pages are great for getting users the info they need.

If you’re going to add a Q&A or Frequently Asked Questions page to your site consider using my web app I just made: http://breezyfaq.com

It takes like 5 minutes to set up and users can ask you questions on it. This is great for keeping your list up to date.

Also the questions are searchable, which will help users get to the question they want faster.

Jeff MacArthur

January 29th, 2010

Just a note that it’s generally acknowledged that it’s best to put field name labels ABOVE the field, as opposed to on the LEFT side of the field (less effort for the user to read, takes away the question of right/left alignment on the left side, which creates other problems).

Great article!

Jeff

Cesar Noel

August 17th, 2010

A very nice article on Usability. Keep it up

Craig

September 18th, 2010

Great collection of 5 web usability tips, my next usability project is to add some search functionality to a few designs, as I always find I use this usability feature on websites I visit.

The CSS Coder

September 28th, 2010

Wonderful article! I liked the tips you suggested. Especially the form designing part is something most of the designer overlook. Thanks you pointed it out. Keep writing such helpful content.

Leave a Comment

Subscribe to the comments on this article.