www: structure & navigation

John Kelleher

2

“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 Adamsnovelist, naturist, web entrepreneur

3

4

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

5

what designers build…

6

what users see…

7

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

8

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 sub-

optimal E.g. Yahoo search box E.g. AOL vs. Internet

Why? We may not care or care enough to excel

9

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

10

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.

11

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

12

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)

13

site structure

14

site structure

15

site structure

16

logos

17

screen size 640x480

18

screen size 800x600

19

screen size 1024x768

20

screen size 1280x1024

21

screen size

1024x768

1280x1024

800x600

640x480

22

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.htm2 www.cabledatacomnews.com/cmic

23

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

Total BroadbandTop Countries

By penetration of population

Source: http://www.dslforum.org/PressRoom/Q205DSLsubscribernumberspresentation.ppt

24

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.

25

homepage

26

homepage

27

Omit needless wordsVigorous 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

writing for the web

William Strunk, Jr., and E.B. White, The Elements of Style (Allyn and Bacon, 1979)

28

very different to writing for print Time critical1

Users scan ref. Poynter Institute study (2000)2

Harder to read from a computer screen than it is from paper

Less is more – omit needless words 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

writing for the web

29

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

writing for the web (contd.)

30

text scanning

31

text scanning

32

text scanning

33

line width

34

text pruning

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?

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?

Site Survey

35

text pruning (after)

Before 103 words

After 41 words

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.

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.

Site Survey

36

text - consistency

37

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.

38

navigation most important aspect of a web site problems of ‘webspace’

No sense of scale ‘links’ visited colour change reflects ground covered

No sense of direction No sense of location

helps users find their way around 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

39

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

40

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

41

navigation – tabs are best

42

navigation – identifying choices

43

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

44

45

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

46

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

47

links (contd.)

Differentiate between internal links (links within the web site) and external links (links to other web sites) 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 Within-page links (to #bookmarks)

sometimes confusing if user scrolls & has read material already

make shorter pages to avoid Avoid ‘wrapped’ links

Janus TwentyInvestment Companyof AmericaRoyce Premier

48

links (contd.) Don't make links open in a new window

visitors can get confused and/or irritated by this destroys the back button - a common means of back

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

49

links

50

links

51

links

52

links – beware CSS/dHTML

53

links not clear

54

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

55

poor document title

56

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

57

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.

58

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…

59

Create all the custom error pages you need for your site (see list below) 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

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

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

how to create the custom error pages

List of errors

Error Code

Label

400 Bad Request

401 Authorization Required

403 Access Forbidden

404 File Not Found

500 Internal Server Error

60

why create a custom error page? Visitors get errors for various reasons

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

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

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

61

62

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

63

“ 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

64

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)

65

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"> Not just for disabled – mobile use also impacted Beware of alt text for single-pixel spacers

Check the colors you use aren't bad for those with various forms of color blindness 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

66

accessibility

67

accessibility – use alt tags

68

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

69

color blindness palettes

Using protan palette

Using deutan palette

70

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 (de-

saturate 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

71

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

72

bandwidth Issues

73

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

74

graphics – use thumbnails

75

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 plug-

in 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

76

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

77

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

78

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.

79

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

80

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

81

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!

82

billboard design 101 3/3

Break up pages into clearly defined areas aid scanning supported by eye-tracking studies

Make it obvious what’s clickable ‘pin a tail’ contest

Keep ‘noise’ level low don’t overwhelm user’s limited attention buffer

83

references

Yale Web Style Guide Usability.gov Browser Stats Broadband Stats