1. They don’t have enough time
2. They don’t have enough money
3. They don’t have the expertise
4. They don’t have a usability lab
5. They don’t know how to interpret the results

Steve Krug - Don't make me think

Although all above reasons are valid, they have been proved to be inadequate in preventing you from doing usability tests because:

1. They can actually save you time. By doing usability tests early and often, you will discover errors that can be corrected more easily than when you have launched your product and need to redo things from the beginning.
2. You don’t need more than 500$ to conduct a decent usability test. Moreover, you can use remote usability testing tools such as Userfeel (Note: I am a Java Developer at Userfeel – just saying…) which offer you the benefits of a usability test at a low cost.
3. It is very easy to do. You don’t need to be an expert to bring some people over to your desk and see how they interact with your site. Keep in mind that even the most poorly conducted tests will give useful results.
4. You don’t need a usability room. All you simply need is a quiet room that has a desk with a computer and two chairs.
5. You can easily see what the major problems are. As Steve Krug says “the important lessons tend to be obvious to everyone who’s watching. The serious problems are hard to miss.”

But why people (site owners, designers and developers) still refuse to  test their site or application for usability issues?

A small experiment with a mini questionnaire

Many clients, when I discuss with them about doing usability tests, they offer me one of the above 5 explanations (not enough time, money etc). The problem is that many of them have already done many usability tests, or at least know the benefits and how easy it is to conduct them. So I decided to ask them what happens after a usability test, what are their reactions and thoughts, and how do they affect them regarding future tests. Most of them responded in a way I would expect: that usability is indeed a very important factor in the success (or not) of a product/website/application. But there were a few answers that, to be honest with you, I would never expect them to be heard. So why do you think people avoid doing usability tests?

They are surprised by the results

You can bet that every usability testing that you do, will give you a big or small surprise to think about. There will always be one person that just “can’t figure out which button to press” or “didn’t understand that this link leads to nowhere”. This seems to puzzle some developers/designers because they get confused and scratch their heads after each test thinking “What the hell was that?”. Many of them still don’t realize that the systems and products they create are not always used the way they suppose to. So they seem to avoid doing usability tests because they do not like (ugly) surprises.

Looking at results after a usability testing

They may find out that they are wrong when they thought they were right

Usability testing can prove your assumptions to be wrong or even worthless. For instance, many CEOs and developers still believe that users must create an account (or check-in if they already have one) before they make a purchase from you site. Many usability reports and surveys have proven that this is totally wrong: users do not like at all to create an account before a purchase (see for example this consumer research from janrain, or the e-commerce usability report from Baymard Institute, or simply watch the online checkout in real life video from Google Analytics). Some people just don’t like to be proven wrong, especially if their egoism is very high (“I am right and everybody else is wrong”). So they avoid to do usability tests, simply because they don’t want their ego hurt.

Egoism - Or "I am always right and you are wrong"

They may need to do from the beginning what they thought was ready

Many don’t care about being surprised or being proven wrong and they decide to do usability tests, knowing that this way they will learn ways to improve their products. But many of them realize that key elements (such as the checkout process, the main navigation, the overall design, or whatever it is that they are testing) are a mess and must be redesigned. Do you think they want that? Do you think that they can bear the fact that money and time was lost on something that must be done again? Many don’t, so they avoid usability testing at all costs even if they have a web site or application (be it new or old, but especially new) that brings them zero results.

Start from the beginning when you thought you had finished...

Conclusion

What all the above show us? That by performing usability tests, you reveal the truth about how good your product is or not. For various reasons some can’t handle that, so they try to hide usability problems under the carpet without knowing the actual ROI from usability. Fortunately they are very few compared to all those who try to improve their products, bringing more happy customers and greater profits for them. So how about you? Do you avoid usability testing or are you in favor of constant improvement?

Did you enjoy reading this article? If so, share your thoughts and comments below and don’t forget to subscribe to my RSS Feed!

Read more:

• 5 Design Principles That All Designers Must Know
• The Problem of Choices – When too Many is not a Good Idea
• Creating forms – Make it Easy to Find the Answer

1) Fitts’ law

