the good, bad & ugly of ui design
DESCRIPTION
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
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