27 February, 2009

Ten Guidelines for User-Centered Web Design

In a paper discussing UCD and Web development, Raïssa Katz-Haas offers the following ten guidelines for Web-page design.

1. Visibility—Make important elements such as navigational aids highly visible so users can determine at a glance what they can and cannot do. Visibility helps users predict the effects of their actions.


2. Memory Load—Make screen elements meaningful and consistent across the site to reduce memory load. In this way, users don’t have to remember what the elements mean from one page to another. Relate new items and functions to ones the user already knows.


3. Feedback—Provide immediate feedback when a user performs an action. For example, when the user clicks a button, something on the screen should change so the user knows the system has registered the action.


4. Accessibility—Users need to find information quickly and easily:
users a few ways to find information such navigational elements, search functions, or a site map. However, offer only a few options at a time to avoid confusion. Organize information into small, digestible pieces using a schema or hierarchy that is meaningful to the user.
Make it easy for users to skim; provide clues that allow users to find the information by scanning rather than reading.

5. Orientation/Navigation—Help users orient themselves by providing the following navigational clues:
Descriptive links
A site map
Obvious ways to exit every page
Clearly visible elements on each page that inform users where they are in relation to other pages and how to navigate to other pages
Use frames sparingly, if at all. Frames confuse many users because the Back button, printing, and bookmark functions do not work like they do on non-frames pages. Approximately 60% of Web users employ the Back button as their primary means of navigation. Usability issues surface when the Back button doesn't work the way they expect.


6. Errors—Minimize user errors by avoiding situations in which users are likely to make mistakes. Also try to accommodate incorrect actions by users so they can recover quickly. For example, if you anticipate that users might look for certain information on one Web page that actually appears on another, you can include descriptive links to the page they need.


7. Satisfaction—Make your site pleasant to use and view. Users’ satisfaction with the interface influences their
Perception of ease-of-use.
Motivation for learning how to use the site.
Confidence in the reliability of the information in the site.


8. Legibility—Make text easy to read. When developing online documentation, use
Sans serif fonts rather than serif fonts, especially in body text.
Non-ornamental fonts.
Roman characters rather than italic.
Medium-sized fonts—9 to 11 points for sans serif fonts and 11 to 12 points for serif fonts often work well for body text.
Mixed case for text rather than all capital letters.
Line lengths less than 50 to 60 characters long to facilitate scanning.
High contrast between text and background colors to increase legibility. Dark text against a light background is most legible.


9. Language—
You can improve usability by incorporating the following stylistic elements:
Concise language
Everyday words instead of jargon or technical terms
Active voice and active verbs
Verbs instead of noun strings or nominalizations
Simple sentence structure
Because the Internet crosses cultural and national boundaries, be careful with ambiguity. The following stylistic elements can be misinterpreted easily:
Humor (Humor does not translate well across cultures. At best, it is not understood; at worst, it can offend.)
Metaphors
Icons
Idioms
Puns


10. Visual Design—
The aesthetics of your interface play an important role in communicating information and tone to your users effectively. As you develop your site, consider the following visual design strategies:
Create pages that are interesting yet simple and uncluttered.
Use graphics to illustrate and inform, increase the user’s satisfaction and motivation, and aid navigation. Avoid using graphics that only serve as decoration.
Use graphics that are small in file size so they download quickly.
Make the most important elements the most visually prominent.
Treat text as a graphic element.
Make preliminary page layouts using a grid.
Group related elements close to each other so users can associate the elements just by looking at the placement.
Use white space to visually organize the page, to emphasize important elements, and to give users’ eyes some resting space.
Use invisible table lines (white space) instead of visible lines.
If you must use lines, use light and thin ones.
Use color conservatively. Although color can engage users, it can distract them unnecessarily or be misinterpreted. Also keep in mind that some users have equipment that only supports monochrome. Try your design in monochrome first, then add a few colors.

24 February, 2009

The secret benefit of search engine optimisation: Increased usability

A higher search ranking is what many website owners dream of. What they don't realise is that by optimising their site for the search engines, if done correctly, they can also optimise it for their site visitors.
Ultimately this means more people finding your website and increased sales and lead generation. But are search engine optimisation and usability compatible? Aren't there trade-offs that need to be made between giving search engines what they want and giving people what they want? Read on and find out (although I'm sure you can guess the answer!)...


