structured user interface design methodology leonel morales díaz - [email protected] universidad...
TRANSCRIPT
![Page 1: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/1.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 2: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/2.jpg)
Esta presentación requiere el tipo de letra Tempus Sanz
ITC
![Page 3: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/3.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 4: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/4.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 5: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/5.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 6: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/6.jpg)
SUID Overview
access
organization
capture
update
creation
destruction
change
action
reaction
representationreality
![Page 7: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/7.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 8: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/8.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 9: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/9.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 10: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/10.jpg)
SUID: Organization
“the user should be capable of
recognizing the underlying
organization”
![Page 11: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/11.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 12: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/12.jpg)
SUID: Access
“Access methods should be easy to learn, or better,
intuitive”
![Page 13: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/13.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 14: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/14.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 15: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/15.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 16: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/16.jpg)
SUID: Capture and Update
![Page 17: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/17.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 18: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/18.jpg)
SUID: Destruction
• Destruction– Allow the user to “destroy”
representations• dispose of the representation or...• ...physically affect the corresponding
object• Backup alternatives
![Page 19: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/19.jpg)
SUID: Creation and Destruction
![Page 20: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/20.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 21: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/21.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 22: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/22.jpg)
SUID: Action and Reaction
![Page 23: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/23.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 24: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/24.jpg)
SUID: Change
![Page 25: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/25.jpg)
The SUID Diagram
access
organization
capture
update
creation
destruction
change
action
reaction
representationreality
![Page 26: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/26.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 27: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/27.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 28: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/28.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 29: Structured User Interface Design Methodology Leonel Morales Díaz - litomd@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium:](https://reader035.vdocuments.us/reader035/viewer/2022070403/56649f2b5503460f94c4634a/html5/thumbnails/29.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