Usability Tips Based on Research Studies

We hear plenty usability tips and techniques from an incalculable number of sources. Many of the ones we take seriously have sound logic, but it’s even more validating when we find actual data and reports to back up their theories and conjectures.
This article discusses usability findings of research results such as eye-tracking studies, reports, analytics, and usability surveys pertaining to website usability and improvements. You’ll discover that many of these usability tips will be common sense but are further supported with numbers; however, some might surprise you and change your outlook on your current design processes.

 

1. Forget the "Three-Click Rule"

The idea that users will get frustrated if they have to click more than three times to find a piece of content on your website has been around for ages. In 2001, Jeffrey Zeldman, a recognized authority in the web design industry, wrote that the three-click rule "can help you create sites with intuitive, logical hierarchical structures" in his book, Taking Your Talent to the Web.
Logically, it makes sense. Of course, users will be frustrated if they spend a lot of time clicking around to find what they need.
But why the arbitrary three-click limit? Is there any indication that web users will suddenly give up if it takes them three clicks to get to what the want?
In fact, most users won’t give up just because they’ve hit some magical number. The number of clicks they have to make isn’t related to user frustration.
A study conducted by Joshua Porter published on User Interface Engineering found out that users aren’t more likely to resign to failure after three clicks versus a higher number such as 12 clicks. "Hardly anybody gave up after three clicks," Porter said.
Source: User Interface Engineering
The focus, then, shouldn’t be on reducing the number of clicks to some magically arrived number, but rather on the ease of utility. If you can construct a user interface that’s easy and pleasurable to use, but takes like 15 clicks (e.g. 5 times more than the three-click rule) to achieve a particular task — don’t let the arbitrary three-click rule stop you.

Sources and Further Reading

• Testing the Three-Click Rule
• Breaking the Law: The 3 Click Rule
  

 

2. Enable Content Skimming By Using an F-Shaped Pattern

Dr. Jakob Nielsen, a pioneer in the field of usability, conducted an eye tracking study on the reading habits of web users comprising of over 230 participants. What the research study displayed was that participants exhibited an F-shaped pattern when scanning web content.
Source: Alertbox
A similar study, by search marketing firms Enquiro and Did-it in collaboration with eye-tracking research firm Eyetools, witnessed a similar pattern when they evaluated Google’s search engine results page with an eye tracking study that included 50 participants. Dubbed the "Google Golden Triangle" because the concentration of eye gazes tended to be top and left, the results are congruent with the F-shaped pattern seen in Nielsen’s independent research.
Source: Clickr Media
For designers and web copywriters, these results suggest that content you want to be seen should be placed towards the left, and also that the use of content that fits an F-shaped pattern (such as headings followed by paragraphs or bullet points) increases the likelihood that they will be encountered by a user who is skimming a web page.

Sources and Further Reading

• F-Shaped Pattern For Reading Web Content
• Google Golden Triangle – Eyetracking How People View Search Results

 

3. Don’t Make Users Wait: Speed Up Your Website

We’re always told that our users are impatient: they hate waiting. Well, that’s logical — who likes waiting on purpose? But is there any proof outside of anecdotal evidence that people actually don’t like waiting and that page performance affects website users?
Bing, Microsoft’s search engine, conducted an analysis to see if there are any correlations between page speed versus numerous performance indicators such as satisfaction, revenue generated per user, and clicking speed. The report showed that a less than 2-second increase of delays in page responsiveness reduced user satisfaction by -3.8%, lost revenue per user of -4.3% and a reduced clicks by -4.3%, among other findings. For a company as large as Microsoft, even a 4.3% drop in revenue can equate to multi-million-dollar losses in profit.
Source: O’Reilly Radar
So users, in fact, are impatient: They’re less satisfied and will reduce their number of clicks if they wait too long. And if you care about search engine ranking, then the incentive to improve page response times is even greater since Google now factors page speed in their search ranking.
What can you do to improve page performance? Use tools that will help you find performance bottlenecks, use CSS sprites to improve page speed, and utilize benchmarking tools like YSlow to quickly see where you can make quick front-end optimizations.

