Make Your Users Boogie
7 likes7,429 views
The document discusses the importance of designing engaging gestures in user interfaces, comparing them to choreographed movements in dance and music. It emphasizes the connection between motion and feedback, and how different gestures can enhance user experience through intuitive interactions. The author shares practical design principles and encourages designers to iterate and prototype their ideas actively.
Make Your Users Boogie
- 1. Make Your Users Boogie Design Gestures Like a Choreographer Dave Malouf @daveixd #uxlxBoogie
- 2. I’m a split personality Analytical Emotional Time Beauty Abstraction Aesthetics Metaphor Engagement Story Dave Malouf @daveixd #uxlxBoogie
- 3. Motion Where it connects (for me) Dave Malouf @daveixd #uxlxBoogie
- 4. Gestures have been around Dave Malouf @daveixd #uxlxBoogie
- 5. Elevator handle Dave Malouf @daveixd #uxlxBoogie
- 6. And then buttons Dave Malouf @daveixd #uxlxBoogie
- 7. Other controls, too ... Dave Malouf @daveixd #uxlxBoogie
- 8. Feedback The full range of motion informs someone as to their probable outcome. Dave Malouf @daveixd #uxlxBoogie
- 9. Dance & Percussion share an aesthetic of sound and motion Dave Malouf @daveixd #uxlxBoogie
- 10. Stops vs. Slides Need to balance this like consistency & contrast in visual design Dave Malouf @daveixd #uxlxBoogie
- 11. Audience Performer Dave Malouf @daveixd #uxlxBoogie
- 12. The Pose never as good in reality as we imagine it in our head Dave Malouf @daveixd #uxlxBoogie
- 13. Spinner Outcome is purely known visually, but the motion and audio makes the experience! Dave Malouf @daveixd #uxlxBoogie
- 14. Playing musical instruments Balances all these pieces Dave Malouf @daveixd #uxlxBoogie
- 15. Just so easy Strumming is low precision. Dave Malouf @daveixd #uxlxBoogie
- 16. Piano is precision harder to learn; posture, yes; pose? not so much Dave Malouf @daveixd #uxlxBoogie
- 17. The front man 9 times out of ten, the front man is playing a guitar if anything. Dave Malouf @daveixd #uxlxBoogie
- 18. Keytar? All the rockin’ melody of a guitar, and percussive precision of 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 the movement ... The surfaces we are moving on or against has a lot to do with the aesthetics of the gestures. Dave Malouf @daveixd #uxlxBoogie
- 21. Stops have their place Dave Malouf @daveixd #uxlxBoogie
- 22. A few examples So let’s look at an app w/ arguably great appeal due to its interesting use of novel gestures. Dave Malouf @daveixd #uxlxBoogie
- 23. Pull to spring Causes a get command Dave Malouf @daveixd #uxlxBoogie
- 24. Swipe to reveal It’s the new “right-click” Dave Malouf @daveixd #uxlxBoogie
- 25. Taps & Swipes Tap causes reveals of secondary content; swipes then dismiss it. Easy to find and now includes the “reset” gesture again. Dave Malouf @daveixd #uxlxBoogie
- 26. 2-finger pull Reveals conversation without loss of context: 2 fingers is arguably not intuitive, hard to discover. Dave Malouf @daveixd #uxlxBoogie
- 27. Reverse pinch reveal Try it! It’s REALLY hard to do consistently. Dave Malouf @daveixd #uxlxBoogie
- 28. So how are we going to do this stuff? It really is about going back to basic design. Experience Externalize Envision Evaluate Execute Dave 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 Prototype Dave 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-visualize Dave Malouf @daveixd #uxlxBoogie
- 35. Experience Again Dave Malouf @daveixd #uxlxBoogie
- 36. Be sure to bring the love the emotion, the fun, the expressiveness, responsiveness, etc.? Dave Malouf @daveixd #uxlxBoogie
- 37. Thanx! David Malouf Professor of IxD SCAD @daveixd http://davemalouf.com/ [email protected] Dave Malouf @daveixd #uxlxBoogie