This law, proposed by Paul Fitts in 1954, states that the time required to move to a target is a function of the distance to the target and the size of the target (see here for a web-based test of Fitts’ law) . This means that the smaller and more distant the target is, the longer it will take to move to that target. The Fitts’ law equation is MT = a + b log₂ (d/s + 1), where

MT = movement time to a target

a = 0,230 sec

b = 0,166 sec

d = distance between pointing device and target

s = size

For example, for an object A whose diameter is 3 cm and his distance from the cursor is 1 cm, the movement time for A is 0,23 + 0,166 log₂ (4/3 + 1) = 0,3 seconds.

Although this law is applicable only for rapid, pointing movements and not for more continuous movements, such as writing or drawing, we must consider it when we design systems that involve pointing. If accuracy and speed are vital, then objects must be near and relatively large. If some controls are not to be used frequently or will cause problems if they are activated by accident, then you should make them smaller and more distant. For example lets take a look at this application form:

Fitts' law example

In this form, we can see the typical path followed by the users. When they reach the “Client Logo” field, the cursor will go to the “Upload” button. After that, the users’ eye goes straight to the “Save” button, which is bigger and more close to the “Upload” button, allowing them to easily and quickly complete the form. The “Cancel” and “Clear All” buttons are smaller and more distant, limiting the chance to press them by accident.

2) 80/20 rule

The 80/20 rule (or “Pareto Principle”) states that appoximately 80% of the effects in a system occur from the 20% of the variables in that system. This means that you have to focus on what is important, identify the 20% of the features that are used 80% of the time and concentrate on them. Elements that are not important or critical should be minimized or even removed.

One use of this rule is with expandable content:

Expandable content example.

Only the most important and most frequently used elements are visible. Those elements that are less important are hidden and can be accessed by pressing a small button (indicated by the red arrows).

Another use of this rule is with collapsible menus:

Collapsible menu example

Here we can see that the less frequently used items are hidden, allowing more important functions to be accessed faster.

3) Hick’s law

According to this law the time required to make a decision is a function of the number of available options. Simply said, the more choices you face, the more time it will take to make a decision (and vice versa). The time needed to make a decision can be calculated with the equation RT = a + b log₂(n) where

RT = response time

a = the time that is not involved in decision making.

b = a constant that equals 0,155 (the cognitive processing time for humans)

n = number of equally probable alternatives

For example, lets say that a pilot faces an emergency and has to press a button in order to stop the problem. If it takes 3 seconds to understand the situation and has 20 buttons from which he must choose from, the response time is

RT = 3 + 0,155 log₂ (20) = 3,7 seconds

You should take into consideration Hick’s law when you design systems that involve decisions based on a set of options. Try to limit the number of choices to reduce errors and response times, especially when you design time-critical tasks.

4) Ockham’s Razor

This principle states that all things being equal, the simplest solution tends to be the best one. This means that simplicity is preferred to complexity in design. By removing unnecessary elements and keeping the design as simple as possible, you enhance the performance and the aesthetic appeal. So the main goal is to give the users only what they need and nothing else.

google.com - One of the most simple interfaces

5) Flexibility-Usability Tradeoff rule

According to this rule, as the flexibility of a system increases, the usability of that system decreases (and vice versa). This rule has clear implications on interface design, because you have to decide how usable or flexible your design must be. In order to find a proper balance, you must first understand whether users clearly understand what they need from your interface. If they know and understand what they need, the design must be more specialized to those needs (less flexibility and more usability). If they don’t, the design must be more flexible in order to cover all possible needs (more flexibility and less usability).

Photo of a basic calculator.

Here we can see that the flexibility is limited, providing only the most basic functions most users will need.

Conclusion

The purpose of this post was to briefly but accurately remind of you some basic design principles that we all need to know. These principles are very important if you want to create simple and effective web pages and applications. But what other principles do you know and have proven to be useful to you? Share with us your thoughts.

Read more:

• Time, Money and Egoism – Why we Avoid Usability Testing
• The Problem of Choices – When too Many is not a Good Idea
• Creating forms – Make it Easy to Find the Answer

The studies

