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

Presented at Adobe Flash Platform Summit 2010, Bangalore, India

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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 />

    Be the first to comment

    Login to see the comments

  • sawrb

    Aug. 31, 2010
  • astra

    Aug. 31, 2010
  • mattldavies

    Aug. 31, 2010
  • u106842

    Aug. 31, 2010
  • coraguo

    Aug. 31, 2010
  • TheGoblinKing

    Sep. 1, 2010
  • otachan

    Sep. 6, 2010

Presented at Adobe Flash Platform Summit 2010, Bangalore, India

Views

Total views

4,764

On Slideshare

0

From embeds

0

Number of embeds

46

Actions

Downloads

0

Shares

0

Comments

0

Likes

7

×