INTERACTION STYLES References S. Heim, The Resonant Interface HCI Foundations for Interaction Design [Chapter 2] Addison-Wesley, 2007 J. Preece, Y. Rogers,

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


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


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


Overview 0f the main interaction stylesAnalysis

CharacteristicsAdvantagesDisadvantagesApplicability

2 Interaction Styles

6


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


Interaction Styles

Main styles: Command Line Menu-Based Interfaces Form Fill-In Question and Answer Direct Manipulation Metaphors

8


Interaction Styles

Main styles [continued]: Web Navigation Three-Dimensional Environments Zoomable Interfaces Natural Language

9


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



Example: putty access to linux FreeBSD 8.0

11



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



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


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


15



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



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



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


Interaction Styles: Form Fill-In (3/10)19


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



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



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



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


24



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



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


Example: S. Dascalu’s desktop at 10:33 pm on 2/13/2011

27



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



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



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



Examples: The desktop metaphor

Microsoft Windows XP Apple OS X

31



Example: The spreadsheet (the accountant ledger)

32



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



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



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]


Video Selection

Documents

INTERACTION STYLES References S. Heim, The Resonant Interface HCI Foundations for Interaction Design [Chapter 2] Addison-Wesley, 2007 J. Preece, Y. Rogers,