1. Keyword research carried out

Before you even begin building your website, you should carry out keyword research5 to identify which keyword phrases your site should target. Using publicly available tools such as Wordtracker6, you can discover which keywords are searched for the most frequently and then specifically target those phrases.
Doing keyword research is also crucial for your site's usability. By using the same keywords in your website that web users are searching for in search engines, you'll literally be speaking the same language as your site visitors.
For example, you might decide to target the phrase, “sell toys”, as your website does in fact sell toys. Keyword research would undoubtedly show you that web users are actually searching for, “buy toys” (think about it - have you ever searched using the word, “sell”, when you want to buy something?). By placing the phrase, “buy toys” on to the pages on your website, you'll be using the same words as your site visitors and they'll be able to find what they're looking for more easily.


2. 200 word minimum per page

Quite simply, search engines love content - the more content there is on a page the easier it is for search engines to work out what the page is actually about. Search engines may struggle to work out the point of a web page with less than 200 words, ultimately penalising that page in the search rankings.
In terms of usability, it's also good to avoid pages with very little content. A page with less than 200 words is unlikely to contain a large amount of information, so site visitors will undoubtedly need to click elsewhere to find more detailed information. Don't be afraid to put a reasonably large amount of information on to a page. Web users generally don't mind scrolling7 down anymore, and provided the page provides mechanisms to aid scanning (such as employing sub-headings - see point 6 below) it shouldn't be too difficult for site visitors to locate the information that they're after.


3. 100kb maximum HMTL size

If 200 words is the minimum page content size, then 100kb is the maximum, at least in terms of HMTL file size. Anything more than this and search engines may give up on the page as it's simply too big for them.
A 100kb HMTL file will take 20 seconds to download on a 56k dial up modem, used by three in four UK web users as of March 2004 (source: UK government (opens in a new window)8). Add on the time it takes for all the other parts of the page to download, such as images and JavaScript files, and you're looking at a highly un-user-friendly download time!


4. CSS used for layout

The website of Juicy Studio9 saw a six-fold increase in site visitors after switching from a table-based layout to a CSS layout. Search engines prefer CSS-based sites and are likely to score them higher in the search rankings because:

» The code is cleaner and therefore more accessible to search engines
» Important content can be placed at the top of the HTML document
» There is a greater density of content compared to coding

Using CSS for layout is also highly advantageous for usability, as it leads to significantly faster download times10.


5. Meaningful page title

If you know anything about search engine optimisation you'll know that search engines place more importance on the page title than any other attribute on the page. If the title adequately describes the content of that page then search engines will be able to more accurately guess what that page is about.
A meaningful page title also helps site visitors work out where they are, both within the site and the web as a whole. The page title is the first thing that loads up, often quite a few seconds before the content, so a descriptive, keyword-rich page title can be a real aid to help users orientate themselves.


6. Headings and sub-headings used

Search engines assume that the text contained in heading tags is more important than the rest of the document text, as headings (in theory at least) summarise the content immediately below them. Search engines assign the most importance to , then, and so on.
Headings are also incredibly useful for your human site visitors, as they greatly aid scanning. Generally speaking, we don't read on the web, we scan, looking for the information that we're after. By breaking up page sections with sub-headings that effectively describe the content beneath them, scanning becomes significantly easier.
Do be sure not to abuse heading tags though. The more text you have contained in heading tags within the page, the less importance search engines assign to them.


7. Opening paragraph describes page content

We've already established that search engines love content, but they especially love the first 25 words or so on each page. By providing an opening paragraph that adequately describes the content of the rest of the page (or the site if it's the homepage), you should be able to include your important keyword phrases in this crucial area.
As web users, whenever we arrive at a web page the first thing we need to know is whether this page has the information that we're after. A great way to find this out is to scan through the first paragraph, which, if it sufficiently describes the page content, should help us out.


8. Descriptive link text

