1. Human Computer Interaction (HCI)
Dr. Muhammad Tahir
Chapter 6

2. Metaphor

3. Paradigms of Interaction
Metaphor
Analogy between two objects or ideas
Use of one thing to represent other

4. Paradigms of Interaction
Interface Metaphor
Knowledge of user interface widgets and their behaviours that mimic the similar knowledge from other domains
Purpose
Give users an instantaneous knowledge about how to interact with user interface

5. Paradigms of Interaction
Interface Metaphor
Examples
Analogy of interaction widgets with real-world objects
Windows as real windows

6. Paradigms of Interaction
Interface Metaphor
Examples
Analogy of interaction widgets with real-world objects
Buttons like switch buttons

7. Paradigms of Interaction
Interface Metaphor
Examples
Analogy of interaction widgets with real-world objects
Folders and file cabinet as OS file system

8. Paradigms of Interaction
Interface Metaphor as Desktop Metaphor

9. Direct Manipulation

10. Paradigms of Interaction
Direct Manipulation
To manipulate objects directly using similar techniques/actions of real world
Real-world metaphors for objects and actions
Pressing a button
Dragging an icon
Pulling down the “file” menu

11. Paradigms of Interaction
Direct Manipulation
Easy to learn and remember interfaces
Users can see the results of an action before completing it
e.g. Resizing a window / image
Border around it / old remains same, new layer resizes
Operations are easily reversible

12. WYSIWYG

13. Paradigms of Interaction
WYSIWYG
What You See Is What You Get
Contents displayed during editing appears very similar to the final output
Webpage, printed documents, slide presentation
e.g. In MS Word application what you see on screen is the representation of the final document

14. Paradigms of Interaction
WYSIWYG
Allows users to view something similar to final results
Allows direct manipulation of the layout of the document without typing or remembering layout commands
e.g. Word processor is optimized for output to a printer

15. Paradigms of Interaction
WYSIWYG
Example:
WYSIWYG Editor to produce a document

16. Interaction Design
Ch. 5, Alan

17. IxD Interaction Design Interaction Design:
Behaviour of products / systems that a user can interact with
Behaviour of products / systems with its environment
It is about:
Doing things
Making things
Designing things

18. Interaction Design Example: Mechanical Stapler:
You pick it up to your desk
Staple documents
Keep it until someone needs it

19. Interaction Design Example (continued): Electric Staplers:
Electrical device
Hard to move around (socket-connected)
Write, print and take the pile to stapler
You move yourself multiple times
You move documents multiple times

20. Interaction Design Example (continued):
Mechanical vs Electric Staplers
Thus the changes in the “design” of a product
can change the type of interaction with it and
can also change the interaction with its environment

21. Interaction Design What is design?
The act of working out the form of something
Sketch, outline, plan
Achieving goals within constraints

22. Interaction Design What is design? Goals
What is the purpose of the design?
Who is it for?
Why do they want it?

23. $ Interaction Design What is design? Constraints Cost?
Time needed for development?
Material to use?
Standards to follow?
Health and safety issues? $

24. Screen Design and Layout
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell 
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
Ch. 5, Alan

25. Screen Design and Layout
User action and control
Tools for layout
Entering information
Grouping and structures
Knowing what to do?
Orders of groups and items
Affordances
Decoration
Alignment
Appropriate appearance
White space
Presenting information
Asthetics and utility
Color and 3D
Localization/Internationalization

26. Screen Design and Layout
Tools for layout
Grouping and structures
Things logically together ~ physically together
Billing details:
Name
Address: …
Credit card no
Delivery details:
Delivery time
Order details:
item quantity cost/item cost
size 10 screws (boxes)
…… … … …
Grouped Spatially
Separation
From the list of items already ordered / separation by a line and space

27. Screen Design and Layout
Tools for layout
Orders of groups and items
First, read and fill the billing details
Then, read and fill the delivery details
Then, fill the individual ordering item   

28. Screen Design and Layout
Tools for layout
Orders of groups and items
What is the natural order of placing info on the screen?
e.g. forms to enter data
e.g. as in previous example
Adjust boxes and space between them
Consistent use of tab

29. Screen Design and Layout
Tools for layout
Decoration
use boxes to group logical items
use fonts for emphasis, headings (but not too many!!)
Proper use of font style/ font type, text color, backgd color
ABCDEFGHIJKLM
NOPQRSTUVWXYZ

30. Screen Design and Layout
Tools for layout
Alignment
Alignment of text / list ...
Users that read from left to right (English + European ...)
Align data on left side
Similarly for Arabic / Urdu / Persian / ...
Align data on right side

31. Screen Design and Layout
Tools for layout
Alignment
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess

32. Screen Design and Layout
Tools for layout
Alignment (Names)
Usually scanning for surnames
make it easy!  
Easy to search because aligned on space or comma
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell 
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
If know only surname, difficult to search

33. Screen Design and Layout
Tools for layout
Alignment (Numbers)
Look quickly and try to find the biggest number !
Visually long number = big number ?

34. Screen Design and Layout
Tools for layout
Alignment (Numbers)
Align numbers (integers) to the right !
Align numbers (with decimals) at the decimal point !

35. Screen Design and Layout
Tools for layout
Alignment (Multiple Columns)
Text columns wide enough for the largest item
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
Difficult for the eyes to scan across the rows
Solution?

36. Screen Design and Layout
Tools for layout
Alignment (Multiple Columns)
Solution - i
Use ‘leaders’ - lines of dots linking the columns

37. Screen Design and Layout
Tools for layout
Alignment (Multiple Columns)
Solution - ii
Use ‘greying’ / ’coloring’: horizontally and/or vertically
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

38. Screen Design and Layout
Tools for layout
Alignment (Multiple Columns)
Solution - iii
Right align ! (occasionally for names / frequently for numbers)

