Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Interaction design do’s & don’ts<br />harish sivaramakrishnan<br />computer scientist & evangelist<br />Adobe Systems<br />
experience matters!<br />
Interaction design<br />The 5 demandments.<br />
beautiful<br />
fast & agile<br />
expressive<br />
accessible<br />
everywhere!<br />
Flexibility is key.<br />
RIA !=Jazzy (?)<br />
Don’t take users for granted.<br />Incorrect: I know my users, they will eventually come to terms with my UI / UX<br />
Workflow is not the only King!<br />Incorrect: Interaction design *only* if I have time.<br />
HTML has Pages<br />RIA’s Don’t! Hence, If your interaction design means page migration. Press the panic button. Now!<br />
Animations are nice.<br />Only when relevant. Don’t re-invent skip intros<br />
bad design and programming are<br />technology agnostic.<br />
exhibit A for<br />bad design and programming are<br />technology agnostic.<br />http://bouncebargainrentals.com/<br />
exhibit B for<br />bad design and programming are<br />technology agnostic.<br />http://www.html5zombo.com/<br />
DO:<br />Make a design that concurs to the demandments<br />DON’T<br />Rehash your existing design with a new technology.<...
DO:<br />Keep in mind the multiple form factors your app needs to work on.<br />DON’T<br />Build hard wired layouts, whene...
DO:<br />Small devices need larger clickable areas. Design your controls for that.<br />DON’T<br />Hard port your Web UI t...
DO:<br />Give haptic feedback, wherever necessary<br />DON’T<br />Do random things in the name of haptic feedback<br />
DO:<br />Use your creative freedom keeping your end user in mind. <br />DON’T<br />Invent knee-jerk patterns. <br />
DO:<br />Maintain the identity of a control while creating experiences around it. <br />DON’T<br />Make buttons look like ...
DO:<br />More in one place. Use the states metaphor. <br />DON’T<br />Make an app that looks like a  <frameset>, that’s oh...
let’s fix our part first.<br />before we blame the technology.<br />
let’s differentiate between<br />“can” and “should”.<br />
let’s differentiate between<br />“want” and “need”.<br />
While making technology choices,<br />let’s not take sides.<br />remember, their battle is not our battle.<br />
questions?<br />
email: hsivaram@adobe.com<br />twitter: @hsivaramweb: http://blog.flexgeek.in<br />
Upcoming SlideShare
Loading in …5
×

Interaction design Do's & Dont's

4,570 views

Published on

Presented at Adobe Flash Platform Summit 2010, Bangalore, India

Published in: Technology
  • Be the first to comment

Interaction design Do's & Dont's

  1. Interaction design do’s & don’ts<br />harish sivaramakrishnan<br />computer scientist & evangelist<br />Adobe Systems<br />
  2. experience matters!<br />
  3. Interaction design<br />The 5 demandments.<br />
  4. beautiful<br />
  5. fast & agile<br />
  6. expressive<br />
  7. accessible<br />
  8. everywhere!<br />
  9. Flexibility is key.<br />
  10. RIA !=Jazzy (?)<br />
  11. Don’t take users for granted.<br />Incorrect: I know my users, they will eventually come to terms with my UI / UX<br />
  12. Workflow is not the only King!<br />Incorrect: Interaction design *only* if I have time.<br />
  13. HTML has Pages<br />RIA’s Don’t! Hence, If your interaction design means page migration. Press the panic button. Now!<br />
  14. Animations are nice.<br />Only when relevant. Don’t re-invent skip intros<br />
  15. bad design and programming are<br />technology agnostic.<br />
  16. exhibit A for<br />bad design and programming are<br />technology agnostic.<br />http://bouncebargainrentals.com/<br />
  17. exhibit B for<br />bad design and programming are<br />technology agnostic.<br />http://www.html5zombo.com/<br />
  18. DO:<br />Make a design that concurs to the demandments<br />DON’T<br />Rehash your existing design with a new technology.<br />
  19. DO:<br />Keep in mind the multiple form factors your app needs to work on.<br />DON’T<br />Build hard wired layouts, whenever you can.<br />
  20. DO:<br />Small devices need larger clickable areas. Design your controls for that.<br />DON’T<br />Hard port your Web UI to small devices, it’s a different screen, different metaphor.<br />
  21. DO:<br />Give haptic feedback, wherever necessary<br />DON’T<br />Do random things in the name of haptic feedback<br />
  22. DO:<br />Use your creative freedom keeping your end user in mind. <br />DON’T<br />Invent knee-jerk patterns. <br />
  23. DO:<br />Maintain the identity of a control while creating experiences around it. <br />DON’T<br />Make buttons look like rockets and scroll bars look like UFOs.<br />
  24. DO:<br />More in one place. Use the states metaphor. <br />DON’T<br />Make an app that looks like a <frameset>, that’s oh! So 90s!<br />
  25. let’s fix our part first.<br />before we blame the technology.<br />
  26. let’s differentiate between<br />“can” and “should”.<br />
  27. let’s differentiate between<br />“want” and “need”.<br />
  28. While making technology choices,<br />let’s not take sides.<br />remember, their battle is not our battle.<br />
  29. questions?<br />
  30. email: hsivaram@adobe.com<br />twitter: @hsivaramweb: http://blog.flexgeek.in<br />

×