Interface Design Basics

The Interface Design Basics presentation held at the Viennese Cocoaheads meeting October 8th, 2009. I talked about a wide variety of concepts that present the basics which inform interface design decisions, even before buttons are drawn or views are laid out.

You can see some of my work at http://dribbble.com/froodee and http://dribbble.com/apochworks :)

Transcript

1. Interface Design Basics by Samo Korošec, apoch.io
2. Interface Design is: • Interaction Design • Graphic Design • Typography • Information Design • Behaviour analysis ☺ • Lots of work ☹
3. • Lots of cool words used by lots of cool consultants to make lots of cool money. Cool!
 Mental Models, User Stories, Interface Metaphors, Prototyping, Usability Testing, etc.
 • Not that hard, if you think along
 We’re all smart here — after all, it’s not a MSDN Meeting ;o) ! • Works just as well without huge “Focus Groups”
 You can’t please everyone & Too many cooks spoil the broth Interaction Design
4. Interaction Design • Mental Models, User Stories, Interface Methapors
 What does the user expect? Which real-life process is reflected with the App? Which Metaphors can be applied?
 • Prototyping, Usability Testing, User Focus Groups
 Not all users are/react the same. Discussion is good, but shouldn’t dislodge the Vision. Eat your own dog food ™ cool Words
5. Interaction Design • The Idea
 What is the App’s main goal? Never lose it out of sight! 
 • What can I work with?
 Do the users have any prior, applicable knowledge? Are there any restrictions that will influence the product? ! • Improvements
 Is there anything I can drop, hide, combine? Are there ways to make the thinking along is good
6. Interaction Design • Am I my own/a potential customer?
 Use your own App, and use it a lot. That way, you can recognise “bumps” and mistakes and the User Testing can happen later in the development cycle.
 • Do I know the Target Audience?
 Is it a niche? Do they want an app? Can I draw on pre-existing knowledge from their field (→ Metaphors)? Are they desperate?
 • Power Users ™ 
 Sometimes their input is good, but they’re the minority. It’s dangerous to optimize for them! a “Focus Group” is not always neccessary
7. • Interface → Graphics & Layout • Buttons & Icons → Illustrations • Rules
 You don’t have to be a graphic designer to know, understand and follow the basic rules of visual design. Most of the time, Graphic Design is not a “matter of taste”! Graphic Design
8. The Brain: • Likes Straight Lines • Recognises Patterns & Repetitions • Loves even Distribution & even Whitespace Graphic Design Rules →with those, it can think less! ...we’re evil and take advantage of that fact.
9. Straight Lines Graphic Design Rules Beautiful Ugly
10. Straight Lines Graphic Design Rules Beautiful Ugly
11. Straight Lines Graphic Design Rules Beautiful Ugly
12. Patterns & Repetitions Graphic Design Rules Nothing new... Oi!
13. Patterns & Repetitions Graphic Design Rules Nothing new... Oi!
14. Patterns & Repetitions Graphic Design Rules Zeile eins Zeile zwei Zeile drei Zeile vier Zeile fünf Zeile sechs Zeile eins Zeile zwei Zeile drei Zeile vier Zeile fünf Zeile sechs Nothing new... Oi!
15. Patterns & Repetitions Graphic Design Rules Zeile eins Zeile zwei Zeile drei Zeile vier Zeile fünf Zeile sechs Zeile eins Zeile zwei Zeile drei Zeile vier Zeile fünf Zeile sechs Nothing new... Oi!
16. Whitespace Graphic Design Rules Beautiful Ugly
17. Whitespace Graphic Design Rules Beautiful Ugly
18. Whitespace Graphic Design Rules Easy counting Counting is hard
19. Whitespace is relative Graphic Design Rules ButtonText ButtonTe Beautiful Ugly
20. Contrast Graphic Design Rules Easily recognisable Recognition is hard Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
21. Contrast Graphic Design Rules Easily recognisable Recognition is hard
22. Contrast Graphic Design Rules Easily recognisable Recognition is hard
23. Typography • Very important, yet often underestimated • Actually “just” the practical application of the previous rules
 • Apple gets it, Microsoft doesn’t
 Simply because Microsoft approaches Typography like an Engineer concerned with the “how” would, whereas Apple approaches it like an Artist concerned with a “why” would