Sources and Further Reading

• Bing and Google Agree: Slow Pages Lose Users
• Selfish, mean, impatient customers: New Thinking

 

4. Make Your Content Easily Readable

Internet users don’t really read content online, at least according to a study by Dr. Nielsen on reading behaviors of people on his website. His analysis shows that people only read 28% of the text on a web page and decreased the more text there is on the page.
Source: Alertbox
To increase the likelihood of your readers getting the most out of your content, utilize techniques for making content easier to read. Highlight keywords, use headings, write short paragraphs, and utilize lists.

Sources and Further Reading

• How Little Do Users Read
• Block Reading: How We Read on the Web

 

5. Don’t Worry About "The Fold" and Vertical Scrolling

There has long been a myth that all of your important content should be above "the fold," a term borrowed from newspapers that refers to the area of a web page that can be seen without having to scroll down — first proposed by Jakob Nielsen.
So, are long pages bad? Should we cram everything at the top of our web layouts because people won’t ever read anything below this fold?
The answer is "No" according to a report by Clicktale, a web analytics company. Their results showed that the length of the page has no influence in the likelihood that a user will scroll down the page.
Source: Clicktale
A study reported by Joe Leech of CX Partners, a user centered design agency, indicated that less content above the fold even encourages users to explore the content below the fold.
Source: cxpartners
The main point to take away here is that you shouldn’t stuff all your important content at the top because you fear that users won’t be able to find them otherwise. Use visual hierarchy principles and the art of distinction to prioritize and infer the importance of various elements in your pages’ content.

Sources and Further Reading

• Unfolding the Fold
• The Myth of the Page Fold: Evidence from User Testing
• Blasting the of the Fold
• The Impact of Paging vs. Scrolling on Reading Online Text Passages

 

6. Place Important Content on the Left of a Web Page

People brought up in cultures where language is read and written from left to right have been trained early on in life to begin at the left of a page, whether in writing or reading a book. This can be the reason why many web users spend a majority of their attention on the left side of a web page — as much as 69% of the time, according to Dr. Nielsen’s eye-tracking study that involved over 20 users.
Source: Alertbox
The same results were reflected on websites whose language were read from right to left, such as Hebrew and Arabic sites, with the results inverted (higher attention on the right side versus the left).
There are two things to take away from this result. First, the language of your site matters when thinking about layout considerations; when designing websites you should consider cultural design considerations. Secondly, for sites that are traditionally read from left to right, placing important design components at the left is a good idea; vice versa for sites whose language is read from right to left.

Sources and Further Reading

• Horizontal Attention Leans Left

 

7. Whitespace of Text Affects Readability

Easy readability of text improves comprehension and reading speed as well as enhancing the likelihood that a user will continue reading instead of abandoning the web page. There are many factors that influence ease of readability, including font choices (serif versus sans-serif), font-size, line-height, background/foreground contrast, as well as spacing.
A study on readability tested reading performance of 20 participants by presenting them with the same text blocks having different margins surrounding the text as well as varying line-heights (the distance between lines of text). It showed that text with no margins was read faster, however, reading comprehension decreased. Faster reading speeds when the text had no margins can be explained by the text and paragraphs being closer together, resulting in less time needed to move the eyes from line to line and paragraph to paragraph.
Source: Software Usability Research Laboratory
As this particular study shows, the way we design our content can greatly impact the user’s experience. Be wary of the details: color, line-heights, tracking, and so forth and be mindful of sound typography principles for the web to ensure that you’re not discouraging your users from reading your content. Furthermore, study the effective use of negative space in web design.

Sources and Further Reading

• Reading Online Text: A Comparison of Four White Space Layouts

 

8. Small Details Make a Huge Difference

