Interactive tasks and components

1
Interaction Techniques

• Interactive tasks and components

2
Agenda

• Questions
• New HW2 due date 9/15, 100PM
• What this means though
• Interaction technique
• definition
• design principles
• Macintosh 7
• Swing interaction techniques

3
Example

• How to enter a number in a range?
• Could use
• (simulated) slider
• (simulated) knob
• type in a number (text edit box)
• Note each is a different interaction technique

4
Interaction techniques

• Method for carrying out an interactive task
• Come in the form of
• widgets
• controls
• components
• interactors

5
Interaction techniques

• Addresses complete cycle of execution and
  evaluation
• Interaction technique typically includes
• (simulated) input device
• mapping of input signal to semantics
• feedback
• (simulated) output device

6
Interaction technique design guidelines

• Affordances
• Feedback
• Mechanics
• Feel difficulty
• Designing for mental models
• Designing for novices vs. experts

7
The original Macintosh 7

• Macintosh (1984) was first big success of GUIs
• originally came with 7 interactors built into
  toolbox
• Most were not actually original
• Xerox Star
• Smalltalk earlier

8
The Macintosh 7

• Generally very well designed
• iterated with real users
• very snappy performance
• dedicated whole processor to updating them
• Huge influence
• These 7 still cover a lot of todays GUIs

9
The Macintosh 7

• Button
• Slider
• Pulldown menu
• Check box
• Radio buttons
• Text entry fields
• File pick/save

10
The original Macintosh included

• Other interaction techniques
• Window close
• Window resize
• Drag icons and folders
• Open icons and folders
• Was not included in toolbox
• Not generally available
• Not so useful to other programmers

11
Influence on todays GUIs

• The Macintosh 7 have become standard (common)
  interaction techniques
• MFC as an example
• Sure enough, inside the Swing toolkit as well

12
Button

• Push to invoke some behavior/command
• Inverted for feedback
• Recall Mac was pure B/W machine
• Pseudo 3D appearance hard and hadnt been
  invented yet

13
Button
14
Slider

• Select value in range
• Most common as scroll bars

15
Slider
16
Slider
17
Pulldown menu

• Choose an item in a list
• click button to pull down menu
• items highlight as you go over
• selected item displayed
• In the original Macintosh
• had to hold down button to keep menu down (one
  press-drag-release)

18
Pulldown menu
19
Check boxes

• Select values in range

20
Radio buttons

• Select a single value in a mutually exclusive
  list of items

21
Text entry / edit fields

• Single or multi-line text support

22
File pick / save

• More complex than the others
• built from the others then some

23
Second major release of Macintosh

• More interaction techniques were added
• Lists
• Hierarchical (pull-right) menus
• Compact (in-place) menus
• select one-of-N pulldown
• Window zoom box (?)

24
Other common widgets

• Tabbed dialogs
• Hierarchical lists (trees)
• Combo boxes
• Combination(s) of menu, list, text entry
• A few more variations on things
• Typically not much more than that

25
The good the bad

• Collection of good interaction techniques that
  work well
• uniformity is good for usability
• Significant stagnation
• Failing to customize interaction techniques to
  tasks

26
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 action
• menu pops up under the cursor (or close to)

27
The popup menu
28
The good the bad

• Better than needing to move to the top of the
  screen to invoke action
• Check the Fitts law
• Fitting different menu items into one long menu
• Is it based on most frequent commands used?

29
Pie menus

• A circular pop-up menu with dead area at center
• basically only angle counts
• What are Fitts law properties?
• minimum distance to travel
• minimum required accuracy (dependent on of
  options)
• very fast (dependent on of options)

30
Pie menus

• How many of you have seen this before?
• Reasons why we dont see these used?
• Just not known
• Hard to implement (draw labels) although there
  are variations that are easier
• Dont scale although there are variation that do
  support hierarchy