In a study conducted by Sheena Iyengar and Mark Lepper, consumers shopping at an upscale grocery store were given the choice to buy between a limited (6 items) or an extensive (24 items) selection of different flavors of jam. The result was that when shoppers are given the option of choosing among smaller and larger assortments of jam, they show more interest in the larger assortment. But when it comes time to pick just one, they’re 10 times more likely to make a purchase if they choose among six rather than among 24 flavors of jam.

In another study by Kathleen D. Vohs, participants were randomly assigned to a choice
task or a no-choice task. In the choices condition, participants made a long series of choices between products, both within and across categories, while participants in the no-choice condition completed a questionnaire that required them to rate products and occupations but were not asked to choose between or among items. The scientists then asked each group to participate in one of two unpleasant tasks. Some were told to drink a healthy but ill-tasting drink while other participants were told to put their hands in ice water. The tasks were designed to test how the previous act of choosing, or not choosing, affected peoples’ ability to stay on task and maintain behaviors aimed at reaching a goal.

The conclusion of Kathleen Vohs’s study was that making choices apparently depletes a precious resource within the human mind. According to Vohs herself “Maintaining one’s focus while trying to solve problems or completing an unpleasant task was much harder for those who had made choices compared to those who had not[...]. Therefore, simply the act of choosing can cause mental fatigue“.

The results

What do we learn from the above? What can designers, marketeers and usability experts can use from those studies? Well, it is very simple: when your users have a definitive goal in mind (such as buying, registering etc) the less choices you offer them, the better. See this example from the Firefox download page:

Firefox download page

If someone comes here, propably wants only one thing, to download the firefox browser. And although there are many other links in this page, none of them is as prominent as the download button. So the designers have created the image in the users mind that they have only one choice, to press that big green button. A download page with a clear download button – very simple and effective desing.

The same rule applies also to ecommerce sites. For example, in amazon.com, when someone enters the checkout process, all unnecessary information (such as related products, navigation bars etc) dissapears.

amazon checkout process

When someone reaches that page, he propably wants to buy something – meaning that he has a clear goal in his mind. So the options are limited to one, a big yellow button that says “Sign in using our secure server”.

Conclusion

Now it seems that we know why we must not inundate the users with unnecessary information, because in this way we give them more choices than they could handle. Unfortunately, there are many sites that do not take this rule into account. Have your ever stumbled upon a site like this? Have your ever seen a site that had many calls to action in one page, making it difficult for you to choose what to do next? If so, share with us your thoughts and comments below!

Read more:

• Time, Money and Egoism – Why we Avoid Usability Testing
• 5 Design Principles That All Designers Must Know
• Creating forms – Make it Easy to Find the Answer

Ways to answer a question

In their excellent book, Forms that work: Designing web forms for usability, Caroline Jarrett and Gerry Gaffney described the different ways to answer a question. We will also mention them briefly below starting from the most quick and easy answers and moving to more difficult and time consuming:

Slot-in answers

These answers exist in our head like our name, our address or date of birth.

Gathered answers

These answers come from the user’s distant environment where she can get to personally, like a book, a credit card or a note in a paper.

Third-Party answers

These answers come by asking someone else because the user doesn’t know the exact answer.

Created answers

These are answers that are not slot-in, gathered or third-party. We create them as we read the question even by using our imagination, like in the question “What would you like to write in the gift card?”

It is very important to know as accurately as possible what type of answers our questions will require. For example, if we have a field “Surname”, the answer is slot-in because the surname exists in the head of the user. Or the “Credit card number” field is probably a gathered answer, because the user may have to reach for the card and read it’s number. But sometimes it may be more difficult to identify the type of answer. For example the question “What time do you want to send the gift?” may require a slot-in answer (the user knows already the appropriate time), a third-party answer (may need to ask someone else for the appropriate time) or even a created answer (she has no idea what the best time is, so she just selects what seems for her the most appropriate).

Position of labels and their effect on form completion

The position of labels should be different, depending on the type of answer we want. Many eyetracking studies have shown that the time users need to complete a form depends on the position of the labels. In a web form eye tracking analysis by Matteo Penzo, we can see that the lowest time to complete the form was when the labels were placed above the respective fields.

