SlideShare a Scribd company logo
Designing for
Interesting
Moments
Bill Scott
Director, UI Engineering
Netflix

Microsoft - August 24, 2009
Me
Simple Interaction?
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+
Simple Interaction? Actors...



 Page. Cursor. Tool Tip. Drag
 Object. Drag Object’s Parent
   Container. Drop Target.


                                6+
Actors   Events




                  96
                  Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments
Interesting Moments
interaction (n).
mutual or
reciprocal action;
interacting
interaction.
interplay between
system and user
interaction.
interplay between
system and user
interaction.
interplay between
system and user
interaction.
sequence
tells a story
interactivity.
cyclic process
between two or
more active agents
in which each agent
alternatively
listens, thinks, and
speaks.

Chris Crawford
Interactive Storytelling
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
Interesting Moments
Captures minute interplay
Serves as tickler for nuances
Speaks to the possibilities
6 principles
6 principles
for designing interesting moments
wh ere
Input put.
     out
 you     - Ala
               n Co
                   oper
In Page Editing




inline editing. animoto.com
In Page Editing
                              Interesting 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
Analyzing the Moments
                        Not editing: Not editing:               Editing:    Editing:
                                                  Mouse clicks
            Page Render Mouse in Mouse exits                   Mouse exits Mouse click
                                                  in edit area
                         edit area    edit area                 edit area  elsewhere



 Cursor                   link cursor     normal       i-beam       normal       normal



                            dotted                     dotted
                                                                                 Saving...
            hidden edit     outline;     hidden edit   outline;
Edit Area                                                       solid outline   message;
               field       invitational      field        white
                                                                                new value
                              text                   background
Analyzing the Moments
                1
                        Not editing: Not editing:               Editing:    Editing:
                                                  Mouse clicks
            Page Render Mouse in Mouse exits                   Mouse exits Mouse click
                                                  in edit area
                         edit area    edit area                 edit area  elsewhere



 Cursor                   link cursor     normal       i-beam       normal       normal



                            dotted                     dotted
                                                                                 Saving...
            hidden edit     outline;     hidden edit   outline;
Edit Area                                                       solid outline   message;
               field       invitational      field        white
                                                                                new value
                              text                   background


1
Analyzing the Moments
                1             2
                        Not editing: Not editing:               Editing:    Editing:
                                                  Mouse clicks
            Page Render Mouse in Mouse exits                   Mouse exits Mouse click
                                                  in edit area
                         edit area    edit area                 edit area  elsewhere



 Cursor                   link cursor     normal       i-beam       normal       normal



                            dotted                     dotted
                                                                                 Saving...
            hidden edit     outline;     hidden edit   outline;
Edit Area                                                       solid outline   message;
               field       invitational      field        white
                                                                                new value
                              text                   background


1
2
Analyzing the Moments
                1             2                        3
                        Not editing: Not editing:               Editing:    Editing:
                                                  Mouse clicks
            Page Render Mouse in Mouse exits                   Mouse exits Mouse click
                                                  in edit area
                         edit area    edit area                 edit area  elsewhere



 Cursor                   link cursor     normal       i-beam       normal       normal



                            dotted                     dotted
                                                                                 Saving...
            hidden edit     outline;     hidden edit   outline;
Edit Area                                                       solid outline   message;
               field       invitational      field        white
                                                                                new value
                              text                   background


1
2
3
Analyzing the Moments
                1             2                        3 4
                        Not editing: Not editing:               Editing:    Editing:
                                                  Mouse clicks
            Page Render Mouse in Mouse exits                   Mouse exits Mouse click
                                                  in edit area
                         edit area    edit area                 edit area  elsewhere



 Cursor                   link cursor     normal       i-beam       normal       normal



                            dotted                     dotted
                                                                                 Saving...
            hidden edit     outline;     hidden edit   outline;
Edit Area                                                       solid outline   message;
               field       invitational      field        white
                                                                                new value
                              text                   background


1
2
3
4
Analyzing the Moments
                1             2                        3 4            5
                        Not editing: Not editing:               Editing:    Editing:
                                                  Mouse clicks
            Page Render Mouse in Mouse exits                   Mouse exits Mouse click
                                                  in edit area
                         edit area    edit area                 edit area  elsewhere



 Cursor                   link cursor     normal       i-beam       normal       normal



                            dotted                     dotted
                                                                                 Saving...
            hidden edit     outline;     hidden edit   outline;
Edit Area                                                       solid outline   message;
               field       invitational      field        white
                                                                                new value
                              text                   background


1
2
3
4
5
Analyzing the Moments
                1             2                        3 4            5          6
                        Not editing: Not editing:               Editing:    Editing:
                                                  Mouse clicks
            Page Render Mouse in Mouse exits                   Mouse exits Mouse click
                                                  in edit area
                         edit area    edit area                 edit area  elsewhere



 Cursor                   link cursor     normal       i-beam       normal       normal



                            dotted                     dotted
                                                                                 Saving...
            hidden edit     outline;     hidden edit   outline;
