CS 320 Interaction Design 1 INTERACTION STYLES REFERENCES

CS 320 Interaction Design 1 INTERACTION STYLES REFERENCES S. HEIM, THE RESONANT INTERFACE HCI FOUNDATIONS FOR INTERACTION DESIGN [CHAPTER 2] ADDISON-WESLEY, 2007 J. PREECE, Y. ROGERS, H. SHARP INTERACTION DESIGN WILEY, 2007 FEBRUARY 14, 2011

Outline 2 1 RECAP OF INTERACTION PARADIGMS 2 INTERACTION STYLES CS 320 February 14, 2011

1 Recap of Interaction Paradigms 3 v PRINCIPAL PARADIGMS v NEW INTERACTION CONVERGENT PARADIGMS CS 320 February 14, 2011

Interaction Paradigms 4 Principal Paradigms Large scale computing Personal computing [Xerox Star] [GUI History] [GUI OS] Networked computing [IBM] [NCSA] [Cray 1960’s] [IBM 2008] Cloud computing [1][2][3][4] Mobile computing Smart phones [1] [2][3] Tablet PCs [1] [2] CS 320 February 14, 2011

Interaction Paradigms 5 Recently evolved convergent interaction spaces Collaborative environments Embodied virtuality [Layar] Immersive virtual reality CS 320 [Night Approach] [Sixth Sense] Augmented reality [Webex] [Cisco Tele. Presence] [CNN Hologram] [CAVE 1993] February 14, 2011

2 Interaction Styles 6 v OVERVIEW 0 F THE MAIN INTERACTION STYLES v ANALYSIS v. Characteristics v. Advantages v. Disadvantages v. Applicability CS 320 February 14, 2011

Interaction Styles 7 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 CS 320 February 14, 2011

Interaction Styles 8 Main styles: Command Line Menu-Based Interfaces Form Fill-In Question and Answer Direct Manipulation Metaphors CS 320 February 14, 2011

Interaction Styles 9 Main styles [continued]: Web Navigation Three-Dimensional Environments Zoomable Interfaces Natural Language CS 320 February 14, 2011

Interaction Styles: Command Line (1/10) 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 CS 320 February 14, 2011

Interaction Styles: Command Line (1/10) 11 Example: putty access to linux Free. BSD 8. 0 CS 320 February 14, 2011

Interaction Styles: Command Line (1/10) 12 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 CS 320 Preferred by expert users February 14, 2011

Interaction Styles: Command Line (1/10) 13 Disadvantages Low command retention Steep learning curve High error rates Heavy reliance on memory Frustrating for novice users Applicability CS 320 Repetitive tasks Operating systems Command control systems Systems with low graphics capabilities or requirements Highly efficient, expert use February 14, 2011

Interaction Styles: Menu-Based Interfaces (2/10) 14 Characteristics: CS 320 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 February 14, 2011

Interaction Styles: Menu-Based Interfaces (2/10) 15 Most menus are a variation on a few basic categories: Single Sequential Star network CS 320 Hierarchal Web network February 14, 2011

Interaction Styles: Menu-Based Interfaces (2/10) 16 Examples [apple. com – i. Pod OS 4 User Guide] CS 320 February 14, 2011

Interaction Styles: Menu-Based Interfaces (2/10) 17 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 CS 320 Most general-purpose systems Small screen devices February 14, 2011

Interaction Styles: Form Fill-In (3/10) 18 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) CS 320 February 14, 2011

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 format 1/29/2005, 29/1/2005, or January 29, 2005? CS 320 February 14, 2011

Interaction Styles: Form Fill-In (3/10) 20 Example [UNR travel request form - excerpt] CS 320 February 14, 2011

Interaction Styles: Form Fill-In (3/10) 21 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 CS 320 February 14, 2011

Interaction Styles: Form Fill-In (3/10) 22 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 CS 320 February 14, 2011

Interaction Styles: Question and Answer (4/10) 23 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 users They 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 CS 320 February 14, 2011

Interaction Styles: Question and Answer (4/10) 24 Example: Microsoft Add Network Place Wizard (a) Add Network Place wizard (b) Select a service provider (c) Address of the network place CS 320 February 14, 2011

Interaction Styles: Question and Answer (4/10) 25 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 CS 320 Software installations Computer support of well established step-by-step procedures February 14, 2011

Interaction Styles: Direct Manipulation (5/10) 26 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: CS 320 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 February 14, 2011

Interaction Styles: Direct Manipulation (5/10) 27 Example: S. Dascalu’s desktop at 10: 33 pm on 2/13/2011 CS 320 February 14, 2011

Interaction Styles: Direct Manipulation (5/10) 28 Advantages Easy to learn Low memory requirements Easy to undo Immediate feedback to user actions Enables user to use spatial cues Easy for beginners CS 320 February 14, 2011

Interaction Styles: Direct Manipulation (5/10) 29 Disadvantages Not self-explanatory Inefficient use of screen real estate High graphical system requirements Applicability CS 320 General-purpose GUI-based systems (this is the most common form of HCI) Video games CAD systems February 14, 2011

Interaction Styles: Metaphors (6/10) 30 Characteristics: CS 320 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 February 14, 2011

Interaction Styles: Metaphors (6/10) 31 Examples: The desktop metaphor Microsoft Windows XP Apple OS X CS 320 February 14, 2011

Interaction Styles: Metaphors (6/10) 32 Example: The spreadsheet (the accountant ledger) CS 320 February 14, 2011

Interaction Styles: Metaphors (6/10) 33 A metaphor’s function must be consistent with realworld expectations • Metaphors that do not behave the way people expect will cause confusion and frustration • Macintosh trash can CS 320 February 14, 2011

Interaction Styles: Metaphors (6/10) 34 Don’t force a metaphor 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

Interaction Styles: Metaphors (6/10) 35 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 doubleedge sword (their strength as well as their weakness) Applicability CS 320 Computer systems in general, GUI-based in particular February 14, 2011

Video Selection 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