10 Useful Usability Findings and Guidelines

Advertisement

Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.

1. Form Labels Work Best Above The Field Link

A study by UX Matters1 found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

Tumblr2
Tumblr3 features a simple and elegant sign-up form that adheres to UX Matter’s recommendation.

Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.

2. Users Focus On Faces Link

People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.

eye tracking
Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study4.

eye tracking
And now the baby is looking at the content. Notice the increase in people looking at the headline and text.

Here’s an eye-tracking study5 that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.

3. Quality Of Design Is An Indicator Of Credibility Link

Various studies have been conducted to find out just what influences people’s perception of a website’s credibility:

Fever9
We don’t know if Fever10 app is any good, but the sleek user interface and website make a great first impression.

One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.

Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.

4. Most Users Do Not Scroll

Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability11) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.

This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.

Basecamp12
Basecamp13 makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images.

This is most important for the home page, where most new visitors will land. So provide the core essentials there:

  1. Name of the website,
  2. Value proposition of the website (i.e. what benefit users will get from using it),
  3. Navigation for the main sections of the website that are relevant to the user.

However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.

For further information please take a look at the articles Unfolding the fold14 (Clicktale), Paging VS Scrolling15 (Wichita University – SURL), Blasting the Myth of the Fold16 (Boxes and Arrows). (thanks, Fred Leuck).

While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.

Google17
Google2018 keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate.

What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.

6. The Ideal Search Box Is 27-Characters Wide Link

What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.

The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.

Google search19
Google2018‘s search box is wide enough to accommodate long sentences.

Apple search21
Apple22‘s search box is a little too short, cutting off the query, “Microsoft Office 2008.”

In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.

7. White Space Improves Comprehension Link

Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.

The Netsetter23
Notice the big content margin, padding and paragraph spacing on The Netsetter24. All that space makes the content easy and comfortable to read.

White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.

8. Effective User Testing Doesn’t Have To Be Extensive Link

Jakob Nielsen’s study25 on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.

User tests26
Source: Jakob Nielsen’s AlertBox27

The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.

9. Informative Product Pages Help You Stand Out Link

If your website has product pages, people shopping online will definitely look through them. But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).

iPod marketing page28
Apple29 provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.

Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest. Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.

10. Most Users Are Blind To Advertising Link

Jakob Nielsen reports in his AlertBox entry30 that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.

The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.

FlashDen31
The square banners on the left sidebar of FlashDen32 are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.

That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content. Before you go down that path, consider the trade-off: short-term revenue versus long-term trust.

Bonus: Findings From Our Case-Studies Link

In recent years, Smashing Magazine’s editorial team has conducted a number of case studies in an attempt to identify common design solutions and practices. So far, we have analyzed Web forms, blogs, typography and portfolios; and more case studies will be published next month. We have found some interesting patterns that could serve as guidelines for your next design.

Here, we’ll review some of the practices and design patterns that we discovered in our case studies in this brief, compact overview, for your convenience.

According to our typography study33:

  • Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
    1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than this. And the number of websites that go over 1.48 decreases as you get further from this value.
  • Line length (pixels) ÷ line height (pixels) = 27.8
    The average line length is 538.64 pixels (excluding margins and padding), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
  • Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
    It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
  • Optimal number of characters per line is 55 to 75
    According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

According to our blog design study34:

  • Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%). The width of fixed layouts varies between 951 and 1000 pixels (56%).
  • The home page shows excerpts of 10 to 20 posts (62%).
  • 58% of a website’s overall layout is used to display the main content.

According to our Web form design study35:

  • The registration link is titled “sign up” (40%) and is placed in the upper-right corner.
  • Sign-up forms have simple layouts, to avoid distracting users (61%).
  • Titles of input fields are bolded (62%), and fields are vertically arranged more than they are horizontally arranged (86%).
  • Designers tend to include few mandatory fields and few optional fields.
  • Email confirmation is not given (82%), but password confirmation is (72%).
  • The “Submit” button is either left-aligned (56%) or centered (26%).

According to our portfolio design study36:

  • 89% of layouts are horizontally centered, and most of them have a large horizontal navigation menu.
  • 47.2% of portfolios have a client page, and 67.2% have some form of standalone services page.
  • 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches.
  • Contact pages contain driving directions, phone number, email address, postal address, vCard and online form,

Other Resources Link

Have any thoughts on what we’ve covered, or know of other useful usability findings? Please leave a comment below. (al)

