1. Imran Hussain University of Management and Technology (UMT)
Virtual University Human-Computer Interaction
Lecture 32 Evaluation – Part IV
Imran Hussain
University of Management and Technology (UMT) 1

2. In Today’s Lecture …
Heuristic evaluation
Web navigation design

3. “People won’t use your Web site if they can’t find their way around it” - Steve Krug

4. Solution: clear, simple, consistent navigation

5. Scene from a Shopping Mall
Saturday afternoon
Head for shopping mall
Want to buy a chainsaw

10. You may decide to ask someone instead
This depends on
Familiarity with store
Your trust in the store’s ability to organize sensibly
How much hurry you’re in
How sociable you are

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 Link-dominant users
Look for search box as soon as they enter a site
Link-dominant users
Browse first
Search only if browsing fails

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 we’ve 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 Web’s 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
It’s about doing two things
Getting from one place to another
Figuring out where you are

24. Significance of Web Navigation
We don’t talk about “Department Store Navigation” or “Library Navigation”
Navigation embodies the site’s hierarchy creating a sense of space

25. Purpose of Web Navigation
Helps us find what we’re looking for
Tells us where we are

26. Purpose of Web Navigation
Tells us what’s 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

30. Web Navigation Conventions
Evolved from print media
Consist of ...
Site ID
Sections
Sub-sections
Utilities
“You are here” indicators
Page name
Local navigation
Small text version

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 Represents whole site Top of page
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

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 Normally largest piece of text
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