Prioritizing Web Usability
Jacob Nielsen and Hoa Loranger
This book reflects the data obtained in usability testing sessions on 716 websites with 2,163 users from around the world. Users were defined as high or low experience based on their familiarity with computers and the web.
Note: Usability guidelines and observations about user behavior fall into several categories. Listed in order of utility/difficulty to obtain:
- General findings regarding user behavior across most websites
- Specialized findings about specific genres of sites or areas of sites
- Detailed findings about a specific site and its customers. (Can only be achieved through usability testing of specific sites)
The Neilsen group has seen an average 135% increase in conversion rate after a redesign for usability was performed.
How people use the web
You have less than two minutes to communicate the first time a prospective customer visits your web site. User spend an average of 27 seconds on each web page.
In the 2006 round of usability tests performed. People were able to successfully perform the tasks assigned to them 66% of the time. (Bear in mind the failure rate for people viewing new sites will be higher than for the sites they are familiar with)
When performing usability testing it is important that subjects start on both the homepage as well as interior pages.
Average time on page for first visit to website via:
- Homepage
- High experience user 25 seconds
- Low experience users 35 seconds
- Each time user returns to site, they spend less and less time on the homepage.
- Note: Once a user has visited a site and been disappointed with the content, there is only 12% chance they will return.
- Interior links
- High experience user 45 seconds
- Low experience users 60 seconds
- Note
- The increased amount of time on page for entry via interior links versus entry via home page is because typically the interior pages are typically more directly related to their tasks than a more general homepage.
- Visitors will read more content when they enter via deep links. They may read as many as 100 words of initial information.
- After landing, when browsing the interior pages users spend an average of only 27 seconds on each page.
Scrolling
23% of first time visitors scroll on the homepage, this percentage decreases with each subsequent visit.
Users who scroll on average viewed 2.3 screens in total, including the initial one above the fold. Of users who viewed pages that were longer than one page, 58% did not scroll the page. 42% viewed 2 page full, only 14% viewed beyond 2 pages full.
Users with more web experience scrolled more than those with less experience. Our low experience users only scrolled 38% or long pages, whereas the high experience users scrolled 46% of these pages.
Scrolling page by type (only includes pages that could be scrolled)
- Homepage 1st visit
- Home page, 4th and later visits
- Interior pages
- Search engine results page
- Note:
- The screen resolution used here was 1024 x 768
Click traffic
There is a fascinating pie chart that breaks down where on page clicks take place on pg 35. The footer is the smallest portion. Right hand column, left hand column and top of page received even click traffic (Together they share a little less than half). The content area or active window received a little less than half the click traffic as well.
Search Engine Usage
Users typically type in 2-3 words
93% of users only visited the first search engine results page. 7% moved onto a second results page, and the number who visited 3 search engine results page was less than 1%.
Only 47% of those who clicked on the first serp scrolled the results page.
Information foraging behavior dictates that people are now more looking for an acute answer from a site than to actually engage its contents or larger purpose. Thus the number of visitors becomes decreasingly relevant and conversion rate becomes increasingly relevant.
Where users click on the SERP’s (Organic only)
- Result #1
- Result # 2
- Result #3
- Result #4
- Result #5
- Result #6
- Result #7
- Result #8
- Result #9
- Result #10
- Results 11+
- Note: The numbers don’t add up due to rounding.
Four ways to grab value from search engine visitors:
- Offer pages with clear answers to common pages that will rank well in the search engines
- Embellish the answer with rich “See also” links to related content and services. Global navigation will not do the trick because answer seekers will ignore it. Remember these users don’t care about your site, but these contextual links give the most eager (and likely to buy) users the ability to dig deeper and see your for pay services. “See also” links can be embedded or but at the end of the content as a CTA.
- Go beyond pure information and provide analysis and insight, preferably from a unique perspective and with a striking personality that supports your positioning.
- Publish a newsletter with additional tips and useful information. E-mail newsletters set-up a relationship with users, offering a more personal experience than page viewing.
PPC
You have to optimize based on profit, some times a lower ranked cheaper spot generate more profit than a higher result. CR for adwords can vary with lower results sometimes having a higher CR.
Never use conversion trackers or other web analytics from the search engines who are running your PPC campaigns. This allows the person charging you to know what you profit margins are, its just a bad idea.
Factors influencing keyword bidding prices.
- Knowledge of its effectiveness by business, this is decreasing which drives bids.
- Number of business that exist in the market place.
- Conversion rates. The higher a sites conversion rate, the higher the ceiling goes in their PPC arbitrage. They make more per visitor therefore they can bid more on PPC. This means conversion rate (Or usability as they would say) is mirrored in PPC bids in terms of the broad trend of improvement.
- Note: They estimate awareness of PPC as a tool will reach its plateu/saturation point in 2010.
Standards and Key Usability issues
Key Usability issues (Ranking/Order is a factor of how bad the practice is and how widely it is practiced):
- Highly important
- Links must change color after they have been clicked
- Do not break the back button (meta-tag refresh instruction etc.)
- Do not force the opening of new browser windows when clicking on links
- Exception: For PDF’s and similar documents you should:
- Open non-web documents in a new browser window
- Warn users in advance that a new window will appear
- Remove browser “chrome” (back, forward, print buttons etc.)
- The best solution is to prevent the browser from opening the documents in the first place. Instead force them save the file on their hard drive or open it in its native application. (An explanation of how to do this on page 71)
- Never use pop up windows
- Avoid design elements that look like ads.
- (Chris should read pg. 76) People assume colorful peripheral objects are ads and that plain text items are legit. Anything large and colorful particularly it moves is possibly being ignored by users trained to ignore ads. Also pop up blockers can’t read ads, but it knows to block any graphic that has the dimensions of an approved advertising banner ( say 728 by 90 pixels)
- Do not ignore usability/design standards and conventions. Standards ensure that users:
· Know what features to expect
· Know how these features will look in the interface
· Know where to find these features on the site and on the page
· Know how to operate each feature to achieve their goal
· Don’t need to ponder the meaning of unknown design elements
· Don’t miss important features because they overlook a design element that is not standard
· Don’t deal with things that don’t work as expected
- Do not put vaporous content or empty hype on your website
- Do not use dense blocks of unscannable text
- Write at an 8th grade level for broad audiences
- Write about half of what you would if it was print
- Most adults can read about 200 to 300 words per minute, thus you might think you could include a 100 word welcome message on your homepage but his is not the case. Ten to twenty words are more realistic. Most of the time spent on page is spent trying to figure where to go next.
- Moderately important
- Do not offer an in site search engine if it has poor search results (Ch. 5)
- Search result boxes should be 27-30 characters long
- Avoid offering advanced search as it usually fails
- In site SERP’s should always mimic the major search engines in layout and design
- Use a hyperlinked headline followed by a two or three line summary
- Do not put long videos on your site. Shoot for a minute or less when possible.
- Do not use frozen layouts, use a liquid layout
- Always make sure the web design and navigation is consistent across the site
- Make sure your site works across all browsers
- Keep all critical information above the fold
- Do not use complex urls
- Do not abuse flash
- Flash intros
- Needless flash effects to jazz up a page
- Non-standard flash scroll bars
- Somewhat important
- Quick download speed. 100k should be the target page file size for a home page.
- Do not use frames
- Never require plug-ins of technology that has not reached mass adoption by users.
- Do not force people to register when it is not necessary
- Make sure all clickable items are obviously so.
- Never use a splash screen
- Former problems that are no longer an issue
- Links do not have to be blue, they just have to stand out.
Navigation and Information Architecture
The four most important things a homepage must communicate to new readers in the 30 seconds they spend on the page:
- What site they have arrived at
- What benefits the organization offers them
- Something about the company and its latest products or new developments
- Their choices and how to get to the most relevant section for them
Note:
- Always be consistent in your navigational schemes
- Remind users their on the right path. Provide feedback about their location and how it relates to their tasks.
- Links
- Avoid making non links blue
- What’s clickable should be obviously so, what’s not clickable should not look like it is.
- Buttons should look raised in comparison to other objects
- Ensure that links and category descriptions explicitly describe what users will find at the destination. Never use jargon, always plain language.
- Avoid putting the same link in multiple places on the page, it causes people to think they are different links and ends in circling and confusion.
- Menus
- Menus that require a hover over effect to be revealed are a bad idea
- The longer the vertical drop down menu list, the more difficult it is to control. The further users must travel down the list, they more likely they are to lose their place. Rather than providing a long drop down list, better to let them click the main heading and then be taken to a new page that clearly lists their choices with proper descriptions.
- Do not use multi-level menus with more than two levels, and always allow users extra room so the menu does not disappear if they mouse a little bit outside of it.
- Avoid redundancy with links and in general
- Be specific with link s and label names
- Be short and specific
- Never use jargon
- Use keywords (aka trigger words) to start off a link when possible
- Never use vague link names that require users to obtain context else where on the page such as “learn more” or “more”.
- Links that start with identical or redundant phrases require people to carefully read all of them to glean the differences.
Typography: Readability and Legibility
- Type
- For a general audience use a font size between 10 and 12 points.
- Avoid busy backgrounds
- Use black text on white backgrounds
- Avoid anti-aliasing for text smaller than 12 points because it will blur the text.
- Keep moving all cap and graphical text to a minimum
- Small font size is not a solution for fitting more content on a page. More text often means less reading. Dense text drives people away.
- Set text size using a relative size scheme (such as percentages or em values) instead of fixed sizes. For example, don’t specify that a headline should appear in 14 point type. Say that it should be 140 percent of the size of the body text. Then if users enlarge the text, the headline will still look bigger that the rest of text. A liquid design allows text to be scaled relative to the viewers browser settings and screen resolution while still letting designers dictate the stricture of the page.
- If your site targets seniors provide an obvious way for them to resize the text size, have a visible resize button within your pages so that people can easily adjust the text size. A smaller and larger letter “A” is the preferred Icon for this feature (Pictured on pg. 231)
- Make sure to choose a font that is available on your customers computer and browser, and always supply a list of font alternatives in order of preference.
- Unlike print the sans serif family of fonts are best to use for the web.
- Veranda is the most readable and highest rated in terms of user preference.
- Limit the number of font styles on your site and apply them consistently. Use font styles as a subtle and effective way to create order and communicate hierarchical elements on your site.
- Do not use more than three different type faces in the main areas of your site.
- ALL-CAP TEXT REDUCES READING SPEED BY ABOUT TEN PERCENT.
- 8% of men and .5% of men have some form of color blindness
- Provide a secondary cue other than color to distinguish important information
- Do not use graphics to display text unless necessary
- File bloat
- Not searchable
- Not selectable
- Does not scale
Writing for the Web
- Avoid jargon, acronyms, sarcasm, word play, hype/self-congratulatory statements, meaningless/unnecessary words/phrases and complex diction above an 8th grade reading level
- Ask yourself if someone reading the text on your homepage can get what they need to know in the first two sentences.
- Start with the conclusion, then reveal supporting facts.
- People only read a little bit on each page and feel better about clicking hyperlinks so layer key information across multiple pages.
- Use:
- Highlighted keywords (Bolding or a different color)
- Concise and descriptive titles and headings
- Bulleted lists and numbered steps
- Short paragraphs
- Making sure that the most important points on a web page is stated writing the first two lines.
- Heading Hierarchy
- Main headings should appear larger and bolder than the body text
- Subheadings should be smaller than main headings but still stand out from body text
- Left-justify headings and set in sentence case or title case; they are easier to read than centered headings set in all capital letters.
- Lists
- Vertical lists are more effective than run in (in a sentence) lists at conveying a sequence of events or ideas. 47% more efficient
- Only use vertical lists for four or more items to be listed.
- Introduce a list with clear, descriptive lead in sentence or phrase. The lead in does not have to be a complete sentence as long as each item in the list completes the sentence.
- Indent vertical lists and begin run-over lines under the text, not the bullet.
- Don’t leave to much space between the bullet and the start of the text. Having wide gaps between the bullet and the text is difficult to read; the eye must travel farther to make the connection.
- When possible, omit articles such as “a”, “an”, or “the”, and repetitive words from the beginning of list items.
- Don’t overuse lists, as they can lose their effectiveness.
- Use parallel(consistent) phrasing
Presenting Page Elements
Web users have learned through experience to expect certain items in certain areas and to ignore others. Understanding users behavior and expectations can help you create layouts that satisfy them and make it more likely that they’ll get your message.
Before adding a design element to your site, ask yourself: Does it simplify the users task? Does it add value to the user? If the answer is no, eliminate it.
Note:
- People generally look at the active window and then to the left if need be to find navigation.
- Boxed areas are commonly associated with advertising so never put links in a box in the periphery.
- Proper user of white space should maximize perceptual distance between groups while minimizing the distance between items within a group.
- The three clicks rule – An old usability adage is that all content on a site must be accessible by three click from the homepage. This is not always true because having to thing more about each click and having a greater risk of clicking the wrong link creates trouble in itself usually much more trouble than a simple extra click on an obvious link. Attempts to force a large website within three click usually results in obscure and overloaded navigation systems.
Common page layout mistakes:
- Page are not structured in prioritized order
- Interactions are overly complex and don’t offer guidelines
- If it is in any way complicated, people will bail. User processes must be idiot proof. User testing is especially valuable for these processes
- For web applications, place the input area in close proximity to the output/results. People miss visual feedback when the areas are to far apart or not in the same viewable work area.
- Related areas are not grouped in close proximity
- Elements are not properly aligned to create order
- Elements are not placed where people expect
- Unconventional button placement etc.
- Too many elements on page
- Login and register pages typically under emphasize the new user/register area and new users instead attempt to create a new user and password in the login boxes. (People are inherently drown to text boxes because they are actionable items).See example on pg 341.
- Amazons login/register page is best because it clearly accommodates new and existing users.
Rules for scrolling
- If people expect something to be in a particular place, they will not look for that item elsewhere or scroll to find it
- If there is white space at the bottom of the viewable area of the screen, people usually assume that’s the end of the page and don’t scroll any father, even when their browser scroll bar indicates otherwise.
- People interpret ad-like elements that appear immediately above the fold as the end of a page because ads are commonly placed in peripheral areas of the page.
- Placing indicators such as headers or content that can be seen just above the bottom of the screen strongly suggests that there is more content below
- Do not put content into small sub page boxes that are scrollable (like boudinotagency.com homepage). Hard to read and scroll bar moves to fast.
Multi-media
The tendency here is to abuse for non-user friendly purposes, avoid this.
Note:
- Multi-media are highly prone to usability issues either technical (plug-ins , downloads, settings) or user related (confusing technical jargon, to many choices, etc.)
- If users ever have to wait for anything to download on your site you should provide them with a status meter.
- The video should ideally start automatically
- Don’t require your users to select the band width options for video, either detect it automatically or use the lowest common denominator as the default setting.
- If you need to offer different size use common language like big or small
Items in book not copied:
- Chapter on product pages found on page 286 (Not copied here because it was less relevant)
- More on search (In site and SE0) listed in Ch. 5