Edit Area                                                       solid outline   message;
               field       invitational      field        white
                                                                                new value
                              text                   background


1
2
3
4
5
6
Analyzing the Moments
                1             2                        3 4            5          6 7
                        Not editing: Not editing:               Editing:    Editing:
                                                  Mouse clicks
            Page Render Mouse in Mouse exits                   Mouse exits Mouse click
                                                  in edit area
                         edit area    edit area                 edit area  elsewhere



 Cursor                   link cursor     normal       i-beam       normal       normal



                            dotted                     dotted
                                                                                 Saving...
            hidden edit     outline;     hidden edit   outline;
Edit Area                                                       solid outline   message;
               field       invitational      field        white
                                                                                new value
                              text                   background


1
2
3
4
5
6
7
Refactoring the Moments
                         Not editing:                                         Editing:
                                      Not editing:               Editing:
                           Mouse                   Mouse clicks             Mouse click Editing: Click
             Page Render              Mouse exits               Mouse exits
                         enters edit               in edit area             outside edit Save Button
                                       edit area                 edit area
                            area                                               area



 Cursor                     link cursor     normal       i-beam       normal       normal       normal



                              dotted                     dotted
                                                                                   Saving...    Saving...
             hint at edit     outline;     hidden edit   outline;
Edit Area                                                         solid outline   message;     message;
                field        invitational      field        white
                                                                                  new value    new value
                                text                   background


                                                       Show Save/                              Hide Save/
Buttons?                                                 Cancel                                  Cancel
                                                         buttons                                buttons



              Show edit
Edit Link?
                link?
In Page Editing




inline editing. fickr.com
In Page Editing




inline editing. fickr.com



Additions:

•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons
In Page Editing
                                                o
                                Pay attention t
                                             ity
                                discoverabil




inline editing. fickr.com



Additions:

•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons
In Page Editing
                                                o
                                Pay attention t
                                             ity
                                discoverabil




inline editing. fickr.com
                                Use a clear
                                “c all to action”
Additions:

•Yellow spotlight/invitation
•Tooltip invitation
•Explicit Save/Cancel buttons
anti-pattern. non-symmetrical. iphone
anti-pattern. non-symmetrical. iphone
anti-pattern. non-symmetrical. iphone
anti-pattern. non-symmetrical. iphone



                                        symmetrical interaction. basecamp
anti-pattern. non-symmetrical. iphone



                                        symmetrical interaction. basecamp
&
                               Keep activation         al
                               deactivatio n symmetric




anti-pattern. non-symmetrical. iphone



                                             symmetrical interaction. basecamp
Drag, Open & Drop




drag and drop. gmail
Drag, Open & Drop
                       Mouse hover & initiation
                       Anti-pattern: Tiny Targets




                       Drop accepted
                       What happened?
                       Collapses immediately.




drag and drop. gmail
Drag, Open & Drop
                       Mouse hover & initiation
                       Anti-pattern: Tiny Targets



                       Reduce physical effort.



                       Drop accepted
                       What happened?
                       Collapses immediately.




drag and drop. gmail
Drag, Open & Drop
                       Mouse hover & initiation
                       Anti-pattern: Tiny Targets



                       Reduce physical effort.



                       Drop accepted
                       What happened?
                       Collapses immediately.



                       Reduce m ental effort.

drag and drop. gmail
anti-pattern. artificial construct.
rate an object. netflix.com



anti-pattern. artificial construct.
No artificia l constructs!




                                     rate an object. netflix.com



anti-pattern. artificial construct.
re a int.
    qui tpr
Re foo
li ght
In Page Actions (always visible)



                       original digg site. digg.com 1.0
In Page Actions (always visible)



                       original digg site. digg.com 1.0
In Page Actions (always visible)



                       original digg site. digg.com 1.0




                             in-page action. digg.com
In Page Actions (always visible)



                       original digg site. digg.com 1.0




                             in-page action. digg.com
In Page Actions (always visible)



                                original digg site. digg.com 1.0



                 ary actions.
    Use for prim


                                      in-page action. digg.com
In Page Actions (always visible)
in-page action. digg.com
In Page Actions (always visible)
in-page action. digg.com   rating an object. y!news, netflix
In Page Actions (always visible)
in-page action. digg.com   rating an object. y!news, netflix




                           rating an object. y!movies, y!answers
In Page Actions (always visible)
in-page action. digg.com          rating an object. y!news, netflix




remembered collections. gap.com




                                  rating an object. y!movies, y!answers
