Guidelines for Web Design
General guidelines for Web design relate to:
* Organization and structure
* Navigation
Decide on these two aspects only very generally first, then start to look at:
* Format, content, and appearance
But content and navigation have to be done together
* Housekeeping
again, tip of the iceberg; many more than I'll mention
Organization and Structure
both of site and of individual pages
Motherhood & apple pie--ignored. HOW ELSE WOULD DO IT?!
Make important information easy to find
I'll give you an example shortly where this just didn't happen
* What are most likely and/or important tasks a user will do at the site?
* What information are they most likely to want to find most frequently?
Users tend not to form mental model of sites
* Sites usually designed toward moving forward, not backing out
* E.g., people use Back button far less than one would expect!
* E.g., when users get lost, don't back out to familiar territory; just keep going
Don't think much about where they have been
* Users tend to come back to Home page to go somewhere else, even though needed link might be on page where they were
Organization and Structure
Organize information logically
* Reflect organization's structure
e.g., some "units" might be sales, marketing, manufacturing, etc.
* Linear, hierarchy, network
- Most organizations are hierarchical; so are most sites
- Hierarchical maps help
Map is visual, graphical (with connecting lines)
- But often too complex, tend to confuse users
Fits with observation that users don't form mental maps
* Take user groups into account
e.g., customers, developers, shareholders, etc.
Use "sight bites": Organize information so each "piece" generally fits on a single screen
Only 10% of users scroll beyond info that first appears
Take great care with home page design
* First impressions are very important!
* Gets seen more often than any other page
Organization and Structure
Use frames with caution
* Disorienting, restrict amount of presented information, necessitate more scrolling
* Allow user to adjust frame boundaries
* Generally use to hold navigation options if main area of site changes frequently
E.g., CS3724 site
- Frames as tables of contents (TOC) with links can help user performance
User clicks on link in TOC frame and regular frame changes content
- Make change in regular frame obvious
else users might not realize anything happened
- TOC frame should fit on one screen; no scrolling
* Putting TOC in single frame shared with content display
- Can include more detailed information
- But makes it harder to browse back and forth
* Separate frame can also be used effectively for glossary, index, help
Organization and Structure
Make site as browser-, platform-, and resolution-independent as possible
Organize site, when possible, for speed of presentation of information
* Common Web user complaint is slow downloads!
Cartoon: Dilbert; time waited for web pages to load ->->->
* Rule of thumb: 15 seconds maximum for download
Navigation
influenced by structure, especially of site
"Sight bites" imply lots of pages and therefore (?) lots of links
Two key navigation questions:
* Where am I?
"You are here" indicators help some
* How do I get to X?
This is about as far as most users go toward a mental model of a site
Keep navigation as simple as possible
e.g., by following hierarchical organization
Show site map for larger sites
* Graphical/visual connecting lines between labels and descriptions
* Make sure user can always determine current location within site
Navigation
Have good "search" feature in your site
* About one third of users use site search as initial strategy to find information
- Similar use of FAQs
* Problems to watch for:
- Not understanding scope of search
- Whole site or just part
- How to limit search to part
- Not able to interpret search results
- Organization and display of results (e.g., by relevance measure)
- Often result in large lists to scan
- Not enough information in results list items, not descriptive of content
Lots of links followed uselessly
- Redundant copies of same item
Navigation
Have good "search" feature in your site (continued)
* Help user check out results
- Previous and Next buttons allow sideways movement through list without coming back up to list, but limited to sequential viewing
* Help user choose from among results
- Specialized query facilities that help user configure search requirements
e.g., to select a PC printer for their specific needs
iQVC Search Page ->->->
Tavolo search page sequence (4 pp.) ->->->
Navigation
Use navigation options consistently throughout site
Navigation bars are effective
* Links at top and bottom sometimes better than buttons on side
Put navigation options where they can't disappear
e.g., at top of page or on side
* User should not have to scroll at all to find navigation options
Navigation
Same for other kinds of controls
* Make relation of controls to pages, frames, boxes, etc. clear
What controls what? E.g., CnnFn: Stocks, Quotes, Search
* Segregate control from data from status (feedback) locations on page
* Button placement is difficult
- Users tend to go to bottom of page to select buttons
e.g., search page with several options filled out top option fields and hit Search button for bottom option
- If not visible at bottom, users often won't see
e.g,, QuizIt
Provide short-cuts for most likely task paths
Provide redundant navigation
For different learning and browsing styles
Never make a user scroll horizontally!
Minimize need to scroll vertically
Navigation
Use links liberally but appropriately
Page that is nothing but links is probably unnecessary, poor design
* Text links are vital
- Single most important mechanism for navigation
- Downloading delays can mean text links are visible first
- Most users look at text links before trying image links
* Link content perhaps single most important factor in Web sites
- Link predictiveness: Be clear in where link will take user
May be single most important guideline of entire seminar!!!!! I'm guessing you could improve the average site's usability by 50% by following just this one guideline.
- Corollary is distinguishability: How distinguishable is each link from others?
- Differentiation/differentness aids navigation
- Users can select correct link by eliminating ones they don't want
Navigation
Use links liberally but appropriately (continued)
* Use meaningful text in links
- Avoid "click here" or "here" or "go to"
- Long (many words) links can be better for precision, differentiation
- Short wording often too vague
- Even add sentence of explanation if link not clear enough
But on separate line from link
- Use precise, unambiguous wording
Navigation
Link destinations
* Be
consistent with words in link and in destination label/title
- Help user
assess success of action
* Default
user model of link takes user to another page in same site
- Confusion
can arise when link takes user to:
- Another
place on same page
- Another
site (especially one with a totally different style)
* Same page destinations confuse because user can browse through item boundaries
Then, for example, user goes back and clicks on next item and it takes them where they have just been
- Can avoid by breaking pages apart and keeping pages short
- Should do this anyway to reduce scrolling
* Other site destinations can confuse because they work against user model of original site structure
- User may find no links back into original site
Use "Put on top" and link to single frame. Keeps Back button operable
Navigation
Link layout
* Affects user performance
* Links embedded in text don't always work well, especially for scanning
Studies found strong negative effect
Goes against intuition text should add explanation
- Better to put explanatory text on separate line
* Wrapped links cause confusion about what is a link
- Happens especially in multi-column format or narrow frames
- Clarify by adding bullets or button outline to set off items
* Be consistent in style of links
* Make link color different and consistent
User can control with browser, too. Blue and red are becoming "standard", unfortunately
Navigation
Image links may need special consideration
* Users will look for them with cursor
* Do not help performance much
* Dont change color to indicate already used
* Interfere with process of elimination in finding right link
* Interfere with scanning
One of most important user information seeking behaviors
Zojirushi example (2pp.) ->->->
Extensive cross-linking helps user recover from errors without always retracing steps
Which we know they don't often do
Provide obvious options for "Exit", "Home", and other key navigation points
But how many links on a page?
* As number goes up, user performance goes down
Obvious that more choices make it harder to be right
Avoid dead end pages
pages with no links on them or page with nothing but link to another page; frustrating
Navigation
Navigation and content are inseparable
* Shell or template strategy: Develop navigational structure and hierarchy first, then plug in content (sometimes by different people)
- Shell page has up-front overall organization, using many generic links
- Causes links to be generic and vague, not connected to content with precision
Precision in labeling is important usability guideline for predictiveness
- A check: Can lots of content be removed without changing up-front links?
If so: links are not specific enough to predict content precisely
Format, Content, and Appearance
Don't simply translate existing printed matter into hypermedia or multimedia
Web, and M-M, are fundamentally different from paper
Be creative, but...
Don't use graphics, animation, and other distractions "just because you can"
"Gratuitous graphics" -- Costly in terms of downloading time, but distracting
E.g., blinking on something clickable
* Users will read text while graphics are down-loading
* Images as fancy text are nice, but
- Dont come up as fast; users may not wait for them to appear
They've already moved on
- Interfere with scanning
One of most important user information seeking behaviors
Format, Content, and Appearance
Don't use graphics, animation, and other distractions "just because you can" (continued)
* Graphic design doesn't automatically make a site "better"
- Depends on quality of graphics
- Depends on how well graphics are used to convey information
- Graphics don't necessarily make sites more interesting to users
Study: Didnt spend more time
- Often not as important as some think in helping find information on Web
- Some sites with best user performance have almost no graphics
Format, Content, and Appearance
Don't use graphics, animation, and other distractions "just because you can" (continued)
* Information seeking is different than surfing
Which one is it your goal to reach?
- Cool stuff correlates with user preferences and satisfaction
Also a possible goal, but . . .
- Cool stuff attracts surfers
So could use if you want to grab surfers into your site
- But animation, movement, blinking, flashing, zooming distract users and hurt performance
ITIC candle almost going out
People seen covering up animation with hand while trying to read, think
- Content and descriptive links drive information seeking
- Content and links correlate positively with user performance
* What if goal of site is to grab and then to inform?
Example: Ads do most movement: get attention of surfers but dont deliver message as well to information seekers
Format, Content, and Appearance
Minimize reading
Conflicts with above, about user of graphics! Give links to other info, so not so much to read on single screen
Maximize readability Fonts, color, contrast, layout, etc.
* Old standards for books (typography) and GUI screens do not necessarily work on Web
* Normal readability tests do not work on Web for information-seeking task performance
* Primary design requirement: scanning
Good typography rules; explained in more detail soon
- People skim and scan; people don't read all information
- Scan-ability: Use bullets, less grammatical baggage, remove extra words
- Less reading to access content (which is then read)
- Too much white space is not necessarily good (despite what is true for GUIs and books)
- Web pages have much lower visual bandwidth than books, newspapers
- White space spreads out information and works against scanning
Format, Content, and Appearance
Maximize readability (continued)
* Jury is still out on scrolling; studies show it is not necessarily avoided by users
- "First-click" study showed just as many first clicks on page occurred after scrolling
- Horizontal rules tend to stop users from scrolling, especially if occur at "fold"
* User-centered language and wording in messages
Let's not forget what we already know about the interactive part
Format, Content, and Appearance
Fonts
* Use small number of fonts (generally up to 3) with good legibility and distinctiveness
* Put no more than 40 - 60 characters per line
* Space words appropriately
* Use upper- and lower-case characters
* Avoid ALL CAPS for blocks of text (e.g., except titles, captions, etc.)
* Minimize use of italics
* Don't underline text
Why? Confusing with links!
* Make text images large enough to read by someone over 40!
Regular text size can be controlled by user in browser
Format, Content, and Appearance
Color
* Probably
the single most misunderstood and misused characteristic of good design
* Design
first for monochromatic display
* Use to
emphasize important information:
attention-grabber
* Use to show
objects realistically
* Use
semantically to group, categorize, etc.
* Use no more
than 5 or 6 colors semantically
* Use
consistently throughout pages and site
* Remember
a lot of people are color blind!
* Black
on light grey (not pure white), yellow on blue are good combinations
* Don't
use blue for large blocks of text
* Keep color
of links consistent and different than other text
* Two link
colors are typically only real semantic indicators
other colors organize, group, set off
Format, Content, and Appearance
Contrast and brightness
* Make differences of color, grey scale, size, etc. distinct enough to be recognizable
e.g., black letters on red background does not work!
* Contrast among "members" of color "families"
e.g., icons or text on "background" graphic of similar color
* Don't make colors too bright or saturated
will lead to eye-strain, headaches, etc. Especially white or light, bright background
Format, Content, and Appearance
Layout
* Have a "theme" for layout organization
- Grid works well
- Create template to guide design
- Ensures consistency across pages
- Can place emphasis on key parts of page
* Put important information at upper left
We read left to right, top to bottom in English
For background images, keep simple and non-distracting
Generally make selectable items look selectable
another potential problem with graphical links
Sloppy appearance implies questionable content!
Spell-check, grammar, inconsistencies
HouseKeeping
Perform thorough usability evaluation of site before each release
technical quality, structure, navigation, readability
Before each new release, view site with
* Numerous browsers
* Different platforms
* Images turned off
* Different connection speeds
* Different monitor sizes and resolutions
* And at time of expected peak usage
Don't release a site (or new section) prematurely
At least monthly, perform cobweb search: Avoid link-rot
broken, stale links
At least monthly, update site
outdated, incorrect info
Have contact information (e.g., to Webmaster) at least on home page
Again, many more guidelines that I could give you; attempted to distill down to some of most important.
Extended example: VT directory search ->->->
Packet full of examples on colored Web overheads here ->->->