$30 off During Our Annual Pro Sale. View Details »

Interface Design Basics

Samo Korošec
October 08, 2009

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 :)

Samo Korošec

October 08, 2009
Tweet

More Decks by Samo Korošec

Other Decks in Design

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