Transcript Document 7137571

www:
structure & navigation
John Kelleher
“First we thought the PC was a
calculator. Then we found out how to
turn numbers into letters with ASCII
— and we thought it was a typewriter.
Then we discovered graphics, and we
thought it was a television. With the
World Wide Web, we've realized it's a
brochure.”
Douglas Adams
novelist, naturist, web entrepreneur
1
2
web fact #1


web users don’t read pages. They scan them
Why?



Usually in a hurry
Know they don’t need to read everything
Good at scanning
3
what designers build…
4
what users see…
5
web fact #2


we don’t make optimal choices. We satisfice
Why not?




Usually in a hurry
Not much penalty for guessing wrong
Weighing options may not improve our chances
Guessing is more fun
6
web fact #3

We don’t figure out how things work. We
muddle through.





We proceed without clear understanding
We persist with solutions we know to be suboptimal
E.g. Yahoo search box
E.g. AOL vs. Internet
Why?

We may not care or care enough to excel
7
web vs. conventional print


print took centuries to mature
web pages freestanding – major difference

headers & footers significant




provenance needs to be established
navigation critical to exploration
books designed for 2-page spread, web pages
always single units
users can roam to other sites gathering
knowledge as they go
8
page structure



Reading pattern is dictated by blocks of colour, animation,
spacing.
The navigation is the most important feature - but should occupy
as little space as possible
Place the most important information at the top - "above the fold"
- viewable without scrolling down
 Use the "inverted pyramid" - start with the conclusion
 If you place any important information below the fold, some
visitors may not see it and go to a different web site, rather than
scrolling down.
 You need to entice visitors to scroll down, but the home page is
less likely to achieve this - put longer content on interior pages.

Once a visitor has clicked to further information, they are more likely to
scroll.
9
page structure (contd.)

vertically and horizontally align items on a
page




Visitors can read the text quicker
important items should appear higher on the
page so users can locate them quickly
put items which are repeated across the web
site, such as the logo, navigation and search
box, in a consistent position on all pages.
avoid orphan pages – build in context
10
page structure (contd.)


ideally shouldn't scroll excessively - split content
onto several pages if necessary
don't specify a width
 Should work across range of window sizes
 Users hate horizontal scrolling
 If the design dictates a specific width - design to 780
pixels width only


Most web users have screen resolutions of 800 pixels
width or wider
use CSS (though badly implemented by some
browsers)
11
site structure
12
site structure
13
site structure
14
logos
15
screen size 640x480
16
screen size 800x600
17
screen size 1024x768
18
screen
size
1280x
1024
19
screen
size
640x480
800x600
1024x768
1280x1024
20
network download speeds

Lots of different speeds out there




Modems (28.8 kbps, 33.6 kbps, 56 kbps)
DSL (384 kbps, 1.5 mbps, 8mbps)
Cable Modems (1 to 27 mbps)
Exponential uptake on broadband




US 3 million had DSL in 1Q01 – now 16 million1
US 6 million had cable modems in 1Q01 – now 15 million2
However,
Keep in mind fuzziness of statistics + Internet access at
work and school + laptop modems
1
www.dslforum.org/pressroom.htm
2 www.cabledatacomnews.com/cmic
21
Total Broadband
Top Countries
By penetration of population
Ranking
Country
Broadband Total Penetration
by Population
1
South Korea
25.58
2
Hong Kong
22.94
3
Netherlands
21.90
4
Denmark
21.47
5
Switzerland
20.13
6
Canada
19.19
7
Taiwan
17.81
8
Belgium
17.58
9
Israel
16.47
10
Sweden
16.38
11
Japan
16.18
12
France
13.89
13
UK
13.71
14
USA
13.14
15
Australia
10.62
16
Spain
10.00
22
Source: http://www.dslforum.org/PressRoom/Q205DSLsubscribernumberspresentation.ppt
homepage



Put as much important content as close to the top of
the hierarchy as possible.
When creating a Web site that lends itself to a
hierarchical style of organization (i.e., pyramid
structure with most important information on the
top), it is beneficial to "flatten" the hierarchy and to
provide more information sooner.
The more steps (or clicks) users must take to find
the desired information, the greater the likelihood
they will make a wrong choice.
23
homepage
24
homepage
25
writing for the web
Omit needless words
Vigorous writing is concise. A sentence should
contain no unnecessary words, a paragraph no
unnecessary sentences, for the same reason that a
drawing should have no unnecessary lines and a
machine no unnecessary parts.1
William Strunk, Jr., and E.B. White, The Elements of Style (Allyn and
Bacon, 1979)
26
writing for the web

