Interaction Design Spec

Contents

• # Summary
• # Terminology
• # DnD issues
• # Catalogue of UI Affordances
• # Open Issues

---

Summary

An attempt to create a single source of truth for interaction across Chandler in an effort to avoid inconsistency in the UI. Work in progress.

• See also InteractionDesignStructure

---

Terminology

Warning: Can't find topic Documentation.DnD

Warning: Can't find topic Documentation.Add

Warning: Can't find topic Documentation.Duplicate

Warning: Can't find topic Documentation.DnDEntity

Warning: Can't find topic Documentation.SourceEntity

Warning: Can't find topic Documentation.DestinationEntity

Warning: Can't find topic Documentation.PlacerBar

---

DnD rules have been moved to DnD

Catalogue of UI affordances

NTH = Nice to have

• Selection widgets
• Bitmap buttons
• Text buttons
• Click and hold pulldown buttons, bitmap buttons, text buttons (NTH for Rule builder)
• Combo box pulldowns
• Gel buttons for column headers in summary table and calendar views
• Radio buttons
• Custom Tabs with progress animations and close button (NTH)
• Kind filter selectors that are not just buttons
• Magically appearing and disappearing persistent selection checkboxes (NTH)

• Retractable surfaces
• Cluster "slide open" in-place (NTH Alternative is to View by thread)
• Cluster bi-directional disclosure triangle (NTH)
• Summary view sections
• Sidebar slide open (NTH)
• Mini-calendar browser slide open (NTH)
• See also section slide open (NTH)
• Rule and Filter builder (NTH)

• Animations
• Flash confirmation that item is dropped onto a target
• Flash animation for when an item is removed / deleted from a collection
• Double-flash for DnH to open target (NTH If we have this feature)
• Loading
• Real-time search results loading in (NTH)
• Real-time sidebar collection item counts (NTH)
• Fade in / Fade out of attributes (NTH Alternative is flash for changes in Detail view)

• Visual feedback for DnD
• Transparency for dragged items (NTH)
• 2 items slide into place when middle item is dragged away (NTH Alternative is flash)
• Placer bar appears between items when reordering items (NTH If we have this feature)

• Button states
• Greyed out
• Active
• Rollover (NTH in certain situations)
• Mousedown

• Selection states
• Selected (Grey)
• Selected + Focused (Blue)
• Selected thread (Light blue) (NTH)

• Editing
• Summary Calendar views: Title
• Summary Table views: Spreadsheet affordances for editing in-place
  • Attributes: Date (calendar dates), Triage status, Stamp, Message history, Who, What, Collection
  • Auto-complete with pulldown to select from options (ie. Safari url bar)
  • Pre-populate certain fields with common options
    • ie: Event dates: Today, Tomorrow, This week, Next week
    • Possible times for a particular date with already booked times in grey
    • Recurrence settings
    • Alarm settings: 15 minutes before...
• Multi-select items to edit single LCD detail view (same with collections) (NTH)
• "Type over text" form fields (ie. iCal) (NTH)
• Date pulldown that shows "free / busy" times (NTH If we do free / busy)

• More DnD behavior
• DnD collection to tab bar (NTH)
• DnH over tab to bring tab forward (NTH)

• VD Chrome adjustments
• Get rid of extra beveling
• Uniform margins and bevels
• Blended in resize corner
• Visual bevel for draggable dividers
• Vertical detail view layout (NTH)

• VD for Surfaces
• Transparent surfaces (NTH)
• Gradients (NTH)
• Drop shadows (NTH)

• Sounds
• Beep when something that takes a long time is done (ie. Syncing)
• Beep when you've typed a unique set of characters for auto-complete
• Bong when there is an error

[OI^?]

• How does the user find out what features are available in the UI? Is there a way to see all the "hot spots" available in a window? If a row of text has some glyph next to it, or has the number "(10)" next to it, is there a way to find out what that means? Is there a way to see what parts of the UI would have balloon help available if you were to hover over them? We can brainstorm about this in the design and apps groups, but I don�t want to hold things up. The Hypercard feature of things you can click on.

• DnDing collections / views
• What are likely use cases for dragging and dropping a view?
  • Re-ordering or organizing a list of views (e.g. side bar or tabbed views, view manager)
  • Dropping a view into a container of views (e.g. side bar tray)
  • Combining two views (temporally and permanently)
