Interaction Styles

1
Interaction Styles

• Interface Widgets

2
What are Interaction Styles?

• A Collection of interface objects and associated
  techniques from which an interaction designer can
  choose when designing the user interaction
  component of an interface.
• This includes the look (appearance) and feel
  (behavior) of interaction objects and
  interactions between interaction objects from the
  users view.

3
What are Interface Objects?

• WIMP
• Windows, Icons, Menus and Pointers
• Forms, Menus, Boxes, etc.
• Desktop Metaphor
• Windows interface is a desktop.
• Papers that are manipulated by the user.

4
Two Camps of Interaction Styles?

• Direct Manipulation
• User directly manipulate interface.
• User has most control.
• Agent Interface
• Agent or computer has most control.
• We will discuss this later.

5
Interface Widgets

• Windows

6
Windows

• A screen object that provides an area for
  presentation of, and interaction with, other
  interaction objects.
• Place holder for interface objects.
• Windows are the Paper in the Desktop Metaphor.

7
Windows

• Primary, or active, window
• Window with focus or the working window.
• It is usually on top.
• Secondary, or inactive, windows
• Windows in the background.
• Available, but not active.

8
Windows

• Microsoft Windows
• Active window determined by mouse click.
• X-Windows
• Mouse determines active window.

9
(No Transcript)
10
Windows Design Guides

• Too many windows.
• Window management.
• Use multiple windows when it is necessary.
• Users get disoriented.
• Coordinate color to identify function.
• Information window is blue, test window is green.

11
Interface Widgets

• Menus

12
Menus

• A list of items from which one or more selections
  are made by the user.
• Types of menus
• Radio Buttons
• Pop Up
• Pull Down
• List Box
• Cascading
• Palette
• Dynamic

13
Radio Buttons

• Choices are exhaustive and mutually exclusive.

14
Pop Up

• Menus that appear in different places on the
  screen base upon the location of the mouse or
  cursor.

Pop Up menu in Microsoft Windows Environment
15
Pull Down

• Menus found at the top of the screen, usually,
  their title is always visible.

Pop Down menu in Netscape Navigator
16
List Box

• Looks like a field with the selected option
  visible or contains a visible list of options.

COMP 6620 COMP 7620 COMP 7930 COMP 8620
17
Cascading

• Also called walking menus, behaves like a
  sequence of pull down menus.

Cascading menu in Netscape Navigator
18
Palette

• Iconic menus

Palette menu in Adobe Photoshop
19
Dynamic

• Menus where the choices are runtime dependent.
• Choices may be gathered from a database based
  upon user access.

20
Menus Design Guides

• Use meaningful groupings of menu choices.
• Use meaningful ordering of menu choices.
• Alphabetical
• Preference
• Use brief, but descriptive titles.
• Allow shortcuts (this is built in for most)

21
Interface Widgets

• Forms

22
Forms

• A screen containing labeled fields that are to be
  filled in by the user.
• Form Fields
• Text
• Menus

23
Text

• An open box that allows the user to enter data.
• Numeric versus Alphanumeric versus Alphabetic
• Default Values
• Required versus Optional Values
• Dependent Values

24
Text
25
Menus

• A list of items from which the user selects.
• Numeric versus Alphanumeric versus Alphabetic
• Default Values
• Required versus Optional Values
• Dependent Values

26
Forms Design Guides

• Layout, Layout ... Layout.
• Existing paper forms do not convert directly into
  electronic forms, in most cases.
• Use visual cues for form fields, i.e. focus.
• Labels must be consistent and meaningful.
• Use logical navigation between fields, ordering.
• Support editing and error correction.
• Use default values where necessary.
• Given instructions for mandatory fields.

27
Interface Widgets

• Boxes

28
Boxes

• Small windows that are used for messages, text
  entry, commands and user control.

29
Entry Box

• Small window that displays a message to the user
  and accepts input.

30
Dialogue Box

• Composite interaction box that can contain other
  interaction objects.
• Two types of dialogue boxes
• Modal
• Modeless

31
Modal Dialogue Box

• Preemptive box
• Supports sequential dialogue
• User must respond before moving on

32
(No Transcript)
33
Modeless Dialogue Box

• Nonpreemptive box
• Does not force the user to respond before moving
  on

34
Netscape help box is a modeless dialogue box.
35
Boxes Design Guides

• Use brief but meaningful messages.
• Use logical grouping and ordering of objects.
• Use visual cues to separate groups.
• Layout, Layout Layout.
• Use defaults.
• Boxes should appear and disappear properly.

36
Interface Widgets

• Support object oriented programming.
• Software Engineering
• Must have your interface toolbox.