Upload
roger-foster
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
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
????