INTERACTION STYLES (continued)
INTERACTION DESIGN PROCESSTextbook:
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
2 On Project Part 1 (Concept)
Outline
2
CS 320 February 23, 2011
Overview 0f the main interaction stylesAnalysis
CharacteristicsAdvantagesDisadvantagesApplicability
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]
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 1.2.2 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 pmContents:
AbstractDescriptionProject Resources
2 Project Part 1: Concept
25
CS 320 February 23, 2011
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
Video Selection