Imran Hussain

1
Virtual University Human-Computer Interaction
Lecture 32Evaluation Part IV

• Imran Hussain
• University of Management and Technology (UMT)

2
In Todays Lecture

• Heuristic evaluation
• Web navigation design

3
People wont use your Web site if they cant
find their way around it- Steve Krug
4
Solutionclear, simple, consistent navigation
5
Scene from a Shopping Mall

• Saturday afternoon
• Head for shopping mall
• Want to buy a chainsaw

6
(No Transcript)
7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10

• You may decide to ask someone instead
• This depends on
• Familiarity with store
• Your trust in the stores ability to organize
  sensibly
• How much hurry youre in
• How sociable you are

11
(No Transcript)
12
Web Navigation 101

• You go through a similar process when you enter a
  Web site
• You are trying to find something
• You decide whether to ask first of browse first

13
Web Navigation 101

• Search-dominant users
• Look for search box as soon as they enter a site
• Link-dominant users
• Browse first
• Search only if browsing fails

14
(No Transcript)
15
(No Transcript)
16
(No Transcript)
17
Problems with the Web Experience

• Web experience similar to physical experiences in
  the real world
• Moving around in a space
• Cruising, Browsing, Surfing
• Web experience misses many of the cues weve
  relied on all our lives to negotiate spaces

18
Problems with the Web Experience

• No sense of scale
• 1 page? 100 pages? 50,000 pages?
• Have I missed something?
• c/w magazine, museum, department store
• How do I know when to stop looking
• Coloring visited links

19
Problems with the Web Experience

• No sense of direction
• No left, right, up, down
• No sense of location
• In physical spaces, we accumulate knowledge
• Develop a sense of where things are
• Develop shortcuts

20
In the physical world
21
On the Web

• No physical sense
• Reliance on remembering conceptual hierarchy
• Bookmarks
• stored personal shortcuts
• Back button
• Accounts for 30-40 of Web clicks
• Home Pages
• Akin to North Star

22
Lack of Webs Physicality

• Plus side
• Sense of weightlessness
• Easy to lose track of time

• Negative side
• Figuring out where you are
• Figuring out how to go from one place to another

23
Definition of Navigation

• Its about doing two things
• Getting from one place to another
• Figuring out where you are

24
Significance of Web Navigation

• We dont talk about Department Store Navigation
  or Library Navigation
• Navigation embodies the sites hierarchy creating
  a sense of space

25
Purpose of Web Navigation

• Helps us find what were looking for
• Tells us where we are

26
Purpose of Web Navigation

• Tells us whats here
• Reveals content
• Tells us how to use the site
• Implicitly gives instructions
• Where to begin
• What options are available
• Gives user confidence in builders
• Good navigation creates good impression

27
Conventions for Navigating the Physical World

• Cities and Buildings
• Street signs
• Books and Magazines
• Page numbers, chapter titles

28
Conventions for Navigation Elements

• Put them in a standard place
• Standardize appearance

29
(No Transcript)
30
Web Navigation Conventions

• Evolved from print media
• Consist of ...

31
Global Navigation

• A.k.a. Persistent Navigation
• Should be consistent
• Should consist of
• Site ID
• Sections
• Utilities
• Home
• Search

32
Global Navigation

• Exceptions in consistency
• Home Page
• Forms
• e.g., e-commerce site
• Printable pages
• Exceptions can have minimal versions

33
Site ID (or Logo)

• Building name for a Web site
• Only need to see it once on a building
• Need to see it on every page on the Web
• Why? Primary mode of transportation is
  teleportation

34
Site ID (or Logo)

• Placement
• Top of page
• Represents whole site
• Highest thing in logical hierarchy of the site

35
Site ID (or Logo)

• Two ways of getting primacy of site ID across
• Most prominent thing
• Make it frame everything else

36
Site ID (or Logo)

• Two ways of getting primacy of site ID across
• Most prominent thing
• Make it frame everything else

37
Site ID (or Logo)

• Should have certain attributes
• Distinctive typeface
• Graphic recognizable at any size

38
Sections

• A.k.a. Primary Navigation
• Links to main sections of the site (top level)

39
Sub-sections

• A.k.a. Secondary Navigation
• Links to sub-sections of a site (2nd level)

40
Utilities

• Important elements
• Not part of site content
• Provide help or info about publisher

41
Utilities

• Should be less prominent than sections

42
Utilities

• Utilities will vary for different types of sites

43
Utilities

• Home button provides reassurance
• Site ID has dual role
• Provides link to home page

44
Low-Level Navigation
45
Low-Level Navigation
46
(No Transcript)
47
Page Names

• I love driving in LA

48
Page Names

• Page Names are the street signs of the Web
• Need them as soon as something starts going wrong
• 4 things about page names

49
Page Names

• Every page needs a name

50
Page Names

• Name needs to be in right place

51
Page Names

• Name needs to be prominent
• Position
• Size
• Color
• Typeface
• Normally largest piece of text

52
Page Names

• Name needs to match what I clicked
• Implicit social contract with visitors

53
You are Here Indicators

• Where am I in the scheme of things

54
You are Here Indicators
55
You are Here Indicators
56
Breadcrumbs