INTERACTION STYLESReferences
S. Heim, The Resonant InterfaceHCI Foundations for Interaction Design [Chapter 2]
Addison-Wesley, 2007
J. Preece, Y. Rogers, H. Sharp Interaction Design
Wiley, 2007
February 14, 2011
CS 320 Interaction Design
1
1 Recap of Interaction Paradigms
2 Interaction Styles
Outline
2
CS 320 February 14, 2011
Principal paradigms
New interaction convergent paradigms
1 Recap of Interaction Paradigms
3
CS 320 February 14, 2011
Interaction Paradigms
Principal Paradigms Large scale computing
[IBM] [NCSA] [Cray 1960’s] [IBM 2008] Personal computing
[Xerox Star] [GUI History] [GUI OS] Networked computing
Cloud computing [1][2][3][4] Mobile computing
Smart phones [1] [2][3] Tablet PCs [1] [2]
4
CS 320 February 14, 2011
Interaction Paradigms
Recently evolved convergent interaction spaces Collaborative environments
[Webex] [Cisco TelePresence] Embodied virtuality
[Night Approach] [Sixth Sense] Augmented reality
[Layar] Immersive virtual reality
[CNN Hologram] [CAVE 1993]
5
CS 320 February 14, 2011
Overview 0f the main interaction stylesAnalysis
CharacteristicsAdvantagesDisadvantagesApplicability
2 Interaction Styles
6
CS 320 February 14, 2011
Interaction Styles
The term interaction style refers to the way in which we interact with computers
For example, punch cards and card readers were used to interact with mainframe computers; now it is possible to issue spoken commands that initiate menu selections in a telephone-based interface
7
CS 320 February 14, 2011
Interaction Styles
Main styles: Command Line Menu-Based Interfaces Form Fill-In Question and Answer Direct Manipulation Metaphors
8
CS 320 February 14, 2011
Interaction Styles
Main styles [continued]: Web Navigation Three-Dimensional Environments Zoomable Interfaces Natural Language
9
CS 320 February 14, 2011
Interaction Styles: Command Line (1/10)
Characteristics: Text-based The user types commands at a prompt and then the
computer executes these commands and displays the results
Significant step forward over punch card interaction Many commands can be abbreviated Commands can be applied to many objects
simultaneously, Commands can have multiple parameters, which can
be combined in numerous ways
10
CS 320 February 14, 2011
Interaction Styles: Command Line (1/10)
Example: putty access to linux FreeBSD 8.0
11
CS 320 February 14, 2011
Interaction Styles: Command Line (1/10)
Advantages Fast and flexible Efficient and powerful Offer direct access to system functionality Not encumbered with graphic controls
Low visual load Not taxing on system resources
Preferred by expert users
12
CS 320 February 14, 2011
Interaction Styles: Command Line (1/10)
Disadvantages Low command retention Steep learning curve High error rates Heavy reliance on memory Frustrating for novice users
Applicability Repetitive tasks Operating systems Command and control systems Systems with low graphics capabilities or requirements Highly efficient, expert use
13
CS 320 February 14, 2011
Interaction Styles: Menu-Based Interfaces (2/10)
Characteristics: Present the user with sequential hierarchical
menus that offer lists of functions typically organized on levels
The user traverses the various levels, and at each level he or she selects the option that matches the required function
Menus can be either textual, with options presented as numbered choices and chosen by keying in the desired number
Menus can also be graphical, with options selected by arrow keys and a pointing device
14
CS 320 February 14, 2011
15
CS 320 February 14, 2011
Interaction Styles: Menu-Based Interfaces (2/10)
Most menus are a variation on a few basic categories:
Single Sequential Hierarchal
Star network Web network
Examples [apple.com – iPod OS4 User Guide]
16
CS 320 February 14, 2011
Interaction Styles: Menu-Based Interfaces (2/10)
Advantages Low memory requirements Self-explanatory Easy to undo errors Appropriate for beginners
Disadvantages Rigid and inflexible navigation Inefficient for large menu navigation Inefficient use of screen real estate Slow for expert users
Applicability Most general-purpose systems Small screen devices
17
CS 320 February 14, 2011
Interaction Styles: Menu-Based Interfaces (2/10)
Interaction Styles: Form Fill-In (3/10)
Characteristics: Similar to menu-driven interfaces in that they
present the user with a screen of information The difference is that form fill-ins are used primarily
to gather strings of information (they are used to proceed linearly, not to navigate a hierarchical tree structure)
Form fill-in interfaces are designed to capture information and proceed in a linear manner
Digital forms generally resemble familiar paper forms
Forms may be single screens that require scrolling, or may be presented in a paged format (multiple linked pages)
18
CS 320 February 14, 2011
Interaction Styles: Form Fill-In (3/10)19
CS 320 February 14, 2011
Always inform the user about the length of paged forms and where they are within the structure
Form elements must be unambiguously labeled to increase data integrity
The users must understand what data is required and what format should be used, e.g., the date format1/29/2005, 29/1/2005, or January 29, 2005?
Example [UNR travel request form - excerpt]
20
CS 320 February 14, 2011
Interaction Styles: Form Fill-In (3/10)
Advantages Low memory requirements Self-explanatory, intuitive Can gather a great deal of information in a
relatively small amount of space Present a context for input information
21
CS 320 February 14, 2011
Interaction Styles: Form Fill-In (3/10)
Disadvantages Require valid input in valid format Require familiarity with interface controls Can be tedious to correct mistakes
Applicability All replacements of paper form fill-ins
22
CS 320 February 14, 2011
Interaction Styles: Form Fill-In (3/10)
Interaction Styles: Question and Answer (4/10)
Characteristics: Take the user through a series of questions to which the
user supplies information that will then be used by the computer to set up an application or system environment
Also called wizards
They are restricting for expert usersThey are easy for novice users
However, they may not know the required information
The users must be able to cancel a menu without affecting the state of the computer
23
CS 320 February 14, 2011
24
CS 320 February 14, 2011
Interaction Styles: Question and Answer (4/10)
Example: Microsoft Add Network Place Wizard
(a) Add Network Place wizard (b) Select a service provider (c) Address of the network place
Advantages Low memory requirements Self-explanatory Simple linear progression/presentation Easy for beginners
Disadvantages Require valid input supplied by user Require familiarity with interface controls Can be tedious to correct mistakes
Applicability Software installations Computer support of well established step-by-step
procedures
25
CS 320 February 14, 2011
Interaction Styles: Question and Answer (4/10)
Interaction Styles: Direct Manipulation (5/10)
Characteristics: Direct manipulation - term coined by Ben
Shneiderman in 1982 to describe the emerging graphical user interfaces (GUI)
It has been since associated with GUI systems, such as Microsoft Windows or Apple OS
Shneiderman’s definition is based on the following criteria: 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
26
CS 320 February 14, 2011
Example: S. Dascalu’s desktop at 10:33 pm on 2/13/2011
27
CS 320 February 14, 2011
Interaction Styles: Direct Manipulation (5/10)
Advantages Easy to learn Low memory requirements Easy to undo Immediate feedback to user actions Enables user to use spatial cues Easy for beginners
28
CS 320 February 14, 2011
Interaction Styles: Direct Manipulation (5/10)
Disadvantages Not self-explanatory Inefficient use of screen real estate High graphical system requirements
Applicability General-purpose GUI-based systems (this is the most
common form of HCI) Video games CAD systems
29
CS 320 February 14, 2011
Interaction Styles: Direct Manipulation (5/10)
Interaction Styles: Metaphors (6/10)
Characteristics: 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
They also allow the designers to capitalize on the relationships implicit in the real-world objects and reinforce the user’s familiarity with the system’s procedures and functions
Real-world affordances can also be reflected
30
CS 320 February 14, 2011
Interaction Styles: Metaphors (6/10)
Examples: The desktop metaphor
Microsoft Windows XP Apple OS X
31
CS 320 February 14, 2011
Interaction Styles: Metaphors (6/10)
Example: The spreadsheet (the accountant ledger)
32
CS 320 February 14, 2011
Interaction Styles: Metaphors (6/10)
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 trash can
33
CS 320 February 14, 2011
Interaction Styles: Metaphors (6/10)
Don’t force a metaphor
34
Advantages Powerful, rich, innovative Drive developments in human-computer
interfaces Draw on the user’s familiarity with the real-
world counter part of the metaphor Can help inexperienced users
Disadvantages The scripting of a totally metaphoric environment is
impossible Can be restricting, if the interface tools do not relate
with anything in the real world Can also be confusing, if they interface tools do not
behave in the way the users would expect Carry intrinsic meaning and associations, which is a
double-edge sword (their strength as well as their weakness)
Applicability Computer systems in general, GUI-based in particular
35
CS 320 February 14, 2011
Interaction Styles: Metaphors (6/10)
Virtual reality [CAVE 1993] [CNN hologram] [Museum 1] [Therapy]
Embodied virtuality[Night approach to Aspen] [Museum 2] [Challenges of HCI] (Parth)
Mobile computing[Mozilla Seabird] (Nathan)
Form Fill In[Last Pass]
Direct manipulation[Future user interface][Library carousel]
CS 320 February 14, 2011
Video Selection
Top Related