In Page Actions (always visible)
in-page action. digg.com                                                      rating an object. y!news, netflix




                                                               t.”
                                               he “click weigh
                               Use to reduce t
                                       •# of interaction steps
                                       •Decision time
                                       •Seek time
                                       •Second guessing
                                       •Wait time

remembered collections. gap.com




http://genesisconduit.wordpress.com/2008/07/13/click-weight/                  rating an object. y!movies, y!answers
http://www.amazon.com/Designing-Both-Sides-Screen-Collaborate/dp/0672321513
Contextual Tools (inline on hover)




contextual tool menu. flickr.com
Contextual Tools (inline on hover)




contextual tool menu. flickr.com




contextual tool actions. backpackit
Contextual Tools (inline on hover)

                                                                ns
                                      Use for sec ondary actio
                                                               ity.
                                      or to prese rve readabil



contextual tool menu. flickr.com




contextual tool actions. backpackit
Contextual Tools (overlay on hover)




contextual tool overlay. bing.com
Contextual Tools (overlay on hover)

                                                                    ctivity.
                                              readab ility & intera
                                    Balance




contextual tool overlay. bing.com
Anti-Pattern: Hover & Cover




anti-pattern. hover & cover. yahoo! teachers
Anti-Pattern: Hover & Cover
                                                                      Mouse          Mouse
                                                             Page                                  Tool
                                                                       over        leaves tool               In Progress   Complete
                                                            Render                               selected
                                                                      object          layer



                                                 Cursor              link cursor




                                                                     Wrapped        Normal       Normal
                                               Actionable
                                                                      by tool       display      display
                                                 Object
                                                                       layer        mode         mode




                                               Contextual            Show tool     Hide tool     Hide tool
                                                 Tools                 layer         layer         layer




anti-pattern. hover & cover. yahoo! teachers
Anti-Pattern: Hover & Cover
                                                                      Mouse          Mouse
                                                             Page                                  Tool
                                                                       over        leaves tool               In Progress   Complete
                                                            Render                               selected
                                                                      object          layer


                                        ext
                      Don’t obscure contCursor                       link cursor
                                    .
                      o r navigation
                                                                     Wrapped        Normal       Normal
                                               Actionable
                                                                      by tool       display      display
                                                 Object
                                                                       layer        mode         mode




                                               Contextual            Show tool     Hide tool     Hide tool
                                                 Tools                 layer         layer         layer




anti-pattern. hover & cover. yahoo! teachers
Hover & Cover Refactored




hover & cover resolved. y! teachers
Hover & Cover Refactored




hover & cover resolved. y! teachers
Contextual Tools (overlay on hover)




hover details. linkedin.com
Contextual Tools (overlay on hover)
                                                     uld
                              Hover a  ctivation sho
                                                lay
                              be 1 /2 second de




hover details. linkedin.com
Contextual Tools (overlay on hover)
                                                     uld
                              Hover a  ctivation sho
                                                lay
                              be 1 /2 second de


                              Time-based         y.
                              targeting is trick




hover details. linkedin.com
Contextual Tools (overlay on hover)
                                                     uld
                              Hover a  ctivation sho
                                                lay
                              be 1 /2 second de


                              Time-based         y.
                              targeting is trick


                              Mouse path          .
                              targe ting is tricky

hover details. linkedin.com
anti-pattern. double duty. amazon.com
Hover: shows contextual
         tool overlay.
         Click: goes to details page.




anti-pattern. double duty. amazon.com
Hover: shows contextual
                      tool overlay.
                      Click: goes to details page.




             anti-pattern. double duty. amazon.com




                l.
Do one thing wel
Contextual Tools (overlay on click)




google maps
Contextual Tools (overlay on click)




google maps




                                 bing.com
Contextual Tools (overlay on click)




google maps




                                 bing.com




              everyblock.com
Contextual Tools (overlay on click)



                                  ol
              Open c ontextual to
                                   k.
                    ys with a clic
google maps

              overla


                                        bing.com




              everyblock.com
What about new Yahoo page?




embedded application overlay - hover activated. yahoo.com 2009
What about new Yahoo page?




                                   Overlay stays
                                   open.




embedded application overlay - hover activated. yahoo.com 2009
What about new Yahoo page?




                                   Overlay stays
                                   open.




                  On mouse hover/delay
                  switches to new app.




embedded application overlay - hover activated. yahoo.com 2009
What about new Yahoo page?
                                  Mouse exits.
                                 Overlay closes.




                                   Overlay stays
                                   open.




                  On mouse hover/delay
                  switches to new app.




embedded application overlay - hover activated. yahoo.com 2009
What about new Yahoo page?
                                  Mouse exits.
                                 Overlay closes.         The good?
                                                         • Doesn’t obscure other navigation.
                                                         • Doesn’t collapse erratically.




                                   Overlay stays
                                   open.




                  On mouse hover/delay
                  switches to new app.