Footnotes Link

  1. 1 http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
  2. 2 http://www.tumblr.com
  3. 3 http://www.tumblr.com
  4. 4 http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  5. 5 http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  6. 6 http://captology.stanford.edu/pdf/Stanford-MakovskyWebCredStudy2002-prelim.pdf
  7. 7 http://captology.stanford.edu/pdf/p61-fogg.pdf
  8. 8 http://captology.stanford.edu/pdf/p80-fogg.pdf
  9. 9 http://feedafever.com/
  10. 10 http://feedafever.com/
  11. 11 http://www.useit.com/prioritizing/
  12. 12 http://www.basecamphq.com
  13. 13 http://www.basecamphq.com
  14. 14 http://blog.clicktale.com/?p=19
  15. 15 http://www.surl.org/usabilitynews/41/paging.asp
  16. 16 http://www.boxesandarrows.com/view/blasting-the-myth-of
  17. 17 http://www.google.com
  18. 18 http://www.google.com
  19. 19 http://www.google.com
  20. 20 http://www.google.com
  21. 21 http://www.apple.com
  22. 22 http://www.apple.com
  23. 23 http://thenetsetter.com/blog/
  24. 24 http://thenetsetter.com/blog/
  25. 25 http://www.useit.com/alertbox/20000319.html
  26. 26 http://www.useit.com/alertbox/20000319.html
  27. 27 http://www.useit.com/alertbox/20000319.html
  28. 28 http://www.apple.com/ipodnano/specs.html
  29. 29 http://www.apple.com/ipodnano/specs.html
  30. 30 http://www.useit.com/alertbox/banner-blindness.html
  31. 31 http://www.flashden.net
  32. 32 http://www.flashden.net
  33. 33 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  34. 34 http://www.smashingmagazine.com/2008/07/24/a-small-study-of-big-blogs/
  35. 35 http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
  36. 36 http://www.smashingmagazine.com/2009/09/17/portfolio-design-study-design-patterns-and-current-practices/
  37. 37 http://www.usefulusability.com/15-valuable-usability-pdfs-you-never-heard-of/
  38. 38 http://meiert.com/en/blog/20070113/web-design-15-important-research-findings-you-should-know/
  39. 39 http://meiert.com/en/blog/20080605/web-design-additional-research-findings/
  40. 40 http://www.peterpixel.nl/writings/introduction-to-good-usability/
  41. 41 http://www.problogger.net/archives/2009/05/20/11-striking-findings-from-an-eye-tracking-study/
  42. 42 http://bestwebdesignschools.com/2009/usabilityedu-25-incredibly-useful-usability-cheat-sheets-checklists/
  43. 43 http://www.masternewmedia.org/news/2007/03/23/online_marketing_10_usability_findings.htm
  44. 44 http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm

↑ Back to top Tweet itShare on Facebook

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

