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 CS 320 Interaction Design 1

2. 1 Recap of Interaction Paradigms 2 Interaction Styles Outline 2 CS 320 February 14, 2011

3.  Principal paradigms  New interaction convergent paradigms 1 Recap of Interaction Paradigms 3 CS 320 February 14, 2011

4. Interaction Paradigms Principal Paradigms  Large scale computing  [IBM] [NCSA] [Cray 1960’s] [IBM 2008]IBMNCSACray 1960’sIBM 2008  Personal computing  [Xerox Star] [GUI History] [GUI OS]Xerox StarGUI HistoryGUI OS  Networked computing  Cloud computing [1][2][3][4]1234  Mobile computing  Smart phones [1] [2][3]123  Tablet PCs [1] [2]12 4 CS 320 February 14, 2011

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

6.  Overview 0f the main interaction styles  Analysis  Characteristics  Advantages  Disadvantages  Applicability 2 Interaction Styles 6 CS 320 February 14, 2011

7. 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

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

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

10. 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

11. Interaction Styles: Command Line (1/10) Example: putty access to linux FreeBSD 8.0 11 CS 320 February 14, 2011

12. 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

13. 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

14. 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. 15 CS 320 February 14, 2011 Interaction Styles: Menu-Based Interfaces (2/10) Most menus are a variation on a few basic categories: SingleSequential Hierarchal Star networkWeb network

16. Examples [apple.com – iPod OS4 User Guide] 16 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  Most general-purpose systems  Small screen devices 17 CS 320 February 14, 2011 Interaction Styles: Menu-Based Interfaces (2/10)

18. 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

19. 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 format 1/29/2005, 29/1/2005, or January 29, 2005?

20. Example [UNR travel request form - excerpt] 20 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 21 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 22 CS 320 February 14, 2011 Interaction Styles: Form Fill-In (3/10)

23. 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 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 23 CS 320 February 14, 2011

24. 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

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

26. 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

27. 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)

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 28 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  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)

30. 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

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

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

33. 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

34. 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

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 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)

36.  Virtual reality [CAVE 1993] [CNN hologram] [Museum 1] [Therapy]CAVE 1993CNN hologramMuseumTherapy  Embodied virtuality [Night approach to Aspen] [Museum 2]Night approach to AspenMuseum 2 [Challenges of HCI] (Parth)Challenges of HCI  Mobile computing [Mozilla Seabird] (Nathan)Mozilla Seabird  Form Fill In [Last Pass]Last Pass  Direct manipulation [Future user interface][Library carousel]Future user interfaceLibrary carousel CS 320 February 14, 2011 Video Selection