Post on 01-Nov-2014
description
Uday M. Shankar
BANGALORE
27 JULY 2011
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com 2
LinkedIn – Twitter – G+ – Facebook – Skype
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
U S E R INTERFACE D E S I G N
3
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
USER INTERFACE DESIGN
4
USER
TASK CONTEXT
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
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
IT DOES R E A L L Y MATTER
6
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
CASE IN POINT
7
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
BAD TOUCH
8
T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
G O O D D E S I G N
9
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
GROUND RULES
10
R T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
CLEAR
11
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
CLEAR
12
T R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
MINIMAL
13
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
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
RESPONSIVE
15
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
RESPONSIVE
16
R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
FORGIVING
17
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
FORGIVING
18
R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
FAMILIAR
19
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
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
DIFFERENT
21
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
DIFFERENT
22
R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
CONSISTENT
23
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
CONSISTENT
24
T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
LEVERAGE HARDWARE PROPERLY
25
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
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
WELL INTEGRATED
27
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
B A D D E S I G N
28
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
BROWSER WARS ARE BACK
29
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
BROWSER WARS ARE BACK
30
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
ONE SIZE FITS ALL
31
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
EVERYTHING ON THE WEB
32
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
HTML5 <> FLASH
33
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
OVERDOING REALISM
34
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
U G L Y D E S I G N
35
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
“EVERYONE LIKES IT”
36
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
“DRAG-N-DROP IS SO COOL”
37
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
“MUST CONFIRM EVERYTHING”
38
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
“CUSTOM COMPONENTS? COOL!”
39
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
“LET’S HARDCODE STUFF”
40
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
“GRAPHIC DESIGN = UI DESIGN”
41
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
“IT’S JUST AN ENTERPRISE APP”
42
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
“MORE IS GOOD”
July 29, 2011 43
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
D E S I G N
44
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
HOW COMPLEX CAN YOU MAKE IT?
45
T
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
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
GRADIENT OVERLOAD
47
T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
NICE & WELL DESIGNED
48
R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
WHY?
49
T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
CLEAN, CRISP, CONSISTENT
50
R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
DEATH BY COLORS
51
T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
SOMETIMES ‘DIFFERENT’ MAKES SENSE
52
R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
WHY CAN’T THEY BE BETTER?
53
T
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
WHITESPACE MAKES A DIFFERENCE
54
R
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
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
MAKE IT DELIGHTFUL
56
R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
MAKE IT JUST WORK
57
R
g+: udayms | twitter: udayms | linkedin: udayms | facebook: udayms | blog: acrossthinlines.com
MAKE IT JUST WORK
58
R
acrossthinlines.com | facebook.com/across.thin.lines | twitter.com/acrossthinlines