• A view can also possibly be dragged and dropped to the above UI areas. What should dropping over each UI area mean for a view?
• What are the use cases for combining views temporally?
  • User would like to see email threads combining both incoming Inbox and outgoing "Sent Items" views.
  • More generally, users would like to search through a few known views (e.g. I know contact I'm looking for is either in "home" or "friends" view)
  • What else?
• What are the use cases for combining views permanently?

-- ChaoLam - 03-08 Mar 2004

Temporarily retired tables

Content item	Collection	Attribute	Attribute value
Content item	Adds DnDed content item to destination content item's default ad-hoc collection	Adds DnDed content item to destination collection	Adds DnDed content item as an attribute value (where appropriate)	N/A
Collection	N/A	Adds members of DnDed collection to destination collection [OI?] Are collections within collections represented as discrete entities?	Adds DnDed collection as an attribute value (where appropriate)	N/A

DnD^? semantics What happens when you DnD^? a DnD entity onto a...

#	When	Destinations	What can you DnD?	Semantics	Feedback on %OSAF_MO%	Feedback on Drop	%OSAF_DnH%	Move Duplicate Add
Model space
1		Content item	Content item	Add content item to destination content item's default ad-hoc collection Label original content item as a member of the same ad-hoc collection	Hilight destination	Animated flash	Opens content item's default ad-hoc collection in place	Add
2		Ad-hoc CollectionName	Content item	Add content item to destination ad-hoc collection Label original content item as a member of the same ad-hoc collection	Hilight destination	Animated flash	Opens collection in place	Add
3		CollectionName	All except for tabs	Add DnD entity's content items to destination collection Label original content item / collection as a member of the destination collection If the collection is governed by a rule, label original content item / collection with any label attribute values specified in the rule	Hilight destination	Animated flash	Replaces view with collection	?
4		Complex-rule collection	All except for tabs	Add DnD entity's content items to destination collection Flag attributes that have multiple possible attribute values	Hilight destination	Animated flash	Replaces view with collection	?
5		Attribute	Content item?? CollectionName Attribute value	Add attribute value	Hilight destination	See new attribute value listed Text is selected for easy editing	Nothing	Add
View space
6		Detail view	Attribute Attribute value	Add attribute to detail view Add attribute value to attribute in Detail view [OI] Is this a bi-directional reference?	Hilight destination	See new attribute See new attribute value	Nothing	Add? D?
7		Attribute: Headline sinkhole	Attribute value	Add attribute value to headline	Hilight destination	See new attribute value in headline	Nothing	Add
8		Sidebar	All	Creates a named collection with its requisite views for DnD entity	Hilight destination Placer bar allows users to accurately DnD between items in the sidebar	See DnD entity in the sidebar	Nothing	Add
9		Sidebar entity	Same as CollectionName above
10		Tab bar	All	Creates and / or adds a collection with its requisite views for DnD entity to the tab bar _Special case_Dragging tabs around on the tab bar reorders / removes the tabs	Hilight destination Placer bar allows users to accurately DnD between tabs in the tab bar	See DnD entity as a new tab in the tab bar See reordered tabs Poof animation for removed tabs	Nothing	?
11		Tab	All	Add DnD entity's content items to whatever collection is displayed in the Tab Special case Dragging a tab onto another tab temporarily combines content items from both tabs into one collection. User is prompted to name the new collection when they leave the collection.	Hilight destination	Animated flash	Moves destination tab to the front to place items explicitly into collection	?
12		Search bar	URL?? Attribute Attribute value	Translates DnD entity into a search string	Hilight destination	See item translated as search string	Nothing	Add
13		Summary table	Same as CollectionName above
14		Summary table row Calendar item Contact card	Same as Content item above
15		Summary table column header bar	Attribute Column header	Add column Reorder columns Remove column	Hilight destination with placer bar	See newly added column See newly reordered column Poof animation for removed columns	Nothing	Add
16		Floating open Ad-hoc collection	Content item	Add content item to destination ad-hoc collection	Hilight destination Placer bar allows users to accurately DnD between items	See original content item in destination ad-hoc collection	Nothing	?
17		Attribute selector pull-downs (edit mode): Add column Add attribute to detail view Select attribute-based sectioned summary table layout	Attribute	Add and remove attribute options	Hilight destination	Add: See new attribute in destination pulldown Remove: Animated poof	Nothing	Add
18		Universal text box	Same as Detail view
Outside of Chandler
19		Desktop	All?	Turns DnD entity into a named collection Creates shortcut alias to named collection?	Nothing	See icon representation of content item / collection on desktop	Nothing	Add
20		External application	All	Exports content item / collection?	?	?	?	?