Structured User Interface Design Methodology

1
Structured User Interface Design Methodology

• Leonel Morales Díaz - litomd_at_usa.net
• Universidad Francisco Marroquín
• Guatemala, C.A.

Development Consortium anyone. anywhere. In
Latin America. Seattle, Washington March 31st -
April 2nd, 2001
2
Esta presentación requiere el tipo de letra
Tempus Sanz ITC
3
Interactions Design - General

• The usability engineering paradigm

Solution
E
B
Build
A
D
E
B
D
A
E
B
Design
Evaluate
A
D
E
B
A
D
Iterative prototyping or spiral design
Analyze
4
Design and Engineering
Science the seeing of where you are
Design the exploration of where you would like
to be
Engineering the getting from where you are to
where youd like to be
5
Structured User Interface Design

• Specification of ten layers of design
• Designs complete when all layers are specified
• One application-specific start point
• The set of objects to be handled
• Main assumption

Every information system or information
appliance is devoted to handling a set of objects
or things from the real world
6
SUID Overview
access
organization
? action ?
representation
? destruction ?
? creation ?
? capture ?
? reaction ?
? update ?
change
7
SUID Representation

• Representation
• To represent the real world objects
• with the needed attributes
• as exactly as possible
• recognizable (intuitive)
• easy to associate with the real object
• if not intuitive then formal

8
SUID Representation

• There is an implied reduction

Only some aspects can be considered in the system
Every being has multitude of aspects
The aspects considered have to be represented
9
SUID Organization

• Organization
• There are multiple objects in the system
• the order, grouping, separation, location, etc.
• decided by the designer
• to help the user acquire information

the user should be capable of recognizing the
underlying organization
10
SUID Organization
11
SUID Access

• Access
• Allow the user to access the objects...
• methods for getting to the objects
• easy to learn (better intuitive)
• every object should be accessible
• with role considerations
• ...and their properties and attributes
• Example the open/close/save file paradigm

12
SUID Access
Access methods should be easy to learn, or
better, intuitive
13
SUID Access Diagram
Any object A
Outside the system
No object
Any object B
14
SUID Capture

• Capture
• Introduce new objects in the system
• easy to use and learn (intuitive)
• produces a representation of the object
• lead the user to associate both
• the capture and the captured object
• able to capture all needed objects

15
SUID Update

• Update
• Maintain the object and the representation
  consistent
• if one change the other should also change
• works both ways
• automatic, if possible

16
SUID Capture and Update
17
SUID Creation

• Some objects begin to exist in the human mind
• products of creativity
• The user must create their representation
• Creation
• Allow the user to create new objects
• easy and intuitive
• providing raw material

18
SUID Destruction

• Destruction
• Allow the user to destroy representations
• dispose of the representation or...
• ...physically affect the corresponding object
• Backup alternatives

19
SUID Creation and Destruction
20
SUID Action

• Action
• The user acts over the objects
• Methods for acting must be designed
• easy to learn, easy to use (intuitive)
• all necessary actions
• Methods for objects to act over other objects

21
SUID Reaction

• Reaction
• The response of objects to actions
• Must be designed
• the user should be capable of
• associating the response with the object
• associating the response with the actions that
  caused it
• predict the possible set of reactions

22
SUID Action and Reaction
23
SUID Change

• Change
• Advice users about changes in objects
• things change...
• due to the user
• due to other agents
• due to the objects nature
• made the user aware of those changes
• immediately or afterwards
• initial, subsequent and final states

24
SUID Change
25
The SUID Diagram
access
organization
? action ?
representation
? destruction ?
? creation ?
? capture ?
? reaction ?
? update ?
change
26
Using SUID

• Main use
• Design user interfaces (structured)
• redesign is possible for individual layers
• complete specification can be generated
• may be used as part of UCD, PD, etc.

27
Using SUID

• Other uses
• Evaluate user interfaces
• evaluation goes layer by layer
• Compare user interfaces
• comparing layer by layer

This structure exists in every user interface
already designed
28
Why SUID?

• A method to teach to developers
• If they have a method they will design
• better than not to design at all
• ER d., state d., flow d., etc.
• design of the UI tends to blur
• SUID alone can do something
• help produce complete designs

29
Structured User Interface Design Methodology

• Leonel Morales Díaz - litomd_at_usa.net
• Universidad Francisco Marroquín
• Guatemala, C.A.

Development Consortium anyone. anywhere. In
Latin America. Seattle, Washington March 31st -
April 2nd, 2001