Interaction StylesInteraction Styles

Interface Widgets

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 user’s view.

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.

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.

Interface WidgetsInterface Widgets

Windows

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.

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.

Windows

Microsoft Windows– Active window determined by mouse click.

X-Windows– Mouse determines active window.

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.

Interface WidgetsInterface Widgets

Menus

Menus A list of items from which one or more selections

are made by the user.

Types of menus:1. Radio Buttons

2. Pop Up

3. Pull Down

4. List Box

5. Cascading

6. Palette

7. Dynamic

Radio Buttons

Choices are exhaustive and mutually exclusive.

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

Pull Down Menus found at the top of the screen, usually,

their title is always visible.

Pop Down menu in Netscape Navigator

List Box

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

COMP 6620

COMP 6620COMP 7620COMP 7930COMP 8620

Cascading Also called walking menus, behaves like a

sequence of pull down menus.

Cascading menu in Netscape Navigator

Palette Iconic menus

Palette menu in Adobe Photoshop

Dynamic Menus where the choices are runtime dependent.

– Choices may be gathered from a database based upon user access.

Menus: Design Guides

1. Use meaningful groupings of menu choices.

2. Use meaningful ordering of menu choices.– Alphabetical– Preference

3. Use brief, but descriptive titles.

4. Allow shortcuts (this is built in for most)

Interface WidgetsInterface Widgets

Forms

Forms A screen containing labeled fields that are to be

filled in by the user.

Form Fields1. Text

2. Menus

Text An open box that allows the user to enter data.

Numeric versus Alphanumeric versus Alphabetic

Default Values

Required versus Optional Values

Dependent Values

Text

Name:

Career Goal:

Menus A list of items from which the user selects.

Numeric versus Alphanumeric versus Alphabetic

Default Values

Required versus Optional Values

Dependent Values

Forms: Design Guides

1. Layout, Layout ... Layout.

2. Existing paper forms do not convert directly into electronic forms, in most cases.

3. Use visual cues for form fields, i.e. focus.

4. Labels must be consistent and meaningful.

5. Use logical navigation between fields, ordering.

6. Support editing and error correction.

7. Use default values where necessary.

8. Given instructions for mandatory fields.

Interface WidgetsInterface Widgets

Boxes

Boxes Small windows that are used for messages, text

entry, commands and user control.

Entry Box Small window that displays a message to the user

and accepts input.

Dialogue Box Composite interaction box that can contain other

interaction objects.

Two types of dialogue boxes1. Modal

2. Modeless

Modal Dialogue Box Preemptive box

Supports sequential dialogue

User must respond before moving on

Modeless Dialogue Box Nonpreemptive box

Does not force the user to respond before moving on

Netscape help box is a modeless dialogue box.

Boxes: Design Guides

1. Use brief but meaningful messages.

2. Use logical grouping and ordering of objects.

3. Use visual cues to separate groups.

4. Layout, Layout … Layout.

5. Use defaults.

6. Boxes should appear and disappear properly.

Interface Widgets Support object oriented programming.

– Software Engineering

Must have your interface toolbox.