Usability is in the Details

14
534

Usability is in the details

Although usability practitioners love to show examples of big usability issues with websites and applications, the vast majority of usability issues are typically in the details.  By forcing your application users or website visitors to be constantly bothered with more detailed usability issues, you eventually wear down their patience and force them to decide whether to continue being annoyed, or to try a different application or website.

Usability issues are in the details Flickr photo by Emily Barney via Creative Commons license

So, you may be asking, “what’s a big usability issue versus a minor or more detailed usability issue?”

Here’s my definition of a minor usability issue:

Craig says:

“A minor usability issue is an issue that is small enough to not cause task failure by itself, but is significant enough to cause additional cognitive load, errors, or an increase in time-on-task.”

Examples of usability issues in the details

As a demonstration of usability being in the details, I’ve identified a few examples of several minor, yet user-annoying usability issues that can wear down the patience of your users.  Each of these minor issues in and of itself is not a big enough deal to make a person throw up their hands and storm away from your application or site.  But added together, like the straws on a camel’s back, they can and do cause that effect.

The good news: detailed usability issues are typically easier to fix

The good news is; for the vast majority of detailed usability issues, a simple fix is usually all it takes to remove the problem and improve the usability for your users.

Tip: Find your minor usability issues, they’re easier to fix and can reward you with increased performance

After reading this article, have a look at your own applications or websites and identify where there are minor usability issues.  Or better yet, observe someone who has little to no experience with your site or application use it.  My bet is you’ll probably uncover several minor, yet annoying usability issues just by watching them go through the process.   I think you’ll find finding and fixing minor usability issues is the easiest way to improve the usability of your site or application, without resorting to major re-designs.

The details: Several common usability issues

Usability issue #1 – Horizontal and vertical scrolling of important content

Forcing people to scroll both vertically and horizontally in your website or application is a usability issue because it requires more cognitive load (remembering what was read) and motor effort (moving scrollbars) than by simple presenting data with no scroll, or a vertical scroll only.

Trend micro antivirus is in the business of analyzing and recommending actions based on potential computer security risks for their customers.  I’m assuming that typically their customers have little to no security knowledge, so the advice (content) Trend micro antivirus provides is very critical for user success.

It’s therefore a minor yet annoying usability detail that Trend micro antivirus displays a pop-up window whenever it detects the need to provide guidance, using horizontal and vertical scroll bars to display this all-important guidance within the pop-up.

Click here to view latest job postings

In addition, another minor usability detail is the pop-up is not resizable, thus the customer is unable to modify the size of the display to better read the guidance.

Horizontal and vertical scrolling is a usability issue

Trend micro antivirus displays important security guidance in a horizontally and vertically scrolling pop-up window that is non-resizable.

Usability issue #2 – Non-alphabetical drop down menus

For most drop-down menus, a common best-practice is to use alphabetically ordered listings of links.  This is especially true for websites or applications in which users either lack expertise with the subject matter or are infrequent users.  The alphabetical ordering of choices helps users scan and find the link they seek.

GoDaddy.com is a domain and hosting company that provides a fairly large assortment of tools for their customers, most of which are accessible via drop-down menus.  For their hosting tools, GoDaddy uses a drop-down menu that is not alphabetically ordered.  Because users must read the entire list of links prior to determining which to select, this forces additional cognitive load, in essence slowing users down.

Although this may seem minor, if a customer is only infrequently using these tools, they must “re-learn” the list with each visit to the drop-down, causing additional friction and slow-downs.  Coupled with many other small yet annoying usability issues, they could be enough to tip the scales and influence the customer to seek another hosting company.

Considering the low price-point for hosting, ANY customer friction is a potential customer-loser for these companies.

Non alphabetical drop down menus can be a usability issue

GoDaddy’s hosting control center drop-down menus are not alphabetically ordered.

Usability issue #3 – Poor form instructions and label alignment

Forms are the ONLY online tool your potential customers can use to purchase or request your products or services, so poor alignment of form instructions, labels and entry fields are minor yet annoying usability details that should be corrected promptly.

Taleo has a widely-used online application form candidates use to apply for jobs with a company.  The Taleo form is quite long, and is often customized based on a company’s needs.  However, attention to usability details in form design can slip, meaning the form causes increased cognitive load and decreased performance.

In this example, alignment issues with the email form instructions and label are causing additional cognitive load.  The “Please create your password” instruction is right-aligned and thus displayed to the left above the password field.  However, the “Re-type new password” instruction is left-aligned and thus is over the field, and not aligned with the rest of the labels.  In addition, it is missing the red “required” asterisk, which will result in an error if the user submits the form without the re-typed password.  Finally, note that there are no instructions for password length (which in this case is 6 characters minimum) nor for valid versus non-valid characters.

