designing for interesting moments
TRANSCRIPT
![Page 1: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/1.jpg)
Interesting Moments
Bill ScottDirector, UI EngineeringNetflix
Microsoft - August 24, 2009
Designing for
![Page 2: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/2.jpg)
Me
![Page 3: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/3.jpg)
![Page 4: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/4.jpg)
Simple Interaction?
![Page 5: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/5.jpg)
Simple Interaction? Events...
Page load. Mouse hover. Mouse down. Drag initiated. Drag leaves original location. Drag
re-enters original location. Drag re-enters original location. Drag enters valid target.
Drag exits valid target. Drag enters specific invalid target. Drag is over no specific target.
Drag hovers over valid target. Drag hovers over invalid target. Drop accepted. Drop
rejected. Drop on parent container.
16+
![Page 6: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/6.jpg)
Simple Interaction? Actors...
Page. Cursor. Tool Tip. Drag Object. Drag Object’s Parent
Container. Drop Target.
6+
![Page 7: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/7.jpg)
96Interesting Moments
EventsActors
![Page 8: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/8.jpg)
Interesting Moments
![Page 9: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/9.jpg)
Interesting Moments
![Page 10: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/10.jpg)
Interesting Moments
![Page 11: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/11.jpg)
Interesting Moments
![Page 12: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/12.jpg)
Interesting Moments
![Page 13: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/13.jpg)
Interesting Moments
![Page 14: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/14.jpg)
interaction (n).mutual or reciprocal action; interacting
![Page 15: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/15.jpg)
interaction.interplay between system and user
![Page 16: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/16.jpg)
interaction.interplay between system and user
![Page 17: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/17.jpg)
interaction.interplay between system and user
![Page 18: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/18.jpg)
interaction.sequence tells a story
![Page 19: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/19.jpg)
interactivity.cyclic process between two or more active agents in which each agent alternatively listens, thinks, and speaks.
Chris CrawfordInteractive Storytelling
![Page 20: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/20.jpg)
Captures minute interplayServes as tickler for nuancesSpeaks to the possibilities
Interesting Moments
![Page 21: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/21.jpg)
Captures minute interplayServes as tickler for nuancesSpeaks to the possibilities
Interesting Moments
![Page 22: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/22.jpg)
Captures minute interplayServes as tickler for nuancesSpeaks to the possibilities
Interesting Moments
![Page 23: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/23.jpg)
Captures minute interplayServes as tickler for nuancesSpeaks to the possibilities
Interesting Moments
![Page 24: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/24.jpg)
Captures minute interplayServes as tickler for nuancesSpeaks to the possibilities
Interesting Moments
![Page 25: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/25.jpg)
Captures minute interplayServes as tickler for nuancesSpeaks to the possibilities
Interesting Moments
![Page 26: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/26.jpg)
6 principles
![Page 27: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/27.jpg)
6 principlesfor designing interesting moments
![Page 28: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/28.jpg)
Input where
you output.- Alan Cooper
![Page 29: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/29.jpg)
![Page 30: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/30.jpg)
In Page Editing
inline editing. animoto.com
![Page 31: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/31.jpg)
In Page EditingInteresting Moments
Page load
Not editing:- Mouse enters edit area- Mouse exits edit area- Mouse click in edit area
Editing:- Mouse exits edit area- Mouse click outside edit
inline editing. animoto.com
![Page 32: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/32.jpg)
Page RenderNot editing:
Mouse in edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click elsewhere
Cursor link cursor normal i-beam normal normal
Edit Area hidden edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
Analyzing the Moments
![Page 33: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/33.jpg)
Page RenderNot editing:
Mouse in edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click elsewhere
Cursor link cursor normal i-beam normal normal
Edit Area hidden edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
1
1
Analyzing the Moments
![Page 34: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/34.jpg)
Page RenderNot editing:
Mouse in edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click elsewhere
Cursor link cursor normal i-beam normal normal
Edit Area hidden edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
1
1
Analyzing the Moments2
2
![Page 35: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/35.jpg)
Page RenderNot editing:
Mouse in edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click elsewhere
Cursor link cursor normal i-beam normal normal
Edit Area hidden edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
1
1
Analyzing the Moments2
2
3
3
![Page 36: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/36.jpg)
Page RenderNot editing:
Mouse in edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click elsewhere
Cursor link cursor normal i-beam normal normal
Edit Area hidden edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
1
1
Analyzing the Moments2
2
3
34
4
![Page 37: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/37.jpg)
Page RenderNot editing:
Mouse in edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click elsewhere
Cursor link cursor normal i-beam normal normal
Edit Area hidden edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
1
1
Analyzing the Moments2
2
3
34
4
5
5
![Page 38: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/38.jpg)
Page RenderNot editing:
Mouse in edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click elsewhere
Cursor link cursor normal i-beam normal normal
Edit Area hidden edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
1
1
Analyzing the Moments2
2
3
34
4
5
5
6
6
![Page 39: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/39.jpg)
Page RenderNot editing:
Mouse in edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click elsewhere
Cursor link cursor normal i-beam normal normal
Edit Area hidden edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
1
1
Analyzing the Moments2
2
3
34
4
5
5
6
6
7
7
![Page 40: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/40.jpg)
Refactoring the MomentsPage Render
Not editing:Mouse
enters edit area
Not editing: Mouse exits
edit area
Mouse clicks in edit area
Editing: Mouse exits
edit area
Editing: Mouse click outside edit
area
Editing: Click Save Button
Cursor link cursor normal i-beam normal normal normal
Edit Area hint at edit field
dotted outline;
invitational text
hidden edit field
dotted outline; white
background
solid outlineSaving...
message; new value
Saving... message; new value
Buttons?Show Save/
Cancel buttons
Hide Save/Cancel
buttons
Edit Link? Show edit link?
![Page 41: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/41.jpg)
In Page Editing
inline editing. fickr.com
![Page 42: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/42.jpg)
In Page Editing
Additions:
•Yellow spotlight/invitation•Tooltip invitation•Explicit Save/Cancel buttons
inline editing. fickr.com
![Page 43: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/43.jpg)
In Page Editing
Additions:
•Yellow spotlight/invitation•Tooltip invitation•Explicit Save/Cancel buttons
Pay attention to
discoverability
inline editing. fickr.com
![Page 44: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/44.jpg)
In Page Editing
Additions:
•Yellow spotlight/invitation•Tooltip invitation•Explicit Save/Cancel buttons
Pay attention to
discoverability
Use a clear “call to action”
inline editing. fickr.com
![Page 45: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/45.jpg)
anti-pattern. non-symmetrical. iphone
![Page 46: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/46.jpg)
anti-pattern. non-symmetrical. iphone
![Page 47: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/47.jpg)
anti-pattern. non-symmetrical. iphone
![Page 48: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/48.jpg)
anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp
![Page 49: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/49.jpg)
anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp
![Page 50: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/50.jpg)
anti-pattern. non-symmetrical. iphone
symmetrical interaction. basecamp
Keep activation &
deactivation symmetrical
![Page 51: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/51.jpg)
Drag, Open & Drop
drag and drop. gmail
![Page 52: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/52.jpg)
Drag, Open & Drop
drag and drop. gmail
Mouse hover & initiationAnti-pattern: Tiny Targets
Drop acceptedWhat happened? Collapses immediately.
![Page 53: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/53.jpg)
Drag, Open & Drop
Reduce physical effort.
drag and drop. gmail
Mouse hover & initiationAnti-pattern: Tiny Targets
Drop acceptedWhat happened? Collapses immediately.
![Page 54: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/54.jpg)
Drag, Open & Drop
Reduce physical effort.
Reduce mental effort.
drag and drop. gmail
Mouse hover & initiationAnti-pattern: Tiny Targets
Drop acceptedWhat happened? Collapses immediately.
![Page 55: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/55.jpg)
![Page 56: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/56.jpg)
![Page 57: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/57.jpg)
![Page 58: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/58.jpg)
![Page 59: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/59.jpg)
anti-pattern. artificial construct.
![Page 60: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/60.jpg)
anti-pattern. artificial construct.
rate an object. netflix.com
![Page 61: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/61.jpg)
No artificial constructs!
anti-pattern. artificial construct.
rate an object. netflix.com
![Page 62: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/62.jpg)
Require a
light footprint.
![Page 63: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/63.jpg)
![Page 64: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/64.jpg)
In Page Actions (always visible)
original digg site. digg.com 1.0
![Page 65: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/65.jpg)
In Page Actions (always visible)
original digg site. digg.com 1.0
![Page 66: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/66.jpg)
In Page Actions (always visible)
original digg site. digg.com 1.0
in-page action. digg.com
![Page 67: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/67.jpg)
In Page Actions (always visible)
original digg site. digg.com 1.0
in-page action. digg.com
![Page 68: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/68.jpg)
In Page Actions (always visible)
original digg site. digg.com 1.0
in-page action. digg.com
Use for primary actions.
![Page 69: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/69.jpg)
In Page Actions (always visible)in-page action. digg.com
![Page 70: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/70.jpg)
In Page Actions (always visible)in-page action. digg.com rating an object. y!news, netflix
![Page 71: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/71.jpg)
In Page Actions (always visible)in-page action. digg.com rating an object. y!news, netflix
rating an object. y!movies, y!answers
![Page 72: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/72.jpg)
In Page Actions (always visible)in-page action. digg.com rating an object. y!news, netflix
rating an object. y!movies, y!answers
remembered collections. gap.com
![Page 73: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/73.jpg)
In Page Actions (always visible)in-page action. digg.com rating an object. y!news, netflix
rating an object. y!movies, y!answers
remembered collections. gap.com
Use to reduce the “click weight.”
•# of interaction steps
•Decision time•Seek time •Second guessing •Wait time
http://genesisconduit.wordpress.com/2008/07/13/click-weight/http://www.amazon.com/Designing-Both-Sides-Screen-Collaborate/dp/0672321513
![Page 74: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/74.jpg)
Contextual Tools (inline on hover)
contextual tool menu. flickr.com
![Page 75: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/75.jpg)
Contextual Tools (inline on hover)
contextual tool menu. flickr.com
contextual tool actions. backpackit
![Page 76: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/76.jpg)
Contextual Tools (inline on hover)
contextual tool menu. flickr.com
contextual tool actions. backpackit
Use for secondary actions
or to preserve readability.
![Page 77: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/77.jpg)
Contextual Tools (overlay on hover)
contextual tool overlay. bing.com
![Page 78: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/78.jpg)
Contextual Tools (overlay on hover)
contextual tool overlay. bing.com
Balance readability & interactivity.
![Page 79: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/79.jpg)
Anti-Pattern: Hover & Cover
anti-pattern. hover & cover. yahoo! teachers
![Page 80: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/80.jpg)
Anti-Pattern: Hover & CoverPage
Render
Mouse over
object
Mouse leaves tool
layer
Tool selected
In Progress Complete
Cursor link cursor
Actionable Object
Wrapped by tool
layer
Normal display mode
Normal display mode
Contextual Tools
Show tool layer
Hide toollayer
Hide toollayer
anti-pattern. hover & cover. yahoo! teachers
![Page 81: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/81.jpg)
Anti-Pattern: Hover & CoverPage
Render
Mouse over
object
Mouse leaves tool
layer
Tool selected
In Progress Complete
Cursor link cursor
Actionable Object
Wrapped by tool
layer
Normal display mode
Normal display mode
Contextual Tools
Show tool layer
Hide toollayer
Hide toollayer
anti-pattern. hover & cover. yahoo! teachers
Don’t obscure context
or navigation.
![Page 82: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/82.jpg)
hover & cover resolved. y! teachers
Hover & Cover Refactored
![Page 83: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/83.jpg)
hover & cover resolved. y! teachers
Hover & Cover Refactored
![Page 84: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/84.jpg)
Contextual Tools (overlay on hover)
hover details. linkedin.com
![Page 85: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/85.jpg)
Contextual Tools (overlay on hover)
hover details. linkedin.com
Hover activation should
be 1/2 second delay
![Page 86: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/86.jpg)
Contextual Tools (overlay on hover)
hover details. linkedin.com
Hover activation should
be 1/2 second delay
Time-based targeting is tricky.
![Page 87: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/87.jpg)
Contextual Tools (overlay on hover)
hover details. linkedin.com
Hover activation should
be 1/2 second delay
Time-based targeting is tricky.
Mouse path targeting is tricky.
![Page 88: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/88.jpg)
anti-pattern. double duty. amazon.com
![Page 89: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/89.jpg)
Hover: shows contextual tool overlay.Click: goes to details page.
anti-pattern. double duty. amazon.com
![Page 90: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/90.jpg)
Hover: shows contextual tool overlay.Click: goes to details page.
Do one thing well.
anti-pattern. double duty. amazon.com
![Page 91: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/91.jpg)
Contextual Tools (overlay on click)
google maps
![Page 92: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/92.jpg)
Contextual Tools (overlay on click)
bing.com
google maps
![Page 93: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/93.jpg)
Contextual Tools (overlay on click)
bing.com
everyblock.com
google maps
![Page 94: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/94.jpg)
Contextual Tools (overlay on click)
bing.com
everyblock.com
google maps Open contextual tool
overlays with a click.
![Page 95: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/95.jpg)
What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009
![Page 96: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/96.jpg)
What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009
Overlay stays open.
![Page 97: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/97.jpg)
What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009
Overlay stays open.
On mouse hover/delay switches to new app.
![Page 98: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/98.jpg)
What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009
Mouse exits. Overlay closes.
Overlay stays open.
On mouse hover/delay switches to new app.
![Page 99: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/99.jpg)
What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009
The good?• Doesn’t obscure other navigation.• Doesn’t collapse erratically.
Mouse exits. Overlay closes.
Overlay stays open.
On mouse hover/delay switches to new app.
![Page 100: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/100.jpg)
What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009
The good?• Doesn’t obscure other navigation.• Doesn’t collapse erratically.
Mouse exits. Overlay closes.
Overlay stays open.
On mouse hover/delay switches to new app.
The not so good?• Activation delay feels sluggish
(however delay is necessary).• Not all menus activate a panel.• Accidental triggering
(result in obscuring content).• Gigantic overlays activated by hover
![Page 101: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/101.jpg)
What about new Yahoo page?
embedded application overlay - hover activated. yahoo.com 2009
The good?• Doesn’t obscure other navigation.• Doesn’t collapse erratically.
Mouse exits. Overlay closes.
Overlay stays open.
On mouse hover/delay switches to new app.
The not so good?• Activation delay feels sluggish
(however delay is necessary).• Not all menus activate a panel.• Accidental triggering
(result in obscuring content).• Gigantic overlays activated by hover
See also: Jakob Nielsen’s research on “Mega Menus”: http://tr.im/twnC
![Page 102: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/102.jpg)
Maintain flow.
![Page 103: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/103.jpg)
Exploratorium Exhibit
![Page 104: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/104.jpg)
Spot the differences
![Page 105: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/105.jpg)
Spot the differences
![Page 106: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/106.jpg)
Now try again...
![Page 107: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/107.jpg)
Now try again...
![Page 108: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/108.jpg)
Now try again...
Keep the moments within the page.
![Page 109: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/109.jpg)
![Page 110: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/110.jpg)
Keep the moments within the page.
![Page 111: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/111.jpg)
Overlays
hover details. netflix.com
hover dialog. netflix.com
![Page 112: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/112.jpg)
Overlays
hover details. netflix.com
hover dialog. netflix.com
![Page 113: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/113.jpg)
Overlays
hover details. netflix.com
Wait 1/2 second to
activate hover details.
hover dialog. netflix.com
![Page 114: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/114.jpg)
Overlays
hover details. netflix.com
Wait 1/2 second to
activate hover details.
Immediately deactivate hover
details on mouse exit.
hover dialog. netflix.com
![Page 115: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/115.jpg)
Overlays
hover details. netflix.com
Wait 1/2 second to
activate hover details.
Immediately deactivate hover
details on mouse exit.
Change context or capture
flow in overlay dialog.
hover dialog. netflix.com
![Page 116: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/116.jpg)
Anti-Pattern: Idiot Boxes
anti-pattern. idiot box. yelp.com
![Page 117: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/117.jpg)
Anti-Pattern: Idiot Boxes
anti-pattern. idiot box. yahoo! photos
![Page 118: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/118.jpg)
Anti-Pattern: Idiot Boxes
“Don’t stop the proceedings
with idiocy.” - Alan Cooper
anti-pattern. idiot box. yahoo! photos
![Page 119: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/119.jpg)
Overlays: Hover Initiated
anti-pattern. shifting overlay. ui-patterns.com
![Page 120: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/120.jpg)
Overlays: Hover Initiated
anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables
![Page 121: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/121.jpg)
Overlays: Hover Initiated
anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables
anti-pattern. shifting overlay. wikirank
![Page 122: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/122.jpg)
Overlays: Hover Initiated
Overlays should not follow the mouse.
anti-pattern. shifting overlay. ui-patterns.com better implementation of shifting overlay. instructables
anti-pattern. shifting overlay. wikirank
![Page 123: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/123.jpg)
Inlays
click activated inlay. roost.com
![Page 124: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/124.jpg)
Inlays
Use inlays for strong
contextual association.
click activated inlay. roost.com
![Page 125: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/125.jpg)
Inlays
Use inlays for strong
contextual association.
hover activated accordian. nasa.gov
click activated inlay. roost.com
![Page 126: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/126.jpg)
Inlays
Use inlays for strong
contextual association.
hover activated accordian. nasa.gov
hover activated accordian. brown.edu
click activated inlay. roost.com
![Page 127: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/127.jpg)
Inlays
Use inlays for strong
contextual association.
hover activated accordian. nasa.gov hover activated accordian. apple.com
hover activated accordian. brown.edu
click activated inlay. roost.com
![Page 128: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/128.jpg)
Inlays
Use inlays for strong
contextual association.
Activate inlays with click,
not hover.
hover activated accordian. nasa.gov hover activated accordian. apple.com
hover activated accordian. brown.edu
click activated inlay. roost.com
![Page 129: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/129.jpg)
![Page 130: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/130.jpg)
Don’t infer too much
about the user’s intent
from a mouse hover.
![Page 131: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/131.jpg)
Virtual Space
endless scrolling. bing.com
![Page 132: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/132.jpg)
Virtual Space
endless scrolling. bing.com
carousel. paging. gallery. bing.com
![Page 133: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/133.jpg)
Virtual Space
Consider the backstage.
endless scrolling. bing.com
carousel. paging. gallery. bing.com
![Page 134: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/134.jpg)
Seamless Contextyou are here. idea.org
![Page 135: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/135.jpg)
Seamless Contextyou are here. idea.org
seamless paging. magcloud
![Page 136: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/136.jpg)
Seamless Context
Maintain context
across pages.
you are here. idea.org
seamless paging. magcloud
![Page 137: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/137.jpg)
Nav Bars: Extend the moment
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com
![Page 138: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/138.jpg)
Nav Bars: Extend the moment
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com
![Page 139: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/139.jpg)
Nav Bars: Extend the moment
nav status bar. thesixtyone.com
nav status bar. facebook.com
nav status bar. digg.com
Maintain context across pages.
![Page 140: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/140.jpg)
Invite interaction.
![Page 141: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/141.jpg)
![Page 142: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/142.jpg)
http://dustincurtis.com/images/twitter/green_spill.jpg
![Page 143: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/143.jpg)
http://dustincurtis.com/images/twitter/green_spill.jpg
![Page 144: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/144.jpg)
http://dustincurtis.com/images/twitter/green_spill.jpg
![Page 145: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/145.jpg)
http://dustincurtis.com/images/twitter/green_spill.jpg
![Page 146: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/146.jpg)
Use a clear call to action.
http://dustincurtis.com/images/twitter/green_spill.jpg
![Page 147: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/147.jpg)
Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com
![Page 148: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/148.jpg)
Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com
![Page 149: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/149.jpg)
Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com
![Page 150: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/150.jpg)
Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com
![Page 151: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/151.jpg)
Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com
![Page 152: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/152.jpg)
Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com
![Page 153: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/153.jpg)
Anti-Pattern: No clear action
anti-pattern. no clear action. bing.com
![Page 154: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/154.jpg)
Anti-Pattern: No clear action
Use a clear call to action.
anti-pattern. no clear action. bing.com
![Page 155: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/155.jpg)
Hover Invitationshover invitation. y!movies
![Page 156: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/156.jpg)
Hover Invitationshover invitation. y!movies
tooltip, hover & cursor invitation. flickr.com
![Page 157: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/157.jpg)
Hover Invitationshover invitation. y!movies
tooltip, hover & cursor invitation. flickr.com
hover & tool invitation. backpackit
![Page 158: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/158.jpg)
Hover Invitationshover invitation. y!movies
Aid discoverability with
hover invitations.
tooltip, hover & cursor invitation. flickr.com
hover & tool invitation. backpackit
![Page 159: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/159.jpg)
Blank Slate Invitation
dog-ear invitation. login.yahoo.com
![Page 160: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/160.jpg)
Blank Slate Invitation
dog-ear invitation. login.yahoo.com
fill-in-the-blanks invitation. netflix
![Page 161: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/161.jpg)
Blank Slate Invitation
dog-ear invitation. login.yahoo.com
blank-slate invitation. backpackit
fill-in-the-blanks invitation. netflix
![Page 162: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/162.jpg)
Blank Slate Invitation
Recycle blank areas for
promoting your features.
dog-ear invitation. login.yahoo.com
blank-slate invitation. backpackit
fill-in-the-blanks invitation. netflix
![Page 163: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/163.jpg)
Tour Invitation
tour invitation. gmail
![Page 164: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/164.jpg)
Tour Invitation
tour invitation. gmail
tour invitation. yahoo.com
![Page 165: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/165.jpg)
Tour Invitation
tour invitation. gmail
tour invitation. yahoo.com
Use new visits to
promote new features.
![Page 166: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/166.jpg)
Drag & Drop Invitation
drag invitation. google mapsdrag invitation. google maps
![Page 167: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/167.jpg)
Drag & Drop Invitation
drag invitation. google mapsdrag invitation. google maps
drop invitation. google maps
![Page 168: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/168.jpg)
Drag & Drop Invitation
drag invitation. google mapsdrag invitation. google maps
drop invitation. google mapsMind your moments.
![Page 169: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/169.jpg)
Prompt Invitation
facebook.com
![Page 170: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/170.jpg)
Prompt Invitation
facebook.com
![Page 171: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/171.jpg)
Prompt Invitation
delicious.com
facebook.com
![Page 172: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/172.jpg)
Prompt Invitation
delicious.com
facebook.com
Use questions or commands
to prompt for input.
![Page 173: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/173.jpg)
button. the gap
drop down arrow. flickr
![Page 174: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/174.jpg)
button. the gap
drop down arrow. flickr
![Page 175: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/175.jpg)
button. the gap
hyperlink. backpackit
drop down arrow. flickr
![Page 176: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/176.jpg)
button. the gap
hyperlink. backpackit
drop down arrow. flickr
![Page 177: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/177.jpg)
button. the gap
hyperlink. backpackit
drop down arrow. flickr
drop down arrow. flickr
![Page 178: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/178.jpg)
button. the gap
hyperlink. backpackit
drop down arrow. flickr
drop down arrow. flickr
![Page 179: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/179.jpg)
Bridge new interaction
styles with familiar idioms.button. the gap
hyperlink. backpackit
drop down arrow. flickr
drop down arrow. flickr
![Page 180: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/180.jpg)
Show transitions.
![Page 181: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/181.jpg)
![Page 182: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/182.jpg)
![Page 183: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/183.jpg)
anti-pattern. needless fanfare. macintosh turbo tax
![Page 184: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/184.jpg)
anti-pattern. needless fanfare. macintosh turbo tax
again in slow-motion...
![Page 185: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/185.jpg)
anti-pattern. needless fanfare. macintosh turbo tax
again in slow-motion...
![Page 186: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/186.jpg)
Always question “why”
when using transitions.
anti-pattern. needless fanfare. macintosh turbo tax
again in slow-motion...
![Page 187: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/187.jpg)
Attention processing is hard-wired into the brain
It is chemistry. You can’t help it.
![Page 188: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/188.jpg)
Attention processing is hard-wired into the brain
It is chemistry. You can’t help it.You can’t help looking at
“dancing” mortgage ads
![Page 189: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/189.jpg)
anti-pattern. needless fanfare. roost.com
Designing Visual Interfaces. Kevin Mullet & Darrell Sano
![Page 190: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/190.jpg)
anti-pattern. needless fanfare. roost.com
anti-pattern. needless fanfare. nasa.govDesigning Visual Interfaces. Kevin Mullet & Darrell Sano
![Page 191: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/191.jpg)
anti-pattern. needless fanfare. roost.com
anti-pattern. needless fanfare. nasa.govDesigning Visual Interfaces. Kevin Mullet & Darrell Sano
anti-pattern. needless fanfare. pbs.org
![Page 192: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/192.jpg)
Imagine an animation knob.
Dial in animation carefully.
anti-pattern. needless fanfare. roost.com
anti-pattern. needless fanfare. nasa.govDesigning Visual Interfaces. Kevin Mullet & Darrell Sano
anti-pattern. needless fanfare. pbs.org
![Page 193: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/193.jpg)
original. animation on drop. my yahoo!
![Page 194: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/194.jpg)
current. no animation on drop. my yahoo!
original. animation on drop. my yahoo!
![Page 195: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/195.jpg)
Use the “cut it in-half”
rule of thumb.
current. no animation on drop. my yahoo!
original. animation on drop. my yahoo!
![Page 196: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/196.jpg)
Moments Communicate
![Page 197: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/197.jpg)
Moments Communicate
progress indicator
![Page 198: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/198.jpg)
Moments Communicate
Speed up time.
progress indicator
![Page 199: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/199.jpg)
Moments Communicate
Speed up time.
earlier version of my yahoo!
progress indicator
![Page 200: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/200.jpg)
Moments Communicate
Speed up time.
Slow down time.
earlier version of my yahoo!
progress indicator
![Page 201: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/201.jpg)
Moments Communicate
Speed up time.
Slow down time.
mint.com
earlier version of my yahoo!
progress indicator
![Page 202: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/202.jpg)
Moments Communicate
Speed up time.
Slow down time.
Show state change.
mint.com
earlier version of my yahoo!
progress indicator
![Page 203: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/203.jpg)
Moments Communicate
Speed up time.
Slow down time.
Show state change.
mint.com
the gap
earlier version of my yahoo!
progress indicator
![Page 204: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/204.jpg)
Moments Communicate
Speed up time.
Slow down time.
Show relationships.
Show state change.
mint.com
the gap
earlier version of my yahoo!
progress indicator
![Page 205: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/205.jpg)
Moments Communicate
Speed up time.
Slow down time.
Show relationships.
Show state change.
mint.com
the gap
flickr organizr earlier version of my yahoo!
progress indicator
![Page 206: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/206.jpg)
Moments Communicate
Speed up time.
Slow down time.
Focus attention.
Show relationships.
Show state change.
mint.com
the gap
flickr organizr earlier version of my yahoo!
progress indicator
![Page 207: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/207.jpg)
Be reactive.
![Page 208: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/208.jpg)
experiment on home page
![Page 209: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/209.jpg)
experiment on home page
dedicated area
![Page 210: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/210.jpg)
live feedback. wundrbar
Live Feedback
![Page 211: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/211.jpg)
live feedback. wundrbar
live feedback. flickr
Live Feedback
![Page 212: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/212.jpg)
live feedback. wundrbar
live feedback. flickr
live feedback. google maps
Live Feedback
![Page 213: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/213.jpg)
Create a tight feedback
loop with the user.
live feedback. wundrbar
live feedback. flickr
live feedback. google maps
Live Feedback
![Page 214: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/214.jpg)
live suggest. google (early version)
Live Suggest
![Page 215: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/215.jpg)
live suggest. google (early version) live suggest. yahoo search
Live Suggest
![Page 216: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/216.jpg)
live suggest. google (early version) live suggest. yahoo search
live suggest. early yahoo search experiment
Live Suggest
![Page 217: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/217.jpg)
Narrow toward a goal
rather than distract from it.
live suggest. google (early version) live suggest. yahoo search
live suggest. early yahoo search experiment
Live Suggest
![Page 218: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/218.jpg)
live preview. volkswagen car configurator
Live Previews
![Page 219: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/219.jpg)
live preview. volkswagen car configurator
live suggest. apple search
Live Previews
![Page 220: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/220.jpg)
Use live previews.
live preview. volkswagen car configurator
live suggest. apple search
Live Previews
![Page 221: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/221.jpg)
Live Filtering
refining search. bing tweets
![Page 222: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/222.jpg)
Live FilteringReduce search effort
with live filtering.
refining search. bing tweets
![Page 223: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/223.jpg)
Live Forms
live forms. yahoo! small business
![Page 224: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/224.jpg)
Live Forms
live forms. yahoo! small business
live forms. google account creation
![Page 225: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/225.jpg)
Live Forms
live forms. yahoo! small business
Prevent errors beforehand
with live forms.
live forms. google account creation
![Page 226: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/226.jpg)
Auto Complete
auto complete. kayak
![Page 227: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/227.jpg)
Auto Complete
Reduce user effort by
autocompleting correctly.
auto complete. kayak
![Page 228: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/228.jpg)
Input where you output.
Require a light footprint.
Maintain flow.
Invite interaction.
Show transitions.
Be reactive.
![Page 229: Designing for Interesting Moments](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa48760da3da068b7760/html5/thumbnails/229.jpg)
Flickr Creditshttp://tr.im/t6Ew
Presentationbillwscott.com/share/presentations/2009/ms
Bloglooksgoodworkswell.com
Web usernamebillwscott
Bookdesigningwebinterfaces.comO’Reilly