User Interface Design Patterns Part II Presented by

User Interface Design Patterns Part II Presented by: Mohammed CS 2310 April 15, 2008

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.

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

Double List Used for making selections Two sets: all items and the selected items Items may be copied or moved to the other list Use Double List especially 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

Double List

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

Editable Table

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

Pile of Items

Pile of Items

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

Master and Instances

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.

Calendar Strip

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 Strip in the Overview beside Detail structure.

Schedule

Tree A visualization of a hierarchy. Most common: orthogonal 2 D 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.

Tree

Tree

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

Groups and Items

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.

Autosave in Word++

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

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.

Undo stack in Photoshop 5 Undo mechanism presented as a single list. Contains a possibility to branch the undo history with the Unlinear history option. 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.

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

Object-Specific Undo

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

Deleted Data Storage

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/CHI 2001 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.

Questions ? ?