Structured User Interface Design Methodology

1. Structured User Interface Design Methodology Leonel Morales Díaz - litomd@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 A D E B Evaluate Design 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 you’d 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 objectsor things from the real world”

6. reality SUID Overview access organization representation action  destruction creation reaction capture 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. “the user should be capable of recognizing the underlying organization” 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. update capture 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 object’s nature • made the user aware of those changes • immediately or afterwards • initial, subsequent and final states

24. SUID: Change

25. reality The SUID Diagram access organization representation action  destruction creation reaction capture 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 structureexists 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@usa.net Universidad Francisco Marroquín Guatemala, C.A. Development Consortium: anyone. anywhere. In Latin America. Seattle, Washington March 31st - April 2nd, 2001