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.

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