1. Interaction Frameworks Paradigms, and Styles
Chapter 3
Interaction Frameworks Paradigms, and Styles
May 11, 2007
Mohamad Eid

2. Outline Interaction Frameworks Interaction Paradigms
Large Scale Computing
Personal Computing
Networked Computing
Mobile Computing
Collaborative Environments
Virtual Reality
Augmented Reality
Interaction Styles
Command Line
Menu-Based Interface
Form Fill-In
Question and Answer
Direct Manipulation
Metaphors
Web Navigation
Three-Dimensional Environments
Natural Language
Key points to review
May 11, 2007
Mohamad Eid

3. Interaction Frameworks
A framework is basically a structure that provides a context for conceptualizing something
We can use these frameworks to:
Structure the design process
Help us to identify problematic areas within the design
Help us to conceptualize the problem space as a whole
May 11, 2007
Mohamad Eid

4. Interaction Framework
System (S)—Uses its core language (computational attributes related to system state)
User (U)—Uses its task language (psychological attributes related to user state)
Input (I)—Uses its input language
Output (O)—Uses its output language
May 11, 2007
Mohamad Eid

5. Interaction Framework
Based on Execution/Evaluation Action Cycle (EEC)
Execution Phase
Articulation—The user formulates a goal, which is then articulated using the input language.
Performance—The input language is translated into the core language (operations that the system will carry out).
Presentation—The system manifests the result of the core-language operations using the output language.
Evaluation Phase
Observation—The user interprets the results on the screen and reconciles them with the original goal.
May 11, 2007
Mohamad Eid

6. Interaction Paradigms
Large Scale Computing
Personal Computing
Networked Computing
Mobile Computing
Collaborative Environments
Virtual Reality
Augmented Reality
May 11, 2007
Mohamad Eid

7. Interaction Paradigms
Large circles represent principal paradigms.
Oblong shapes represent convergent paradigms.
Words without surrounding shapes represent specific system architectures
(sometimes used for a paradigm reference, as in desktop computing for personal computing).
May 11, 2007
Mohamad Eid

8. Large Scale Computing
The original mainframe computers were large-scale computing machines, referred to as hosts
They resided in a central location
They were accessed by remote alphanumeric terminals equipped with keyboards
The terminals were referred to as “dumb terminals”
These systems are also referred to as host/terminal systems
May 11, 2007
Mohamad Eid

9. Large Scale Computing Super Computers
These highly specialized machines crunch large amounts of data at high speed, as in computing fluid dynamics, weather patterns, seismic activity predictions, and nuclear explosion dynamics.
Supercomputers are used for the very high speed backbone (vBNS) connections that constitute the core of the Internet.
National Center for Super Computing Applications (NCSA)
May 11, 2007
Mohamad Eid

10. Personal Computing Desktop Computing
The Alto, developed at the Xerox Palo Alto Research Center in 1973, was the first computer to use a GUI that involved the desktop metaphor: pop-up menus, windows, and icons
The Xerox Alto computer (1973)
Courtesy Palo Alto Research Center.
May 11, 2007
Mohamad Eid

11. Personal Computing The Xerox Alto mail program (1973)
The Xerox Alto computer (1973)
May 11, 2007
Mohamad Eid
Courtesy Palo Alto Research Center.

12. Personal Computing Personal-Public Computing
Public Access Computing – The information divide
Public Information Appliances
Automated teller machine with touchscreen.
Courtesy BigStockPhoto.com
May 11, 2007
Mohamad Eid

13. Networked Computing Scope Wired - Wireless WAN – Wide Area Network
MAN – Metropolitan Area Network
LAN – Local Area Network
PAN – Personal Area Network
Wired - Wireless
Wi-Fi (IEEE x)
Bluetooth 3G
May 11, 2007
Mohamad Eid

14. Mobile Computing
Mobile computing technologies comprise a very diverse family of devices:
Laptop computers
Tablet computers
Game players
MP3 players
PDAs
Cell phones
May 11, 2007
Mohamad Eid

15. Mobile Computing
Desktop metaphors do not translate well to mobile devices.
MP3 player
Laptop computer
Courtesy BigStockPhoto.com
Tablet computer
Cell phone
Hybrid desktop/mobile environments can afford optimal interaction efficiency.
May 11, 2007
Mohamad Eid

16. Mobile Computing
Mobile devices can be connected to global positioning systems (GPS)
These have touchscreens and voice interaction to alleviate potential visual attention problems during driving
On-board navigation system.
Courtesy BigStockPhoto.com
May 11, 2007
Mohamad Eid