embedded application overlay - hover activated. yahoo.com 2009
What about new Yahoo page?
                                  Mouse exits.
                                 Overlay closes.         The good?
                                                         • Doesn’t obscure other navigation.
                                                         • Doesn’t collapse erratically.

                                                          The not so good?
                                                          • Activation delay feels sluggish
                                                            (however delay is necessary).
                                                          • Not all menus activate a panel.
                                                          • Accidental triggering
                                                            (result in obscuring content).
                                   Overlay stays
                                                          • Gigantic overlays activated by hover
                                   open.




                  On mouse hover/delay
                  switches to new app.




embedded application overlay - hover activated. yahoo.com 2009
What about new Yahoo page?
                                 Mouse exits.
                                Overlay closes.         The good?
                                                        • Doesn’t obscure other navigation.
                                                        • Doesn’t collapse erratically.

                                                        The not so good?
                                                        • Activation delay feels sluggish
                                                          (however delay is necessary).
                                                        • Not all menus activate a panel.
                                                        • Accidental triggering
                                                          (result in obscuring content).
                                  Overlay stays
                                                        • Gigantic overlays activated by hover
                                  open.




                  On mouse hover/delay
                  switches to new app.




                                                         See also: Jakob Nielsen’s research on
embedded application overlay - hover activated. yahoo.com“Mega Menus”: http://tr.im/twnC
                                                          2009
in flow.
Mainta
Exploratorium Exhibit
Spot the differences
Spot the differences
Now try again...
Now try again...
Now try again...
                                e.
          oments wi thin the pag
Keep the m
epage.
            me nts within th
Keep the mo
Overlays




hover details. netflix.com




                            hover dialog. netflix.com
Overlays




hover details. netflix.com




                            hover dialog. netflix.com
Overlays
                                              o
                            Wait 1/2 second t
                                                  s.
                            activate hover detail




hover details. netflix.com




                                         hover dialog. netflix.com
Overlays
                                              o
                            Wait 1/2 second t
                                                  s.
                            activate hover detail



     Immediately
                    ver
     d eactivate ho
      details on mouse exit.
hover details. netflix.com




                                         hover dialog. netflix.com
Overlays
                                              o
                            Wait 1/2 second t
                                                  s.
                            activate hover detail



     Immediately
                    ver
     d eactivate ho
      details on mouse exit.
                                                                            re
hover details. netflix.com
                                                   Change con  text or captu
                                                                          .
                                                   flow in o verlay dialog




                                         hover dialog. netflix.com
Anti-Pattern: Idiot Boxes




anti-pattern. idiot box. yelp.com
Anti-Pattern: Idiot Boxes




anti-pattern. idiot box. yahoo! photos
Anti-Pattern: Idiot Boxes


                                                  s
                                   h e proceeding
                     “Don’t stop t
                                   - Alan Cooper
                     with idiocy.”




anti-pattern. idiot box. yahoo! photos
Overlays: Hover Initiated




anti-pattern. shifting overlay. ui-patterns.com
Overlays: Hover Initiated




anti-pattern. shifting overlay. ui-patterns.com   better implementation of shifting overlay. instructables
Overlays: Hover Initiated




anti-pattern. shifting overlay. ui-patterns.com   better implementation of shifting overlay. instructables




                                                                       anti-pattern. shifting overlay. wikirank
Overlays: Hover Initiated


                                          ouse                     .
                          ot follow the m
       Over lays should n




anti-pattern. shifting overlay. ui-patterns.com   better implementation of shifting overlay. instructables




                                                                       anti-pattern. shifting overlay. wikirank
Inlays




click activated inlay. roost.com
Inlays

                                   g
             Use inl ays for stron
                                      .
             contextua  l association



click activated inlay. roost.com
Inlays

                                   g
             Use inl ays for stron
                                      .
             contextua  l association



click activated inlay. roost.com




hover activated accordian. nasa.gov
Inlays

                                   g
             Use inl ays for stron
                                      .
                        l association
                                          hover activated accordian. brown.edu
             contextua


click activated inlay. roost.com




hover activated accordian. nasa.gov
Inlays

                                   g
             Use inl ays for stron
                                      .
                        l association
                                          hover activated accordian. brown.edu
             contextua


click activated inlay. roost.com




hover activated accordian. nasa.gov              hover activated accordian. apple.com
Inlays

                                   g
             Use inl ays for stron
                                      .
                        l association
                                          hover activated accordian. brown.edu
             contextua


click activated inlay. roost.com




                                     k,
           Activate in lays with clic
           not hover.




hover activated accordian. nasa.gov              hover activated accordian. apple.com
ch
Don’t infer too mu
about the  user’s intent
                    er.
from  a mouse hov
Virtual Space




