Archive for February, 2010

Eye tracking study reveals 12 website tactics

February 28, 2010 Leave a comment

Eye tracking studies have revealed valuable information about how people read and interact with websites. One study, Eyetrack III, published a summary of their eye tracking results for news sites.

While this is just one eye tracking study focused on a particular type of site, I think there are instructive nuggets here for any informational website.

In no particular order, here are 12 results I found particularly interesting.

1.Headlines draw eyes before pictures. This might be surprising for some people since the trend has been to add photos and graphics specifically to draw the eye. Even I have been adding more photos to my blog to spice it up a bit.

But the participants in this study looked at headlines, especially in the upper left of the page, before they looked at photos when they landed on a page. So you can’t rely on eye candy to make up for poor headlines.

2. People scan the first couple words of a headline. Yes, long headlines can work. But this study suggests that people scan the first few words before deciding whether to continue reading.

This means you should front-load your headlines with the most interesting and provocative words. It’s also an argument for getting your keywords up front in headlines.

3. People scan the left side of a list of headlines. This is related to the previous point. When presented with a list of headlines or links, people will scan down the left side, looking at the first couple words, to find something they’re interested in. They don’t necessarily read each line beginning to end.

The implication is the same as before. Get your most mind catching words up front.

4. Your headline must grab attention in less than 1 second. Online readers are grazers. They move fast and nibble. If you want to hook them into spending time reading about something, you have to catch their attention very, very fast.

No nonsense. No meandering copy. No “throat clearing” to fill space. You have to get to the point instantly.

5. Smaller type promotes closer reading. This makes sense because smaller type is harder to read. So, to read it, you have to really focus. Larger type promotes scanning rather than reading.

Be careful with this one. No one is suggesting you shrink your web type to make it barely legible. I think the takeaway is to avoid making your type too big if you want close reading and avoid making it too small if you want to communicate rapidly.

6. Navigation at the top of the page works best. I find this interesting from a design point of view since many sites now use side navigation. I take this one with grain of salt, since the study also shows that side navigation can work fine.

The point may be that anything at the top of a page will be seen immediately. And since top navigation must be simple because of space limits, top navigation is probably much simpler to use.

7. Short paragraphs encourage reading. No surprise here. Even in print this is true. Big blocks of type look imposing and difficult, like reading a Faulkner novel where a paragraph goes on seemingly forever.

In online writing as in most ad writing, you have to forget normal paragraph development. Breaks should be logical, but they’re organized into a flow of ideas rather than distinct paragraphs.

8. Introductory paragraphs enjoy high readership. Just to be clear, an intro paragraph is a content summary that appears after the headline and before the main text. It’s common in some news writing. I’ve also used it in print ads which are designed in the form of an article, often called an “advertorial.”

The downside is that while intros get read, this study says they don’t affect readership of the main text. Maybe they help improve comprehension. The study doesn’t say.

9. Ad placement in the top and left positions works best. For anyone familiar with “heat maps,” this make sense. The eye tends to start in the upper left of a page. So an ad, or anything else, in that area will be noticed.

This is another one you have to be wary of. Ad blindness tends to happen when people get used to seeing ads in a particular place. So even the prime upper left area won’t work so well if you always put ads there.

10. People notice ads placed close to popular content. Obviously. This mimics the well-known idea in the offline world where ads are placed anywhere eyeballs point.

This is why ads right over a urinal work. Men look straight ahead, usually at a blank wall 12 inches from their face when standing at a urinal, so any reading material there will get read.

11. People read text ads more than graphic ads. Not everyone will agree with this one. But it makes sense if you consider that information is usually in the form of text. So people looking for information are looking for text, not pictures.

However, graphics can be useful for conveying information that is difficult to communicate in pure text, such as how something looks, mathematical information, before and after comparisons, etc. Which leads us to the last tactic.

12. Multimedia works better than text for unfamiliar or conceptual information. Reading relies on people having some understanding of the subject. The more familiar they are with the subject, the faster and easier reading is.

If you’re trying to describe a process, for example, a video or illustration conveys this information better than text.



11 Striking Findings From an Eye Tracking Study

February 28, 2010 Leave a comment