17. Mobile Computing
Mobile devices can offer situational computing that can take advantage of location-specific information through location-based mobile services (LMS).
LMS can be beneficial for location-sensitive advertisements, public service announcements, social interactions, and location-specific educational information.
May 11, 2007
Mohamad Eid

18. Collaborative Environments
Networks allow members of a group to interact with other members on shared files and documents.
This creates a virtual space where people can collaborate and work collectively.
Groupware
Networks facilitate collaborative activities.
May 11, 2007
Mohamad Eid

19. Collaborative Environments
Collaborative work
Communication
Coordination
Organization
Presentation
Computer-mediated communication (CMC)
Computer-supported cooperative work (CSCW)
What are some of the different types of groupware?
May 11, 2007
Mohamad Eid

20. Collaborative Environments
Remote interaction
Synchronous
Video conferencing
Instant messaging
Chat rooms
Remote access white boards
Asynchronous
Recommender systems
Bulletin boards
May 11, 2007
Mohamad Eid

21. Embodied Virtuality
Some of us use the term “embodied virtuality” to refer to the process of drawing computers out of their electronic shells. The “virtuality” of computer-readable data—all the different ways in which it can be altered, processed and analyzed—is brought into the physical world.
(Weiser, 1991, 95)
May 11, 2007
Mohamad Eid

22. Embodied Virtuality
How do we disperse computing functionality throughout the environment?
What form should EV computing take?
What kind of interface does it require?
How much control should we retain, and how much should be automated?
May 11, 2007
Mohamad Eid

23. Embodied Virtuality Emerging fields Ubiquitous/pervasive computing
Invisible/transparent computing
Wearable computing
May 11, 2007
Mohamad Eid

24. Embodied Virtuality - Ubiquitous/pervasive
Third Paradigm (Alan Key)
Devices like cameras, video recorders, musical instruments, and picture frames are becoming “smart” through the introduction of embedded chips.
The essence of UbiComp is that, to fulfill their potential, computing technologies must be considered a part of the fabric of our lives and not something that resides in a gray box.
May 11, 2007
Mohamad Eid

25. Embodied Virtuality - Ubiquitous/pervasive
Ambient computing
The concept of a computational grid that is seamlessly integrated into our physical environment
Lighting systems
Heating systems
Electrical systems
Smart environments that sense and recognize people
Face recognition
ID tags
May 11, 2007
Mohamad Eid

26. Embodied Virtuality - Invisible/transparent
The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it. (Weiser, 1991, 94)
Two approaches
Make the interface simple and intuitive
Driving a car
Remove the interface entirely
Automotive breaking systems
May 11, 2007
Mohamad Eid

27. Embodied Virtuality - Invisible/transparent
Information Appliances
PDAs, BlackBerry® devices, digital cameras, MP3 players, and portable game players.
An appliance specializing in information: knowledge, facts, graphics, images, video, or sound. An information appliance is designed to perform a specific activity, such as music, photography, or writing. A distinguishing feature of information appliances is the ability to share information among themselves.
(Norman, 1998, 53)
A BlackBerry
type of device.
May 11, 2007
Mohamad Eid
Courtesy of BigStockPhoto.com.

28. Embodied Virtuality - Wearable
The underlying principle of wearable computing is the merging of information space with work space - humionics.
The goal of humionics is to create an interface that is unobtrusive and easily operated under work-related conditions.
Traditional I/O technologies are generally inadequate
Wearable systems must take advantage of auditory and haptic as well as visual interaction.
Wearable computing systems require multimodal interfaces.
May 11, 2007
Mohamad Eid

29. Embodied Virtuality - Wearable
Personal Area Network (PAN)
Two types
Wireless network of wearable and proximal devices
(IEEE) Working Group for WPAN
Microsoft – Connect to a Bluetooth personal area network (PAN)
Wearable devices that use the body to transmit signals
MIT Media Lab – Intrabody Signaling
IBM Personal Area Network (PAN)
May 11, 2007
Mohamad Eid

30. Embodied Virtuality
Embodied Virtuality Environments and Their Characteristics
Manual
Automated
Fixed
Portable
UbiComp
Some systems are manual
Some systems are automated
Some components are embedded
Some devices are portable
Invisible
User does not interact with computer
System takes care of all computer functionality
Some system components are embedded
Wearable
Many of the wearable components allow manual control
Some of the wearable components interact automatically with embedded sensors
Some systems use situated sensors that interact with wearable components
Most system components are portable (wearable)
Embodied virtuality environments
location/operation.
May 11, 2007
Mohamad Eid

31. Virtual Reality
The goals of the virtual reality (VR) community are the direct opposite of the goals of the EV community.
EV strives to integrate computer functionality with the real world
VR strives to immerse humans in a virtual world
May 11, 2007
Mohamad Eid