Advertisement
  1. 1

    Fabulous. Thanks!

    4
  2. 2

    Really nice article and very useful, some of the ideas I will look into and implement

    Cheers SM

    1
  3. 3

    Just great post and very useful.

    One quetsion:
    Since most users don´t scroll I wonder why there aren´t more liquid layouts…

    Best regards

    -6
  4. 4

    Jerome (SpeedAirMan)

    September 24, 2009 12:35 am

    Nothing really new, but still really interesting !

    Always useful to remember those usability guidelines. Thank you for the article !

    2
  5. 5

    really helpful…thank u guys

    1
  6. 6

    Quality article, really useful thanx alot will deffo bookmark!!

    0
  7. 7

    The UX matters article Label Placement in Forms is from 2006. Isn’t there another updated study?

    1
  8. 8

    Found this when *everyone* was twittering about it :)

    Nice article. I like the Bonus part where you’ve shown how to apply real numbers to UI design – I find those sort of things really help to justify why you’ve picked the layout you have. It stops it looking like a consultant’s personal opinion…it’s a formula to follow that will be apparent on successful sites too – great :) I shall add that to my notes ….

    1
  9. 9

    Holy shit this is helpfull! I’ll sure bookmark this and use it as reference.

    1
  10. 10

    Great article. Thanks.

    1
  11. 11

    Thanks for this! It’s very well written and comprehensive, I’m a regular reader of alertbox but there is too much content there for me to recommend others to read it all. These are quick tips I can send to people I work with, just scanning down the page and reading the titles is informative!

    Usability is easy when you put it like that :)

    1
  12. 12

    This is a very useful post. Everyone in web design should definitely take a look.

    1
  13. 13

    Dmitry, you’re the best. Great content and useful information in your articles!

    1
  14. 14

    Hmm 77% of users dotn scroll is from research published in 2000..!!!

    habits have changed, also the example shown has a clear line accross the page where the fold woudl occur, if you want your users to scroll you need to provide visual (i.e. vertical) prompts that more content lies further down so text / images that spans the ‘fold’ or other graphical cues.

    I’ve wathced many eyetracking sessions and more often than not users do scroll.

    otherwise a great post

    2
  15. 15

    Nice overview of some really important findings and guidelines. Concerning the studies: it can be dangerous to take every result for granted from a study.Nice article though!

    1
  16. 16

    Neatly said… thanks

    1
  17. 17

    Hmmm, good article, but compare the first item (Form Labels Work Best…) on a long form (15 – 20+ items) with Users Do Not Scroll :-s

    Still, a darn good read :-)

    -1
  18. 18

    Great! This is really helpful for the develop of my own site. So I’ve a lot to do.. In my test page i’m trying to apply your suggestions…

    0
  19. 19

    The thinking represented here about scrolling and the fold is a bit outdated and somewhat misleading.

    The data shows that users will readily scroll, and that rather than getting hung up on the idea of a fold (which in any case will vary widely according to the user), designers should concentrate on producing a clear hierarchy of information supported by a usable and logical navigation.

    The term ‘fold’ is a throwback to newspaper layout – and we all know where they’re heading.

    0
  20. 20

    Thank you for this useful article
    “Most Users Do Not Scroll” ???
    Nowadays, it’s not absolutely true !! Recent studies show just the opposite…
    Check these: Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the Myth of the Fold (Boxes and Arrows)

    1
  21. 21

    I see interesting trend of reinventing the “hot water” from some time. The best practices are already written in the books (concerning typography) and yet web designers tend to:
    1. Completely ignore them, if ever read them
    2. Reinvent them – slowly and painfully

    I think it is time for web design to be taken much more serious by users, developers and designers. This is not the simple HTML that was 10 years ago.

    0
  22. 22

    Very cool article, but I agree with Fred and John. Users do scroll. When publishing usability testing, especially as related to technology, I think the cut-off needs to be 3 years or so before it’s no longer relevant. People HATED the iphone keyboard initially, now I seldom read any complaints about it. Point being, people are adapting to technology at an exponential rate.

    1
  23. 23

    Nice overview on usability findings…. thanks for sharing. Anyway… last link in Other Resources called “Web form design guidelines: an eye-tracking study” leads to “Not found” page.

    1
  24. 24

    Really interesting read – i’m thinking about making a simple calculator to do all of the math mentioned above.

    1
  25. 25

    Useful! Thanks!

    -1
  26. 26

    I disagree with the blanket statement that most users don’t scroll. I’ve found that users scroll when they want to scroll. Maybe the more accurate statement is most users don’t think they need to scroll.

    0
  27. 27

    No scrolling allowed? Not so true anymore, per Jakob Nielsen’s himself!

    http://www.useit.com/alertbox/9712a.html (“changes in web usability since 1994 – and that article dates back 1997 !!)

    -1
  28. 28

    Nice article Dmitry, thanks.

    Do you have any links for the two studies you mention under the white space section? (Lin and Chaperro, Shaikh and Baker.) I’d be interested to read them.

    1
  29. 29

    Best article for a long time.

    2
  30. 30

    I enjoyed this articles very informative!

    1
  31. 31

    “Most Users Do Not Scroll”? The majority of the a short poll on the Webstandardblog prefers scrolling, not a pagination. Therefore I can’t share this opinion.

    2
  32. 32

    Other than the articles that Fred listed, does anyone know of any stats or findings that can provide info on the fact that all users do scroll now in opposed to the year 2000. It would really help.

    Great article!

    1
  33. 33

    Very interesting. Thanks alot!

    1
  34. 34

    Tschai (Aytemir.com)

    September 24, 2009 3:25 am

    “Most Users Are Blind To Advertising”

    I’m working on this with my upcoming fan-tas-tic theme ;)

    1
  35. 35

    Nice articals!
    Thanks alot :)

    1
  36. 36

    Excellent article, sadly most marketing dept. (in charge of he budget) knows nothing about this and will force unnecessary and wrong changes…

    1
  37. 37

    great article. Thanks heaps!

    1
  38. 38

    A good article! back to basics

    1
  39. 39

    thats just priceless, thank you!

    0
  40. 40

    not agree with “Form Labels Work Best Above The Field” this is against accessibility and it can increase page length.

    0
  41. 41

    Very usefull, thanks a lot!

    1
  42. 42

    Great article! Have made a mountain of notes to drum into my head now, and alot more to look further into! Thanks SM :) Dugg, stumbled and tweeted!

    0
  43. 43

    Jared Spool described a “5-second” test for a page with a very focused purpose (not home page), where you show the page for only 5 seconds and then ask the user what they remember. Fascinating.

    1
  44. 44

    Your site is great truly useful stuff on it as well like this article.
    keep it up

    1
  45. 45

    You guys don’t stop do you. Great piece after great piece!!.

    1
  46. 46

    Great list.

    We’re currently doing some research on usability testing research it would be great if you could have a look and give some feedback – chance to win $300.

    Thanks.

    1
  47. 47

    Great post, very useful!
    Thank you!

    -1
  48. 48

    awesome article!

    1
  49. 49

    Could anyone tell me that showing a (good!) image of a trainer on his website increases the credibility of this trainer or that it makes no difference.
    If someone did some research on this matter, please inform me. I would be very grateful!

    0
  50. 50

    As others have already pointed out the information you presented regarding scrolling is outdated. The “studies” that were done regarding form labels are not statistically valid.

    I am not saying it’s all bad but I hope no one follows this advice blindly.

    0

↑ Back to top