Many form developers today use a separate page for registration information, so that errors with the registration do not cause the rest of the form entry process to fail.

Poor alignment and missing instructions of form labels are a usability issue

Taleo’s candidate application form demonstrates label alignment issues

Usability issue #4 – Poor alignment of or missing Action buttons

Another usability detail is proper alignment and use of primary (“Submit” or “Go” etc.) and secondary action buttons (“Save & Exit” or “Cancel” etc.).  The point to having people use forms is to actually have them complete and send them, and so details with action buttons are important.

Using Taleo’s application form again as an example, the form is quite long, asking for full candidate information including address, prior jobs, demographic information and more.  Because of the amount of time it may take to complete such a long form, providing the ability for people to save their partially completed form, and return later to finish it could be very important.  However no “Save and exit” or related secondary action form is included (potentially because sign-up has not yet occurred).

In addition, clearly separating action buttons from other entry fields is also important, to reduce confusion as to their purpose.  As demonstrated below the Taleo form has the “Submit” button placed apparently inside the visual space created by the horizontal lines above and below “Certificates/Licenses.”

Poor or missing action buttons are a usability issue

Some people may be confused, wondering if the “Submit” button submits the entire form, or the “Certificates/Licenses” information only.

Conclusion: Usability is in the details

The four examples demonstrate typical minor yet annoying usability issues, highlighting the importance of paying attention to detail when creating a user experience.  Although these common minor usability issues won’t cause task-failure by themselves, added together the annoyance factor becomes great enough that many users may decide to either not purchase or order the product or service, or to discontinue use of the application or website altogether, meaning lost customers, revenue and a poor Brand reputation.

It’s in each designer’s and developer’s best interest to pay attention to the little details.  That’s because usability is in the details, which helps define the success or failure of the website or application.

