Bad design in examples by Ross Sokolovski

Bad design in examples

•Ross Sokolovski

What is bad design?

Why we design bad things?

Any keys to avoid?

Thinking from the point of expertise

Plenty of instruments, but the core principles are the same

Write down your ideas

CLARITY

You can’t talk about clarity without talking about user stories

DEFERENCE

The medium is the message

DEPTH

14

And it’s not just about iOs

Common pitfalls

Bad icons

17

Yep, they are showing who you are

18

Create unique shape

19

Carefully choose colors

20

Great glass of Pinot Noir

21

Does that look great?

22

Or maybe we need more like this one?

23

It’s all about context

24

And ability to change

Tiny controls

26

Well, it’s so informative, good job!

27

But let’s compare

28

It’s for your fingers

29

It’s for your fingers

30

It’s for your fingers

31

You can even make it bigger

32

How big is too big?

33

How big is too big?

34

Make a “field” study

35

Get some tools

Hard-to-read text

37

Ohh, boring

38

- Let’s make it brighter!

39

How to avoid

• Test in grayscale• Make it at least 50% contrast• Avoid small-sized script typefaces• Control the attention• Avoid mixing typefaces • Don’t forget about alignment• Minimum text size is 11 pt• Default text size for body is 17 pt

40

Too simple?

41

Everything in it’s right places

42

Make it legible

43

Easy to look and scan

44

Make it clear

45

Use negative space

46

And separators

Ambiguous alerts

48

So…

49

So…

50

Avoid unnecessary alerts

51

Label buttons according to their actions

52

Label buttons according to their actions

53

Label buttons according to their actions

54

Place the affirmative button to the…

55

Right

Out-of-place terminology

57

Make your language user

58

Make your language user

Excessive branding

60

- We want to build the brand recognition

61

- So, make a good icon

Uninformative back buttons

63

Show me where you guide me

64

Show me where you guide me

Confusing animations

Inappropriate styling

Intent -> Graphics

68

ProCreate

69

WWF Together

70

Wild Tattoo

71

Wild Tattoo

72

Intent?

73

Intent?

INTENT FIRST

75

Read the HIG

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1§

AND THE LAST ONE…

REMEMBER WHY

Thank you

USA TELEPHONEToll-Free: 866.687.3588Office: 239.690.3111

EMAILinfo@softserveinc.com

 WEBSITE:www.softserveinc.com

EUROPE OFFICESUnited KingdomGermanyNetherlandsUkraineBulgaria

US OFFICESAustin, TXFort Myers, FLBoston, MANewport Beach, CASalt Lake City, UT