Download - The Good, Bad & Ugly of UI Design

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


USER INTERFACE DESIGN

4

USER

TASK CONTEXT


USER BEHAVIOR

5

f (U,E) Behavior is a function of the User &

the Environment

Lewin’s equation


IT DOES R E A L L Y MATTER

6


CASE IN POINT

7


BAD TOUCH

8

T


G O O D D E S I G N

9


GROUND RULES

10

R T


CLEAR

11


CLEAR

12

T R


MINIMAL

13


MINIMAL

14

T R source: h*p://www.slideshare.net/aweyenberg/realis8c-‐user-‐interface-‐design


RESPONSIVE

15


RESPONSIVE

16

R


FORGIVING

17


FORGIVING

18

R


FAMILIAR

19


FAMILIAR

20

R source: h*p://www.slideshare.net/aweyenberg/realis8c-‐user-‐interface-‐design


DIFFERENT

21


DIFFERENT

22

R


CONSISTENT

23


CONSISTENT

24

T


LEVERAGE HARDWARE PROPERLY

25

source: h*p://www.slideshare.net/aweyenberg/realis8c-‐user-‐interface-‐design


LEVERAGE HARDWARE PROPERLY

26

R

T


WELL INTEGRATED

27


B A D D E S I G N

28


BROWSER WARS ARE BACK

29


BROWSER WARS ARE BACK

30


ONE SIZE FITS ALL

31


EVERYTHING ON THE WEB

32


HTML5 <> FLASH

33


OVERDOING REALISM

34


U G L Y D E S I G N

35


“EVERYONE LIKES IT”

36


“DRAG-N-DROP IS SO COOL”

37


“MUST CONFIRM EVERYTHING”

38


“CUSTOM COMPONENTS? COOL!”

39


“LET’S HARDCODE STUFF”

40


“GRAPHIC DESIGN = UI DESIGN”

41


“IT’S JUST AN ENTERPRISE APP”

42


“MORE IS GOOD”

July 29, 2011 43


D E S I G N

44


HOW COMPLEX CAN YOU MAKE IT?

45

T


METAPHORS SOMETIMES BACKFIRE

46

T source: h*p://www.slideshare.net/aweyenberg/realis8c-‐user-‐interface-‐design


GRADIENT OVERLOAD

47

T


NICE & WELL DESIGNED

48

R


WHY?

49

T


CLEAN, CRISP, CONSISTENT

50

R


DEATH BY COLORS

51

T


SOMETIMES ‘DIFFERENT’ MAKES SENSE

52

R


WHY CAN’T THEY BE BETTER?

53

T


WHITESPACE MAKES A DIFFERENCE

54

R


DON’T OVER-DO REALITY

55

T source: h*p://www.slideshare.net/aweyenberg/realis8c-‐user-‐interface-‐design


MAKE IT DELIGHTFUL

56

R


MAKE IT JUST WORK

57

R


MAKE IT JUST WORK

58

R

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

Download - The Good, Bad & Ugly of UI Design

Top Related