The Principles of Interface

  • 9,054 views
Uploaded 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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,054
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
146
Comments
1
Likes
22

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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