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

2. Interaction Styles Interface styles / Types of interface styles
Different types of interfaces provide different types of interaction
Command-line interfaces
Menu-based interfaces
Natural Language interfaces
Questions/Answers and Query Dialog interfaces
Form-fills and spreadsheets interfaces
Point-and-Click interfaces
3D Interfaces
The WIMP interfaces

3. Query Dialog Interfaces
Interaction Styles
Questions/Answers
and
Query Dialog Interfaces

4. Interaction Styles Questions/Answers and Query Dialog interfaces
Qs/Ans as input to application (e.g. about products)
Web surveys
Questionnaires
MCQs, True/False …
(Ref:

5. Interaction Styles Questions/Answers and Query Dialog interfaces
Queries to retrieve information from database
Query Dialogs (as in MS Access)
Rather than writing a query, select different options (attributes) to retrieve information
Options from the interface provided as query dialog

6. Interaction Styles

7. Form-fills and spreadsheet interfaces
Interaction Styles
Form-fills and spreadsheet interfaces

8. Interaction Styles Form-fills and spreadsheets interfaces
Form-fills for data entry and retrieval
e.g. MS Access forms
e.g. creation forms
Easy to correct mistakes than a paper form
Easy to learn and use

9. Interaction Styles Form-fills and spreadsheets interfaces
Spreadsheet as a grid of cells
e.g. MS Excel
Values and formulae
Ease of use to manipulate cells
To give and get Input/Output

10. Point-and-click interfaces
Interaction Styles
Point-and-click interfaces

11. Interaction Styles Point and Click Interfaces
Moving the cursor to certain location on the screen and clicking
Mouse or other pointing device
Touch pad, joystick, scroll buttons …

12. Interaction Styles Point and Click Interfaces
You click a word and see its definition
e.g. in online/software dictionaries
e.g. click on a virtual building icon and it provides information

13. Interaction Styles Point and Click Interfaces
Point and click on hyper text
Navigation from one document to another
Highlighted words, maps, iconic buttons, …
Single / double click
On icons, text …

14. Interaction Styles
Point and Click Interfaces

15. Interaction Styles
Point and Click Interfaces

16. Interaction Styles
3D interfaces

17. Interaction Styles 3D Interfaces 3D appearance of windowing elements
Shades
Light source
(Ref:

18. Interaction Styles
3D Interfaces (Ref:

19. Interaction Styles 3D Interfaces Web book Objects placed in 3D
Farther objects shrinked
Java 3D
(Ref:

20. Interaction Styles
WIMP interfaces

21. Interaction Styles
The WIMP Interface
Windows
Icons
Menu
Pointers

22. Interaction Styles The WIMP Interface Windows, Icons, Menus, Pointers
Windows, Icons, Mice, Pull-down Menus
Also called windowing system
MS Windows / Mac OS is a WIMP Interface
Synonym of GUIs

23. Interaction Styles The WIMP Interface
(Ref:

24. Interaction Styles The WIMP Interface To reduce cognitive load
To reduce learning time
Ease of use
Consistency between interfaces

25. Interaction Styles WIMP Elements General Features Special Features
Windows
Buttons
Toolbars
Icons
Palettes
Menus
Dialog boxes
Pointers

26. Interaction Styles The WIMP Interface (Elements)
General Features + Specific Features
Together create look and feel
i.e. “look" refers to the appearance of GUI widgets
“Feel" refers to the way the widgets behave
“java swing tutorial”
“see demo”

27. Interaction Styles The WIMP Interface (Elements) Windows
An area of screen with independent functionality
Contains text and graphics
Can be moved / resized
More than one window at one time
i.e. more tasks can be handled at one time
BUT only one task is active at one time

28. Interaction Styles The WIMP Interface (Elements)
Overlapping of Windows
Cascading windows
Totally obscuring windows
Tiled windows
Scrollbars
Vertical: move contents up/down
Horizontal: move contents left/right

29. Interaction Styles The WIMP Interface (Elements) Title-bar
To show the name of the window
Minimize, maximize, close operations
Windows within windows e.g. MS Excel sheets, MS Word

30. Interaction Styles The WIMP Interface (Elements) Icons
Pictorial representation of a physical object
A small picture to represent a window
Many windows in the form of icons can be on:
Desktop
In one window e.g. folders in a window
(Ref:

31. Interaction Styles The WIMP Interface (Elements) Icons
Used to represent files, folders, windows, devices, …
Come in different sizes: 16, 32, 48, 96, …. pixels
“Icon editor” for creating and editing icons

32. Interaction Styles The WIMP Interface (Elements) Icons
Shrinking the window to its icon is called iconifying the window
Icons should represent the function for which they are designed
e.g. Recylebin, MS Word icon, MS Windows icon (flag)

33. Interaction Styles The WIMP Interface
(Ref:

34. Interaction Styles The WIMP Interface To reduce cognitive load
To reduce learning time
Ease of use
Consistency between interfaces

35. Interaction Styles WIMP Elements Special Features General Features
Buttons
Windows
Toolbars
Icons
Palettes
Menus
Dialog boxes
Pointers

36. Interaction Styles The WIMP Interface (Elements) Pointers
WIMP relies on clicking and pointing
Pointing/Hovering:
Moving and stopping the cursor
on the required item
Selecting:
Clicking once on the icon
(Ref: extracted from:

37. Interaction Styles The WIMP Interface (Elements) Pointers Executing:
Double click or one click + Enter key
Dragging:
Press + move the mouse without releasing the
mouse button
(Ref: extracted from:

38. Interaction Styles The WIMP Interface (Elements) Pointers
Different cursors to distinguish modes
Arrow pointer: Normal activity
Hour glass: processing / waiting
Hand cursor: hyperlinks
+ Pointer: drawing a line
Resize arrows etc.
“Resizing window with keyboard”
(Ref: extracted from:

39. Interaction Styles The WIMP Interface (Elements) Pointers Hotspot:
The location to which pointers point
e.g. arrow in the figure has hotspot on left
(Ref: extracted from:

40. Interaction Styles The WIMP Interface (Elements) Menus
Pull-down menus / Linear menus
A menu of commands that appear
below the title bar of the window
Appear by clicking on the menu name
Fall-down menus (after first click)

41. Interaction Styles The WIMP Interface (Elements) Menus
Difference between dropdown and pull down menu?
Pop-up / fly-out / context/ shortcut menus
Appears on right click
Can appear anywhere on the window
Quick access to the concerned functionality

42. Interaction Styles The WIMP Interface (Elements) Menus
Pie / Radial / Circular / Marking menus
Pie slices
Inactive center
Marks/gestures indicate the selection
Selection depends on direction of marks
(Ref:

43. Interaction Styles The WIMP Interface (Elements) Menus
Pie / Radial / Circular / Marking menus
Mouse pointer at the center of the menu
Equidistant menu items from center
Takes less time to select an item
Takes more space on screen
Expert Mode (gestures/marks)
(Ref:

44. Interaction Styles The WIMP Interface (Elements) Menus
Important points for designing menus
What items to include?
How to group the items?
How to order the items?

45. Interaction Styles The WIMP Interface (Elements)
Buttons / Command Button / Push Button
Resemble push buttons of a control panel (i.e. switch button)
Provides a simple way to trigger an event
Rectangular / Rounded Rectangular
(Ref:

46. Interaction Styles The WIMP Interface (Elements)
Buttons / Command Button / Push Button
Parts of a Button
Button itself
Text label (caption)
Icon
(Ref:

47. Interaction Styles The WIMP Interface (Elements)
Buttons / Command Button / Push Button
Events associated with a Button
Press
Release
Hover
What happens when you press a button BUT
release mouse pointer outside button?
(Ref:

48. Interaction Styles The WIMP Interface (Elements)
Buttons / Command Button / Push Button
Radio buttons
Single choice among many
Check buttons / boxes / tick boxes
Multiple choices
Toggle behavior
(Ref: ,

49. Interaction Styles The WIMP Interface (Elements) Toolbars
Collection of small buttons, icons, menus …
Top / Side of a window
Customizing toolbars
Used in:
office applications, graphic editors, web browsers

50. Interaction Styles The WIMP Interface (Elements) Palettes
Like tear-off and pin up menus
Place anywhere on screen
Mostly in drawing applications

51. Interaction Styles The WIMP Interface (Elements) Dialog boxes
Information window for user attention
e.g. error / warning message window
Paste special dialog box
Paste as formatted text or unformatted

52. Interaction Styles The WIMP Interface (Elements) Dialog boxes
User’s interaction with the window to perform a task
Naming a file and saving it (involves different dialog boxes)

53. References:
Human Computer Interaction by Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale (Book + presentation slides)
The essence of Human Computer Interaction by Christine Faulkner
The psychology of everyday things by Donald Norman
Figures / Text … from Wikipedia / Google search / univ. labs , etc…
(thanks to all)