The Principles of Interface

The Principles of Interface

Graphic and interactive elements together in harmony can create a great user experience.


Christina Wodtke

January 03, 2013


  1. Designing Interface Core Principles And Considerations

  2. None
  3. Sentence diagramming

  4. Interface diagramming Product (noun) Buy (verb) Costs (adverb) Look (verb)

    Costs (adjective)
  5. The Language of Interface Graphical (understanding) • Layout • Objects

    • Type • Color • Line • Hierarchy • Relationships Interactive (doing) • Affordances • HUD • Feedback • Modes • Input • Navigation
  6. DOING Interactive Interface Design

  7. Affordances

  8. Buttons Look Pushable

  9. Buttons with meaning

  10. Links Look Clickable

  11. Links Have Hierarchy

  12. On Subtlety When you don’t want to interrupt an action,

    be subtle (think of footnotes). If they are reading, don’t bother them. When you need to prompt an action, subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.
  13. HUD Heads Up Display: Information user needs nearby to be

  14. A integrated approach

  15. An email HUD All HUD, no content

  16. A social HUD

  17. Feedback

  18. Inputs

  19. Form Principles • Consider Context • Set expectations • Use

    appropriate inputs • Give sift and clear feedback • Ask for less • AB test
  20. Forms

  21. 21 Navigation IA made visible “Like putting an Armani suit

    on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
  22. 22 Most IA is invisible • A lot of work

    no one sees • Synonym rings, etc • If it was seen, is would be too much • We show only a subset
  23. 23 The magic number? • 13 tabs– no one saw

    them. Six tabs, everyone saw them
  24. 24 But not everything is simple masthead Global links Folders

    Mail tools ad Other properties upsell Web search Related Services tip inbox ads ad Related Services upsell Mail tools Log out inbox Write mail And there isn’t even content!
  25. 25 Navigation orders complex pages

  26. 26 Understanding Navigation Message and Access Where Am I? What's

    Nearby? What's Related To What's Here? Global Navigation Local Navigation Content Lives Here, With Contextual Navigation Inline Or Separate.
  27. 27 Global navigation • Where you are – Brand/masthead •

    Where you can go (site offering) – Top level categories • Safety nets – Where’s my (shopping cart/account/help???)
  28. 28 Global Navigation ‘03 vs ‘12

  29. 29 Global navigation

  30. 30 Global navigation ‘03 vs ‘12

  31. 31 Local Navigation • I’ve started down the path •

    Now what? – What are the categories of items? – What are the siblings of what I see? – What are the subcategories?
  32. 32 Local Navigation ‘03 vs ‘12

  33. 33 Local Navigation 2003

  34. Secondary navigation is now temporal

  35. 35 Local Navigation

  36. 36 Contextual navigation • Inline links • Related items •

    Document management
  37. 37 Inline links

  38. 38 Related items

  39. 39 Pagination Useful to reduce page download speed and cognitive

    overload. Annoying for printing. Impossible to predict what you’ll get Users would rather scroll than click
  40. 40 Ad negotiation

  41. 41 Print/email/clip

  42. 42 Sort

  43. 43 Secondary Navigation • Site Maps • Indexes • Table

    of Contents
  44. 44 Have you ever seen this page?

  45. 45 How about this one?

  46. 46 How about this one?

  47. 47 You can make it helpful “After testing several different

    sitemap designs on users, I decided to try putting one on every page of my small Columbian web site. I then decided to track how often it was used for navigation. It turns out the sitemap is used for over 65% of all navigation done on the site.” -- Usability Report by Peter Van Dijck of (Guide to Columbia) p.html
  48. 48 Conventions It is certainly probable, then, that placing these

    objects in expected locations would give an e-commerce site a competitive edge over those that do not… -- Examining User Expectations for the Location of Common E-Commerce Web Objects Usability News 4.1 2002
  49. 49 Conventions If 90% or more of the big sites

    do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability. If 60-90% of the big sites do things in a single way, then this is a strong convention and you should comply unless your alternative design has at least 50% higher measured usability. If less than 60% of the big sites do things in a single way, then there are no dominant conventions yet and you are free to design in an alternative way. -- Jakob Nielsen, November 14, 1999 Alertbox column "Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson
  50. 50 Conventions • Some things are becoming de rigor •

    Deviate when you’ve got something better • Not because you are bored "Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson
  51. 51 Now combine • Follow expectations based on conventions •

    Design a hierarchy based on task importance • Err on the side of simplicity
  52. Homework • Analyze two competitors, one complementor – Layout –

    Inputs/functionality – Groupings – Hierarchy – Trust/reassurance Product (noun) Buy (verb) Costs (adverb) Look (verb) Costs (adjective)
  53. UNDERSTANDING Graphic Design

  54. Designing to Understand Use • Hierarchy • Layout • Images

    • Type • Color • Line • Relationships • Progression For • Importance • Sequence • Location • Reassurance • Motivation • Involvement • Seduction

  56. None
  57. None
  58. None
  59. None
  60. None
  61. HIERARCHY GIVES CLARITY Law of Focal Point The idea that

    a point of interest, something emphasised or different will catch and hold the viewers attention (Chang, 2002). LOOK LOOK LOOK LOOK LOOK

  63. LAYOUT Order and Composition



  66. None
  67. None
  68. Comics are read in the west left to right, like

    a page. However, good artists add visual elements to help you flow. http://samkieth.blogs
  69. None
  70. None
  71. None
  72. TYPE

  73. I am a serifed font I am sans-serif

  74. I am Times New Roman Hey, I’m arial

  75. I am Comic Sans I am the devil

  76. I am Impact LOL

  77. None
  78. Display fonts aren’t Use them only for titles. (Hi, I’m

    Georgia, and I’m always welcome!)
  79. None
  80. None
  81. None
  82. COLOR

  83. Cheaters Tricks • One color, with variations. One accent. Period

    • Use a generator site • Use nature selections-colors-found-in-nature-and- interface-design/
  84. None
  85. None
  86. nature

  87. None
  88. None
  89. None
  90. None
  91. None

  93. None
  94. None
  95. None
  96. LINE

  97. Warm, hand drawn lines= Artisanal

  98. Lines gently reinforce the grid = scientific

  99. Simple lined Navigation = Artwork

  100. Grid edged with lines=Modrian=Modern


  102. Which pair of pants are now 39.99?

  103. Which car is 49.99?

  104. If you are putting boxes around things to make it

    clear, you probably should start over

  106. None
  107. PROGRESSION Take advantage of the medium

  108. This is a very tall page

  109. None
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. This one too

  117. None
  118. None
  119. None
  120. None
  121. This is a long page

  122. Flipboard moves in a variety of directions

  123. None
  124. None
  125. Even if you use the “wrong” gesture, Flipboard reacts correctly.

  126. GRAPHIC DESIGN HACKS Fake it til you make it

  127. Minimalist Design • Only use one font. Preferably helvetica. •

    Only use three, all very very different. Perhaps a fourth for footer text. • Only use one color, with variations, and one “accent” color. • Turn on the grid (if you are using photoshop, etc) • Never align center. • Don’t use stock photography, unless you have awesome taste. It has no soul. • Have a hierarchy
  128. Cheats • Patterns • Kits like this • Libraries •

    Odesk • Conference proceedings You can’t buy taste
  129. Homework • Analyze two competitors, one complementor • Do wire

    frames for three key screens • Optional: begin interfaces