author’s update on this presentation
DESCRIPTION
Author’s update on this presentation. This was the first presentation of the Structured User Interface Design – SUID – methodology ever given. Current author’s affiliation and email is: Leonel Morales Díaz Ingeniería Simple [email protected] - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/1.jpg)
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
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
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.
![Page 2: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/2.jpg)
Structured User Interface Design Methodology
Leonel Morales Díaz - [email protected] Francisco Marroquín
Guatemala, C.A.
Development Consortium: anyone. anywhere. In Latin America.Seattle, Washington
March 31st - April 2nd, 2001
![Page 3: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/3.jpg)
Esta presentación requiere el tipo de letra Tempus Sanz
ITC
![Page 4: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/4.jpg)
Interactions Design - General
• The usability engineering paradigm
Analyze
Design
Build
Evaluate A
DBEA
DBE
A
D
EA
DBE
B
Iterative prototypingor spiral design
Solution
![Page 5: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/5.jpg)
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
![Page 6: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/6.jpg)
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”
![Page 7: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/7.jpg)
SUID Overview
access
organization
capture
update
creation
destruction
change
action
reaction
representationreality
![Page 8: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/8.jpg)
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
![Page 9: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/9.jpg)
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
![Page 10: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/10.jpg)
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”
![Page 11: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/11.jpg)
SUID: Organization
“the user should be capable of
recognizing the underlying
organization”
![Page 12: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/12.jpg)
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
![Page 13: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/13.jpg)
SUID: Access
“Access methods should be easy to learn, or better,
intuitive”
![Page 14: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/14.jpg)
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”
![Page 15: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/15.jpg)
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
![Page 16: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/16.jpg)
SUID: Update
• Update– Maintain the object and the
representation consistent• if one change the other should also
change• works both ways• automatic, if possible
![Page 17: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/17.jpg)
SUID: Capture and Update
![Page 18: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/18.jpg)
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”
![Page 19: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/19.jpg)
SUID: Destruction
• Destruction– Allow the user to “destroy”
representations• dispose of the representation or...• ...physically affect the corresponding
object• Backup alternatives
![Page 20: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/20.jpg)
SUID: Creation and Destruction
![Page 21: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/21.jpg)
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
![Page 22: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/22.jpg)
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
![Page 23: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/23.jpg)
SUID: Action and Reaction
![Page 24: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/24.jpg)
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
![Page 25: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/25.jpg)
SUID: Change
![Page 26: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/26.jpg)
The SUID Diagram
access
organization
capture
update
creation
destruction
change
action
reaction
representationreality
![Page 27: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/27.jpg)
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.
![Page 28: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/28.jpg)
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”
![Page 29: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/29.jpg)
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
![Page 30: Author’s update on this presentation](https://reader030.vdocuments.site/reader030/viewer/2022033103/568152f8550346895dc11609/html5/thumbnails/30.jpg)
Structured User Interface Design Methodology
Leonel Morales Díaz - [email protected] Francisco Marroquín
Guatemala, C.A.
Development Consortium: anyone. anywhere. In Latin America.Seattle, Washington
March 31st - April 2nd, 2001