1 / 26

CS 320 Interaction Design

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. Outline. 1 Interaction Styles 2 On Project Part 1 (Concept).

leo-huffman
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 (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

More Related