If you’ve got a spare 10 minutes today check out Eyetrack III who have published some great findings in their latest eye tracking studies of news and multimedia content sites (found via Direct Creative Blog).

There’s loads of juicy goodness in the full article but here are 11 of the main points that grabbed my attention:

  1. “Dominant headlines most often draw the eye first upon entering the page”
  2. “Smaller type encourages focused viewing behavior…. larger type promotes lighter scanning”
  3. “a headline has less than a second of a site visitor’s attention”
  4. “For headlines — especially longer ones — it would appear that the first couple of words need to be real attention-grabbers”
  5. “Navigation placed at the top of a homepage performed best”
  6. “Shorter paragraphs performed better in Eyetrack III research than longer ones.”
  7. “We found that ads in the top and left portions of a homepage received the most eye fixations”
  8. “Size matters. Bigger ads had a better chance of being seen”
  9. “Close proximity to popular editorial content really helped ads get seen”
  10. “the bigger the image, the more time people took to look at it.”
  11. “Our research also shows that clean, clear faces in images attract more eye fixations on homepages.


15 Important Research Findings You Should Know

February 28, 2010 Leave a comment
  1. Design is a key determinant to building online trust with consumers. For motivated users of an information site, bad design (busy layout, small print, too much text) hurts more than good design helps. – Sillence, Briggs, Fishwick, and Harris, 2004.

    Also see Stanford University’s “Guidelines for Web Credibility”.

  2. Layout on a web page (whitespace and advanced layout of headers, indentation, and figures) may not measurably influence performance, but it does influence satisfaction. – Chaperro, Shaikh, and Baker, 2005.
  3. Experience matters: Blue links are easier to click than black ones, even though black ones have higher visual contrast and are easier to see. – Van Schaik and Ling, 2003.
  4. It’s important to consider the users when you have a choice of icons, links, or both. Initial performance is best with the link alone. Frequent users can use either equally effectively. Icons are not faster, relative to text links alone. – Wiedenbeck, 1999.
  5. Rules of thumb for icons: Make them as large as feasible, place frequently used icons in a persistent task bar, and arrange them either in a square (first choice) or in a horizontal layout. – Grobelny, Karwowski, and Drury, 2005.
  6. The acceptance and impact of animation is enhanced when users are warned to expect it and allowed to start it when they want. – Weiss, Knowlton, and Morrison, 2002.
  7. Use of whitespace between paragraphs and in the left and right margins increases comprehension by almost 20 %. – Lin, 2004.
  8. A format of 95 characters per line is read significantly faster than shorter line lengths; however, there are no significant differences in comprehension, preference, or overall satisfaction, regardless of line length. – Shaikh, 2005.
  9. Applications vs. websites: In general, visual layout guidelines for GUIs also apply to the web, but there are differences to be aware of. For example, dense pages with lots of links take longer to scan for both GUI and web; however, alignment may not be as critical for web pages as previously thought. – Parush, Shwarts, Shtub, and Chandra, 2005.
  10. Narrative presentation enhances comprehension and memory. Narrative advertisements produce more positive attitude about the brand and a higher incidence of intent to purchase. – Escalas, 2004.
  11. On sites with clear labels and prominent navigation options, users tend to browse rather than search. Searching is no faster than browsing in this context.Katz and Byrne, 2003.
  12. Users will wait longer for better content. Users will wait between 8-10 seconds for information on the web, depending on the quality of the information. – Ryan and Valverde, 2003.
  13. Consumer purchase behavior is driven by perceived security, privacy, quality of content and design, in that order. – Ranganathan and Ganapathy, 2002.
  14. In 2001, Bernard found that prior user experience with websites dictated where they expected common web page elements to appear on a page. The same still holds true today: Users have clear expectations about where to find the things they want (search and back-to-home links) as well as the things they want to avoid (advertising). – Shaihk and Lenz, 2006.
  15. When assessing web accessibility under four conditions (expert review, screenreader using JAWS, automated testing via “Bobby”, and remote testing by blind users) those using screenreaders find the most issues, while automated testing finds the least number of accessibility issues. – Mankoff, Fait, and Tran, 2005.