Search engines place a lot of importance on link text. They assume that link text will be descriptive of its destination and as such examine link text for all links pointing to any page. If all the links pointing to a page about widgets say ‘click here’, search engines can't gain any information about that page without visiting it. If on the other hand, all the links say, ‘widgets’ then search engines can easily guess what that page is about.
One of the best examples of this in action is for the search term, ‘miserable failure’. So many people have linked to George Bush's bio using this phrase as the link text, that now when miserable failure11 is searched for in Google, George Bush's bio appears top of the search rankings!
As web users, we don't generally read web pages word-for-word - we scan them looking for the information that we're after. Compare the following two paragraphs:
This is some text, lots and lots of lovely text. Now, here's a sentence with a link in it. To read more about our widgets please click here12. Following this, there is more text, lots and lots of lovely text. And one more sentence, containing yet more text to illustrate this point.
This is some text, lots and lots of lovely text. Now, here's a sentence with a link in it. Please read about our widgets12 whilst visiting our website. Following this, there is more text, lots and lots of lovely text. And one more sentence, containing yet more text to illustrate this point.
The first paragraph isn't so good as when you scan through it, you can't take any meaning from the word ‘click here’. The second paragraph, with its link text that effectively describes its destination, is far easier to scan and you can understand the destination of the link without having to read its surrounding words.


9. Frames avoided

Frames are quite an old-school technique, and although aren't as commonplace as they once were, do still rear up their ugly head from time to time. Using frames is one of the worst possible things you could do for your search engine ranking, as most search engines can't follow links between frames.
Even if a search engine does index your pages and web users find you through a search engine, they'll be taken to one of the pages within the frame. This page will probably be a content page with no navigation (navigation is normally contained in a separate frame) and therefore no way to navigate to any other page on the site!
Frames are also disadvantageous for usability as they can cause problems with the back button, printing, history and bookmarking. Put simply, say no to frames!


10. Quality content provided

This may seem like a strange characteristic of a search engine optimised website, but it's actually crucial. Search engines, in addition to looking at page content, look at the number of links pointing in to web pages. The more inbound links a website has, all other things being equal, the higher in the search rankings it will appear.
By providing creative, unique and regularly updated content on your website, webmasters will want to link to you as doing so will add value to their site visitors. You will also be adding value to your site visitors.


Conclusion

Optimising your website for both search engines and people needn't be a trade-off. With this much overlap between the two areas, you should easily be able to have a website that web users can find in the search engines, and when they do find it, they can find what they're looking for quickly and efficiently.



20 February, 2009

How should Usability be imbedded into all phases of development?

Usability is often only considered during the final user acceptance phase. Usability design needs to be imbedded throughout the development process. The following are thoughts on achieving this:

• ISO has a set of standards on usability. The concepts in the standards should be included in the development processes.
• Educate, educate, educate. Usability design should not only be an essential part of IT education but should also be covered in MBA courses so that all stakeholders understand the benefits.
• Use examples to show the benefits. Show all the stakeholders examples of good and bad usability to ensure buy-in by the whole team. The most effective examples may come from running usability tests against existing systems that the stakeholders are familiar with.
• Gather usability requirements at the beginning of the project and include them in any requirements' definition.
• Include usability testing at the ‘paper' prototype phase and all subsequent phases. Usability is not just about the screen design it is about the complete process flow.
• Include usability experts on the team. The experts should be used to ensure that all aspects of usability are covered and that common pitfalls are avoided; however responsibility for usability must remain with the whole team.
• Provide tools for managing, running and reporting on usability tests. Automated test tools should be included; they can highlight bad coding that can impact usability. However, the main tools must enable usability testing with real users.
• The results of usability testing must be presented to all the interested parties. A usability issue may be alleviated by a simple change to the screen design but it may point to a more basic problem that can be resolved by a change in the process. A process change needs the business to be involved and not just IT.
• The usability test reports must be usable. The reports must be organised so that they are understandable and usable by all the stakeholders.
• Usability design and testing must continue into production. Analysis of usage patterns, feedback from live users and further usability test on the live system may identify new usability issues. The new issues may be caused by changes in usage, changes in user population, addition of new functions, and maintenance of existing functions, none of which could have been picked up during the development phase testing.

The inclusion of usability design and testing into the development cycle need not be difficult and will enhance the user experience and the overall benefit of the solution.