endless scrolling. bing.com
Virtual Space




                              carousel. paging. gallery. bing.com




endless scrolling. bing.com
Virtual Space



                                    e.
               Consider the backstag




                                         carousel. paging. gallery. bing.com




endless scrolling. bing.com
Seamless Context
         you are here. idea.org
Seamless Context
         you are here. idea.org




         seamless paging. magcloud
Seamless Context  you are here. idea.org




                  ext
   M aintain cont
                .
   across pages




                  seamless paging. magcloud
Nav Bars: Extend the moment



                                       nav status bar. thesixtyone.com




nav status bar. facebook.com
                               nav status bar. digg.com
Nav Bars: Extend the moment



                                       nav status bar. thesixtyone.com




nav status bar. facebook.com
                               nav status bar. digg.com
Nav Bars: Extend the moment



                                                       nav status bar. thesixtyone.com
                                                       .
                               ain context across pages
                   Maint


nav status bar. facebook.com
                                               nav status bar. digg.com
acti on.
      e in ter
In vit
http://dustincurtis.com/images/twitter/green_spill.jpg
http://dustincurtis.com/images/twitter/green_spill.jpg
http://dustincurtis.com/images/twitter/green_spill.jpg
http://dustincurtis.com/images/twitter/green_spill.jpg
all to action.
                  Use a clear c

http://dustincurtis.com/images/twitter/green_spill.jpg
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




              anti-pattern. no clear action. bing.com
Anti-Pattern: No clear action




                             tion   .
     Use a cl ear call to ac




                         anti-pattern. no clear action. bing.com
Hover Invitations
hover invitation. y!movies
Hover Invitations
hover invitation. y!movies




tooltip, hover & cursor invitation. flickr.com
Hover Invitations
hover invitation. y!movies                  hover & tool invitation. backpackit




tooltip, hover & cursor invitation. flickr.com
Hover Invitations
hover invitation. y!movies                  hover & tool invitation. backpackit




                                                                         h
                                                Aid discov erability wit
                                                hover  invitations.



tooltip, hover & cursor invitation. flickr.com
Blank Slate Invitation




dog-ear invitation. login.yahoo.com
Blank Slate Invitation




                                      fill-in-the-blanks invitation. netflix

dog-ear invitation. login.yahoo.com
Blank Slate Invitation




                                      fill-in-the-blanks invitation. netflix

dog-ear invitation. login.yahoo.com




                                      blank-slate invitation. backpackit
Blank Slate Invitation


                                      for
                  Recycle blank areas      .
                              our features
                  promoting y



                                      fill-in-the-blanks invitation. netflix

dog-ear invitation. login.yahoo.com




                                      blank-slate invitation. backpackit
Tour Invitation




tour invitation. gmail
Tour Invitation




                         tour invitation. yahoo.com


tour invitation. gmail
Tour Invitation




                                          tour invitation. yahoo.com


                         Use new visits to
                                             es.
                                e new featur
tour invitation. gmail
                         promot
Drag & Drop Invitation




drag invitation. google maps   drag invitation. google maps
Drag & Drop Invitation



                                                     drop invitation. google maps




drag invitation. google maps   drag invitation. google maps
Drag & Drop Invitation


                                                     s.
                               Mind y our moment                 drop invitation. google maps




drag invitation. google maps               drag invitation. google maps
Prompt Invitation


facebook.com
Prompt Invitation


facebook.com
Prompt Invitation


facebook.com




delicious.com
Prompt Invitation

                                         s
                             s or command
                Use question
facebook.com


                                   t.
                to pro mpt for inpu




delicious.com
button. the gap
button. the gap
hyperlink. backpackit




button. the gap
hyperlink. backpackit




button. the gap
hyperlink. backpackit




button. the gap




                  drop down arrow. flickr
hyperlink. backpackit




button. the gap




                  drop down arrow. flickr
hyperlink. backpackit



                                         n
button. the gap   Bridge n ew interactio     s.
                               amiliar idiom
                  styles with f




                                           drop down arrow. flickr
itio ns.
        ans
Show tr
anti-pattern. needless fanfare. macintosh turbo tax
anti-pattern. needless fanfare. macintosh turbo tax




again in slow-motion...
anti-pattern. needless fanfare. macintosh turbo tax




again in slow-motion...
anti-pattern. needless fanfare. macintosh turbo tax




                                             Always qu estion “why”
                                                                     .
                                             when usin g transitions
again in slow-motion...
Attention processing is
hard-wired into the brain

It is chemistry. You can’t
help it.
Attention processing is
                             hard-wired into the brain

             lp looking at   It is chemistry. You can’t
You can’t he          ads
“dancing” mortgage           help it.
anti-pattern. needless fanfare. roost.com




                                            Designing Visual Interfaces. Kevin Mullet & Darrell Sano
