Author’s update on this presentationThis was the first presentation of the Structured User Interface Design – SUID – methodology ever given.

Current author’s affiliation and email is:

Leonel Morales DíazIngeniería Simple

leonel@ingenieriasimple.com

To keep the presentation as it was presented in CHI 2001’s Development Consortium all the slides that follow have not been changed and the original author’s affiliation remains but does not hold.

Actualización de información del autor de esta ponenciaEsta presentación fue la primera que alguna vez se dio sobre la metodología Diseño Estructurado de

Interfaces de Usuario – DEIU.La afiliación actual del autor y su email es:

Leonel Morales DíazIngeniería Simple

leonel@ingenieriasimple.com

Para mantener la ponencia tal y como fue presentada en el “Development Consortium” de CHI 2001, las diapositivas que siguen a esta no se han modificado, incluyendo la que contiene la afiliación original del

autor, pero esa afiliación ya no se mantiene.

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