very different to writing for print




Less is more – omit needless words




Time critical1
Users scan
 ref. Poynter Institute study (2000)2
Harder to read from a computer screen than it is from
paper
Keep sentence structure as simple as possible
Keep sentences short (15 or fewer words)
Keep paragraphs short (5 sentences or less)
Frequently highlight important words or phrases
27
writing for the web (contd.)




Use bullet points or numbered lists where possible
Keep page length short - avoid too much vertical scrolling
Use links to highlight and take the user to further information
Avoid using the <hr> (Horizontal Rule) tag (Insert > Horizontal
Rule in Dreamweaver) to separate bodies of text
 Use plenty of headings, subheadings and white space instead






It looks better and is easier to read
The <hr> tag is also deprecated html
Avoid centering text - it's harder to read
Don't use all capitals - harder to read
Use standard font sizes (can be resized by client)
Keep content separate from style - use style sheets and include
files
28
text scanning
29
text scanning
30
text scanning
31
line width
32
text pruning
Site Survey
The following questionnaire is designed to provide us with information
that will help us improve the site and make it more relevant to your
needs. Please select your answers from the drop-down menus and
radio buttons below. The questionnaire should only take you 2-3
minutes to complete.
At the bottom of this form you can choose to leave your name,
address, and telephone number. If you leave your name and number,
you may be contact in the future to participate in a survey to help us
improve this site.
If you have comments or concerns that require a response please
contact Customer Service.
1. How many times have you visited this site?
33
text pruning (after)
Site Survey
Please help us improve the site by answering these questions. It
should only take you 2-3 minutes to complete this survey.
NOTE: If you have comments or concerns that require a response
don’t use this form. Instead, please contact Customer Service.

Before


103 words
After

41 words
34
text - consistency
35
inverted pyramid
 Important facts and conclusions first
 Why?
1. It lets readers know what's coming, so that when
they get to the details it fits into a big picture.
2. Recognizing the benefits first will help to sustain
interest.
3. If the reader is extremely pressed for time, s/he
may not get beyond the first few sentences.
36
navigation


most important aspect of a web site
problems of ‘webspace’




helps users find their way around




No sense of scale
 ‘links’ visited colour change reflects ground covered
No sense of direction
No sense of location
tells them where they are
where they can go within the site
provides a visual means for demonstrating the
hierarchy of information to be found
Good navigation often reflects good site structure
37
types of navigation









navigation panel
location indicator device (breadcrumbs)
home button
links
html title
site map
search facility
the 404 (and other error pages)
graphics as navigation and/or links
38
navigation panel





Set of links on left hand side or top area of page
Best saved as a server side include
Can be text links or graphics
Should take up as little space as possible
Keep in a consistent form across the web site



Same place
If a change of color indicates a different section of the web
site - make sure there are other means of indicating the
change (note color blindness issues)
E.g. Amazon.co.uk
39
navigation – tabs are best
40
navigation – identifying
choices
41
location indicator device
(breadcrumbs)





Should be added to every page other than the
home page
Near the top of the page
Shows the visitor where the page belongs - where
they are in relation to the rest of the web site
Should be as concise as possible and follow the
navigation structure of the site
Often as a small section of the site map



Each preceding item needs to be a link
The last item should not a link as it is the current page
and provides an visual indication of this
E.g. www.useit.com
42
43
home button


Not necessary on actual home page
A home button / company logo (link to
home page) at the very top left

Should make sure there is a textual link to
home on all pages for visitors who aren't familiar
with the logo being a link

The location indicator device (see LID) provides a
textual link to the home page
44
links

All textual hyper links should be underlined



The visitor should not have to mouse over, or hover, on a
link to realise it is a link - make it obvious
 Microsoft web site poor at this
Provide plenty of textual links within the web site to
allow the visitor to cross reference information
Try to provide these in stacked lists of links, rather
than "hidden" within the text

Links within text can slow down reading flow, but this may
be a good thing sometimes by highlighting particular words
45
links (contd.)

Differentiate between internal links (links within the
web site) and external links (links to other web sites)



