Formalisation of Interface Design

Lecture 7
 Topics in today's lecture
• Why is formalising interface design useful?
• What needs to be formalised:
– the interface's appearance
– the functionality of the design
– the dynamics of the design
• How : we shall look at several different ways
to formalise the dynamics of a design:
– State Transition Networks (STN)
– Petri Nets

2
 Why formalise interface design?
Typically a team of developers will specialise; the designers
of the interface won't necessarily be the programmers.
– the interface may be designed by some of the
following: graphic designers / psychologists / HCI
experts
The programmer requires a detailed description of all the
elements of the interface so that there can be no doubt what
to implement.
– Verbal description can leave room for ambiguity
– Need to be precise (so can’t use informal
language).

3
 What aspects of the interface are formalised?
1. The appearance of the system in terms of screen
layout, colours, fonts etc. - the structure and
relevant features of the information.
the "what"

2. The functions provided by the interface and their

mapping onto the underlying application.
the "how"

3. The events which can occur, and the interleaved

sequences in which they occur. These are the
'words' and 'sentences' that make up the dialogue of
interaction.

4
 1. Formalisation of the appearance of the interface

Since this is visual it is easy to describe precisely.

No need for a special formal language for the visuals.
• Exact replicas of different screens can be produced to scale and
with the true colours for the programmer to copy. This
technique is used in storyboarding.
• Detailed drawings or diagrams or screen dumps could be used.
• There are a lot of helpful tools which can help the designer to
quickly create mock-ups to show the visual display of the
interface, e.g.
– Specialised interface builders within programming
development environments (e.g. Delphi, NetBeans,
Eclipse)
– Image manipulation software or diagram drawing
packages
5
 Screenshots are sufficient to provide a
formal description of the visual aspects of the interface

6
 2. Formalisation of the functions of the interface

The function of the interface is about what tasks the user

can carry out. This is formalised during Task Analysis.
We know that tasks can be analysed and thus broken down
hierarchically (this is the semantic level of the language of
interaction) until they are supported by

and actions on
objects objects

(object modelling).
7
 Task: Convert £20 to euros

Convert currency amount

Select currency Select currency Enter

converting from converting to amount

8
 Formalisation of the functions of the interface

By inspecting the list of actions on objects the programmer can

identify how

• the objects are linked to the underlying data structures

var
currencyFrom: integer;

• actions are linked to procedures and functions.

click
function calculate: integer;

9
 Before we formalise dialogue design...
what is a dialogue?

• A dialogue is an interaction between the user and the

computer. The interaction consists of a sequence of events.
The user follows through the dialogue in order to achieve
some task.

• It is a little like the script of a play, with two characters: the

user, and the computer.

• In the design user interfaces, the dialogue means the

structure of the conversation between, the user and the
computer system.

10
 A description of a dialogue is given at the syntactic level of human
computer interaction; it is linked to the semantics of the system,
what it does and to the presentation of the system, how it looks.

Three levels of dialogue

• Semantic
The meaning of the conversation in terms of its effect on the computer's
internal data structures and/or the external world.
Describe the functions performed by the system.
• Syntactic
The order and structure of inputs and outputs.
The sequences of inputs and outputs to invoke the functions of the system.
• Lexical
The lowest level: the shape of text/images on the screen and the actual keys
pressed.
How inputs and outputs are actually formed from hardware operations.

11
 3. Formalisation of dialogue design
Good dialogue design is challenging.
Formal notations for dialogues can be very helpful.
Formal descriptions can be used...
...when designing interfaces
– to express ideas for dialogue on paper (in the same way as
sketches are helpful for designing the visual aspects of the
interface)
– separating the elements of the interface design helps
clarify the design
– to assist with prototyping with paper prototypes
...for analysis of existing interfaces
– e.g. analysis for inconsistent actions, for difficult to reverse
actions, for missing items and for potential user errors
(e.g. wrong key presses)
12
 Notations for Dialogue Description
Formal notations used for dialogue description can be
– diagrammatic: easy to read at a glance, or
– textual: easier for formal analysis
(e.g. CSP – Communicating Sequential Processes).

We will take a look at some common diagrammatic

notations:
• Flowcharts
• State Transition Networks (also known as State Transition
Diagrams, STNs, STDs), plus variations:
– Hierarchical STNs
– STNs with escapes
– Harel's state charts
• Petri nets 13
 Example dialogue in flowchart notation

Enter email contact to delete:

Read email contact

Name: Joe Bloggs Name: Joe Bloggs

Current contact: [email protected] Current contact: [email protected]
Delete? (Y/N) Please enter (Y/N)
Delete? (Y/N)

other
Read answer

Y N Finish

Delete email contact

14
 State Transition Networks
The idea: a user changes the state of the interface
by that user's actions.
A state transition network (or STN, state transition
diagram) represents how states can be changed by
actions.