24. Straight Lines Typography — Examples Easier reading Harder reading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
25. Patterns & Repetitions Typography — Examples Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat Easier reading Harder reading
26. Whitespace Typography — Examples Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Easier reading Harder reading
27. Whitespace Typography — Examples Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Easier reading Harder reading
28. Contrast Typography — Examples Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit Easier reading/pleasant Harder reading/unpleasant
29. Contrast Typography — Examples Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia Easier reading/pleasant Harder reading/unpleasant
30. Contrast Typography — Examples ! ButtonText ButtonText ButtonText ButtonText ButtonText ButtonText ButtonText Easier reading/pleasant Harder reading/unpleasant
31. Information Design • Adds Structure to Data • Points out important Datapoints • Often works with known Symbols
 e.g. Traffic Symbols or Symbols of Systems related to the App
 • Is breaking the “beauty”-Rules → but does so only when it’s “right”
32. Structuring Data Information Design — Examples Distribution Relation 23 % 35 % 42 % 0 25 50 75 100
33. Showing Datapoints Information Design — Examples Distribution Relation 0 20 40 60 80
34. Symbols Information Design — Examples Add Close
35. Symbols Information Design — Examples Yay! Fail!
36. Uhm... So what’s that got to do with Interface Design?!
37. ↗→↑↘→→ Supercombo-Time!
38. Whitespace Straight Lines
39. By not separating the lines with a 1 px dark line, we gain Whitespace Background Color makes the distinction between lines easier
40. Faint separators don’t break up the Whitespace Important: Today, the currently selected Day The current Month is slightly darker
41. The white border increases contrast 
 for the drop shadow Group-indicator the same across all of OS X User know it in similar context
42. Important “depth” via Gradients → klickable? Not that important
43. Additional Information lighter, different color Icons help giving an easier overview
 The Users remember 
 form, color, position, groups Grouping with Whitespace
44. Date
 the coloring helps with a column-like appearance, and helps distinguish between date, sender, subject Sender
 important, big, bold Subject
 less important, 
 still readable Indicators
 not obvious at first, make sense after checking 2-3 Mails E-Mail Text
 not really important, only a secondtary help in deciding whether to read the E-Mail or not
45. Even Apple doesn’t always get it right
 a search-for-mistakes-picture, © Apple
46. and in addition to all that: Sexay Buttons (how & why)
47. Button Cut
48. Button Cut
49. Button Cut
50. Button Cut
51. Button Cut
52. Button Cut
53. Button Cut
54. Button Cut
55. Button Cut
56. Text cut out Text overlaid 1px offset helps balance the Whitespace (doesn’t always work, but worth a try with “off” buttons)
57. • Ingridients: 2-5 Chim Users • Hand them your App • Observe behaviour
 Once 2 or more people have the same how-to-continue?-problem, you should reconsider your design
 • Teach
 Don’t be afraid to demand of your Users to learn how to use your Application. Especially if a new approach (compared to your competition) Behaviour analysis ☺
58. • Research • [Idea, Sketch, Code, Test] * 100 • Eventually a bigger reengineering effort if you cut on research time • Everything is going to be redone in Version 2.0 anyway Lots of work ☹
59. But! Design pays off! $-) Everyone knows that Design is “important” and that well designed and beautiful Apps sell better. But (almost) noone is doing it. ! Bad competition = win!
60. End
61. Samo Korošec apoch.io samo@apoch.io dribbble.com/apochworks For further questions: For more information about apoch works: APOCH WORKS