The Good, Bad & Ugly of UI Design

2f890006636505e78f8f38d68ca46859?s=47 Uday Shankar
February 27, 2012

The Good, Bad & Ugly of UI Design

My talk on UI Design at Adobe Flash Platform Summit 2011 in Bangalore.

With great power comes great responsibility. This dialog from Spiderman holds true in the context of what developers can do to UI/FE today with the power of RIA technologies like Flex/Air. The User Interface or the Front End realm has been ever evolving. With each step that technology takes towards sexier and delightful experiences, the challenges to create simplistic good user interface experiences seem to be growing exponentially. This session will start by covering the basics of good and bad design experiences and cover how important it is to understand good design principles in the context of RIA technologies like Flex/Air.

2f890006636505e78f8f38d68ca46859?s=128

Uday Shankar

February 27, 2012
Tweet

Transcript

  1. Uday M. Shankar BANGALORE 27 JULY 2011

  2. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com 2 LinkedIn – Twitter – G+ – Facebook – Skype
  3. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com U S E R INTERFACE D E S I G N 3
  4. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com USER INTERFACE DESIGN 4 USER TASK CONTEXT
  5. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com USER BEHAVIOR 5 f (U,E) Behavior is a function of the User & the Environment Lewin’s equation
  6. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com IT DOES REALLY MATTER 6
  7. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com CASE IN POINT 7
  8. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com BAD TOUCH 8 T
  9. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com G O O D DESIGN 9
  10. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com GROUND RULES 10 R T
  11. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com CLEAR 11
  12. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com CLEAR 12 T R
  13. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com MINIMAL 13
  14. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com MINIMAL 14 T R source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design  
  15. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com RESPONSIVE 15
  16. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com RESPONSIVE 16 R
  17. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com FORGIVING 17
  18. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com FORGIVING 18 R
  19. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com FAMILIAR 19
  20. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com FAMILIAR 20 R source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design  
  21. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com DIFFERENT 21
  22. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com DIFFERENT 22 R
  23. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com CONSISTENT 23
  24. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com CONSISTENT 24 T
  25. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com LEVERAGE HARDWARE PROPERLY 25
  26. source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   g+: udayms | twitter: udayms | linkedin:

    udayms | facebook: udayms | blog: acrossthinlines.com LEVERAGE HARDWARE PROPERLY 26 R T
  27. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com WELL INTEGRATED 27
  28. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com B A D DESIGN 28
  29. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com BROWSER WARS ARE BACK 29
  30. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com BROWSER WARS ARE BACK 30
  31. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com ONE SIZE FITS ALL 31
  32. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com EVERYTHING ON THE WEB 32
  33. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com HTML5 <> FLASH 33
  34. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com OVERDOING REALISM 34
  35. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com U G L Y DESIGN 35
  36. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com “EVERYONE LIKES IT” 36
  37. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com “DRAG-N-DROP IS SO COOL” 37
  38. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com “MUST CONFIRM EVERYTHING” 38
  39. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com “CUSTOM COMPONENTS? COOL!” 39
  40. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com “LET’S HARDCODE STUFF” 40
  41. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com “GRAPHIC DESIGN = UI DESIGN” 41
  42. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com “IT’S JUST AN ENTERPRISE APP” 42
  43. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com “MORE IS GOOD” 43
  44. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com DESIGN 44
  45. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com HOW COMPLEX CAN YOU MAKE IT? 45 T
  46. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com METAPHORS SOMETIMES BACKFIRE 46 T source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design  
  47. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com GRADIENT OVERLOAD 47 T
  48. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com NICE & WELL DESIGNED 48 R
  49. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com WHY? 49 T
  50. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com CLEAN, CRISP, CONSISTENT 50 R
  51. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com DEATH BY COLORS 51 T
  52. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com SOMETIMES ‘DIFFERENT’ MAKES SENSE 52 R
  53. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com WHY CAN’T THEY BE BETTER? 53 T
  54. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com WHITESPACE MAKES A DIFFERENCE 54 R
  55. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com DON’T OVER-DO REALITY 55 T source:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design  
  56. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com MAKE IT DELIGHTFUL 56 R
  57. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com MAKE IT JUST WORK 57 R
  58. g+: udayms | twitter: udayms | linkedin: udayms | facebook:

    udayms | blog: acrossthinlines.com MAKE IT JUST WORK 58 R
  59. acrossthinlines.com | facebook.com/across.thin.lines | twitter.com/acrossthinlines