Too often, we look at the big picture when creating a web design and ignore the little things when we’re in a time crunch. We forego any thought put into the wording of something, or the design of a single button on a form if time and resources are limited. There are so many other things we need to think about that it’s often easy to let go of the small stuff.
But something as small as a form’s button can affect the success of a site, at least according to user interface design expert Jared Spool, who wrote about a case on how removing a button and adding a clear error message to avoid user errors in a checkout process increased revenue by $300 million in just a year. The first month witnessed a 45% additional sales attributed to the revision of the checkout process.
This attention to detail being important is echoed by Flow, a user-centered design firm. They found that by revising their error page so that it contained useful help text improved completed checkouts by 0.5% per month, which if extrapolated, could mean an additional quarter of a million pounds annually for the particular site.
The message they used? A polite two-sentence message instead of a cryptic 404 error: "We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again."

Pay attention to the details. Use A/B split testing to test your hypothesis and find out what is the most effective design that achieves better results. Set goals using analytics software to benchmark results of design tweaks in relation to site objectives.

Sources and Further Reading

• The $300 Million Button
• £250,000 From Better Error Messages
• The Thickness of Napkins
• Myth #10: If your design is good, small details don’t matter

 

9. Don’t Rely on Search as a Crutch to Bad Navigation

Users expect navigation to be easy to use and well organized. Even with an excellent site search engine, users will still turn to primary navigation first. According to a task test conducted by Gerry McGovern, over 70% of the participants began the task he gave them by clicking on a link on the page as opposed to using the search feature.
This result is similar to a test by UIE of 30 users that tracked e-commerce tasks. The research analysis concluded that "users often gravitated to the search engine when the links on the page didn’t satisfy them in some way." Thus, search is most often utilized only when the user has failed to discover what they were looking for in the current page.
The lesson to be gained here is clear: Don’t rely on site search to remedy poor content organization, findability issues, and bad information architecture. When users are unable to navigate to what they are looking for, attention should be diverted to layout, navigation, and content organization improvements, with improving search functionality as the secondary priority.

Sources and Further Reading

• Navigation is More Important Than Search
• Are There Users Who Always Search?
• Myth #16: Search will solve a website’s navigation problems

 

10. Your Home Page Isn’t As Important as You Think

Visitors to your website are less likely to land on your home page. Search engines are a big factor here, as they’ll link to whatever page is relevant on your site. Links from other websites are also likely to link to pages beyond your home page if that’s where the relevant information is.
According to an analysis by Gerry McGovern, page views sourcing from the home page of websites is decreasing dramatically. He witnessed a drop from 39% from 2003 to only 2% in 2010 of page views coming from the home page of a large research site. This trend was doubly confirmed on another site he studied, where page views sourcing from the home page halved in just two years (from 10% in 2008 to only 5% in 2010).
McGovern’s results indicate that traffic, more and more, is coming from external sources — search engines, social media sites such as Twitter, and content aggregator services such as AllTop — rather than from the front page of a website. Therefore, a higher focus on landing pages versus your home page can get you more bang for your buck in terms of conversion and user-retention opportunities.

Source: sixrevisions.com

Usability Matters - Usability Findings and Guidelines

Usability is an important factor while designing a website. We have to analyze the user behavior and tune your website design according to it  to provide a better user experience.

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

A study by UX Matters 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.

Tumblr 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

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 heat map of a baby looking directly at us, from the UsableWorld study.

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 study 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

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

• Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
• What Makes A Web Site Credible? A Report on a Large Quantitative Study
• The Elements of Computer Credibility
• Elements that Affect Web Credibility: Early Results from a Self-Report Study (Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

We don’t know if Fever 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 Usability) 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.

Basecamp 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 fold (Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the Myth of the Fold (Boxes and Arrows). (thanks, Fred Leuck).

5. Blue Is The Best Color For Links

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.

Google 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

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‘s search box is wide enough to accommodate long sentences.

Apple‘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

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.

Notice the big content margin, padding and paragraph spacing on The Netsetter. 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

Jakob Nielsen’s study 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.

Source: Jakob Nielsen’s AlertBox
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

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).

Apple 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

Jakob Nielsen reports in his AlertBox entry 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.

The square banners on the left sidebar of FlashDen 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

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 study:

• 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 study:

• 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 study:

• 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 study:

• 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,

 

Source: smashingmagazine