Within-page links (to #bookmarks)



If you are linking within the web site, simply link the
appropriate text
If you are linking to an external web site, try to include the
full web site address in the text
sometimes confusing if user scrolls & has read material
already
make shorter pages to avoid
Janus Twenty
Avoid ‘wrapped’ links
Investment Company
of America
Royce Premier
46
links (contd.)

Don't make links open in a new window



When linking to large files


provide a KB size in brackets next to the link so visitors
know how large the file is before downloading it
Make sure visitors know when they have been to a
link



visitors can get confused and/or irritated by this
destroys the back button - a common means of back
tracking
change the color from blue to red/purple, or a least make
visited links a less saturated color than unvisited links
use CSS with care
Use link titles (IE 4.0 and higher)
47
links
48
links
49
links
50
links – beware CSS/dHTML
51
links not clear
52
html title






In the HTML header
Use frames with caution
Keep it relevant to current page
Shows in the top title bar of the browser
Keep it useful for those who may bookmark
your site
See also the search engine section for how
this affects listings
53
poor document title
54
site map



A separate page which shows a site map
The hierarchical structure of the site with
links to all relevant pages
Have a prominent link to the site map from
every page
55
search facility


Some users choose a search facility before using any other
navigation feature
Other users will use a search facility as a last resort
 Make sure your site has one
 Put the search box in a prominent position on every page
 Keep it as simple as possible



Don't add extra choices for the user - can be confusing/time
consuming
Make sure you know/adjust the relevancy of results
There are plenty of companies providing free service for
smaller sites


http://www.atomz.com is free for sites less than 500 pages
Allows you to choose how relevant the page title, meta tags, body
text etc are.
56
the 404 (and other error pages)


Use your error pages effectively
 If you don't they will probably leave your web site
Provide a custom error page for each type of error (404 page not
found, 403 forbidden etc)
 Visitors know they are on your web site and the physical
connection is intact
 Provide the same site wide navigation as on your other pages
 Utilise it for their benefit


Provide a brief description of your web site, why they have got this
error and include a site map so they can navigate to something
useful quickly
Custom error page creation…
57
how to create the custom error
pages

Create all the custom error pages you need for your site (see list below)



Go to the main root directory of your web site (in the same place as your home page)











Look for a file called .htaccess (it starts with the dot as though it is a long file extension)
If you have the file, you need to edit it.
If you don't have the file, create a new text document and save it as ".htaccess" (you need to
include the dot)
Add/edit the following line: ErrorDocument 404 /errors/error404.html
The text needs to remain exactly as above


For example, create a 404 error page and save in a folder called /errors/ as error404.html
Error 404 Page Not Found is the most common
Stay on one line
A space on either side of the number 404
Case sensitive –
the uppercase of the E and D in ErrorDocument
Add any other errors for the pages you have created
Save .htaccess
Publish the .htaccess file to your root site directory
(in the same place as your home page)
Publish your custom error pages
Test to see if it works on your web site
by typing in an erroneous url
List of errors
Error
Code
Label
400
Bad Request
401
Authorization Required
403
Access Forbidden
404
File Not Found
500
Internal Server Error
58
why create a custom error
page?
Visitors get errors for various reasons


It retains your web site branding


Shows visitors they are still on the same web site
Can be a useful navigation tool and help keep visitors on your web
site










e.g. Even if there are no broken links in your web site a visitor may
misspell a url and get a page not found Error 404
In addition to the branding, include the main navigation links
Include a brief message explaining the error
Try to be helpful - suggest they check the link
Don't use the word "error" - can scare off visitors
Include a brief paragraph about your web site
Include a search box
Include a site map
Provide an email link to your webmaster
If a visitor gets none of the above - will probably leave your site
59
60
graphics as navigation and/or
links


Be careful when using graphic/images as links or
navigation
If the border="0" on the graphic tag, there may be
no obvious way for the visitor to tell it is a link




If they don't mouseover the graphic, they will not see the
cursor change to a hand
Try and provide textual links to the same
information as well as the graphic
If aesthetics are less important - keep the
border="1" on graphics/images as links
be kind to screen readers
61
“ The power of the Web is in its
universality.
Access by everyone regardless of
disability is an essential aspect. ”
Tim Berners-Lee, W3C Director and
inventor of the World Wide Web
62
accessibility



Make sure your site is usable on the main browser
flavors and versions
Make sure it's usable without having to download
a plug-in first
Use style sheets to separate style and content


Users can enforce personal style sheets
Accessibility increasingly mandated


Web Accessibility Initiative (WAI) of the World Wide Web
Consortium (W3C)
amendments to Section 508 of the Rehabilitation Act of
1973 (US)
63
accessibility (contd.)

Use the appropriate html tags to define your text - enables the text
readers blind people use to read the text on your site


Make good use of headings, <em> and <strong>
Always specify alternative text for graphics - <img src="image.gif"
width="10" height="10" alt="image description">



