Common pitfalls in user interface design for iOs 7

1. Bad design in
examples
•Ross Sokolovski

2. What is bad design?

3. Why we design
bad things?

4. Any keys to
avoid?

5. Thinking from the
point of expertise

6. Plenty of
instruments, but
the core principles
are the same

7. Write down your ideas

8. CLARITY

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

11. DEFERENCE

12. The medium is the message

13. DEPTH

14. 14
And it’s not just about iOs

15. Common pitfalls

16. Bad icons

17. 17
Yep, they are showing who you are

18. 18
Create unique shape

19. 19
Carefully choose colors

20. 20
Great glass of Pinot Noir

21. 21
Does that look great?

22. 22
Or maybe we need more like this
one?

23. 23
It’s all about context

24. 24
And ability to change

25. Tiny controls

26. 26
Well, it’s so informative, good job!

27. 27
But let’s compare

28. 28
It’s for your fingers

29. 29
It’s for your fingers

30. 30
It’s for your fingers

31. 31
You can even make it bigger

32. 32
How big is too big?

33. 33
How big is too big?

34. 34
Make a “field” study

35. 35
Get some tools

36. Hard-to-read text

37. 37
Ohh, boring

38. 38
- Let’s make it brighter!

39. 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. 40
Too simple?

41. 41
Everything in it’s right places

42. 42
Make it legible

43. 43
Easy to look and scan

44. 44
Make it clear

45. 45
Use negative space

46. 46
And separators

47. Ambiguous alerts

48. 48
So…

49. 49
So…

50. 50
Avoid unnecessary alerts

51. 51
Label buttons according to their actions

52. 52
Label buttons according to their actions

53. 53
Label buttons according to their actions

54. 54
Place the affirmative button to
the…

55. 55
Right

56. Out-of-place terminology

57. 57
Make your language user

58. 58
Make your language user

59. Excessive branding

60. 60
- We want to build the brand
recognition

61. 61
- So, make a good icon

62. Uninformative back
buttons

63. 63
Show me where you guide me

64. 64
Show me where you guide me

65. Confusing animations

66. Inappropriate styling

67. Intent -> Graphics

68. 68
ProCreate

69. 69
WWF Together

70. 70
Wild Tattoo

71. 71
Wild Tattoo

72. 72
Intent?

73. 73
Intent?

74. INTENT FIRST

75. 75
Read the HIG
https://developer.apple.com/library/ios/
documentation/userexperience/conceptu
al/MobileHIG/index.html#//apple_ref/do
c/uid/TP40006556-CH66-SW1§

76. AND THE LAST ONE…

77. REMEMBER WHY

78. Thank you
USA TELEPHONE
Toll-Free: 866.687.3588
Office: 239.690.3111
EMAIL
info@softserveinc.com
WEBSITE:
www.softserveinc.com
EUROPE OFFICES
United Kingdom
Germany
Netherlands
Ukraine
Bulgaria
US OFFICES
Austin, TX
Fort Myers, FL
Boston, MA
Newport Beach, CA
Salt Lake City, UT