demofeaturesdesign scope – microsoft research scope: providing awareness of multiple notifications...
Post on 22-Dec-2015
213 views
TRANSCRIPT
Scope – Microsoft ResearchDemo Features Design
Scope: Providing Awareness of Multiple Notifications at a Glance
Maarten van Dantzich, Daniel Robbins, Eric Horvitz, Mary Czerwinski
Microsoft Research
Scope – Microsoft ResearchDemo Features Design
Notification Overload
Scope – Microsoft ResearchDemo Features Design
“Show me all the important new stuff without bothering me too much.”
Scope – Microsoft ResearchDemo Features Design
The Scope
Scope – Microsoft ResearchDemo Features Design
Scope Goals
• Glanceable: need only a quick look
• Unified: all notifications in one place
• Unobtrusive: minimize distractions
• Lightweight: assisted prioritization
Scope – Microsoft ResearchDemo Features Design
Desktop Video
Scope – Microsoft ResearchDemo Features Design
Learning From Email Workflow*
• Flow: unobtrusively show newly arriving notifications
• Triage: show all the notifications that have arrived since the last time the user attended to the Scope
• Task management: let users edit metadata• Archive: Let users keep items on the scope• Retrieve: Let the user easily see summary info
about a particular notification AND quickly access the original item
*Thanks to Gina Venolia
Scope – Microsoft ResearchDemo Features Design
Information Sources (Current)
• Email (Outlook)
• Calendar Appointments (Outlook)
• Tasks (Outlook)
• Web Alerts (Custom)– News, stock-alerts, weather, traffic
Prioritized by Notification Platform
Scope – Microsoft ResearchDemo Features Design
Basic Design
MORE
MORE
Urgen
t
Urgen
t
LESS
LESS
Urgen
t
Urgen
tInboxInbox
CalendarCalendar
TasksTasks
AlertsAlerts
User is at center of ScopeItems “closer to the user” are are more important to
the user
Notification Item with visuals for metadata
Scope – Microsoft ResearchDemo Features Design
Demo
• scope_geometries_01.html
Scope – Microsoft ResearchDemo Features Design
Feature Overview
• Levels of Detail• Wedge Expansion• Filtering• Lens• Top N list• Single-item list• Rich tooltips• Inspector
Scope – Microsoft ResearchDemo Features Design
LOD: Glance Interrogate
Scope – Microsoft ResearchDemo Features Design
Wedge Expansion
Show more items (of lower priority) Show more of each item
Scope – Microsoft ResearchDemo Features Design
Filtering
No Filter Show only email
Scope – Microsoft ResearchDemo Features Design
Lens
Scope – Microsoft ResearchDemo Features Design
Single-item list(more info about item
under cursor)
Lists
Multi-list(top N items near
cursor)
Top-N-list(top N items from
entire scope)
Scope – Microsoft ResearchDemo Features Design
Rich Tooltips
AlertsEmail
TodoCalendar
Scope – Microsoft ResearchDemo Features Design
Inspector
• Appears when user double-clicks on an item
• Clicking on button within Inspector opens source document in native application
Scope – Microsoft ResearchDemo Features Design
So Why Did We Make It This Way?
Scope – Microsoft ResearchDemo Features Design
Feedback Channels Available
• Sound
• Color
• Animation– Position, shape
• Position
• Shape
Scope – Microsoft ResearchDemo Features Design
Interaction Channels Available
• Hover
• Click
• Double-click
• Drag-and-drop
• Zooming
• Lens
Scope – Microsoft ResearchDemo Features Design
But: Design Challenges
• Alert the user without distracting the user• Pop-out for urgent, new, & overdue items• Distinguishable visuals (at all sizes)• High contrast between item & background• Contrast between wedges• Usable in grayscale• Boolean states for many properties
– vs. many states for few properties
• Use as few different icons as possible
Scope – Microsoft ResearchDemo Features Design
Design Evolution Analysis
• Pretty (“candy drop”) Clean (“flat”)• Complex Simple• Representational Iconic Abstract• Animated Static
• Minimize distractions• Minimize visual noise• Usable at small sizes
Scope – Microsoft ResearchDemo Features Design
Tangibility
Pretty: “candy drop”
& tangible
Flat: less visual
noise
Scope – Microsoft ResearchDemo Features Design
Evolution of MetaData Visuals
E
Rich icons for
metadata
Rich icons for state and type
alpha-numeric for type and symbols for metadata
Symbols for metadata
and position for type
•Complex•Representational
•Simple•Abstract
E
Scope – Microsoft ResearchDemo Features Design
Halo = To Overdue
Overdue
Fill type = state
New
“Touched”
Pinned
Inner lines = To Type
To me alone
To me & a few others
Outer Shape = From Type
Unknown
Special
Known
Item Design Elements (Email)
Scope – Microsoft ResearchDemo Features Design
Item Design Composition
Scope – Microsoft ResearchDemo Features Design
Why Show Visuals For Metadata?
If auto-prioritization works, aren’t visuals redundant?
• Items are more distinguishable/identifiable
• Builds user’s trust in system’s intelligence
• Users feel in control– Edit priority and type by dragging items
Scope – Microsoft ResearchDemo Features Design
Overall Design Refinement
Scope – Microsoft ResearchDemo Features Design
Color vs. Grayscale
Scope – Microsoft ResearchDemo Features Design
User Studies
Scope – Microsoft ResearchDemo Features Design
User Studies Tasks (Sample)
• Determine which items are of high urgency and which are lower
• Find an unread email of high urgency that was sent only to you, from a known contact
• Find meetings that are not close to your office• Use filters to show only email messages that
were sent specifically to you• Read a high urgency email sent only to you
Scope – Microsoft ResearchDemo Features Design
User Study Results
• Visuals were learnable within an hour
• Spatial coding of urgency is unfamiliar
• Finding a high-urgency email– Beginning of session = 2:34– End of session = 00:34 (find, read, & close)
• Animation too distracting
• Liked idea of trainable reasoning
Scope – Microsoft ResearchDemo Features Design
Implementation
• Visual Interface: Macromedia Flash– Scalable vector graphics– Fluid animation– Fast, iterative authoring, rapid-prototyping
• Supporting system and shell: Visual Basic– Talks to Microsoft Exchange/Outlook– MAPI, CDO interfaces in VB– XML communication between Flash and VB
• Prioritization via Notification Platform
Scope – Microsoft ResearchDemo Features Design
Future Directions
Scope – Microsoft ResearchDemo Features Design
Different Wedge Semantics
InboxInbox
CalendarCalendarTasksTasks
AlertsAlerts
WorkWork
FamilyFamilyHobbiesHobbies
NewsNews
FriendsFriends
FamilyFamilyCo-Co-workersworkers
OtherOther
Scope – Microsoft ResearchDemo Features Design
Dynamic Wedge Proportions
InboxInbox
CalendarCalendarTasksTasks
AlertsAlerts
InboxInbox
CalendarCalendar
TasksTasks
AlertsAlerts
Scope – Microsoft ResearchDemo Features Design
Center vs. Edge Centric
Most important items near center
Most important items near perimeter
Look in one place for important stuff
More room for the important stuff
Scope – Microsoft ResearchDemo Features Design
Warped Wedges: More Space for the Most Important Items
Scope – Microsoft ResearchDemo Features Design
Fins: Showing More Items
Scope – Microsoft ResearchDemo Features Design
3D
Scope – Microsoft ResearchDemo Features Design
Other Form Factors
Scope – Microsoft ResearchDemo Features Design
PDA
Scope – Microsoft ResearchDemo Features Design
PDA Video
Scope – Microsoft ResearchDemo Features Design
Adapting Design to a PDA
• No hover overloaded click
• No double-click press-and-hold
• Much slower CPU Simpler visuals
Scope – Microsoft ResearchDemo Features Design
Watch Form Factor
Scope – Microsoft ResearchDemo Features Design
The Scope: Conclusions
• Manages multiple notification streams
• Glanceable
• Learnable
• Sensitive/subtle design space
• Adaptable to many platforms
Scope – Microsoft ResearchDemo Features Design
End
Scope – Microsoft ResearchDemo Features Design
Notification Platform
• Newness
• Item Type
• Due date
• Recipient
• Key words
• Usage for similar items
Scope – Microsoft ResearchDemo Features Design
Email Workflow*
• Flow: As people are working on other tasks, they want to keep up with the flow of incoming messages as they arrive.
• Triage: After people are away from their email for a period of time, they need to catch up and deal with all the email that accumulated while they were away.
• Task management: People often use email to remind them what they need to do, and to help them get tasks done.
• Archive: People store email so they can refer to it later.• Retrieve: After archiving messages, people need a
method of retrieving messages.*Thanks to Gina Venolia
Scope – Microsoft ResearchDemo Features Design
Element Design
“Pushpinned” meeting requiring
travel time to attend
“Pushpinned” meeting requiring
travel time to attend
Overdue task
Overdue task
“Pushpinned” task
“Pushpinned” task
Email from known contact AND sent to me and a few
others
Email from known contact AND sent to me and a few
others
New appointme
nt
New appointme
nt
“Pushpinned” email
from someone special
“Pushpinned” email
from someone special
Scope – Microsoft ResearchDemo Features Design
Synonyms For Glance
• Fleeting look
• Momentary look
• Quick look
• Glimpse
• Peek
• Perusal