Your SlideShare is downloading. ×
The Good, Bad & Ugly of UI Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Good, Bad & Ugly of UI Design

68,839

Published on

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

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
3 Comments
35 Likes
Statistics
Notes
No Downloads
Views
Total Views
68,839
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
575
Comments
3
Likes
35
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×