Digital Interaction

470 views

Published on

YMC
June 12, 2010

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
470
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Digital Interaction

  1. 1. Digital Interactions<br />When the world waves,<br />wave back.<br />Verne Ho<br />Darcy Clarke<br />
  2. 2. O, hai!<br />We’re humans first,<br />creators second.<br />Verne Ho<br />Partner, Producer, Creative Director<br />Darcy Clarke<br />Lead Developer<br />
  3. 3. Today<br />We create digital experiences<br />at Jet Cooper<br />
  4. 4. Give users what they want and what they expect<br />Even if they don’t know they want or expect it<br />
  5. 5. explore<br />blog<br />design<br />facebook<br />email<br />socialize<br />research<br />tweet<br />shop<br />share<br />read<br />watch videos<br />browse photos<br />network<br />chat<br />play games<br />write<br />learn<br />discover<br />youtube<br />
  6. 6. explore<br />blog<br />design<br />facebook<br />email<br />socialize<br />research<br />tweet<br />shop<br />experiences<br />share<br />read<br />watch videos<br />browse photos<br />network<br />chat<br />play games<br />write<br />learn<br />discover<br />youtube<br />
  7. 7. explore<br />sad<br />frustrated<br />hesitant<br />anxious<br />assured<br />intrigued<br />curious<br />convinced<br />emotions<br />doubtful<br />read<br />excited<br />confident<br />satisfied<br />happy<br />amused<br />accomplished<br />inspired<br />entertained<br />confused<br />
  8. 8. How the magic happens<br />The 3 pillars of user experience<br />User Interface (UI)<br />Usability<br />Interaction<br />
  9. 9. User Interface<br />The stuff you see <br />and touch<br />
  10. 10.
  11. 11. Usability<br />Ability to use(well)<br />
  12. 12.
  13. 13. Interaction<br />Action between 2 things<br />
  14. 14.
  15. 15. user experience<br />UI<br />Usability<br />Interaction<br />
  16. 16. user experience<br />UI<br />Usability<br />Interaction<br />
  17. 17. Interaction 101<br />When I move you move…<br />
  18. 18. What’s it mean?<br />And why’s this car on fire?<br />
  19. 19. Communication<br />Actions and reactions<br />{…}<br />:hover<br />
  20. 20. Examples of Events<br />Hover, Click, Submit and Gesture<br />
  21. 21. Hover<br />Nothing out of this world<br />
  22. 22. Click<br />Mouse down, mouse up<br />
  23. 23. Submit<br />Don’t put your users<br />to sleep<br />
  24. 24. Gestures<br />Feeling good<br />
  25. 25. 5 Rules of Interaction<br />An interaction should be…<br />
  26. 26. Consistent<br />Consistency breeds clarity<br />
  27. 27. Closing<br />Build dialog that brings closure on completion<br />
  28. 28. Fluid<br />Smooth, like a baby’s bottom<br />
  29. 29. Noticeable<br />Recognition without obtrusiveness<br />
  30. 30. Surprising (in a good way)<br />Give them what they want but didn’t realize they wanted<br />
  31. 31. All together now<br />How does this all apply?<br />
  32. 32. How most people think<br />UI then Usability then Interaction<br />UI<br />Usability<br />Interaction<br />
  33. 33. How people should think<br />( UI + Usability + Interaction )<br />UI<br />UI<br />UI<br />UI<br />Usability<br />Interaction<br />Usability<br />Interaction<br />Usability<br />Interaction<br />Usability<br />Interaction<br />
  34. 34. Pen + Paper<br />The big picture<br />
  35. 35. Wireframing<br />Experience blueprints<br />
  36. 36. Digital Comps<br />Eye candies<br />
  37. 37. Development<br />Let there be life<br />
  38. 38. How people should think<br />( UI + Usability + Interaction )<br />UI<br />UI<br />UI<br />UI<br />Usability<br />Interaction<br />Usability<br />Interaction<br />Usability<br />Interaction<br />Usability<br />Interaction<br />
  39. 39. If you only remember 4 things…<br />Remember these:<br />There are no right answers, just righter answers<br />Thinking is worth more than you think<br />Learn on your own, learn as you go<br />Start by looking at yourself<br />
  40. 40. Bug us<br />Here, there and everywhere<br />@verneho @darcy_clarke<br />verne@jetcooper.comdarcy@jetcooper.com<br />#jetcooper<br />hello@jetcooper.com<br />

×