14 COMMENTS

  1. Nice post Craig.

    This is what I say about small usability issues- “About the small usability issues across your application that you think you can ignore, think of them in this way- one small crease on an ironed shirt is okay. But creases all over and you have an un-ironed shirt.”

  2. Thanks!

    That’s a great metaphor! If you don’t iron out the details (wrinkles), you’ll be presenting a bad experience to the world, and the world WILL notice! I think Branding managers could especially relate to that. Thanks for sharing, good stuff.

  3. Agreed, the little details matter and do add up. Good choice of looking at Godaddy – I think the entire site is an encyclopedia of issue that “could be improved upon”….it drives me wacko. Question for you re: #3, what IS the proper convention for form fields? Should you right-align the labels to the left edge of field box, or are left-aligned labels better? I often see that developers use the right-aligned convention but I find it much harder to read.

  4. Thanks for the comment Karen,

    As to what IS the proper convention for form fields, the answer is…. it depends.

    According to the book (way worth reading by the way) Web Form Design by Luke Wroblewski:

    Top-Aligned Labels – Tend to have the fastest completion rates, however their greater use of vertical space can be an issue if you have a larger number of fields.

    Right-Aligned Labels – Close proximity to the input field and label make them fairly quick to complete. However the left rag can slow down a user as their eye scans the fields and labels.

    Left-Aligned Labels – Makes for easier scanning of labels, especially if you have a fair amount. However, a mix of long and short label lengths can cause greater distance between the label and the input box and thus can decrease completion rates.

    There’s much more (a whole book worth actually) and I highly recommend reading his book, it’s easy to read, has tons of really useful information and will make your life easier when making design decisions about forms.

  5. Good article!!
    I have a question for #2, in this case, the drop-menu doesn’t need alphabetically ordered Necessarily, since most users don’t know the name of applications.
    so I think sorting by popularity is better.

  6. Certainly I’ve used sorting by popularity for certain situations too, but for this particular situation I don’t think so. The reason why is because the issue has less to do with not knowing the name of each item in the list, ( I assume users would know or potentially remember the name after using the application) and more to do with making it easy for users who only use the website occasionally to be able to scan the list efficiently, based on the best-practice of using an alpha ordering of list items so users don’t have to re-read each item in the list each time they visit the site.

    Remember that my assumption is users are not often using this drop down list, thus they have to “re-learn” the list with each visit. Most users can quickly scan an alpha ordered list. However, a list not in alpha order causes the user to stop and read each item in the list, causing a slow down in task-flow and the potential for error if items are not “scanned” but instead accidentally passed over.

    Think about the casual user in this case who uses the File Manager to move and copy files. Once he uses the File Manager and then exits that session, upon his next session the odds are he may be looking to use the File Manager again, and if so the alpha sort makes it easy to find the tool, without having to read through each item above the “F” listings to find it again. This would not be the case with popularity sorted order, in which he would have to read each item prior to finding File Manager.

    I have found that popularity based sorting worked better in usability tests in which there is significant domain expertise of the user. For example, an insurance company Customer Service application with an ordered listing of functions based on popularity (number of uses per day in this case) worked better for customer service representatives (CSRs ) of the insurance company. Having the popular functions listed at the top of the screen kept access time to a minimum, the CSRs as they were called were able to find the most used functions in under a second. However, testing of an alphabetized list increased this time on task, due to the CSRs having to scroll through many items to get to the popular ones, some of which were near the end of a long list of choices.

  7. Nice article!

    I just had a conversation with a team the other day regarding the need to alphabetize – People always lean to the frequency of use paradigm but I don’t see how to rationalize that thinking – frequency of use for whom? Odds are it ends up being optimized for a small percentage of overly active folks, not the mainstream…

    I think I’ll send this link to that team!

  8. Alphabetical ordering of menu items is good if people know the name of the item they are looking for (or at least its first letter).

    For people who don’t know the name of the item they are looking for, alphabetical ordering is not much use. It may be quicker to sort the menu by popularity, since then most people will only have to look at a few items before they find what they want. (This is just an elaboration of iketomo’s comment.)

    Consider also the obvious point that desktop application menus are never alphabetised. They are typically grouped by function.

  9. I think it’s dangerous to say “Alpha ordering is good if people know the name…” because even if they know the name, alpha ordered lists may be slower for other reasons that have nothing to do with knowing the names.

    The reality is there are several parameters that determine the best type of ordering to use in a list, some of them include:

    Domain expertise of the typical user
    Frequency of use of the list by the typical user
    Frequency of use of each item in the list by the typical user
    Number of items in the list
    Ability to sort items in the list via sub-listings
    Number of available sub-listing categories

    The point here is the choice of what type of list to use is not as simple as: “well, my users know the terms, therefore the best list is alpha ordered” (do they all, really, and are the terms clear to all users?) or “my users do not know the terms, therefore popularity” (again, if they have to use the ordered list every day, how long is that statement true? Pretty soon, they are all going to know the terms).

    So I like to determine the type of ordered list based on at least the minimum following parameters:

    * Domain expertise (how well do the typical users know, understand and use the terms that comprise the application and the list?)

    * Frequency of use (how often are the typical users going to be using this list; once an hour, day, week, year?)

    * Number of items in the list (short lists of say 4 or 5 items probably don’t matter too much in terms of the type of ordering used, long lists of 10-20 or more (ouch) terms are more problematic and require judicious use of the correct ordering type

    Only after understanding those three parameters, and some of the others listed above, would I make a determination of which type of ordered list is best.

  10. I tend to favor the alpha-oriented listing for the simple reason that it is a quickly-understood pattern for the user. Whether they know the domain or use the menu or list frequently, listing the items in alpha order allows them to determine the ordering principle when they see it. If it isn’t in an alpha order, then the reasoning for the presentation order is definitively hidden from the user. There’s only a sense of “why is this done that way?” on their part that can impact their confidence at using the application or site.

    If they are ordered by popularity, they are still not ordered by my priority as a user. Most people might want to do X, and thus it is at the top of the list, but my sole purpose is to come here and do B. Rather than finding it near the top of the list, I have to refocus on your (to me) odd taxonomy to figure out what you have called B and where it is on your list, since it’s not second.

    Of course, the standard UX “it depends” has to apply with any UX-decision event, because our users are all different, but generally I think alphabetical ordering makes more sense more often.

  11. Thanks Craig !!!

    Small things but bigger impact!
    you have pointed out the most common and small mistakes, and i have seen people ignores this kinda problems.

    Thanks Again!!!

  12. Totally agree! So many site owners don’t see that design issues can prevent people reading perfectly good copy. Understanding what the user wants on all levels is critical to a website that is a Derby (straight run from start to finish) rather than a Grand National (big fences where people fall off)!

  13. Hello, I am so annoyed by those Taleo-powered application forms…. So much time wasted by filling the same forms over and over again. For them, it´s convenient – as they can arrange and filter those data easily (age, education etc.). But both could be possible:

    An Industry-wide, secure standard file to upload your personal data, CV´s etc., which contains the data in a standard way so it can be extracted/transformed into databases easily.

    For the rest (specific questions concerning the vacancy), they could handle it as they please.

    But who´s the one who feels that need?….

  14. Hi Martin,

    I completely agree! Completing those online employee job application forms is a major pain, especially because of the horrible user experience and the non-standard format companies use. I also agree with your point that there’s no incentive / reward for the company to improve their systems, or adopt a standardized model. After all, the time and energy wasted on completing one is on the candidate’s end, and not a time / energy waste on their end. Here’s the really funny thing: when actually visiting a company to conduct interviews, the HR department almost always hands out a printed-out (or sends a PDF for printing) form that they want the candidate to complete all over again! Talk about double work!

Comments are closed.