Labels that are above fields

More cognitive load is added when the labels are located to the left of the fields and are left aligned. This means that the users have to think more which by itself increases the time required to complete the form.

Left aligned labels whose position is left of the respective field

Intermediate results regarding completion speed and cognitive load where found when the labels where located left of the fields but with right alignment.

Right aligneed labels that are located left of the fields

Combining what we know about the different ways to answer a question and the label’s position

We have seen that the mental effort and time needed to answer grows as we move from slot-in to created answers. Also the way the labels are located plays an important role in completion times. So by combining all of the above we may assume that:

1) If you have only slot-in answers, put your labels above your fields. This way you guarantee that your users will complete the form with minimum effort. The drawback of this approach is that you will need more vertical space.

Form with all the labels positioned above the fields

As you can see this approach makes the form quite long, especially if we ask a lot of answers. So, if you want only slot-in answers and only a few of them, go with the labels above fields, but if you want slot-in answers and many of them, go with right aligned labels. It is worth noting that some sites use a different approach, that of inserting the labels inside the fields like this registration form found in Digg.com:

Digg.com registration form

This apporach reduces even more the time to complete the form, but it has one major drawback: if you start writing on a field, the label dissapears. So if you happen to forget what that field asks you to do, you have no other choice but to delete what you wrote. Let’s see a simple example using Digg’s registration form:

Labels dissapear if you write inside the fields.

Although this form is quite simple and may not be the best representative example, it clearly shows that once you write something on the fields, the label dissapears and you don’t know what exactly you must type into. In the form above you see two fields with an e-mail, info@usabilityrules.gr. Which is the field for the username and which for the e-mail? You don’t know until you delete one of them. For more about labels inside fields see Luke Wrobleski’s Labels Within Inputs.

2) If your question is quite complex, you must allow your users time to think about the response. In that situation, completion times play less crucial role than the ability of the user to give an accurate answer, which means that we should use left aligned labels.

3) You must take into consideration possible cultural biases. For example, in arabic countries they read from right to left, as opposed to western type cultures. So left aligned labels may not be the best solution here, especially if you want to have one type of form for all users, regardless of where they come from. Top aligned labels seem to solve this issue, something that we can see in ebay’s registration form:

ebay.com registration form. All labels are top aligned, which covers the aspect of cultural text orientation.

For a brief overview of the above, you should see also Label placements in forms by Caroline Jarett

4) Last but not least, you must make clear to the users which of your fields are required and which are not. The best way to do this is to mention that clearly next to every label whose respective field is required. For example let’s take a look at this form:

Required fields example where the "required" term appears next to the label of the required field.

Although not optimal, you can even use a special symbol to indicate required fields such as an asterisk. But don’t forget to inform the users before they start filling in the form what the special symbol does, such as in the form below:

A form whose required fields are marked with an asterisk

Conclusion

This post’s intention was to show you some basic rules you should have in mind when designing you forms. The truth is that all this information came from constant testing where small improvements made a huge difference. It is very important that you do the same with your forms too in order to get the best result. So, have you done any further tests that prove (or not) all the aforementioned? Is there a “golden rule” that applies to your business that is not included here? Share and comment your thoughts below!

Read more:

• Time, Money and Egoism – Why we Avoid Usability Testing
• 5 Design Principles That All Designers Must Know
• The Problem of Choices – When too Many is not a Good Idea

A form is a conversation

In order to create better forms, we must understand that they are merely a conversation with our users. We ask something and they respond to it by giving us an answer. So if we want to improve the usability of our forms, we must examine the way people answer questions. According to a model proposed by Cannell in 1981 known as Cannell’s Process Theory (you can read more in the excellent book by Roger Tourangeau – The psychology of survey response) when we answer at surveys or forms, the following process happens:

1. We understand the question
2. Process the answer based on experience, knowledge, memories etc.
3. Evaluate the accuracy of the response
4. Evaluate the response based on goals other than accuracy
5. Respond

In other words, after we see the question, we try to understand it first. Then we try to find a proper answer, we evalluate it and finally we write the response in an appropriate textfield. Each step of the above needs special consideration and at this post we will cover some important aspects of the first one.

