The Good, Bad & Ugly of UI Design

88,519 views
87,141 views

Published on

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.

Published in: Design, Technology
4 Comments
41 Likes
Statistics
Notes
No Downloads
Views
Total views
88,519
On SlideShare
0
From Embeds
0
Number of Embeds
37,147
Actions
Shares
0
Downloads
792
Comments
4
Likes
41
Embeds 0
No embeds

No notes for slide

The Good, Bad & Ugly of UI Design

  1. Uday M. Shankar BANGALORE 27 JULY 2011
  2. LinkedIn – Twitter – G+ – Facebook – Skype g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 2
  3. U S E R INTERFACE DESIGNg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 3
  4. USER INTERFACE DESIGN USER TASK CONTEXT g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 4
  5. USER BEHAVIOR f(U,E) Lewin’s equation Behavior is a function of the User & the Environment 5g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
  6. IT DOES REALLYg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 6 MATTER
  7. CASE IN POINTg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 7
  8. BAD TOUCHg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com T 8
  9. GOOD DESIGNg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 9
  10. GROUND RULESR Tg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 10
  11. CLEARg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 11
  12. CLEART Rg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 12
  13. MINIMALg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 13
  14. MINIMAL Tsource:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 14
  15. RESPONSIVEg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 15
  16. RESPONSIVE Rg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 16
  17. FORGIVINGg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 17
  18. FORGIVING Rg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 18
  19. FAMILIARg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 19
  20. FAMILIAR Rsource:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 20
  21. DIFFERENTg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 21
  22. DIFFERENT Rg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 22
  23. CONSISTENTg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 23
  24. CONSISTENT Tg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 24
  25. LEVERAGE HARDWARE PROPERLY g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 25
  26. LEVERAGE HARDWARE PROPERLY Rsource:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 26
  27. WELL INTEGRATED g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 27
  28. B A D DESIGNg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 28
  29. BROWSER WARS ARE BACK g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 29
  30. BROWSER WARS ARE BACK g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 30
  31. ONE SIZE FITS ALL g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 31
  32. EVERYTHING ON THE WEB g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 32
  33. HTML5 <> FLASH g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 33
  34. OVERDOING REALISM g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 34
  35. UGLY DESIGNg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 35
  36. “EVERYONE LIKES IT” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 36
  37. “DRAG-N-DROP IS SO COOL” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 37
  38. “MUST CONFIRM EVERYTHING” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 38
  39. “CUSTOM COMPONENTS? COOL!” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 39
  40. “LET’S HARDCODE STUFF” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 40
  41. “GRAPHIC DESIGN = UI DESIGN” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 41
  42. “IT’S JUST AN ENTERPRISE APP” g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 42
  43. “MORE IS GOOD”g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 43
  44. DESIGNg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 44
  45. HOW COMPLEX CAN YOU MAKE IT? T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 45
  46. METAPHORS SOMETIMES BACKFIREsource:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 46
  47. GRADIENT OVERLOAD Tg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 47
  48. NICE & WELL DESIGNED Rg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 48
  49. WHY? Tg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 49
  50. CLEAN, CRISP, CONSISTENT R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 50
  51. DEATH BY COLORS Tg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 51
  52. SOMETIMES ‘DIFFERENT’ MAKES SENSE R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 52
  53. WHY CAN’T THEY BE BETTER? T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 53
  54. WHITESPACE MAKES A DIFFERENCE R g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 54
  55. DON’T OVER-DO REALITYsource:  h*p://www.slideshare.net/aweyenberg/realis8c-­‐user-­‐interface-­‐design   T g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 55
  56. MAKE IT DELIGHTFULg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com R 56
  57. MAKE IT JUST WORKg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com R 57
  58. MAKE IT JUST WORKg+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com R 58
  59. acrossthinlines.com | facebook.com/across.thin.lines | twitter.com/acrossthinlines

×