Interaction Styles. Hall of Fame The 3-point seatbelt Brief history ●1959: Invented by Nils Bohlin ○patent released by Volvo ○saving lives > profit ●1968.

Interaction Styles

Hall of FameThe 3-point seatbelt

Brief history●1959: Invented by Nils Bohlin

○ patent released by Volvo○ saving lives > profit

●1968 (and on): required on all American cars●2002: Bohlin died

○ Volvo estimated 1 million+ lives saved●2012: NHTSA estimated 12,174 lives saved (US) (ages 5+)

○ raising annually

Ryan McDermott

What makes it work?

Understanding

obelt keeps your body secure

oslack locks out when force is exerted on belt● http://www.history.com/this-day-in-history/three

-point-seatbelt-inventor-nils-bohlin-born● http://www-nrd.nhtsa.dot.gov/Pubs/811892.pdf

Ryan McDermott

Industrial Designo secures upper and lower body at hips, as opposed

to abdomeno “Immovable anchorage point” – Bohlino one simple movement

DiscoverabilityoSeat belt affords pullingoSeat buckle affords inserting something shaped like the buckle tongue) oSeat buckle affords pushing (for release)oPulling seatbelt gives feedback (stops giving slack)

PS4 Button

s

Hall of Shame

Weston Miller

By zooming in, changing the angle AND changing the lighting…

• Affordances• They are “Buttons”, but they don’t “push” in.

• Consistency• More like a touch screen than the previous PS consoles.

• Constraint• Buttons can only be touched.

• Feedback• Lights turn on when the power button is touched.• If eject button is pressed, the disc is ejected (if there is one in

the system)• Mapping

• Both buttons are by disc slot and are directly across from the other with the slot in the middle. User has to memorize that the top is power and the bottom is eject or run the risk of accidentally turning the system off instead.

• Visibility• They blend in with the line going all the way around making it

difficult to guess they are there without close inspection• The symbols are small. Also, when the lights are on and it’s

dark in the room, the symbols are almost invisible.

Objectives for today

• Revisit “working in groups”

• Get a quick tour of interaction styles

Working in groups: reminders

• Different people have different communication styles • Capture ideas on paper; discuss the ideas, not the person• Ask questions, propose alternatives; be cautious about definitive

statements• Be open and honest• Put it in writing

– Who is responsible for what; when is it due• Be aware that there are different ways to contribute

– Not everyone needs to program– Not everyone needs to go on each user visit

• Not just the end result matters – the process does, too

Design: A Broad Spectrum

• System Design– Requirements

• Information Design

• Graphic Design

• Interaction Design

Interaction Design Styles

• Menu Selection

• Form fill-in

• Direct Manipulation

• Command language

• Natural Language

Menu Selection

• Users read a list of items• Select the item most appropriate• Observe the effect

• Early on, the way most systems worked.• We had moved away from it a little (what’s

coming) but it has made a revival with the web

Menu Selection

Menu Selection

Menu Selection

Menu Selection

Advantages• Shortens learning• Reduces keystrokes• Structures decision

making• Permits use of dialog

management• Easy error handling

Disadvantages• Presents danger of

many menus• May slow frequent

users• Consumes screen

space• Requires rapid display

Form Fill-in

• Used when data entry is required

• Users see a display of related fields and enter data in each field as appropriate

• Note: very common on the web

Form Fill-in

Form fill-in

Advantages• Simplifies data entry• Requires modest training• Gives convenient

assistance• Permits form

management tools

Disadvantages• Consumes screen

space

Direct Manipulation

• Create a visual representation of the world of action where users can directly make changes and see results

Direct Manipulation Search

Zillow

• Online demo at– www.zillow.com

Direct Manipulation

Advantages

• Visually presents task concepts

• Allows easy learning

• Allows easy retention

• Can prevent errors

• Encourages exploration

• High subjective satisfaction

Disadvantages

• Harder to program

• Require graphics display and pointing device

Command Language

• For frequent users

• Must learn the syntax and options

java command

Command Language

Advantages• Flexible• Appeals to ‘power

users’• Supports user

initiative• Allows convenient

creation of macros

Disadvantages• Poor error handling• Substantial training

and memorization

Natural Language

• Researchers have been working for years in the hope that computers can be made to respond to arbitrary sentences

• Note: may work with or without speech recognition

Natural Language

Advantages• Relieves burden of

learning syntax• May be “natural” in

some settings, e.g., interaction over a telephone

Disadvantages• Requires clarification

dialog• May require more

keystrokes• May not show context• Is unpredictable

Some comments

• All these styles should be in your toolbox (well, maybe not NL)

• They may be combined in a single app– Direct Manipulation with menus and forms is

common

• Different platforms / toolkits make particular styles more or less easy– We’ll talk about toolkits some next week