Make Your Users BoogieDesign Gestures Like a ChoreographerDave Malouf         @daveixd           #uxlxBoogie
I’m a split personalityAnalytical            Emotional  Time                     Beauty  Abstraction              Aestheti...
MotionWhere it connects(for me)Dave Malouf         @daveixd   #uxlxBoogie
Gestures have been aroundDave Malouf   @daveixd   #uxlxBoogie
ElevatorhandleDave Malouf   @daveixd   #uxlxBoogie
And thenbuttonsDave Malouf   @daveixd   #uxlxBoogie
Other controls, too ...Dave Malouf   @daveixd    #uxlxBoogie
FeedbackThe full range ofmotion informssomeone as to theirprobable outcome.Dave Malouf           @daveixd   #uxlxBoogie
Dance & Percussion share anaesthetic of sound and motionDave Malouf   @daveixd    #uxlxBoogie
Stops vs.SlidesNeed to balance thislike consistency &contrast in visualdesignDave Malouf            @daveixd   #uxlxBoogie
Audience                 PerformerDave Malouf   @daveixd          #uxlxBoogie
The Posenever as good inreality as we imagineit in our headDave Malouf             @daveixd   #uxlxBoogie
SpinnerOutcome is purely known visually, but the motion andaudio makes the experience!Dave Malouf                  @daveix...
Playing musical instrumentsBalances all these piecesDave Malouf          @daveixd   #uxlxBoogie
Just so easyStrumming is lowprecision.Dave Malouf        @daveixd   #uxlxBoogie
Piano is precisionharder to learn; posture, yes; pose? not so muchDave Malouf          @daveixd            #uxlxBoogie
The front man9 times out of ten, thefront man is playing aguitar if anything.Dave Malouf           @daveixd   #uxlxBoogie
Keytar?All the rockin’ melodyof a guitar, andpercussive precisionof a keyboard.Dave Malouf              @daveixd   #uxlxBo...
Can this ever work?I mean besides the Gorilla arm issue.Dave Malouf          @daveixd           #uxlxBoogie
It’s not just about themovement ...The surfaces we are moving on or against has alot to do with the aesthetics of the gest...
Stops have their placeDave Malouf   @daveixd   #uxlxBoogie
A few examplesSo let’s look at an app w/ arguably great appealdue to its interesting use of novel gestures.Dave Malouf    ...
Pull to springCauses a get commandDave Malouf       @daveixd   #uxlxBoogie
Swipe to revealIt’s the new “right-click”Dave Malouf             @daveixd   #uxlxBoogie
Taps & SwipesTap causes reveals of secondary content; swipes then dismissit. Easy to find and now includes the “reset” gest...
2-finger pullReveals conversation without loss of context:2 fingers is arguably not intuitive, hard to discover.Dave Malouf ...
Reverse pinch revealTry it! It’s REALLY hard to do consistently.Dave Malouf            @daveixd                #uxlxBoogie
So how are we going to dothis stuff?It really is about goingback to basic design.  Experience  Externalize  Envision  Eval...
Gotta own it ...... minimum at least 1 touch-based device,hopefully 1 that you are designing for.Dave Malouf          @dav...
Sketch!Dave Malouf   @daveixd   #uxlxBoogie
Video PrototypeDave Malouf   @daveixd   #uxlxBoogie
Sketch!and sketch some more.Dave Malouf        @daveixd   #uxlxBoogie
Act it out!Paper prototypes, rock!Dave Malouf          @daveixd   #uxlxBoogie
Re-visualizeDave Malouf    @daveixd   #uxlxBoogie
ExperienceAgainDave Malouf   @daveixd   #uxlxBoogie
Be sure to bring the lovethe emotion, the fun, the expressiveness,responsiveness, etc.?Dave Malouf          @daveixd      ...
Thanx!David MaloufProfessor of IxDSCAD@daveixdhttp://davemalouf.com/dave.ixd@gmail.comDave Malouf              @daveixd   ...
Upcoming SlideShare
Loading in …5
×

Make Your Users Boogie

8,872 views
8,363 views

Published on

My talk at UXLX in 2012 advocating for attention to motion as an aesthetic concern in designing interfaces using gestural interactions.

