More Related Content More from Uday Shankar (17) The Good, Bad & Ugly of UI Design2. 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
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
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
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