Structured User Interface Design Methodology

Leonel Morales Díaz - litomd@usa.netUniversidad Francisco Marroquín

Guatemala, C.A.

Development Consortium: anyone. anywhere. In Latin America.Seattle, Washington

March 31st - April 2nd, 2001

Esta presentación requiere el tipo de letra Tempus Sanz

ITC

Interactions Design - General

• The usability engineering paradigm

Analyze

Design

Build

Evaluate A

DBEA

DBE

A

D

EA

DBE

B

Iterative prototypingor spiral design

Solution

Design and Engineering

Science: the seeing ofwhere you are

Design: the exploration ofwhere you would like to be

Engineering: the getting fromwhere you are to where you’d like to be

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 devoteddevoted to handling a set of objectsset of objects or or

thingsthings from the real worldreal world”

SUID Overview

access

organization

capture

update

creation

destruction

change

action

reaction

representationreality

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

SUID: Representation

• There is an implied reduction

Every being has multitude

of aspects

Only some aspects can be

considered in the system

The aspects considered have

to be represented

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”

SUID: Organization

“the user should be capable of

recognizing the underlying

organization”

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

SUID: Access

“Access methods should be easy to learn, or better,

intuitive”

SUID: Access Diagram

Outside the syste

m

Outside the syste

m

No objectNo

object

Any object

“A”

Any object

“A”

Any object

“B”

Any object

“B”

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

SUID: Update

• Update– Maintain the object and the

representation consistent• if one change the other should also

change• works both ways• automatic, if possible

SUID: Capture and Update

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”

SUID: Destruction

• Destruction– Allow the user to “destroy”

representations• dispose of the representation or...• ...physically affect the corresponding

object• Backup alternatives

SUID: Creation and Destruction

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

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

SUID: Action and Reaction

SUID: Change

• Change– Advice users about changes in objects

• things change...– due to the user– due to other agents– due to the object’s nature

• made the user aware of those changes– immediately or afterwards– initial, subsequent and final states

SUID: Change

The SUID Diagram

access

organization

capture

update

creation

destruction

change

action

reaction

representationreality

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.

Using SUID

• Other uses:– Evaluate user interfaces

• evaluation goes layer by layer

– Compare user interfaces• comparing layer by layer

“This structure exists in everyevery user interface already

designed”

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

Structured User Interface Design Methodology

Leonel Morales Díaz - litomd@usa.netUniversidad Francisco Marroquín

Guatemala, C.A.

Development Consortium: anyone. anywhere. In Latin America.Seattle, Washington

March 31st - April 2nd, 2001