Understand the question.

This is the first and most important step in the process of filling a form. If your users can’t understand what we ask them, they will give us the wrong information, or even no information. And you will see below that there are many ways designers and/or marketeers can make things more complicated.

Let’s look at an example found in Wordtracker’s registration form.

Wordtracker registration form

In this form you can see in a green box that First Name and Last Name fields are being repeated. At first glance it seems that we have to write again our first and last name. This is not the case though – the first time the form requires your first and last name (eg Panagiotis Kalogeropoulos) is for your Wordtracker account while the second time it requires your first and last name as they appear on your credit card. This may confuse users but it could be easily solved by having some appropriate labels above them, like “Enter your first and last name for your Wordtracker account” and “Enter your first and last name as they appear on your credit card”. For example see this form that can be found in Cosmote.gr (note: the page is in Greek and the fields are translated from English using Google translate):

Cosmote registration form

This form makes the user understand the distinction between Personal and Account Information. Moreover it clearly identifies which fields are mandatory by having an asterisk next to them, something that doesn’t exist in Wordtracker’s registration form.

Also let’s take a look at the registration form found in Asos.com:

Asos registation form

We can see in the red box that it is asking us for out Date of Birth, using a textfield, a dropdown menu (which has all months, I got that) and another textfield. What should I write in the first textfield, my year or my day of birth? It is not very clear until you start writing something. In the first field it allows you to write only 2 digits (ok, I got it, it wants the day here) and in the second box only 4 digits (so this is where I enter the year). But in what format does it want me to write the year, in 2-digit format (like 85 for 1985) or in full 4-digit format (like 1985)? I guess that if it leaves me to write 4 digits, then I will use the 4-digit format. But why make the users think about all this, when the designers of Asos could simply use drop down menus for the day (ranging from 1 to 31) and the year (ranging from, say, 1900 to 2011)? That way the users will know exactly what we ask of them (the day, month and year of birth in that order). So, let’s take a look at some basic rules that will help you make a form easy for your users to understand.

1. Know who your users are going to be.

To whom is this form for? Is it for gamers of age 12-18, for online marketing executives or for moms who want to learn cooking recipes? Knowing your audience will make it easier for you to know how to ask the information you want.

2. Use clear and self-descriptive names for your fields that your users can identify with.

This means that jargon or abbreviations are totally accepted if your users know what they mean. For example, when you register for an Electronics Arts account this is the form that appears:

Ea registration form

For someone that is not familiar with Electronic Arts and its products, the Origin ID might sound confusing. According to Electronic Arts, Origin is a site where “you will get access to the best content EA has to offer, across multiple platforms, anytime you want”. So in this case it is perfectly appropriate to use “Choose an Origin ID” instead of “Choose a username” because this is something that the users can understand.

3. Group elements so that the users can understand their meaning and context.

Remember the forms from Wordtracker and Cosmote that we saw previously? In Cosmote there were groups of elements that distinguished the Personal and Account Information. So, by simply grouping elements, you give them a specific meaning and context, which means it is easier for your users to understand the question that we ask.

4. Add descriptions to fields.

Sometimes you may need to offer an explanation of what the field is. This is useful as it also guides the user where it will find the information we need and why we need it (more about this in a later post). See for example the form below:

A card payment form with explanations on its fields

Every field offers an explanation as to what information we need and where the user will find it. This way we make it easier for the users to complete the form.

5. Use clear error indications.

Sometimes even in perfectly created forms, users tend to make mistakes. Maybe they are in a hurry and don’t have time to read and understand your labels, or they do understand them but type the information in a wrong format. This behaviour is reinforced when we have to interact with difficult and confusing forms that increase the likelihood of error. So when anything else fails and your users haven’t left your site from frustration and still want to complete the form, make sure that you use clear error messages that are close to the relevant fields. For instance lets see a step in the checkout process from 1800flowers.com:

1800flowers.com validation errors in checkout – Click to enlarge

