Your SlideShare is downloading. ×
The Principles of Interface
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

The Principles of Interface


Published on

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

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

Published in: Design

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Designing InterfaceCore Principles And Considerations
  • 2. Sentence diagramming
  • 3. Interface diagramming Product (noun) Costs Buy (verb) (adverb)Look (verb) Costs (adjective)
  • 4. The Language of InterfaceGraphical (understanding) Interactive (doing)• Layout • Affordances• Objects • HUD• Type • Feedback• Color • Modes• Line • Input• Hierarchy • Navigation• Relationships
  • 5. Interactive Interface DesignDOING
  • 6. Affordances
  • 7. Buttons Look Pushable
  • 8. Buttons with meaning
  • 9. Links Look Clickable
  • 10. Links Have Hierarchy
  • 11. On SubtletyWhen you don’t want to interrupt an action, be subtle (think of footnotes). If they arereading, 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.
  • 12. HUD Heads Up Display: Information user needs nearby to be effective
  • 13. A integrated approach
  • 14. An email HUDAll HUD, no content
  • 15. A social HUD
  • 16. Feedback
  • 17. Inputs
  • 18. Form Principles• Consider Context• Set expectations• Use appropriate inputs• Give sift and clear feedback• Ask for less• AB test
  • 19. Forms
  • 20. 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 Cooper21
  • 21. 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 subset22
  • 22. The magic number? • 13 tabs– no one saw them. Six tabs, everyone saw them23
  • 23. Global links But not everything is simple Related Web search Services inboxmasthead Log out Mail tools upsellFolders And there inbox Write mail tip ads isn’t even upsell ad Other properties content! Related Services Mail tools ad 24
  • 24. Navigation orders complex pages 25
  • 25. Understanding Navigation Message and Access Global Navigation Where Am I? Local Navigation Whats Nearby? Content Lives Here, Whats Related With Contextual Navigation Inline To Whats Here? Or Separate.26
  • 26. 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
  • 27. Global Navigation ‘03 vs ‘1228
  • 28. Global navigation29
  • 29. Global navigation ‘03 vs ‘1230
  • 30. 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
  • 31. Local Navigation ‘03 vs ‘1232
  • 32. Local Navigation 200333
  • 33. Secondarynavigation is now temporal
  • 34. Local Navigation35
  • 35. Contextual navigation• Inline links• Related items• Document management36
  • 36. Inline links37
  • 37. Related items38
  • 38. 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 click39
  • 39. Ad negotiation40
  • 40. Print/email/clip41
  • 41. Sort42
  • 42. Secondary Navigation• Site Maps• Indexes• Table of Contents 43
  • 43. Have you ever seen this page? 44
  • 44. How about this one? 45
  • 45. How about this one? 46
  • 46. You can make it helpful“After testing severaldifferent sitemap designson users, I decided to tryputting one on every pageof my small Columbianweb site. I then decided totrack how often it wasused for navigation. Itturns out the sitemap isused for over 65% of allnavigation done on thesite.”-- Usability Report by Peter VanDijck of (Guideto Columbia) 47
  • 47. ConventionsIt 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
  • 48. 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
  • 49. 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
  • 50. Now combine• Follow expectations based on conventions• Design a hierarchy based on task importance• Err on the side of simplicity51
  • 51. Homework• Analyze two competitors, one complementor – Layout – Inputs/functionality – Groupings – Hierarchy Product – Trust/reassurance (noun) Costs Buy (verb) (adverb) Look Costs (verb) (adjective)
  • 52. Graphic DesignUNDERSTANDING
  • 53. Designing to UnderstandUse For• Hierarchy • Importance• Layout • Sequence• Images • Location• Type • Reassurance• Color • Motivation• Line • Involvement• Relationships • Seduction• Progression
  • 55. LOOK LOOK LOOK LOOK LOOKLaw of Focal PointThe idea that a point of interest, something emphasised or different willcatch and hold the viewers attention (Chang, 2002).HIERARCHY GIVES CLARITY
  • 57. Order and CompositionLAYOUT
  • 58. PAINTING
  • 59. PAINTING
  • 60. Comics are read in the west left to right, like a page. However, good artists add visual elements to help you flow.
  • 61. TYPE
  • 62. I am a serifed font I am sans-serif
  • 63. I am Times New Roman Hey, I’m arial
  • 64. I am Comic Sans I am the devil
  • 65. I am Impact LOL
  • 66. Display fonts aren’t readable Use them only for titles. (Hi, I’m Georgia, and I’m always welcome!)
  • 67. COLOR
  • 68. Cheaters Tricks• One color, with variations. One accent. Period• Use a generator site• Use nature selections-colors-found-in-nature-and- interface-design/
  • 69. nature
  • 71. LINE
  • 72. Warm, hand drawn lines= Artisanal
  • 73. Lines gently reinforce the grid = scientific
  • 74. Simple lined Navigation = Artwork
  • 75. Grid edged with lines=Modrian=Modern
  • 77. Which pair of pants are now 39.99?
  • 78. Which car is 49.99?
  • 79. If you are putting boxes around things to make it clear, you probably should start over
  • 80. See & CONTRAST
  • 81. Take advantage of the mediumPROGRESSION
  • 82. This is a very tall page
  • 83. This one too
  • 84. This is a long page
  • 85. Flipboardmoves in avariety ofdirections
  • 86. Even if you use the “wrong”gesture, Flipboard reacts correctly.
  • 87. Fake it til you make itGRAPHIC DESIGN HACKS
  • 88. 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
  • 89. Cheats• Patterns• Kits like this• Libraries• Odesk• Conference proceedingsYou can’t buy taste
  • 90. Homework• Analyze two competitors, one complementor• Do wire frames for three key screens• Optional: begin interfaces