A Quick Introduction to Interface Design

A presentation held at a company retreat we did a few years back.

Transcript

1. Interface Design A quick and basic introduction
2. Interface Design Surprise! We’re not talking buttons today!
3. Contrast
4. Contrast
5. Contrast
6. Contrast
7. Color and why all colors aren’t equal
8. 380 NM THE VISIBLE COLOR SPECTRUM NORMALIZED ABSORBANCE 0.2 0.4 0.0 0.6 0.8 1.0 400 NM 500 NM 600 NM 700 NM 750 NM S 420nm R 500nm M 534nm L 564nm ULTRAVIOLET ~ 10 – 400 NM VIOLET ~ 400 – 450 NM BLUE ~ 450 – 490 NM GREEN ~ 490 – 560 NM YELLOW ~ 560 – 590 NM ORANGE ~ 590 – 635 NM RED ~ 635 – 700 NM INFRARED ~ 700 NM – 1 MM WAVELENGTH: PHOTORECEPTOR CELL PEAK SENSITIVITY COLOR WAVELENGTH INTERVAL: Color
9. Color 50% BLUE 100% BLUE 100% BLUE WITH 50% GREEN 50% GREEN 100% GREEN 100% GREEN WITH 25% BLUE AND 25% RED 50% RED 100% RED 100% RED WITH 50% GREEN
10. Color Contrast
11. Color Contrast
12. Color Contrast
13. Color Contrast
14. Color Contrast
15. Color Contrast Sorry for giving you eye cancer! :) …moving right along…
16. Shapes
17. Shapes
18. Shapes
19. Shapes
20. Shapes
21. Shapes
22. Shapes
23. Shapes
24. Shapes
25. Shape Contrast
26. Shape Contrast
27. Shape Contrast size & whitespace
28. Shape Contrast perceived size is relative
29. Patterns and why we notice things
30. Patterns
31. Patterns
32. Patterns
33. Patterns
34. Patterns
35. Patterns
36. Patterns
37. Patterns & Elegance Or why some things are pleasant to look at. a quick digression
38. Patterns & Elegance Our Brain = Pattern Recognition Machine™ More Patterns = Less To Think About Less To Think About = Wheee! Sweet! Me Gusta!
39. Patterns & Elegance Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4
40. Patterns & Elegance Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4
41. Patterns & Elegance Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4
42. Patterns & Elegance Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4
43. Patterns & Elegance
44. Patterns & Elegance
45. Patterns & Elegance
46. Patterns & Elegance
47. Patterns can be complex…
48. …but too much complexity can make them irritating
49. Grouping
50. Grouping People can only hold a small number of objects in their working memory.
51. Grouping Research tells us the number is 3, which is evidenced by many cultures counting: 
 
 1, 2, (3,) Many
52. Grouping We have to work around that with grouping (which ideally supports abstraction).
53. Grouping - Circle Count count the circles
54. Grouping - Circle Count spatial grouping
55. Grouping - Circle Count color coding
56. Grouping - Circle Count BOOM! Patterns!
57. Grouping - Circle Count HAH!
58. Typography
59. Typographical Shapes A M C I K X
60. Typographical Shapes A M C I K X Patterns™
61. Typographical Contrast Even contrast and spacing allow us to recognise shapes (characters) faster
62. Typographical Contrast Low Contrast Even Contrast* Strong Contrast *) Even-ish
63. Typographical Contrast Cras mollis scelerisque nunc Cras mollis scelerisque nunc Cras mollis scelerisque nunc Becomes important when the text we look at is small in size (or far away)…
64. Typographical Contrast Hello, I’m an iPhone. I’m running iOS 7. Bow before me! …or problematic when Apple decides to be Modern™
65. Typography - Reading Character shapes, grouping, contrast (size, thickness, color) help our pattern recognition
66. So!
67. Now that we know everysink!
68. Lets see if we can interface-design this:
69. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Please pick your options: inspired by Windows software
70. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Please pick your options:
71. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Left Options Right Options
72. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Left Options Right Options
73. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 12 Unthinkable Option 5 Unthinkable Option 6 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Optional Some More Options
74. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 5 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Optional Some More Options
75. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 5 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Some More Options Optional
76. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 5 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Some More Options Optional
77. Unthinkable Option 7 Unthinkable Option 8 Unthinkable Option 9 Unthinkable Option 10 Unthinkable Option 1 Unthinkable Option 2 Unthinkable Option 3 Unthinkable Option 4 Unthinkable Option 13 Unthinkable Option 14 Unthinkable Option 15 Unthinkable Option 16 Unthinkable Option 11 Unthinkable Option 5 Unthinkable Option 17 Unthinkable Option 18 Left Options Mandatory Picks Slightly Less Important Options Some More Options Optional
78. Ta-daa!