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.

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
DESIGN
g+: 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
5
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com

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

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

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

9. GOOD
DESIGN
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24. CONSISTENT
T
g+: 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
R
source:
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
DESIGN
g+: 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
DESIGN
g+: 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. DESIGN
g+: 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 BACKFIRE
source:
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
T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 47

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

49. WHY?
T
g+: 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
T
g+: 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 REALITY
source:
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 DELIGHTFUL
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
R
56

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

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

59. acrossthinlines.com | facebook.com/across.thin.lines | twitter.com/acrossthinlines