32. Virtual Reality Vs. Embodied Virtuality
May 11, 2007
Mohamad Eid

33. Virtual Reality
Nonimmersive - screen-based, pointer-driven, three-dimensional (3D) graphical presentations that may involve haptic feedback
VRML
QuickTime VR
Immersive VR environments are designed to create a sense of “being” in a world populated by virtual objects.
To create a convincing illusion, they must use as many human perceptual channels as possible.
May 11, 2007
Mohamad Eid

34. Virtual Reality - Immersive
CAVE automated virtual environment at the National Center for Supercomputing
Applications (NCSA).
Sketching a virtual world in the
VR design tool ShadowLight.
Photographs and ShadowLight application courtesy of Kalev Leetaru.
Sensics piSight
Virtual Reality (VR) system.
May 11, 2007
Mohamad Eid

35. Augmented Reality
The goal of AR is to create a seamless integration between real and virtual objects in a way that augments the user’s perception and experience.
Criteria for AR environments
The virtual information must be:
Relevant to and
in sync with the real-world environment.
May 11, 2007
Mohamad Eid

36. Sportvue MC1 motorcycle helmet
Augmented Reality
AR I/O devices
Heads Up Displays (HUD)
Optical see through
Video see through
MicroOptical MD-6
Critical Data Viewer.
Sportvue MC1 motorcycle helmet
heads-up display.
May 11, 2007
Mohamad Eid

37. Virtuality Continuum
May 11, 2007
Mohamad Eid

38. Interaction Styles Command Line Menu-Based Interface Form Fill-In
Question and Answer
Direct Manipulation
Metaphors
Web Navigation
Three-Dimensional Environments
Zoomable Interface
Natural Language
May 11, 2007
Mohamad Eid

39. Interaction Styles - Command Line
Command-line interfaces are fast and powerful.
Many commands are abbreviated
quick and efficient
Commands can be applied to many objects simultaneously
fast input
Some commands have multiple parameters that can be set and altered
precise and flexible
May 11, 2007
Mohamad Eid

40. Interaction Styles - Command Line
Advantages of command-line interfaces:
Suitable for repetitive tasks
Advantageous for expert users
Offer direct access to system functionality
Efficient and powerful
Not encumbered with graphic controls
Low visual load
Not taxing on system resources
May 11, 2007
Mohamad Eid

41. Interaction Styles - Command Line
Disadvantages of command-line interfaces:
Low command retention
Steep learning curve
High error rates
Heavy reliance on memory
Frustrating for novice users
May 11, 2007
Mohamad Eid

42. Interaction Styles - Menu-Based Interface
Menu-driven interfaces present users with sequential hierarchal menus that offer lists of functions.
Textual: key-in number of option
Graphical: use arrow keys or pointing device
May 11, 2007
Mohamad Eid

43. Interaction Styles - Menu-Based Interface
Menus are based on recognition as opposed to recall
No need to remember commands
Users search from a list of possible choices
List provides constraints
Appropriate for small screens (iPod)
May 11, 2007
Mohamad Eid

44. Interaction Styles - Menu-Based Interface
Most menus are a variation on a few basic categories:
Single Sequential Hierarchal
Star network Web network
May 11, 2007
Mohamad Eid

45. Interaction Styles - Menu-Based Interface
Advantages of menu-based interfaces:
Low memory requirements
Self-explanatory
Easy to undo errors
Appropriate for beginners
Disadvantages of menu-based interfaces:
Rigid and inflexible navigation
Inefficient for large menu navigation
Inefficient use of screen real estate
Slow for expert users
May 11, 2007
Mohamad Eid

46. Interaction Styles - Form Fill-In
Similar to menu interfaces – present screens of information
Different than menu interfaces - used to capture information and proceed linearly not to navigate a hierarchical structure
May 11, 2007
Mohamad Eid

47. Interaction Styles - Form Fill-In
Advantages of form fill-in interfaces:
Low memory requirements
Self-explanatory
Can gather a great deal of information in little space
Present a context for input information
Disadvantages of form fill-in interfaces:
Require valid input in valid format
Require familiarity with interface controls
Can be tedious to correct mistakes
May 11, 2007
Mohamad Eid

48. Interaction Styles - Question and Answer
Question and answer interfaces are also called wizards.
They are restricting for expert users
They are easy for novice users
However, they may not know the required information
Users must be able to cancel a menu without affecting the state of the computer
May 11, 2007
Mohamad Eid

49. Interaction Styles - Question and Answer
Microsoft Add Network Place Wizard
(a) Add Network Place wizard. (b) Select a service provider. (c) Address of the network place.
May 11, 2007
Mohamad Eid