Check the colors you use aren't bad for those with various forms of
color blindness




Not just for disabled – mobile use also impacted
Beware of alt text for single-pixel spacers
If in doubt - desaturate (make black and white) the design to see if it still
makes sense
Don't use color as the only indicator of change (e.g. in a new section)
Always underline links
Test with www.bobby.org
64
accessibility
65
accessibility – use alt tags
66
color blindness





one in twelve people may not be able to use your web site
properly due to some form of color blindness.
 could mean that text is unreadable, navigation unusable and
elements are invisible.
Most color blind people can't distinguish between shades of
red and green
Shades of these colors appear lighter to color blind people
The most common forms of color blindness are:
 Protanopia unable to receive red, and
 Deuteranopia unable to receive green
A much more rare form is found in:
 Tritanopia - unable to receive blue
67
color blindness palettes
Using protan palette
Using deutan palette
68
how can these problems be
counteracted?




Don't use color as the only visual clue
 Always underline links
 Provide other means to distinguish between sections
Avoid using only red and green in your design
Maintain a high contrast between text and background
Always put "alt" text on graphics
Design tips
 When designing your site, switch to black and white (desaturate in PhotoShop) to see if it still works after removing color
 Ask color blind colleagues or friends for their opinion
 Save versions of your design using the PhotoShop color blind
palettes to see the design as a color blind person would
69
graphics




Use sparingly - they add to download time
Keep as small in file and physical size as
possible
Don't use for navigation graphics if there
are going to be several languages - high
maintenance
Always put width and height specifications
in the img src tag - speeds up download time
70
bandwidth Issues
71
graphics (contd.)





Always put border="0" in the img src tag or some browsers will
display a blue border around the image if it becomes a link
Always specify meaningful alt text in the img src tag - some
people switch off graphics in their browsers
Know the differences between the various image formats
GIF
 256 colors, best for line art (Illustrator etc)
 Supports transparency
 Some compression, keeps all the data
JPG
 Millions of colors, good for photos (or Photoshop)
 But no transparency
 Lots of compression, throws data away
72
graphics – use thumbnails
73
new technology

Avoid using technology which has been around less than two years

Avoid creating a site where users have to download software to view
it

If you do have a new technology enabled site - create a mirror site
without it


Give users the choice before entering the site - don't use a browser plugin detection redirect
Use your site stats to see if users prefer the html or new technology
enabled site - scrap the new technology if it's not popular

If you do create with new technology, recognize usability issues
concerning all types of web site

Check your site statistics to see how many of your users have the
latest plug in before designing your site
74
frames




Avoid using frames
Hard to maintain
Destroys url location for users - can't
bookmark individual pages
Makes it harder for search engines to spider
the site
75
web usability – research (1996)



Jared Spool, User Interface Engineering
9 sites – large test sample
4 types of information task




finding simple facts
comparing facts
making single judgments
comparing judgments of several entities
76
web usability results – research (1996)





Graphic design neither helps nor hurts in terms of user
performance on the test questions.
The design of text links is vital. In particular, the user must be
able to predict where the link will take her.
Navigation and content are inseparable. In other words,
generic navigation labels don't work as well as specific,
informative ones.
Information finding is a focused task, where anything
superfluous is seen as a distraction.
User preference does not correlate with their performance.
In other kinds of software, there is typically a strong correlation.
77
bad design bugaboos

















All capitals text
Scrolling sideways
Teeny, tiny text size, especially in italics
Dead links
Telling the user how to set the browser
Poor contrast in text-to-background color
Large typeface (one without impact and contrast)
Animations that don’t stop
Things that look like buttons but aren’t
“Under construction” notices
Neglecting ALT tags for images
Not denoting image sizes
Do-nothing home page
Changing color for the heck of it
Lack of mail to/feedback throughout site
Sites requiring advanced browser or plug in
Blink tags
78
billboard design 101

1/3
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
79
billboard design 101

2/3
Conventions are your friends


E.g. newspaper layout & TV channel logos
Conventions only succeed if they work


Save users effort (transfer knowledge)
Designers are often reluctant to take advantage of
them

No ‘best use of convention’ award category!
80
billboard design 101

Break up pages into clearly defined areas



aid scanning
supported by eye-tracking studies
Make it obvious what’s clickable


3/3
‘pin a tail’ contest
Keep ‘noise’ level low

don’t overwhelm user’s limited attention buffer
81
references




Yale Web Style Guide
Usability.gov
Browser Stats
Broadband Stats
82