bad design in examples by ross sokolovski
DESCRIPTION
Common pitfalls in user interface design for iOs 7TRANSCRIPT
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
WEBSITE:www.softserveinc.com
EUROPE OFFICESUnited KingdomGermanyNetherlandsUkraineBulgaria
US OFFICESAustin, TXFort Myers, FLBoston, MANewport Beach, CASalt Lake City, UT