CS 320 Interaction Design

1. CS 320 Interaction Design INTERACTION STYLES (continued) INTERACTION DESIGN PROCESS Textbook: S. Heim, The Resonant Interface: HCI Foundations for Interaction Design [Chapter 2] Addison-Wesley, 2007 February 23, 2011

2. Outline 1Interaction Styles 2 On Project Part 1 (Concept) CS 320 February 23, 2011

3. Overview 0f the main interaction styles Analysis Characteristics Advantages Disadvantages Applicability 1 Interaction Styles 3 CS 320 February 23, 2011

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

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

6. Interaction Styles: Metaphors (6/10) 6 • 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 23, 2011

7. Interaction Styles: Metaphors (6/10) 7 Examples:The desktop metaphor (Microsoft Windows XP) CS 320 February 23, 2011

8. Interaction Styles: Metaphors (6/10) 8 Example: The spreadsheet (the accountant’s ledger) [Dan Bricklin] CS 320 February 14, 2011

9. Interaction Styles: Metaphors (6/10) 9 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 23, 2011

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

11. Interaction Styles: Metaphors (6/10) 11 • 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 the 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 23, 2011

12. Interaction Styles: Web Navigation (7/10) 12 • Characteristics: • Based on the hypertext foundation of the World Wide Web • Provides access to a vast repository of information • Has fundamentally transformed our work and leisure time • Two sub-styles (non-exclusive): • Link-based navigation • Search-based navigation CS 320 February 23, 2011

13. Interaction Styles: Web Navigation (7/10) 13 • Example: Google search CS 320 February 23, 2011

14. Interaction Styles: Web Navigation (7/10) 14 • Advantages • Flexible • Powerful • Offers access to a wealth of information • Disadvantages • Depends on computer processing power and network bandwidth • Results obtained can be overwhelming • Information needs to be filtered • Can be slow and/or frustrating • Applicability • Internet search and surfing CS 320 February 23, 2011

15. Interaction Styles: 3D Environments (8/10) 15 • Characteristics: • Create the illusion of 3D immersion (e.g., games or simulations on 2D screens) OR • Provide immersive 3D virtual reality experience (e.g., the CAVE) – full 3D environments • Heavily dependent on the computer graphics technology • Full 3D environments can more realistically represent real-world metaphors and provide real-world affordances such as moving and rotating virtual objects in 3D spaces CS 320 February 23, 2011

16. Interaction Styles: 3D Environments (8/10) 16 • Example: DRI Reno CAVE (Computer Automated Virtual Environment) CS 320 February 23, 2011

17. Interaction Styles: 3D Environments (8/10) 17 • Advantages • Immersive, rich experience • Improved representation of the real world • 3D navigation/exploration is possible • Disadvantages • Heavily dependent on computer technology • In full 3D environments, the user must wear goggles • Full 3D environments are still under development (still somewhat awkward to navigate them) • 3D navigation can quickly become difficult and confusing • Applicability • Games, simulations, training CS 320 February 23, 2011

18. Interaction Styles: Zoomable Interface (9/10) 18 • Characteristics: • The concept of zoomable interfaces, or zooming user interface (ZUI) can be traced to Jeff Raskin’s Zoom World • Zoom World reflects the zooming interface paradigm (ZIP) • Raskin describes the paradigm as analogous to flying, as opposed to navigating a maze (which characterizes traditional desktop GUIs) • ZIP is based on our ability to remember landmarks and our sense of relative positioning • It depends on organizational cues, such as proportion, color, proximity, patterns, and other visual stimuli CS 320 February 23, 2011

19. Interaction Styles: Zoomable Interface (9/10) 19 • Example: Raskin 1.2.2 for Mac OS X 10.6 short demo CS 320 February 23, 2011

20. Interaction Styles: Zoomable Interface (9/10) 20 • Advantages • Allows switching between levels of abstraction (views) • Can access a large amount of information • Simple and efficient manipulation of interface elements • Disadvantages • Useful information might be hard to find • Complex graphics might be confusing • Applicability • Maps, navigation systems, file management and organization CS 320 February 23, 2011

21. Natural Language Interaction (10/10) 21 • Characteristics: • Natural language interaction (NLI) – interacting with computers using everyday language • Largely, speech based • Language is powerful, but complex and can be ambiguous • Meaning depends on context CS 320 February 23, 2011

22. Natural Language Interaction (10/10) 22 • Example: Siri Personal Assistant for iPhone CS 320 February 23, 2011

23. Natural Language Interaction (10/10) 23 • Advantages • Easy to learn • Low memory requirements • Flexible interaction • Low screen requirements • Appropriate for beginners • Can be easily extended • Disadvantages • Requires knowledge of the task domain • May require tedious clarification dialogues • Complex system development • For speech-based systems, background noise needs to be avoided CS 320 February 23, 2011

24. Natural Language Interaction (10/10) 24 • Applications • Speech Input • Hands-free operation • Poor lighting situations • Mobile applications • In the home • Speech Output • On-board navigational systems CS 320 February 23, 2011

25. Due Tuesday March 8, at 8:00 pm Contents: Abstract Description Project Resources 2 Project Part 1: Concept 25 CS 320 February 23, 2011

26. Video Selection • Mobile computing [Mozilla Seabird] (Nathan) • Direct manipulation [Future user interface][Library carousel] • Virtual reality / 3D Environments [CAVE 1993] [Museum 1] [Therapy][Museum 2] [Challenges of HCI] (Parth) • Zoomable interfaces [Raskin] [Pad++] [NUI] [Google spreadsheets] • Natural language interaction [Siri] [Articulate] CS 320 February 23, 2011