39. Screen Design and Layout
Tools for layout
White space
Space between letters is called ‘counter’
Counter provides an overall feel of a layout
White space can be used in different ways !

40. Screen Design and Layout
Tools for layout
White space
Space to separate
Space between paragraphs / between sections of a report

41. Screen Design and Layout
Tools for layout
White space
Space to structure
Consider ABC as a single block ! A D B C E F

42. Screen Design and Layout
Tools for layout
White space
Space to highlight
Used to highlight graphics or quotes!

43. Screen Design and Layout
User action and control
Tools for layout
Entering information
Grouping and structures
Knowing what to do?
Orders of groups and items
Affordances
Decoration
Alignment
Appropriate appearance
White space
Presenting information
Asthetics and utility
Color and 3D
Localization/Internationalization 

44. Screen Design and Layout
Tools for layout
Grouping and structures
Orders of groups and items
Decoration
Alignment
White space
EXAMPLE

45. Screen Design and Layout
grouping of items
defrost settings
type of food
time to cook
defrost settings
type of food
time to cook

46. Screen Design and Layout
grouping of items
order of items
type of heating
temperature
time to cook
start 1
1) type of heating 2
2) temperature 3
3) time to cook 4
4) start

47. Screen Design and Layout
grouping of items
order of items
decoration
different colours for different functions
lines around related buttons
different colours for different functions
lines around related buttons (temp up/down)

48. Screen Design and Layout
grouping of items
order of items
decoration
alignment
centred text in buttons
easy to scan ?

49. Screen Design and Layout
grouping of items
order of items
decoration
alignment
white space
gaps to aid grouping

50. Screen Design and Layout
User action and control
Tools for layout
Entering information
Grouping and structures
Knowing what to do?
Orders of groups and items
Affordances
Decoration
Alignment
Appropriate appearance
White space
Presenting information
Aesthetics and utility
Color and 3D
Localization/Internationalization

51. Screen Design and Layout
User Control and Action
Entering information
Form-based interface
MS Access forms
signup forms etc.
Dialog boxes
Print file dialog box
Open file dialog box

52. Screen Design and Layout
User Control and Action
Entering information
Form-based interface & Dialog boxes
They present information
e.g. labels, text ...
They let you enter information
e.g. text boxes, ...

53. Screen Design and Layout
User Control and Action
Entering information
In data-entry fields, alignment is important!
Jagged / Uneven outline due to different label lengths
Name:
Address:
Alan Dix
Lancaster

54. Screen Design and Layout
User Control and Action
Entering information
In data-entry fields, alignment is important!
Left align
Right align
Center align
Top and left align

55. Screen Design and Layout
User Control and Action
Entering information
Group the items logically
Natural order for entering information
Top-bottom or left-right
Depending upon culture
Native language
Set tab order for keyboard entry 
Name:
Address:
Alan Dix
Lancaster ?
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster 

56. Screen Design and Layout
User Control and Action
Knowing what to do
What are active elements?
Where do you type? / reacts on clicking
What are passive elements?
Give you the information (text/labels)

57. Screen Design and Layout
User Control and Action
Knowing what to do
Consistent style helps
e.g. web underlined links
Labels and icons
standards for common actions
e.g. save, delete or print

58. Screen Design and Layout
User Control and Action
Affordances
Perceived properties of an object
Shape and size suggest actions
Pick up, twist, throw ...
mug handle
‘affords’ grasping

59. Screen Design and Layout
User Control and Action
Affordances
For screen objects
Button–like object ‘affords’ mouse click
Physical-like objects suggest same actions

60. Screen Design and Layout
User Control and Action
Affordances
Culture of computer use
Icons ‘afford’ clicking
Or even double clicking … not like real buttons (a difference!)

61. Screen Design and Layout
Appropriate Appearance
Presenting Information
Type of information
Text, numbers, maps, tables, etc.
Usage
For which it is being used?
chap10
chap5
chap1
chap14
chap20
chap8 … 12 16 17 22 27 32
name
size

62. Screen Design and Layout
Appropriate Appearance
Presenting Information
Example: file listing
Textual information
Difficult to find recently updated files
If you order by date then OK, but
Again difficult to find a particular file
Do sorting on names (e.g. By clicking on column heading)
Thus, different goals -> different presentations
chap10
chap5
chap1
chap14
chap20
chap8 … 12 16 17 22 27 32
name
size

63. Screen Design and Layout
Appropriate Appearance
Asthetics and Utility
Backgrounds behind text … good to look at, but hard to read
Industrial control panels
Different buttons together
Designed and bought
Use carefully!

64. Screen Design and Layout
Appropriate Appearance
Colour and 3D
Often used very badly!
Colour
Older monitors with limited colour options
Beware colour blind!

65. Screen Design and Layout
Appropriate Appearance
Colour and 3D
3D effects
Good for physical information and some graphs
e.g. text in perspective!! 3D pie charts
But if over used …

66. Screen Design and Layout
Appropriate Appearance
Colour and 3D
bad use of colour
over use - without very good reason (e.g. kids’ site)
colour blindness
poor use of contrast
do adjust your set!
adjust your monitor to greys only
can you still read your screen?

67. Screen Design and Layout
Appropriate Appearance
Colour Check

68. Screen Design and Layout
Appropriate Appearance
Localization / Internationalization
Alignment and layout also changes
e.g. text right to left / top to bottom
Left scrolling
Use of tick and cross (e.g. In French and English)?  

69. References:
Human Computer Interaction by Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale
The essence of Human Computer Interaction by Christine Faulkner
Designing Interfaces by Tidwell
GUI Bloopers 2.0 by Jeff Johnson
The elements of User Interface Design by Theo Mandel