Interactive tasks and components

Interaction Techniques

CS 4470/6456 - Fall 2002

Agenda

QuestionsHW2 due, HW3

Interaction techniquedefinitiondesign principles

Macintosh 7Swing interaction techniques

CS 4470/6456 - Fall 2002

Example

How to enter a number in a range?

Could use:(simulated) slider(simulated) knobtype in a number (text edit box)

Note: each is a different interaction technique

CS 4470/6456 - Fall 2002

Interaction techniques

Method for carrying out an interactive task

Come in the form of:widgetscontrolscomponentsinteractors

CS 4470/6456 - Fall 2002

Interaction techniques

Addresses complete cycle of execution and evaluation

Interaction technique typically includes:(simulated) input devicemapping of input signal to semanticsfeedback(simulated) output device

CS 4470/6456 - Fall 2002

Interaction technique design guidelines

Affordances

Feedback

Mechanics“Feel” & difficulty

Designing for mental modelsDesigning for novices vs. experts

CS 4470/6456 - Fall 2002

The original “Macintosh 7”

Macintosh (1984) was first big success of GUIsoriginally came with 7 interactors built

into toolbox

Most were not actually originalXerox Star Smalltalk & earlier

CS 4470/6456 - Fall 2002

The Macintosh 7

Generally very well designediterated with real usersvery snappy performance

dedicated whole processor to updating them

Huge influenceThese 7 still cover a lot of today’s GUIs

CS 4470/6456 - Fall 2002

The Macintosh 7

ButtonSliderPulldown menuCheck boxRadio buttonsText entry fieldsFile pick/save

CS 4470/6456 - Fall 2002

The original Macintosh included

Other interaction techniques:Window closeWindow resizeDrag icons and foldersOpen icons and folders

Was not included in toolboxNot generally availableNot so useful to other programmers

CS 4470/6456 - Fall 2002

Influence on today’s GUIs

The Macintosh 7 have become standard (common) interaction techniques

MFC as an example

Sure enough, inside the Swing toolkit as well

CS 4470/6456 - Fall 2002

Button

Push to invoke some behavior/command

Inverted for feedbackRecall Mac was pure B/W machinePseudo 3D appearance hard and hadn’t

been invented yet

CS 4470/6456 - Fall 2002

Button

CS 4470/6456 - Fall 2002

Slider

Select value in range

Most common as scroll bars

CS 4470/6456 - Fall 2002

Slider

CS 4470/6456 - Fall 2002

Slider

CS 4470/6456 - Fall 2002

Pulldown menu

Choose an item in a listclick button to pull down menuitems highlight as you go overselected item displayed

In the original Macintoshhad to hold down button to keep menu

down (one press-drag-release)

CS 4470/6456 - Fall 2002

Pulldown menu

CS 4470/6456 - Fall 2002

Check boxes

Select values in range

CS 4470/6456 - Fall 2002

Radio buttons

Select a single value in a mutually exclusive list of items

CS 4470/6456 - Fall 2002

Text entry / edit fields

Single or multi-line text support

CS 4470/6456 - Fall 2002

File pick / save

More complex than the othersbuilt from the others + then some

CS 4470/6456 - Fall 2002

Second major release of Macintosh

More interaction techniques were added:

ListsHierarchical (“pull-right”) menusCompact (“in-place”) menus

select one-of-N pulldown

Window zoom box (?)

CS 4470/6456 - Fall 2002

Other common widgets

Tabbed dialogsHierarchical lists (trees)“Combo boxes”

Combination(s) of menu, list, text entry

A few more + variations on things

Typically not much more than that

CS 4470/6456 - Fall 2002

The good & the bad

Collection of good interaction techniques that work welluniformity is good for usability

Significant stagnationFailing to customize interaction

techniques to tasks

CS 4470/6456 - Fall 2002

The popup menu

A menu supports a selection of an item from a fixed set

Set is usually determined ahead of time

Popup menu supports selection of an actionmenu pops up under the cursor (or close to)

CS 4470/6456 - Fall 2002

The popup menu

CS 4470/6456 - Fall 2002

The good & the bad

Better than needing to move to the top of the screen to invoke actionCheck the Fitt’s law

Fitting different menu items into one long menuIs it based on most frequent commands

used?

CS 4470/6456 - Fall 2002

Pie menus

A circular pop-up menu with “dead area” at centerbasically only angle counts

What are Fitts’ law properties?minimum distance to travelminimum required accuracy (dependent on #

of options)very fast (dependent on # of options)

CS 4470/6456 - Fall 2002

Pie menus

How many of you have seen this before?

Reasons why we don’t see these used?Just not knownHard to implement (draw labels) although

there are variations that are easierDon’t scale although there are variation that

do support hierarchy