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

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

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

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

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

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

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

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

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

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

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

Interaction Styles: Web Navigation (7/10) 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 12 CS 320 February 23, 2011

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

Interaction Styles: Web Navigation (7/10) 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 14 CS 320 February 23, 2011

Interaction Styles: 3D Environments (8/10) 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 15 CS 320 February 23, 2011

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

Interaction Styles: 3D Environments (8/10) 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 17 CS 320 February 23, 2011

Interaction Styles: Zoomable Interface (9/10) 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 18 CS 320 February 23, 2011

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

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 20 CS 320 February 23, 2011 Interaction Styles: Zoomable Interface (9/10)

Natural Language Interaction (10/10) 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 21 CS 320 February 23, 2011

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

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 23 CS 320 February 23, 2011 Natural Language Interaction (10/10)

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

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

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