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

6,094

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
6,094
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Make Your Users Boogie

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

×