10 Useful Usability Findings and Guidelines

February 28, 2010 Leave a comment

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.

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.

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:

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

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.

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.

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.

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.

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

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.

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,


Usability Guidelines for Help, Feedback and Error Tolerance

February 28, 2010 Leave a comment

These guidelines help assess if the site helps prevent customers from making errors. A site is error-tolerant if, despite evident errors in input, the intended result may be achieved with either no or minimal corrective action by the customer.

  1. The FAQ or on-line help provides step-by-step instructions to help users carry out the most important tasks.
  2. It is easy to get help in the right form and at the right time.
  3. Prompts are brief and unambiguous.
  4. The user does not need to consult user manuals or other external information to use the site.
  5. The site uses a customised 404 page, which includes tips on how to find the missing page and links to “Home” and Search.
  6. The site provides good feedback (e.g. progress indicators or messages) when needed (e.g. during checkout).
  7. Users are given help in choosing products.
  8. User confirmation is required before carrying out potentially “dangerous” actions (e.g. deleting something).
  9. Confirmation pages are clear.
  10. Error messages contain clear instructions on what to do next.
  11. Immediately prior to committing to the purchase, the site shows the user a clear summary page and this will not be confused with a purchase confirmation page.
  12. When the user needs to choose between different options (such as in a dialog box), the options are obvious.
  13. The site keeps users informed about unavoidable delays in the site’s response time (e.g. when authorising a credit card transaction).
  14. Error messages are written in a non-derisory tone and do not blame the user for the error.
  15. Pages load quickly (5 seconds or less).
  16. The site provides immediate feedback on user input or actions.
  17. The user is warned about large, slow-loading pages (e.g. “Please wait…”), and the most important information appears first.
  18. Where tool tips are used, they provide useful additional help and do not simply duplicate text in the icon, link or field label.
  19. When giving instructions, pages tell users what to do rather than what to avoid doing.
  20. The site shows users how to do common tasks where appropriate (e.g. with demonstrations of the site’s functionality).
  21. The site provides feedback (e.g. “Did you know?”) that helps the user learn how to use the site.
  22. The site provides context sensitive help.
  23. Help is clear and direct and simply expressed in plain English, free from jargon and buzzwords.
  24. The site provides clear feedback when a task has been completed successfully.
  25. Important instructions remain on the screen while needed, and there are no hasty time outs requiring the user to write down information.
  26. Fitts’ Law is followed (the distance between controls and the size of the controls is appropriate, with size proportional to distance).
  27. There is sufficient space between targets to prevent the user from hitting multiple or incorrect targets.
  28. There is a line space of at least 2 pixels between clickable items.
  29. The site makes it obvious when and where an error has occurred (e.g. when a form is incomplete, highlighting the missing fields).
  30. The site uses appropriate selection methods (e.g. pull-down menus) as an alternative to typing.
  31. The site does a good job of preventing the user from making errors.
  32. The site prompts the user before correcting erroneous input (e.g. Google’s “Did you mean…?”).
  33. The site ensures that work is not lost (either by the user or site error).
  34. Error messages are written in plain language with sufficient explanation of the problem.
  35. When relevant, the user can defer fixing errors until later in the task.
  36. The site can provide more detail about error messages if required.
  37. It is easy to “undo” (or “cancel”) and “redo” actions.


Search Usability Guideline

February 28, 2010 Leave a comment