50. Interaction Styles - Question and Answer
Advantages of question and answer interfaces:
Low memory requirements
Self-explanatory
Simple linear presentation
Easy for beginners
Disadvantages of question and answer interfaces:
Require valid input supplied by user
Require familiarity with interface controls
Can be tedious to correct mistakes
May 11, 2007
Mohamad Eid

51. Interaction Styles - Direct Manipulation
Ben Shneiderman (1982)
Continuous representations of the objects and actions of interest with meaningful visual metaphors.
Physical actions or presses of labeled buttons instead of complex syntax.
Rapid, incremental, reversible actions whose effects on the objects of interest are visible immediately.
May 11, 2007
Mohamad Eid

52. Interaction Styles - Direct Manipulation
Three phases in Direct Manipulation - Cooper, Reimann (2003)
Free Phase—How the screen looks before any user actions
Captive Phase—How the screen looks during a user action (click, click-drag, etc.)
Termination Phase—How the screen looks after a user action
May 11, 2007
Mohamad Eid

53. Interaction Styles - Direct Manipulation
Advantages of direct manipulation interfaces:
Easy to learn
Low memory requirements
Easy to undo
Immediate feedback to user actions
Enables user to use spatial cues
Easy for beginners
Disadvantages of direct manipulation interfaces:
Not self-explanatory
Inefficient use of screen real estate
High graphical system requirements
May 11, 2007
Mohamad Eid

54. Interaction Styles - Metaphors
GUIs use visual relationships to real-world objects (metaphors)
Metaphors can help people relate to complex concepts and procedures by drawing on real-world knowledge
Real-world affordances can be reflected
What metaphors are used by contemporary GUIs?
May 11, 2007
Mohamad Eid

55. Interaction Styles - Metaphors
Microsoft Windows XP Apple OS X
May 11, 2007
Mohamad Eid

56. Interaction Styles - Metaphors
A metaphor’s function must be consistent with real-world expectations
Metaphors that do not behave the way people expect will cause confusion and frustration
Macintosh trashcan
May 11, 2007
Mohamad Eid

57. Interaction Styles - Metaphors
Don’t force a metaphor
Potential problems with metaphors
Run out of metaphors
Some virtual processes and objects have no real-world counter parts
Mixed metaphors
Carry connotations and association
May 11, 2007
Mohamad Eid

58. Interaction Styles - Web Navigation
Two basic interaction styles
Link-based navigation
Sensitive to articulatory distance
Ambiguous link labels increase the gulf of evaluation
Search
Sensitive to semantic distance
Inadequate search engine algorithms increase the gulf of execution
Slight advantage in development of mental models
May 11, 2007
Mohamad Eid

59. Interaction Styles - Natural Language
Natural Language Interaction (NLI) - Interacting with computers using everyday language
Obstacles
Language is ambiguous
Meaning depends on context
“Search results”
“She said she did not know”
Dependant on visual cues
May 11, 2007
Mohamad Eid

60. Interaction Styles - Natural Language
Two areas of development
Speech recognition
Semantics
Grammar issues
Vague meanings
Contradictory statements
NLIs may require constant clarification of linguistic ambiguities
May 11, 2007
Mohamad Eid

61. Interaction Styles - Natural Language
Advantages of NLI:
Ease of learning
Low memory requirements
Flexible interaction
Low screen requirements
Appropriate for beginners
Disadvantages of NLI:
Requires knowledge of the task domain
May require tedious clarification dialogues
Complex system development
May 11, 2007
Mohamad Eid

62. Summary Goals of HCI: Improve Visibility and feedback
safety
functionality
efficiency
usability
Visibility and feedback
Affordance and perceived affordance
Goal = state; task = action
Human/computer as system running on 2 processors
Types, classes and abilities of users
Productivity = functionality * usability
Usability factors
e.g. learnability, fit, acceptability
Contributing disciplines
e.g. linguistics, Artificial Intelligence
May 11, 2007
Mohamad Eid

63. Summary (Cont’d) Human cognitive system - Limitations on:
perception
attention
memory
Task analysis vs. functional analysis
Star model with evaluation at centre
UI levels
task
conceptual model
interaction style
interaction element
physical element
Usability engineering
Layered approach = Model View Controller Software Design Pattern
Malfunction as a kind of defect (of usability)
May 11, 2007
Mohamad Eid

64. متشکرم 谢谢 Ευχαριστώ Dankie ありがとう Asante Urakoze DMnvwd WAD MAHAD
go raibh maith agaibh
ありがとう
متشکرم
WAD MAHAD
SAN TAHAY
GADDA GUEY
Asante
Urakoze
May 11, 2007
Mohamad Eid