1 / 36

CS 320 Interaction Design

CS 320 Interaction Design. 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. 1 Recap of Interaction Paradigms

rish
Download Presentation

CS 320 Interaction Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Outline 1Recap of Interaction Paradigms 2 Interaction Styles 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 4 • 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] CS 320 February 14, 2011

  5. Interaction Paradigms 5 • 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] 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 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

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

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

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

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

  12. 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 • Preferred by expert users CS 320 February 14, 2011

  13. 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 • Repetitive tasks • Operating systems • Command and control systems • Systems with low graphics capabilities or requirements • Highly efficient, expert use CS 320 February 14, 2011

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

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

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

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

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

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

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

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

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

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

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

  25. 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 • Software installations • Computer support of well established step-by-step procedures CS 320 February 14, 2011

  26. 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: • 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 CS 320 February 14, 2011

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

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

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

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

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

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

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

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

  35. 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 double-edge sword (their strength as well as their weakness) • Applicability • Computer systems in general, GUI-based in particular CS 320 February 14, 2011

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

More Related