anti-pattern. needless fanfare. roost.com




anti-pattern. needless fanfare. nasa.gov
                                            Designing Visual Interfaces. Kevin Mullet & Darrell Sano
anti-pattern. needless fanfare. pbs.org
anti-pattern. needless fanfare. roost.com




anti-pattern. needless fanfare. nasa.gov
                                                                                      Designing Visual Interfaces. Kevin Mullet & Darrell Sano
anti-pattern. needless fanfare. pbs.org
anti-pattern. needless fanfare. roost.com
                                                                                    b.
                                                                    n  imation kno
                                                       Imagine an a                y.
                                                                    a tion carefull
                                                       Dial in anim




anti-pattern. needless fanfare. nasa.gov
                                                                                      Designing Visual Interfaces. Kevin Mullet & Darrell Sano
original. animation on drop. my yahoo!
original. animation on drop. my yahoo!




                                         current. no animation on drop. my yahoo!
original. animation on drop. my yahoo!



                       alf”
  Use the “cut it in-h
               b.
  rule of thum

                                         current. no animation on drop. my yahoo!
Moments Communicate
Moments Communicate



             progress indicator
Moments Communicate


                                  Speed up time.

             progress indicator
Moments Communicate


                                        Speed up time.

             progress indicator




             earlier version of my yahoo!
Moments Communicate


                                        Speed up time.

             progress indicator



                                                         .
                                       Slow down time




             earlier version of my yahoo!
Moments Communicate

mint.com


                                        Speed up time.

             progress indicator



                                                         .
                                       Slow down time




             earlier version of my yahoo!
Moments Communicate
                             .
           Show state change

mint.com


                                                            Speed up time.

                                 progress indicator



                                                                             .
                                                           Slow down time




                                 earlier version of my yahoo!
Moments Communicate
                             .
           Show state change

mint.com


                                                            Speed up time.

                                 progress indicator



                                                                             .
                                                           Slow down time




the gap




                                 earlier version of my yahoo!
Moments Communicate
                              .
            Show state change

mint.com


                                                             Speed up time.
                          hips.
           Sh ow relations
                                  progress indicator



                                                                              .
                                                            Slow down time




the gap




                                  earlier version of my yahoo!
Moments Communicate
                                    .
                  Show state change

mint.com


                                                                   Speed up time.
                                hips.
                 Sh ow relations
                                        progress indicator



                                                                                    .
                                                                  Slow down time




the gap




flickr organizr                          earlier version of my yahoo!
Moments Communicate
                                    .
                  Show state change

mint.com


                                                                     Speed up time.
                                hip  s.
                 Sh ow relations
                                          progress indicator



                                                                                      .
                                                                    Slow down time




the gap




                              ion.
                 Focus attent

flickr organizr                            earlier version of my yahoo!
active.
    e
Be r
experiment on home page
experiment on home page




dedicated area
Live Feedback




live feedback. wundrbar
Live Feedback



                          live feedback. flickr




live feedback. wundrbar
Live Feedback



                          live feedback. flickr




live feedback. wundrbar   live feedback. google maps
Live Feedback
                         k
  Create a t ight feedbac
  loop w ith the user.


                             live feedback. flickr




live feedback. wundrbar      live feedback. google maps
Live Suggest




live suggest. google (early version)
Live Suggest




live suggest. google (early version)   live suggest. yahoo search
Live Suggest




live suggest. google (early version)          live suggest. yahoo search

live suggest. early yahoo search experiment
Live Suggest




live suggest. google (early version)          live suggest. yahoo search

live suggest. early yahoo search experiment
                                                                                 l
                                                           Narrow  toward a goa          .
                                                                       dis tract from it
                                                           rather than
Live Previews




live preview. volkswagen car configurator
Live Previews




live preview. volkswagen car configurator




                                           live suggest. apple search
Live Previews




live preview. volkswagen car configurator




                                 ws.
                Us e live previe


                                           live suggest. apple search
Live Filtering




refining search. bing tweets
Live Filtering
                              Reduce   search effort
                                                 g.
                              wit h live filterin




refining search. bing tweets
Live Forms

live forms. yahoo! small business
Live Forms

live forms. yahoo! small business




live forms. google account creation
Live Forms

                                                                and
live forms. yahoo! small business
                                      Prevent er   rors beforeh
                                                        .
                                      wi th live forms



live forms. google account creation
Auto Complete




auto complete. kayak
Auto Complete

                                           by
                       Reduc e user effort    tly.
                       autocompl eting correc




auto complete. kayak
Input where you output.

                                          Maintain flow.




      Require a light footprint.




                                       Invite interaction.



       Show transitions.




                                   Be reactive.
Flickr Credits
http://tr.im/t6Ew


