Why Web Usability is Such a Big Deal

The Importance of UX

This post is all about web usability. On the web, people aren’t very patient, and rightfully so. Speed and ease of use rules the web. If your website doesn’t live up to those standards, chances are there won’t be many return visitors. That’s why user experience (UX) is so significant. Above the Fold, written by Brian Miller, has an entire chapter on website usability. He touches on navigation, breadcrumbs, text links, search functions, submission forms and many other important aspects of usability. The thing that I want to shed more light on (i.e. the one I find most annoying when done poorly) is submission form design.

Submission Forms

Submission forms are present on nearly every website. Whether for contacting a company, registering for a service, or checking out at an online store, there is no doubt that you’ll be filling out a lot of forms on the web…

Windows Live has a good submission form design.

The vertical orientation of the Windows Live registration form is logical, labels and inputs are clear, and it’s broken up into small chunks with subheads.

…and probably a lot of bad forms at that.

This form featured on Badforms.com is cluttered. The four column layout is confusing, and the whole thing is clunky and unorganized.

Form design is more about usability and intuitiveness. Aesthetic takes a bit of a backseat. UX for the Masses wrote an article  entirely about form usability. They broke it down into 7 main things to pay attention to with web submission forms:

Form Design
You should maintain a fairly standard look to your form. Don’t veer from the norm, that’s what people are used to.  Additionally, forms should be kept short. Longer ones get tedious and users are less likely to complete them.

Form Layout
If your form has to be long, break it up into smaller, more manageable sections. Web users scan, so having appropriate subheads and input labels make it easier for them.

Labels
Keep labels right above or to the left of the input. If users can’t figure out what label goes with one input, they will likely become frustrated with the form. Also, be sure to denote an optional field from a required one. And make it obvious.

Inputs
Have a logical order to the inputs. Name fields are typically first. If they’re buried somewhere down in the form, it’s not very intuitive.

Help
Provide clear explanations for certain fields. A common input that is explained in many forms is the Security Code on the back of a credit or debit card. Give the user more information when you think they need it.

Errors
Make sure that errors are shown. If something was missing, show the user exactly where that is. They also need a clear way to remedy the error. Having errors with no easy way to fix them is irritating for the user.

Actions
Action buttons (like ‘Submit’ or ‘Next’) should be easy to find. Showing the user that the form was successfully submitted is also an important thing to remember. ‘Reset’ or ‘Clear Form’ buttons aren’t very useful. In fact, if a user accidentally clears the whole form, chances are they won’t want to start over.

The full article goes much more in-depth with each aspect of website submission forms. A lot of thought and consideration for the user has to go in to each form design. Poorly designed forms are obvious and never result in a good user experience.

Usability in Action

Every company should consider how user-friendly their website is. Many companies will even hire a UX expert to ensure that their site works well for the user. I analyzed Target.com on its usability. Target recently went through website redesign which really improved on their UX. It used to be so confusing that I actually left a comment on the website a couple of months ago. Now, they’ve created smarter navigation menus that make it easier to get around the website and find what you want.

The homepage has several ways of navigation. The main navigation bar  is always present at the top of the website, even on the 404 error page so you always have a way to get back. In the main body of the homepage, there are four big sections that provide other ways to navigate around the website. These are more for people who are just browsing and don’t have a specific item to locate.

The homepage of Target.com, highlighting the navigation.

Target.com has several ways of navigating around the website.

When you hover over one of the broad designations at the top (I hovered over ‘Home’ in the picture below) it reveals many more subgroups so you can choose a link more specific to your needs. It is a little overwhelming to see so many options, though.

Hovering over Target.com main navigation bar.

When you hover over a general category, a submenu reveals more specific options to choose from.

When I clicked into a main group and then to several following subgroups, I got a breadcrumb trail to show me where I came from. This is another useful tool that helps users find their way around a website with ease.

Focusing on the breadcrumb trail on Target.com

When you follow navigation cues to a certain section, you get a helpful breadcrumb trail.

If a user is looking for a specific item, the search function is very helpful. When you search for something (I did a pretty broad search of “pets”), it gives you pages of images of items related to your search. It also allows you to narrow the search down into specific categories.

A screenshot of a search on Target.com

The search function gives you picture results as well as a side bar to further specify your search.

There’s only one thing I would change. When I am looking through pages of product images, I like to be able to change the number of results per page. I’m adept at mindless scrolling, so being able to do this without having to click ‘Next’ as often would make my experience that much better.

Click through 15 pages of shoes? I don’t think so, Target.

Overall, Target did a great job with the website overhaul and it resulted in a very pleasing user experience. They have a very intuitive website with categories that make sense and easy to follow navigation cues. It’s never hard to find your way back, and the multiple ways to find a product make is a nice website for online shopping.

Advertisements

One response

  1. I completely agree with your analysis of Target’s website. Especially when you scroll over “Home” and all of those options open up and you said it is too overwhelming. I really think they should have made secondary drop down menus to organize all the departments better.

    In your second post when you talked about Indian Sun and Whole Foods, I agree that they are both beautiful but have to say I really don’t like the whole foods as much. It may be nice to look at but the way the information was organized and as long as it took to load made me frustrated and give up on it quickly. Indian Sun does a much better job getting you the information quickly and in an organized way.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s