User Interface Design User Interface Design PatternsPatternsPart IIPart IIPresented by:

Mohammed Mohammed

CS2310

April 15, 2008

IntroductionIntroduction 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.

CategoriesCategories 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 ListDouble ListUsed for making selectionsTwo sets: all items and the selected

itemsItems may be copied or moved to

the other listUse 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 ListDouble List

Editable TableEditable TableA directly manipulable table with the

following features: ◦edit-in-place◦contains empty rows in the end◦contents can be sorted by clicking the

column headersDirect 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 TableEditable Table

Pile of ItemsPile of ItemsThe 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 objectsIn 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 ItemsPile of Items

Pile of ItemsPile of Items

Master and InstancesMaster and InstancesThe 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 InstancesMaster and Instances

Calendar StripCalendar StripA continuous calendar for operating with

datesTime 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 StripCalendar Strip

ScheduleScheduleA 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.

ScheduleSchedule

TreeTreeA 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.

TreeTree

TreeTree

Groups and ItemsGroups and ItemsSolves 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.

Groups and ItemsGroups and Items

AutosaveAutosaveSystem 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++Autosave in Word++

Global UndoGlobal UndoWhen 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 Global multi-step undo in Word 97/2000Word 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 Undo stack in Photoshop 5Photoshop 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 UndoObject-Specific UndoIn 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 UndoObject-Specific Undo

Deleted Data StorageDeleted Data StorageAn in-program waste basket The system saves the data the

user has deleted in that storageThe user can fetch it back laterThe 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 StorageDeleted Data Storage

ReferencesReferences http://www.cs.helsinki.fi/u/salaakso/patterns/index.ht

ml 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.

QuestionsQuestions

????