This form from 1800flowers.com offers a great example of error validation that works well and at the same time confuses the users. It has clear error indications for all required fields and explains what went wrong – that’s perfect. But wait a second. What is that message on top of the screen that says “You did not enter a card message. If you want to continue without entering a card message, please select the ‘no card message’ radio button.”? What does that mean? After searching the whole page we can see that at the bottom there is the “Enter Card Message” with two radio buttons. There are many things that go wrong here. First of all this field is not marked as mandatory, so many users will skip it (until the error message comes up of course). Secondly, since the options are in radio buttons, it will be optimal if one of them is pre-checked. Finally the error message is way out of place, regarding the position of the “Enter Card Message” field. So those who did not pay attention to the Card Message field (because it is not marked as mandatory) and did not check either one of the available options, will be presented with an error message that makes things more confusing for them.

Conclusion

In conclusion, we must think of the forms that we have as a form of communication with our clients/users/viewers. In a proper communication where two parts exchange information, one part makes the question and the other part gives the answer. So we should make sure that we ask the right questions and in a way that are easily understood by users. In later posts we will deal with other aspects, such as how easy it is for users to find the answers. But so far do you have any more suggestions about forms? Have you stumbled upon a form that was asking you for information that you did not understand? On the contrary, have you encountered a form that was very easy and smooth to complete? Share your thoughts and comments below!

Read more:

• Time, Money and Egoism – Why we Avoid Usability Testing
• 5 Design Principles That All Designers Must Know
• The Problem of Choices – When too Many is not a Good Idea

Bounce Rate

One quick indication that your page needs refinement is if it has a high Bounce Rate. Although the amount of bounces may vary depending on your business, you may find that for a specific page the bounce rate is exceeding that of the average site. If the traffic that you send to that page is relevant (you may have for instance an Adwords campaign that is sending you wrong traffic) then you should check that page for refinements.

Site content

The Content section can give some insights about the navigability of your pages. In the new version of Analytics, go to Content >> Site Content >> Pages. There you will see above the graph a selection that says Navigation Summary. Here you can see for a specific page, from which page the user came from and to which page it went afterwards. For example, let’s say that you examine a specific page (e.g. mydomain.com/page.html). For that page you may see that the next page they go to is the main page (mydomain.com), which may indicate that they can’t find the content they want from the starting page (mydomain.com/page.html) and they think that they will find it by going to the main page (mydomain.com). This means that maybe it is not easy for the users to navigate to your site or that the titles and the information that exist may be misleading.

Moreover you may use the In-Page Analytics to see where users are clicking when they are on your site. You can find this report in the new version of Analytics by going to Content >> In-Page Analytics. This is a quick way to check if your call to action is prominent enough for the users to click, or if your users can easily find what they are looking for.

Site Search

One other extremely useful report that you can also find in the Content section is that of Site Search. Any site that has a relatively decent volume of content should incorporate a search function and proper tracking of that search. Google Analytics offers a very good solution in tracking your site search (see here for how you can set up site search with google analytics).
In most cases, the use of site search by your visitors may indicate that they can’t find the content they want easily. You should check for which terms they search for and make the pages that these terms lead to more obvious or even available if they don’t exist. For example, in one of my clients (a big online toy store) we saw that there were many users who when they landed on the main page they searched for Nerf and Hello Kitty products. So we created some banners that sent to those pages (Nerf and Hello Kitty) and put them in the main page. This lead to 30% reduction in search exits and 0,2% increase in conversion rate. Not bad for just two simple banners, don’t you think?

Conclusion

So to sum up, if you had only Google Analytics to discover usability problems, you should check first your bounce rate. Is it in acceptable levels? If no, check the navigation of your content. You may find that your visitors can’t get to the pages they want, so think about changing your content to help them (such as change your page titles). Check also your site search stats. Do you see a lot of searches in your pages for a specific term? Insert a url for that page in the starting page if it doesn’t exist or make it more prominent.
Did you find more uses of how to use Google Analytics (or any other analytics application) to help you discover usability problems? If so, share and comment below!

Read more:

• Time, Money and Egoism – Why we Avoid Usability Testing
• 5 Design Principles That All Designers Must Know
• The Problem of Choices – When too Many is not a Good Idea