user interaction design representing user interactions

User Interaction DesignUser Interaction DesignUser Interaction DesignUser Interaction DesignRepresenting User Representing User

InteractionsInteractions

Design & Representation

• Design– Creative, mental, problem-solving process

• Representation– Physical process of capturing or recording

a design

Design Representations

• Means by which interaction designs are communicated and documented.

• Design representations are communicated between:– Designer and developer (maybe others)– Not the User (in most cases)

Design Representations

• Constructional Representations– Interactions described from the

system’s view point.• State Transition diagrams• Event-based mechanisms• Object Oriented mechanisms

Design Representations

• Behavioral Representations– User Centered and Task/Goal Oriented.

– Task Analysis, user modeling, function analysis are all behavioral activities

– Example Methods• Command Language Grammar• Keystroke Level Model• Task Action Grammar• GOMS (Goals, Operators, Methods &

Selection)• User Action Notation (UAN)

User Interaction Design

• Each Behavioral design must be translated into a Constructional Design– Result is the User Interaction Design

• User Interaction Design is created by the designer and given to the developer.

User Action Notation

• User and Task Oriented Notation that describes physical behavior of the user and interface as task are being performed.

User Action Notation

• Interfaces are represented as quasi-hierarchical structures of asynchronous tasks.

• User actions cause state changes in the interface.

User Action Notation

• UAN consists of – Task Descriptions– Scenarios– Discussion Notes– State Transition Diagrams

• Uses special Notation to describe tasks

UAN: Selecting A File

1. Move the cursor to the file icon.

2. Press and immediately release the left mouse button.

UAN: Selecting A File

1. ~[file icon]

2. Mv^

User Action Notation

Advantage of UAN

1. Takes less space on paper.2. If you know, it saves time.

User Action Notation

Problems with UAN

1. New language for the developer.2. Cryptic notation.3. If you don’t know it, it takes more

time.4. No standard notation.

User Action Notation Modified

• UAN consists of – Task Descriptions– Scenarios– Discussion Notes– State Transition Diagrams

• Eliminate special Notation

Task Descriptions

• Identify all of the tasks the system or product must support.

• Occurs in Feasibility and Analysis Stage of Software Development.

Scenarios

• Create User Scenarios that support each task from the Task Descriptions.

• Occurs in Analysis and Design Stage of Software Development.

Discussion Notes

• Any special observations, requirements or hypothesis that designer has are noted.

• Occurs in everywhere in Software Development.

State Transition Diagrams

• Finite State Machines– Graph of the system that identifies user

interactions.

• Occurs in Design before Development.

• Includes graphs and screen images.

State Transition Diagrams

• Graphs with Nodes and Edges.

• Nodes– Represent interface states.– Image of interface should be included.

• Edges– Appear between nodes.– Represent changes in interface state.

State Transition Diagrams

• Each interface has a State Transition Diagram.

• The system is a collection of interfaces, therefore, it is also a collection of State Transition Diagrams

• Can become very complex very quick.

State Transition Diagrams

• Each interface has a State Transition Diagram.

• The system is a collection of interfaces, therefore, it is also a collection of State Transition Diagrams

• Can become very complex very quick.

User Interaction DesignUser Interaction DesignUser Interaction DesignUser Interaction DesignExample Example

Login InterfaceLogin Interface

User Login Interface

Start

Password

LoginPassword

Login

End

Submit

Top path

Bottom path

Top Path

Start

PasswordLogin

End

Submit

User enters login name.

User enters password.

User presses submit.

Bottom Path

Start

LoginPassword

End

Submit

User enters password.

User enters login name.

User presses submit.

Start

Password

LoginPassword

Login

End

Submit

Top path

Bottom path

Review of Review of Computational TheoryComputational Theory

Relationship toRelationship toWeb DesignWeb Design

Review of Review of Computational TheoryComputational Theory

Relationship toRelationship toWeb DesignWeb Design

Automatic Door/FA

Frontpad

Rearpad

closed open

Front

Neither

Front,Rear,Both

Rear,Both,Neither

Chuck Allison, UVSC, http://uvsc.freshsources.com/html/cns_3240.html

Successful Path

A successful path through a transition graph is a series of edges forming a path beginning at some start state (there may be several) and ending at a final state.

1- 2 3 4+abb a

aa

b

Free Rideabbab…

abbaa…

abbababba

A Lambda transition occurs when you get a free transition that was not initiated by user or system action/interaction. Move on a whim (w/o consuming input).

Chuck Allison modified by Seals

Example(p. 84)

a,b

ab

bbbb

bbbb

bbb

a

a a a

a

b

b

- +

Cohen Ch6-Chuck Allison, http://uvsc.freshsources.com/html/cns_3240.html

User Interaction Design

1. Task Descriptions

2. Scenarios

3. Discussion Notes

4. State Transition Diagrams