2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
8,872
On SlideShare
0
From Embeds
0
Number of Embeds
3,337
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Make Your Users Boogie

  1. Make Your Users BoogieDesign Gestures Like a ChoreographerDave Malouf @daveixd #uxlxBoogie
  2. I’m a split personalityAnalytical Emotional Time Beauty Abstraction Aesthetics Metaphor Engagement StoryDave Malouf @daveixd #uxlxBoogie
  3. MotionWhere it connects(for me)Dave Malouf @daveixd #uxlxBoogie
  4. Gestures have been aroundDave Malouf @daveixd #uxlxBoogie
  5. ElevatorhandleDave Malouf @daveixd #uxlxBoogie
  6. And thenbuttonsDave Malouf @daveixd #uxlxBoogie
  7. Other controls, too ...Dave Malouf @daveixd #uxlxBoogie
  8. FeedbackThe full range ofmotion informssomeone as to theirprobable outcome.Dave Malouf @daveixd #uxlxBoogie
  9. Dance & Percussion share anaesthetic of sound and motionDave Malouf @daveixd #uxlxBoogie
  10. Stops vs.SlidesNeed to balance thislike consistency &contrast in visualdesignDave Malouf @daveixd #uxlxBoogie
  11. Audience PerformerDave Malouf @daveixd #uxlxBoogie
  12. The Posenever as good inreality as we imagineit in our headDave Malouf @daveixd #uxlxBoogie
  13. SpinnerOutcome is purely known visually, but the motion andaudio makes the experience!Dave Malouf @daveixd #uxlxBoogie
  14. Playing musical instrumentsBalances all these piecesDave Malouf @daveixd #uxlxBoogie
  15. Just so easyStrumming is lowprecision.Dave Malouf @daveixd #uxlxBoogie
  16. Piano is precisionharder to learn; posture, yes; pose? not so muchDave Malouf @daveixd #uxlxBoogie
  17. The front man9 times out of ten, thefront man is playing aguitar if anything.Dave Malouf @daveixd #uxlxBoogie
  18. Keytar?All the rockin’ melodyof a guitar, andpercussive precisionof a keyboard.Dave Malouf @daveixd #uxlxBoogie
  19. Can this ever work?I mean besides the Gorilla arm issue.Dave Malouf @daveixd #uxlxBoogie
  20. It’s not just about themovement ...The surfaces we are moving on or against has alot to do with the aesthetics of the gestures.Dave Malouf @daveixd #uxlxBoogie
  21. Stops have their placeDave Malouf @daveixd #uxlxBoogie
  22. A few examplesSo let’s look at an app w/ arguably great appealdue to its interesting use of novel gestures.Dave Malouf @daveixd #uxlxBoogie
  23. Pull to springCauses a get commandDave Malouf @daveixd #uxlxBoogie
  24. Swipe to revealIt’s the new “right-click”Dave Malouf @daveixd #uxlxBoogie
  25. Taps & SwipesTap causes reveals of secondary content; swipes then dismissit. Easy to find and now includes the “reset” gesture again.Dave Malouf @daveixd #uxlxBoogie
  26. 2-finger pullReveals conversation without loss of context:2 fingers is arguably not intuitive, hard to discover.Dave Malouf @daveixd #uxlxBoogie
  27. Reverse pinch revealTry it! It’s REALLY hard to do consistently.Dave Malouf @daveixd #uxlxBoogie
  28. So how are we going to dothis stuff?It really is about goingback to basic design. Experience Externalize Envision Evaluate ExecuteDave Malouf @daveixd #uxlxBoogie
  29. Gotta own it ...... minimum at least 1 touch-based device,hopefully 1 that you are designing for.Dave Malouf @daveixd #uxlxBoogie
  30. Sketch!Dave Malouf @daveixd #uxlxBoogie
  31. Video PrototypeDave Malouf @daveixd #uxlxBoogie
  32. Sketch!and sketch some more.Dave Malouf @daveixd #uxlxBoogie
  33. Act it out!Paper prototypes, rock!Dave Malouf @daveixd #uxlxBoogie
  34. Re-visualizeDave Malouf @daveixd #uxlxBoogie
  35. ExperienceAgainDave Malouf @daveixd #uxlxBoogie
  36. Be sure to bring the lovethe emotion, the fun, the expressiveness,responsiveness, etc.?Dave Malouf @daveixd #uxlxBoogie
  37. Thanx!David MaloufProfessor of IxDSCAD@daveixdhttp://davemalouf.com/dave.ixd@gmail.comDave Malouf @daveixd #uxlxBoogie

×