The Principles of Interface

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

Transcript

1. Designing Interface Core Principles And Considerations
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 effective
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 http://www.lukew.com/ff/entry.asp?1502
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 poorbuthappy.com (Guide to Columbia) http://www.webword.com/reports/sitema 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
55. WHAT IS THE SINGLE MOST IMPORTANT THING?
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
62. WHAT ORDER SHOULD I LOOK?
63. LAYOUT Order and Composition
64. PAINTING
65. PAINTING
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 pot.com/
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
78. Display fonts aren’t Use them only for titles. (Hi, I’m Georgia, and I’m always welcome!)
82. COLOR
83. Cheaters Tricks • One color, with variations. One accent. Period • Use a generator site http://www.colourlovers.com/ • Use nature http://boxesandarrows.com/natural- selections-colors-found-in-nature-and- interface-design/
86. nature
92. IF PHOTO-HEAVY, USE LITTLE COLOR
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
101. RELATIONSHIPS
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
105. DIFFERENCE & CONTRAST See http://contrastrebellion.com/
107. PROGRESSION Take advantage of the medium
108. This is a very tall page
116. This one too
121. This is a long page
122. Flipboard moves in a variety of directions
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