The Principles of Interface
Download as pptx, pdf26 likes37,501 views
This document discusses core principles and considerations for designing interfaces, including: - The language of interfaces includes graphical elements like layout, objects, type, and color as well as interactive elements like affordances, heads-up displays (HUDs), feedback, input, and navigation. - Interactive interface design focuses on "doing" through affordances, buttons and links that look interactive, and subtle cues when user action is or isn't needed. - Effective navigation orders complex pages through global, local, contextual, and secondary navigation elements. - Graphic design principles like hierarchy, layout, type, color, line, relationships and progression are important for understanding. Minimalism, cheats and hacks can
More Related Content
What's hot (20)
Similar to The Principles of Interface (20)
More from Christina Wodtke (20)
Recently uploaded (20)
![Download Chimera Tool Setup V42.47.0924 [Latest Version]](https://cdn.slidesharecdn.com/ss_thumbnails/artificialintelligence4-250505221011-8e660a4e-thumbnail.jpg?width=560&fit=bounds)
The Principles of Interface
- 1. Designing Interface Core Principles And Considerations
- 4. Interface diagramming Product (noun) Costs Buy (verb) (adverb) Look (verb) Costs (adjective)
- 5. The Language of Interface Graphical (understanding) Interactive (doing) • Layout • Affordances • Objects • HUD • Type • Feedback • Color • Modes • Line • Input • Hierarchy • Navigation • Relationships
- 7. Affordances
- 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
- 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
- 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 21
- 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 22
- 23. The magic number? • 13 tabs– no one saw them. Six tabs, everyone saw them 23
- 24. Global links But not everything is simple Related Web search Services inbox masthead Log out Mail tools upsell Folders And there inbox Write mail tip ads isn’t even upsell ad Other properties content! Related Services Mail tools ad 24
- 25. Navigation orders complex pages 25
- 26. Understanding Navigation Message and Access Global Navigation Where Am I? Local Navigation What's Nearby? Content Lives Here, What's Related With Contextual Navigation Inline To What's Here? Or Separate. 26
- 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???) 27
- 28. Global Navigation ‘03 vs ‘12 28
- 30. Global navigation ‘03 vs ‘12 30
- 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? 31
- 32. Local Navigation ‘03 vs ‘12 32
- 34. Secondary navigation is now temporal
- 36. Contextual navigation • Inline links • Related items • Document management 36
- 37. Inline links 37
- 38. Related items 38
- 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 39
- 42. Sort 42
- 43. Secondary Navigation • Site Maps • Indexes • Table of Contents 43
- 44. Have you ever seen this page? 44
- 45. How about this one? 45
- 46. How about this one? 46
- 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 47
- 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 48
- 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 49
- 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 50
- 51. Now combine • Follow expectations based on conventions • Design a hierarchy based on task importance • Err on the side of simplicity 51
- 52. Homework • Analyze two competitors, one complementor – Layout – Inputs/functionality – Groupings – Hierarchy Product – Trust/reassurance (noun) Costs Buy (verb) (adverb) Look Costs (verb) (adjective)
- 54. Designing to Understand Use For • Hierarchy • Importance • Layout • Sequence • Images • Location • Type • Reassurance • Color • Motivation • Line • Involvement • Relationships • Seduction • Progression
- 55. WHAT IS THE SINGLE MOST IMPORTANT THING?
- 61. LOOK LOOK LOOK LOOK LOOK Law of Focal Point The idea that a point of interest, something emphasised or different will catch and hold the viewers attention (Chang, 2002). HIERARCHY GIVES CLARITY
- 62. WHAT ORDER SHOULD I LOOK?
- 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 readable 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
- 107. Take advantage of the medium PROGRESSION
- 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. Fake it til you make it GRAPHIC DESIGN HACKS
- 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