19 February, 2009

Web usability: The basics

What is web usability & why is it important?

Web usability is about making your website in such a way that your site users can find what they're looking for quickly and efficiently. A usable website can reap huge benefits on to your website and your business.

£1 invested in improving your website's usability returns £10 to £100 (source: IBM)
A web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson2)


Your website has to be easy to navigate

Users have gradually become accustomed to particular layouts and phrases on the Internet, for example:

• Organisation logo is in the top-left corner and links back to the homepage
• The term ‘About us’ is used for organisation information
• Navigation is in the same place on each page and adjacent to the content
• Anything flashing or placed above the top logo is often an advertisement
• The term ‘Shopping cart’ is used for items you might wish to purchase

There are numerous other conventions like these that enhance your website's usability - can you think of some more?

Don't underestimate the importance of these conventions - as the Internet matures we're getting more and more used to things being a certain way. Break these conventions and you may be left with nothing but a website with poor usability and a handful of dissatisfied site visitors.



Pages must download quickly

Usability studies have shown that 8.6 seconds is the maximum time web users will wait for a page to download (source: Andrew B. King - Speed Up Your Site4). As of March 2004 just 25% of UK web users had broadband (source: National Statistics (opens in a new window)5) so it's essential for optimal usability that your website downloads quickly.

To speed up the download time of your website we recommend you do three things:
• CSS6 and not tables to lay out your web page
• CSS6 and not images to create fancy navigation items



Information should be easy to retrieve

We read web pages in a different manner to the way we read printed matter. We generally don't read pages word-for-word - instead we scan web pages8. When we scan web pages certain items stand out:

• Headings
• Link text
• Bold text
• Bulleted lists

Did you notice that images were left out of that list? Contrary to the way in which we read printed matter, we see text before we see images9 on the Internet. For optimal website usability don't place important information in images as it might go unnoticed.



Restrictions must not be placed on users

Don't prevent your users from navigating through the Internet in the way that they want to. For example:

1. Every time a link is opened in a new window the back button is disabled. Approximately 60% of Web users employ the back button as their primary means of navigation (source: Usability Interface10). If you do this then you're preventing 60% of your users from using their primary navigation - now that can't be good for usability.
2. Don't use frames to lay out your website. Frames can cause a number of usability problems, namely:

• Disabling the back button (see above)
• Bookmarking not possible
• Impossible to e-mail the link to someone else
• Problems with printing
• Users feel trapped if external links open in the same window
• Search engine optimisation issues

There are lots of other ways that websites can place restrictions on its users, ultimately damaging their usability - can you think of any more? Just think back to the last time a website really infuriated you - what annoying thing did it do to make you feel that way?

11 February, 2009

Usability testing

What is usability testing?

Usability testing is a method for uncovering the problems that real users experience with your product or web site under the actual conditions of use. The process involves asking participants to carry out realistic tasks and observing where they experience problems.

Why do usability testing?

Usability testing provides you with an objective analysis of how your product or web site is used in real life. Our clients are continually astonished at how this differs from the way they thought their products would be used. The data from usability tests provide critical business intelligence about the way customers behave and about how you stack up compared to the competition.

When should I do usability testing?

You can do usability testing anytime, but the earlier you carry out testing the greater the business benefits. We have carried out usability testing of early prototypes (some no more than paper sketches) through to released products. So long as people can carry out common tasks with it, we can usability test it.

02 February, 2009

Six Ways to Make People Like You[r Site]

1. “Become genuinely interested in other people.” There’s no faking it. Rushed usability testing or ignoring the data will show. People infer our thoughts by our actions.

2. “Smile.” Facebook, Flickr, and other such social software express a light tone in their visual design and content. Lighten up, business need not be impersonal.

3. “Remember that a man’s Name is to him the sweetest and most important sound in any language.” Personalization has come a long way, but has a long way to go before it nears human capacities.

4. “Be a good listener. Encourage others to talk about themselves.” Encourage user-generated content. Providing commenting is good, responding to comments usefully is great.

5. “Talk in the terms of the other man’s interest.” Know what their interest really is, so to speak to it.

6. “Make the other person feel important and do it sincerely.” Evolve authenticity by continually improving.