Presentation
billwscott.com/share/
presentations/2009/ms

Blog
looksgoodworkswell.com

Web username
billwscott

        Book
        designingwebinterfaces.com
        O’Reilly

More Related Content

What's hot

Travelling salesman problem using genetic algorithms
Travelling salesman problem using genetic algorithms Travelling salesman problem using genetic algorithms
Travelling salesman problem using genetic algorithms
Shivank Shah
 
Heuristics Search Techniques in AI
Heuristics Search Techniques in AI Heuristics Search Techniques in AI
Heuristics Search Techniques in AI
Bharat Bhushan
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
Alan Dix
 
Nature-Inspired Optimization Algorithms
Nature-Inspired Optimization Algorithms Nature-Inspired Optimization Algorithms
Nature-Inspired Optimization Algorithms
Xin-She Yang
 
HCI - Chapter 6
HCI - Chapter 6HCI - Chapter 6
HCI - Chapter 6
Alan Dix
 
Mobile 2.0
Mobile 2.0Mobile 2.0
Mobile 2.0
Lifna C.S
 
Genetic algorithm
Genetic algorithmGenetic algorithm
Genetic algorithm
garima931
 
HCI 3e - Ch 15: Task analysis
HCI 3e - Ch 15:  Task analysisHCI 3e - Ch 15:  Task analysis
HCI 3e - Ch 15: Task analysis
Alan Dix
 
Fisherfaces Face Recognition Algorithm
Fisherfaces Face Recognition AlgorithmFisherfaces Face Recognition Algorithm
Fisherfaces Face Recognition Algorithm
Vishnu K N
 
AI Greedy & A* Informed Search Strategies by Example
AI Greedy & A* Informed Search Strategies by ExampleAI Greedy & A* Informed Search Strategies by Example
AI Greedy & A* Informed Search Strategies by Example
Ahmed Gad
 
Genetic Algorithms
Genetic AlgorithmsGenetic Algorithms
Genetic Algorithms
Shruti Railkar
 
Finite Automata in compiler design
Finite Automata in compiler designFinite Automata in compiler design
Finite Automata in compiler design
Riazul Islam
 
Human Computer Interaction - INPUT OUTPUT CHANNELS
Human Computer Interaction - INPUT OUTPUT CHANNELSHuman Computer Interaction - INPUT OUTPUT CHANNELS
Human Computer Interaction - INPUT OUTPUT CHANNELS
International Institute of Information Technology (I²IT)
 
Computability and Complexity
Computability and ComplexityComputability and Complexity
Computability and Complexity
Edward Blurock
 
Ilsvrc2015 deep residual_learning_kaiminghe
Ilsvrc2015 deep residual_learning_kaimingheIlsvrc2015 deep residual_learning_kaiminghe
Ilsvrc2015 deep residual_learning_kaiminghe
pramod naik
 
Memetic algorithms
Memetic algorithmsMemetic algorithms
Memetic algorithms
MohammedAlKazal
 
bat algorithm
bat algorithmbat algorithm
bat algorithm
Ahmed Fouad Ali
 
Knapsack Problem
Knapsack ProblemKnapsack Problem
Knapsack Problem
Jenny Galino
 
User Experience Design Heuristics
User Experience Design HeuristicsUser Experience Design Heuristics
User Experience Design Heuristics
Nathanael Boehm
 
Artificial intelligence agents and environment
Artificial intelligence agents and environmentArtificial intelligence agents and environment
Artificial intelligence agents and environment
Minakshi Atre
 

What's hot (20)

Travelling salesman problem using genetic algorithms
Travelling salesman problem using genetic algorithms Travelling salesman problem using genetic algorithms
Travelling salesman problem using genetic algorithms
 
Heuristics Search Techniques in AI
Heuristics Search Techniques in AI Heuristics Search Techniques in AI
Heuristics Search Techniques in AI
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
Nature-Inspired Optimization Algorithms
Nature-Inspired Optimization Algorithms Nature-Inspired Optimization Algorithms
Nature-Inspired Optimization Algorithms
 
HCI - Chapter 6
HCI - Chapter 6HCI - Chapter 6
HCI - Chapter 6
 
Mobile 2.0
Mobile 2.0Mobile 2.0
Mobile 2.0
 
Genetic algorithm
Genetic algorithmGenetic algorithm
Genetic algorithm
 
HCI 3e - Ch 15: Task analysis
HCI 3e - Ch 15:  Task analysisHCI 3e - Ch 15:  Task analysis
HCI 3e - Ch 15: Task analysis
 
Fisherfaces Face Recognition Algorithm
Fisherfaces Face Recognition AlgorithmFisherfaces Face Recognition Algorithm
Fisherfaces Face Recognition Algorithm
 
