User Interface Design Patterns Part II

1. User Interface Design PatternsPart II Presented by: Mohammed Mohammed CS2310 April 15, 2008

2. Introduction • This collection consists of user interface design patterns (interaction patterns) that seems to be recurring problems when trying to make design based on the user’s goals. • The collection does not primarily consist of GUI designs of common software, but tries to outline the recurring design problems faced when trying to create good design. • Our method to produce good design is to use our Goal-Derived Design (GDD) method that is based on simulation of the user’s goals. • The pattern collection does not include all the characteristics of good design we know so far, but only the design knowledge that we have found appropriate to describe as design patterns.

3. Categories • Selecting and Manipulating Objects • Double List • Editable Table • Pile of Items • Master and Instances • Time • Calendar Strip • Schedule • Hierarchies and Sets • Tree • Groups and Items • Save and Undo • Autosave • Global Undo • Object-Specific Undo • Deleted Data Storage

4. Double List • Used for making selections • Two sets: all items and the selecteditems • Items may be copied or moved to the other list • Use Double Listespecially when : • the source list is so long • the user does not strongly benefit from the context shown in the source list. • Double Lists are typically used to create the contents of a Data Storage

5. Double List

6. Editable Table • A directly manipulable table with the following features: • edit-in-place • contains empty rows in the end • contents can be sorted by clicking the column headers • Direct editing makes changes made by mistake more probable than indirect editing • Use Object-specific Undo for the cells to recover from possible typos • Use Continuous Filter to search the table

7. Editable Table

8. Pile of Items • The user creates new objects by picking them from an infinite stack of objects • user either drags it from the pile, or • he selects the pile and clicks somewhere • Pile does not need to be static • may edit the properties of the pile to create different kind of objects • In most cases, the created objects become independent of the pile • if not, then this connection is an example of the Master and Instances problem

9. Pile of Items

10. Pile of Items

11. Master and Instances • The problem arises when the user has created several copies of an object • Two kinds of changes in the future: • that apply only to this specific object • that apply to all of the objects • However, to show this relationship to the user, and to let him change the values of both the master and the instance still remains a challenge

12. Master and Instances

13. Calendar Strip • A continuous calendar for operating with dates • Time is presented as a continuous sequence of dates split into weeks and months. • Current date (today) is visualized. • The selected dates are highlighted. • The user can change the selection by clicking the dates or directly manipulating the selection rectangle. • Typically an overview of a larger calendar in an Overview beside Detail structure. • Especially if multiple dates can be selected, it is often accompanied with a Schedule, which acts as the detail view.

14. Calendar Strip

15. Schedule • A week-based calendar visualization for possibly overlapping events. • The dates flow from the left to right. • All events are directly manipulable (edit in place). • The user creates new events in the schedule by clicking and dragging on the background area of the weekday. • Overlapping events are shown in different columns. • Schedule is typically used together with a Calendar Stripin the Overview beside Detail structure.

16. Schedule

17. Tree • A visualization of a hierarchy. • Most common: orthogonal 2D layout • hierarchy level is shown by indentation on the left side of the Tree nodes. • Most Trees are used as overviews for more detailed data in an Overview beside Detail structure.

18. Tree

19. Tree

20. Groups and Items • Solves the problem of two sets of items with many-to-many connections. Typical examples: • personnel of a company divided into groups • recipients of email messages • Good solutions depend on the user’s goals. • the user typically does not benefit from a generic design • Typically, in addition to viewing the groups and items, the user must be able to edit both of them.

21. Groups and Items

22. Autosave • System always keeps data in main memory synchronized with data on disk • Example: Memos in Palm Pilot • user simply opens and closes memos in the Palm Pilot • Word++ prototype writes the user’s changes continuously to the disk • users do not have to face the implementation model • never get the error-prone “Do you want to save changes?” dialog box that breaks their work flow.

23. Autosave in Word++

24. Global Undo • When making a mistake, user can undo the erroneous steps with Global Undo. • includes the concept of redo needed in the case the user backs up too many steps. • Most common undo/redo mechanism is linear, like in Microsoft office programs • Global Undo should preserve the tree structure of the edit and undo operations, but the undo tree is hard to visualize to the user

25. Global multi-step undo in Word 97/2000 • The undo mechanism consists of an Undo list and, after some operations have been undone, a Redo list. The user cannot undo a single operation in the middle, but the system forces him to undo all the previous steps as well.

26. Undo stack in Photoshop 5 • Undo mechanism presented as a single list. • Contains a possibility to branch the undo history with the Unlinear historyoption. • With the option turned on, the branch of undone edit operations is kept in the tree after undo, and the new edit operations are appended in the list. • However, since all the operations look the same, it is impossible for the user to visually distinguish the branches from the main edit path.

27. Object-Specific Undo • In Object-Specific Undo, the undo operations apply for the selected object only. • The user selects an object and asks for its undo stack • The system filters the global undo stack and shows only the operations that have affected the state of the selected object

28. Object-Specific Undo

29. Deleted Data Storage • An in-program waste basket • The system saves the data the user has deleted in that storage • The user can fetch it back later • The contents of the Deleted Data Storage are visualized to help the user identify the data. • Deleted Data Storage is a way to support non-linear undo

30. Deleted Data Storage

31. References • http://www.cs.helsinki.fi/u/salaakso/patterns/index.html • Laakso S.A., Laakso K.-P., Vartiainen P., Saura A., Problems with Save. CHI 2001 Conf. Proc., Extended Abstracts, ACM, New York, 2000, p. 185-186. http://www.cs.helsinki.fi/u/salaakso/papers/CHI2001-Problems-with-Save.PDF • Laakso S.A., Laakso K.-P., Saura A., Improved Scroll Bars. CHI 2000 Conf. Proc., Extended Abstracts, ACM, New York, 2000, p. 97-98.

32. Questions ????