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