AI Greedy & A* Informed Search Strategies by Example
AI Greedy & A* Informed Search Strategies by ExampleAI Greedy & A* Informed Search Strategies by Example
AI Greedy & A* Informed Search Strategies by Example
 
Genetic Algorithms
Genetic AlgorithmsGenetic Algorithms
Genetic Algorithms
 
Finite Automata in compiler design
Finite Automata in compiler designFinite Automata in compiler design
Finite Automata in compiler design
 
Human Computer Interaction - INPUT OUTPUT CHANNELS
Human Computer Interaction - INPUT OUTPUT CHANNELSHuman Computer Interaction - INPUT OUTPUT CHANNELS
Human Computer Interaction - INPUT OUTPUT CHANNELS
 
Computability and Complexity
Computability and ComplexityComputability and Complexity
Computability and Complexity
 
Ilsvrc2015 deep residual_learning_kaiminghe
Ilsvrc2015 deep residual_learning_kaimingheIlsvrc2015 deep residual_learning_kaiminghe
Ilsvrc2015 deep residual_learning_kaiminghe
 
Memetic algorithms
Memetic algorithmsMemetic algorithms
Memetic algorithms
 
bat algorithm
bat algorithmbat algorithm
bat algorithm
 
Knapsack Problem
Knapsack ProblemKnapsack Problem
Knapsack Problem
 
User Experience Design Heuristics
User Experience Design HeuristicsUser Experience Design Heuristics
User Experience Design Heuristics
 
Artificial intelligence agents and environment
Artificial intelligence agents and environmentArtificial intelligence agents and environment
Artificial intelligence agents and environment
 

More from Bill Scott

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup Ethos
Bill Scott
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bill Scott
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partner
Bill Scott
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to Life
Bill Scott
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
Bill Scott
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013
Bill Scott
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
Bill Scott
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Bill Scott
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX Teams
Bill Scott
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
Bill Scott
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JS
Bill Scott
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building Experiences
Bill Scott
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypal
Bill Scott
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech Stack
Bill Scott
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-Patterns
Bill Scott
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
Bill Scott
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
Bill Scott
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to Life
Bill Scott
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
Bill Scott
 
Back To The Future
Back To The FutureBack To The Future
Back To The Future
Bill Scott
 

More from Bill Scott (20)

Keeping a Startup Ethos
Keeping a Startup EthosKeeping a Startup Ethos
Keeping a Startup Ethos
 
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - AustraliaBringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
Bringing Change to Life | YOW 2016 | Melbourne, Brisbane, Sydney - Australia
 
Lean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partnerLean Engineering: How to make Engineering a full Lean UX partner
Lean Engineering: How to make Engineering a full Lean UX partner
 
Bringing Change to Life
Bringing Change to LifeBringing Change to Life
Bringing Change to Life
 
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
6 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013
 
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
8 Principles for Enabling Build/Measure/Learn: Lean Engineering in Action
 
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypalClash of the Titans: Releasing the Kraken | NodeJS @paypal
Clash of the Titans: Releasing the Kraken | NodeJS @paypal
 
Anti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX TeamsAnti-Patterns that Stifle Lean UX Teams
Anti-Patterns that Stifle Lean UX Teams
 
Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)Real World Lessons Using Lean UX (Workshop)
Real World Lessons Using Lean UX (Workshop)
 
Kicking Up the Dust with Node JS
Kicking Up the Dust with Node JSKicking Up the Dust with Node JS
Kicking Up the Dust with Node JS
 
Lean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building ExperiencesLean Engineering. Applying Lean Principles to Building Experiences
Lean Engineering. Applying Lean Principles to Building Experiences
 
Enabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypalEnabling Lean with Tech: lessons learned applying lean at paypal
Enabling Lean with Tech: lessons learned applying lean at paypal
 
The Lean Tech Stack
The Lean Tech StackThe Lean Tech Stack
The Lean Tech Stack
 
Lean UX Anti-Patterns
Lean UX Anti-PatternsLean UX Anti-Patterns
Lean UX Anti-Patterns
 
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
 
DHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code CampDHTML Prototyping: Silicon Valley Code Camp
DHTML Prototyping: Silicon Valley Code Camp
 
Bringing Design to Life
Bringing Design to LifeBringing Design to Life
Bringing Design to Life
 
Designing Web Interfaces
Designing Web InterfacesDesigning Web Interfaces
Designing Web Interfaces
 
Back To The Future
Back To The FutureBack To The Future
Back To The Future
 

Recently uploaded

一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
i990go7o
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
kmzsy4kn
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
etls06p8
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
stgq9v39
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 

Recently uploaded (20)

一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
一比一原版(UW毕业证书)华盛顿大学毕业证如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
一比一原版(CSUEB毕业证)美国加州州立大学东湾分校毕业证如何办理
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 

Designing for Interesting Moments