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