Introduction to HCI Principles for Web Design

1
Introduction to HCI Principles for Web Design

• Robert Ball
• Virginia Polytechnic Institute and State
  University
  
• March 13, 2007

2
Lecture Outline

• Introduction to web page style design including
• Feedback
• Spatial memory
• External memory

3
What is the purpose of a web page?
4
What is the purpose of a web page?

• Communication of ideas, principles, values,
  thoughts, data, information, etc.
  
• Acquisition or transference of materials.
• This is our motivation.
• This is our why.

5
Web page design

• Web pages are written in HTML and other languages
  and utilities such as Javascript, AJAX, etc.
  
• This is the content.
• This is our what.

6
Web page design

• The way to present information is just as
  important as the what.
  
• This is the style.
• This is our how.

7
Example of bad web site

• Purpose of visit
• I want to buy 10 widgets.

8
Welcome to Bobs Widget Webpage!!!
Enter the number of widgets desired.
9
Welcome to Bobs Widget Webpage!!!
10
Enter the number of widgets desired.
10
Enter the color.
Welcome to Bobs Widget Webpage!!!
11
Enter the color.
Welcome to Bobs Widget Webpage!!!
Blue
12
Welcome to Bobs Widget Webpage!!!
NOT VALID COLOR! YOU CAN ONLY CHOOSE A VALID COLO
R!
13
Welcome to Bobs Widget Webpage!!!
Enter the number of widgets desired.
14
Welcome to Bobs Widget Webpage!!!
10
Enter the number of widgets desired.
15
Enter the color.
Welcome to Bobs Widget Webpage!!!
16
Enter the color.
Welcome to Bobs Widget Webpage!!!
Red
17
Welcome to Bobs Widget Webpage!!!
Enter your credit card number.
You can trust us with your credit card number!
18
Welcome to Bobs Widget Webpage!!!
Enter your credit card number.

You can trust us with your credit card number!
19
Welcome to Bobs Widget Webpage!!!
Click the X to purchase your order.
My Account
20
Your account purchases
10 Red widgets (ordered March 13, 2008)
10 Red widgets (ordered March 13, 2008)
10 Red widgets (ordered March 13, 2008)
10 Red widgets (ordered March 13, 2008)
10 Red widgets (ordered March 13, 2008)
10 Red widgets (ordered March 13, 2008)
Your total 60 widgets ordered
21
What was lacking? What was wrong?

• The HTML worked there was text.
• Nice s for security purposes.

22
What was lacking?

• Feedback
• Use of spatial memory - for example, lack of
  spatial consistency
  
• Use of external memory - for example, status of
  order, showing color options (e.g. only red or
  green)

23
Feedback

• A response.
• Tell me something happened/is happening!!
• For example pop-ups, progress bars, sounds from
  buttons, change in web page, etc.

24
Real examples of feedback

• The old professor when submitting grades.
• The pigeon the nondeterministic food feeder.

25
Feedback

• I need one volunteer.

26
Effects of having/not having feedback

• Having feedback
• Peace of mind
• Patience
• Waiting
• Not having feedback
• Frustration
• Agitation
• Anxiety
• Impatience

27
Spatial Memory a few definitions

• Peoples mental representations of a
  geographical area or environment.1
  
• The ability to remember where you put
  something.2
  

• Wickens, C. and Hollands, J. Engineering
  Psychology and Human Performance, third edition.
  Prentice Hall, p. 164.
  
• Robertson, G., Czerwinski, M., Larson, K.,
  Robbins, D., Thiel, D., van Dantzich, M. (1998)
  Data mountain using spatial memory for document
  management. Proceedings of the 11th annual ACM
  symposium on User interface software and
  technology, pp. 152-162.

28
Examples

• The old professor
• Menus, buttons
• Forms
• For example

29
What are some of your ideas?
30
My Brief List

• Multi-tasking with large displays
• Web pages (e.g. Google)
• Forms
• Desk and everything on it (translates to desktop
  icons)
  

31
Spatial Memory with Bookmarks

• OR
• (Microsoft Research) Robertson, G., Czerwinski,
  M., Larson, K., Robbins, D., Thiel, D., van
  Dantzich, M. (1998) Data mountain using spatial
  memory for document management. Proceedings of
  the 11th annual ACM symposium on User interface
  software and technology, pp. 152-162.

32
Spatial Memory - associations

• I need one volunteer.

33
External memory

• I need one volunteer.

34
Memorize these numbers
38 5 102 20 34
15 23 26 88 2 45
35
(No Transcript)
36
External memory

• Often referred to as external memory aides.
• Examples, paper, post-its, white/black boards,
  large displays, etc.
  
• Relieves the cognitive load of storing large
  amounts of data in short-term memory.

37
External memory application

• Show status of order.
• Show options.

38
Another reason for external memory

• Millers 7 2
• Lets memorize letters this time!

39
Conclusion

• The how, the style, is as fundamental to a web
  page as the why and what.
  
• Ignoring the how could lead to ultimate failure
  of why no communication, no acquisition.