• Circles in the diagram are nodes of the network,

and these represent states.
• Every state is labelled.
• Arrows are used to represent state transitions
(state changes) and these transitions occur as a
result of actions (usually user actions!)

15
 STN example: rectangle drawing
state transitions
drag
(state changes)

press mouse drawing release

rectangle (rubber done
mode button down outline) mouse button

ready

drag

release
textbox press mouse drawing
(rubber done
states mode button down outline) mouse button

16
 STN example: rectangle resizing
drag

press mouse drawing release non-

rectangle (rubber drawing
mode button down outline) mouse button

ready press mouse

button down

17
Example from: http://hci.stanford.edu/dtools/guide_design_patterns.html

18
Multiple copies of the exact same state
have been combined.
19
STNs and multimedia authoring
• Storyboarding is a technique originally used in the
film industry, e.g. for animated films, and is often
used when working with multimedia authoring
tools like
– Hypercard
– Macromedia Director
• Can use this technique formally as a STN:
– make one drawing of each state on a separate
screen
– name each screen with its state label within
the STN
20
 Formalisation of a simple interface
Run Tree Questions Software

The dialogue:
(1) Computer: Shows initial state encouraging
selection of a tree type
(2) User: Selects a tree type
(3) Computer: Displays tree type with question
(4) User: Answers question with ‘Yes’ or ‘No’
(5) Computer: Indicates if the answer is correct or
otherwise. If incorrect it indicates why.
Also asks for another tree type
selection.
(6) User: Selects tree type Continues from (3)

21
choose label question
label
choice box tree

feedback
labels

22
Initial State
Interface Component Value_
choose label visible, bold “Choose a Tree”
choice box visible, enabled
question label invisible
yes, no buttons invisible
feedback labels invisible
tree not displayed

Question-Answering State
Interface Component Value
choose label invisible
choice box visible, disabled
question label visible, bold
yes, no buttons visible, enabled
feedback labels invisible
tree fresh tree displayed

Question-Answered State
Interface Component Value
choose label visible, bold “Choose again”
choice box visible, enabled
question label visible, non-bold
yes, no buttons invisible
feedback labels visible, highlighted
tree previous tree still displayed 23
 State Transition Diagram

Initial State
User selects
tree type

Question-
answering
state User presses
‘Yes’ or ‘No’

User selects Question-

tree type
answered
state
24
 Hierarchical State Transition Networks

STNs can get very large. It often makes more sense to

divide them up into pieces. We end up with a hierarchical
diagram.
To glue STNs together, first we need an artificial "Start"
and "Finish" state on each STN, e.g.

drag

press mouse drawing

rectangle
button down (rubber
mode outline)

start finish
drag

textbox press mouse drawing

(rubber
mode button down outline)

25
 Gluing the sub-diagrams together to make a hierarchical STN
The gluing together is done in this kind of way:
Rectangles Menu

Ellipses Menu

Main

Lines/Arrows Menu

26
 Hierarchical STN with escapes

Rectangles Menu
ESC

Ellipses Menu
ESC

Main

Lines/Arrows Menu
ESC

27
 Portion of STN with a help system

drag

press mouse drawing release

start click on rectangle (rubber finish
rectangle mode button down outline) mouse button

Help System Help System

28
 Concurrent dialogues...

click on
no bold bold
bold
Text styles:

click on
no italic italic
italic

no
click on
underline underline
underline

29
 ...and combinatorial explosions of states!

click on bold B bold

none none only
bold only
UL UL

bold
click on
B
click on

underline
italic
italic

I only underline
I

I
I
italic click on bold italic B bold
only bold italic only italic

UL UL
italic bold
B
underline underline
italic

30
 Harel’s state chart for a television control panel

Image from:
Alan Dix (1998) Human-Computer Interaction (2nd ed), Prentice-Hall.

31
 Another example: part of a watch specification

Source:
David Harel (1988) "On Visual Formalisms", Communications of the ACM, Vol. 31 No. 5

32
 Petri nets
Petri nets are one popular formal notation for describing
systems with concurrent actions. They are good at
describing behaviour where each part of the system has
its own little "state".

Petri net notation:

• Circles represent places (places are like states).
• Tokens (or counters) represent which "place" a state is in.
• Rectangles represent transitions (change of state).
• The arrows indicate which way the transitions happen.
• If there are tokens in all places leading to a transition, then the
transition can fire – this changes the state and moves the tokens
appropriately.

33
Petri net example

34
35
36
37
38
39
40
41
42
43
44
45
Double underline on inhibits T2 transition

46
47
Petri net showing 2 independent toggles

48
 More Petri net resources
Petri Net World
from the University of Hamburg has a lot of resources,
including some excellent petri net demos:

• Assembly line
• Traffic lights (also with STN)

49
End of Lecture 7