User Interaction Design

1
User Interaction Design

• Representing User Interactions

2
Design Representation

• Design
• Creative, mental, problem-solving process
• Representation
• Physical process of capturing or recording a
  design

3
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)

4
Design Representations

• Constructional Representations
• Interactions described from the systems view
  point.
• State Transition diagrams
• Event-based mechanisms
• Object Oriented mechanisms

5
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)

6
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.

7
User Action Notation

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

8
User Action Notation

• Interfaces are represented as quasi-hierarchical
  structures of asynchronous tasks.
• User actions cause state changes in the interface.

9
User Action Notation

• UAN consists of
• Task Descriptions
• Scenarios
• Discussion Notes
• State Transition Diagrams
• Uses special Notation to describe tasks

10
UAN Selecting A File

1. Move the cursor to the file icon.
2. Press and immediately release the left mouse
   button.

11
UAN Selecting A File

1. file icon
2. Mv

12
User Action Notation

• Advantage of UAN
• Takes less space on paper.
• If you know, it saves time.

13
User Action Notation

• Problems with UAN
• New language for the developer.
• Cryptic notation.
• If you dont know it, it takes more time.
• No standard notation.

14
User Action Notation Modified

• UAN consists of
• Task Descriptions
• Scenarios
• Discussion Notes
• State Transition Diagrams
• Eliminate special Notation

15
Task Descriptions

• Identify all of the tasks the system or product
  must support.
• Occurs in Feasibility and Analysis Stage of
  Software Development.

16
Scenarios

• Create User Scenarios that support each task from
  the Task Descriptions.
• Occurs in Analysis and Design Stage of Software
  Development.

17
Discussion Notes

• Any special observations, requirements or
  hypothesis that designer has are noted.
• Occurs in everywhere in Software Development.

18
State Transition Diagrams

• Finite State Machines
• Graph of the system that identifies user
  interactions.
• Occurs in Design before Development.
• Includes graphs and screen images.

19
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.

20
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.

21
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.

22
User Interaction Design

• Example
• Login Interface

23
User Login Interface
24
(No Transcript)
25
Top path
Bottom path
26
Top Path
27
User enters login name.
28
User enters password.
29
User presses submit.
30
Bottom Path
31
User enters password.
32
User enters login name.
33
User presses submit.
34
Top path
Bottom path
35
Review of Computational TheoryRelationship
toWeb Design
36
Automatic Door/FA
Chuck Allison, UVSC, http//uvsc.freshsources.com/
html/cns_3240.html
37
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.
abbab
abbaa
abb
a
abbababba
1-
4
aa
b
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
38
Example(p. 84)
b
a,b
a
b
-

bbb
a
a
a
ab
b
bbb
bb
bb
a
Cohen Ch6-Chuck Allison, http//uvsc.freshsources.
com/html/cns_3240.html
39
User Interaction Design

• Task Descriptions
• Scenarios
• Discussion Notes
• State Transition Diagrams