The Principles of Interface

13,117
-1

Published on

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

Published in: Design
1 Comment
23 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,117
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
174
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

The Principles of Interface

  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. Formshttp://www.lukew.com/ff/entry.asp?1502
  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 poorbuthappy.com (Guideto Columbia)http://www.webword.com/reports/sitemap.html 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
  54. WHAT IS THE SINGLE MOSTIMPORTANT THING?
  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
  56. WHAT ORDER SHOULD I LOOK?
  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.http://samkieth.blogspot.com/
  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 http://www.colourlovers.com/• Use nature http://boxesandarrows.com/natural- selections-colors-found-in-nature-and- interface-design/
  69. nature
  70. IF PHOTO-HEAVY, USE LITTLE COLOR
  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
  76. RELATIONSHIPS
  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 http://contrastrebellion.com/DIFFERENCE & 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

×