Search is one of the dominant ways that many customers interact with web sites. A good search engine needs to acknowledge the ‘human’ side of searching, which means dealing with spelling errors and synonyms (such as ‘laptop’ for ‘notebook’). Google has set the standard for how search should look and behave, and many of these guidelines are based on this best practice.

  1. The default search is intuitive to configure (no Boolean operators).
  2. The search results page shows the user what was searched for and it is easy to edit and resubmit the search.
  3. Search results are clear, useful and ranked by relevance.
  4. The search results page makes it clear how many results were retrieved, and the number of results per page can be configured by the user.
  5. If no results are returned, the system offers ideas or options for improving the query based on identifiable problems with the user’s input.
  6. The search engine handles empty queries gracefully.
  7. The most common queries (as reflected in the site log) produce useful results.
  8. The search engine includes templates, examples or hints on how to use it effectively.
  9. The site includes a more powerful search interface available to help users refine their searches (preferably named “revise search” or “refine search”, not “advanced search”).
  10. The search results page does not show duplicate results (either perceived duplicates or actual duplicates).
  11. The search box is long enough to handle common query lengths.
  12. Searches cover the entire web site, not a portion of it.
  13. If the site allows users to set up a complex search, these searches can be saved and executed on a regular basis (so users can keep up-to-date with dynamic content).
  14. The search interface is located where users will expect to find it (top right of page).
  15. The search box and its controls are clearly labeled (multiple search boxes can be confusing).
  16. The site supports people who want to browse and people who want to search.
  17. The scope of the search is made explicit on the search results page and users can restrict the scope (if relevant to the task).
  18. The search results page displays useful meta-information, such as the size of the document, the date that the document was created and the file type (Word, pdf etc.).
  19. The search engine provides automatic spell checking and looks for plurals and synonyms.
  20. The search engine provides an option for similarity search (“more like this”).


Page layout and Visual design Usability Guidelines

February 28, 2010 Leave a comment

The checkpoints in this area ask if the dialogue is aesthetic and minimalist. Appropriate visual design means that the fonts, icons, colours and layout help the customer complete common tasks and that pages do not contain information that is irrelevant or rarely needed.

  1. The screen density is appropriate for the target users and their tasks.
  2. The layout helps focus attention on what to do next.
  3. On all pages, the most important information (such as frequently used topics, features and functions) is presented on the first screenful of information (“above the fold”).
  4. The site can be used without scrolling horizontally.
  5. Things that are clickable (like buttons) are obviously pressable.
  6. Items that aren’t clickable do not have characteristics that suggest that they are.
  7. The functionality of buttons and controls is obvious from their labels or from their design.
  8. Clickable images include redundant text labels (i.e. there is no ‘mystery meat’ navigation).
  9. Hypertext links are easy to identify (e.g. underlined) without needing to ‘minesweep’.
  10. Fonts are used consistently.
  11. The relationship between controls and their actions is obvious.
  12. Icons and graphics are standard and/or intuitive (concrete and familiar).
  13. There is a clear visual “starting point” to every page.
  14. Each page on the site shares a consistent layout.
  15. Pages on the site are formatted for printing, or there is a printer-friendly version.
  16. Buttons and links show that they have been clicked.
  17. GUI components (like radio buttons and check boxes) are used appropriately .
  18. Fonts are readable.
  19. The site avoids italicised text and uses underlining only for hypertext links.
  20. There is a good balance between information density and use of white space.
  21. The site is pleasant to look at.
  22. Pages are free of “scroll stoppers” (headings or page elements that create the illusion that users have reached the top or bottom of a page when they have not).
  23. The site avoids extensive use of upper case text.
  24. The site has a consistent, clearly recognisable look and feel that will engage users.
  25. Saturated blue is avoided for fine detail (e.g. text, thin lines and symbols).
  26. Colour is used to structure and group items on the page.
  27. Graphics will not be confused with banner ads.
  28. Emboldening is used to emphasise important topic categories .
  29. On content pages, line lengths are neither too short (<50 characters per line) nor too long (>100 characters per line) when viewed in a standard browser width window.
  30. Pages have been designed to an underlying grid, with items and widgets aligned both horizontally and vertically.
  31. Meaningful labels, effective background colours and appropriate use of borders and white space help users identify a set of items as a discrete functional block.
  32. The colours work well together and complicated backgrounds are avoided.
  33. Individual pages are free of clutter and irrelevant information.
  34. Standard elements (such as page titles, site navigation, page navigation, privacy policy etc.) are easy to locate.
  35. The organisation’s logo is placed in the same location on every page, and clicking the logo returns the user to the most logical page (e.g. the home page).
  36. Attention-attracting features (such as animation, bold colours and size differentials) are used sparingly and only where relevant.
  37. Icons are visually and conceptually distinct yet still harmonious (clearly part of the same family).
  38. Related information and functions are clustered together, and each group can be scanned in a single fixation (5-deg, about 4.4cm diameter circle on screen).