General Guidelines:
- Make things self evident
- Use simple words unless necessary
- Make clickable links obvious
- More choice may not always be a good thing
- How people read web pages
- People don't read pages, they scan them
- People don't make optimal choices, they satisfice - choose the first reasonable option (especially since the back button is always there in case option is not the one wanted)
- People find a way to do something and stick to the method, even if it is less efficient
- Designing pages for scanning
- Create a clear visual hierarchy
- The more important something is, the more prominent it is
- Things that are related logically are also related visually
- Things are “nested” visually to show what’s part of what
- Take advantage of common conventions - since people are used to them
- Break pages up into clearly defined areas - lets the user quickly get to the part he wants
- Make it obvious what’s clickable
- Minimize noise
- No-No's - Lots of invitations to buy! Lots of exclamation points and bright
colors! A lot of shouting going on! - Everything is visual noise until proven otherwise
- Make choices mindless - make the language for options in any menu as clear as possible so user doesn't have to think, don't assume knowledge
- Omit needless words - helps users focus on what's important; displays more of relevant content without need for scrolling
- Omit as much 'Happy Talk' as possible - Omit "We're so great..." and focus on "We're great because..."
- Omit as many instructions as possible
Navigation:
- Elements of navigation
- Have the navigation appear in the same place on every page with a consistent look - user needs to figure out navigation only once
- Persistent navigation (that appears on every page except the Home Page and on Forms) should have the following elements:
- Best to have site ID at top right
- Restrict to 4-5 utilities on any page
- Link to "Home" essential - can put a separate Home link or build it into the site ID
- Unless site is very small, it should have a search box or link to a search page
- While designing website, make sample pages for all the levels of hierarchy of the website, not only for the first 2-3 levels
- Page names
- Every page should have a name
- The page name should appear to be framing the content that is unique to the page
- The name needs to be prominent (combination of position, size, colour and typeface)
- The name needs to match what the user has clicked
- Highlight current location in the current navigation - and make it stand out
- Breadcrumbs (Level 1 > Level 2 > ... > Current Page):
- If used, should be combined with other navigation tools, not standalone
- Put them at the top of the page - non-intrusive
- Use '>' between levels
- Use tiny type - non-intrusive
- Use the words: "You are here:"
- Boldface the last item (current page)
- Don't use as substitute for page name
- Tabs:
- Good because:
- They're self-evident
- Hard to miss
- Slick
- Suggest a physical space
- For best effect they should:
- Create visual effect of active tab being in front of other tabs
- Be colour coded - different and distinct colours for different tabs, contrast with inactive tabs
- There is a tab selected when website is opened
Homepage design:
- The homepage may need to accomodate:
- Site identity and mission
- Site hierarchy
- Search
- Teases (Content promos, featured promos, etc.)
- Timely content
- Deals - if applicable
- Shortcuts - for the most frequently visited pages
- Registration
- Needs to meet these objectives:
- Show me what I'm looking for - The Home page needs to make it obvious how to get to whatever the user wants
- ... and what I'm NOT looking for - At the same time, the Home page needs to expose the user to some of the wonderful things the site has to offer that he might be interested in—even though he's not looking for them
- Show me where to start
- Establish credibility and trust - For some visitors, the Home page will be the only chance your site gets to create a good impression
- Homepage needs to answer four questions quickly and clearly as user enters site for the first time:
- What is this?
- What do they have here?
- What can I do here?
- Why should I be here - and not somewhere else?
- What is the website about should be handled by:
- Tagline - next to the site ID. Should be clear in purpose, non-generic, and not very long
- Welcome blurb - Terse description of the site, prominent and readable without scrolling. Should not be the mission statement of the company, since no one will read it.
- There should be clear link on Home page showing user where to start (for first time as well as returning users). There can be different prominent links if there are multiple places that the user can start from
- Home page navigation can be unique
- Sections can have descriptions below them - not on other pages though
- Orientation can be different - but only if necessary
- Site ID can be larger than on other pages
- However, design should still be consistent with the other pages on the website
Goodwill created through website:
- Things that decrease goodwill:
- Hiding important information - such as customer support numbers, pricing information, etc.
- Punishing user for not doing things 'your' way - can include even simple things like accepting only a particular (non-standard) style of formatting (say, for credit card numbers)
- Asking for information that is not really required
- Faux sincerity
- Sizzle in the way of usability - For e.g. having to wait through a long Flash intro, or unnecessary marketing content blocking what user really wants to do
- Amateurish looking website - Not a huge issue unless website is really sloppy
- Things that increase goodwill
- Identify the main things the user wants to do on the website and make them obvious and easy
- Give user important information on costs, etc upfront
- Save the user steps where possible
- Put effort into website - for e.g. track all information that is necessary for user and make it available on the website
- Good set of FAQs
- Providing creature comforts - for e.g. printer-friendly pages
- Make it easy to recover from errors
- When in doubt, apologise
