Your SlideShare is downloading. ×
0
Designing InterfaceCore Principles And Considerations
Sentence diagramming
Interface diagramming                                 Product                                 (noun)                      ...
The Language of InterfaceGraphical (understanding)   Interactive (doing)• Layout                    • Affordances• Objects...
Interactive Interface DesignDOING
Affordances
Buttons Look Pushable
Buttons with meaning
Links Look Clickable
Links Have Hierarchy
On SubtletyWhen you don’t want to interrupt an action, be subtle (think of footnotes). If they arereading, don’t bother th...
HUD      Heads Up      Display:      Information      user needs      nearby to be      effective
A integrated approach
An email HUDAll HUD, no content
A social HUD
Feedback
Inputs
Form Principles•   Consider Context•   Set expectations•   Use appropriate inputs•   Give sift and clear feedback•   Ask f...
Formshttp://www.lukew.com/ff/entry.asp?1502
Navigation                            IA made visible “Like putting an Armani suit on Attila the Hun, interface design onl...
Most IA is invisible         • A lot of work no one           sees         • Synonym rings, etc         • If it was seen, ...
The magic number?         • 13 tabs– no one           saw them. Six           tabs, everyone saw           them23
Global links               But not everything is simple                          Related                                  ...
Navigation orders complex pages       25
Understanding Navigation     Message and Access      Global Navigation                                         Where Am I?...
Global navigation• Where you are     – Brand/masthead• Where you can go (site offering)     – Top level categories• Safety...
Global Navigation ‘03 vs ‘1228
Global navigation29
Global navigation ‘03 vs ‘1230
Local Navigation• I’ve started down the path• Now what?     – What are the categories of items?     – What are the sibling...
Local Navigation ‘03 vs ‘1232
Local Navigation 200333
Secondarynavigation is now    temporal
Local Navigation35
Contextual navigation• Inline links• Related items• Document management36
Inline links37
Related items38
Pagination     Useful to reduce page     download speed and     cognitive overload.     Annoying for printing.     Impossi...
Ad negotiation40
Print/email/clip41
Sort42
Secondary Navigation• Site Maps• Indexes• Table of Contents         43
Have you ever seen this page?     44
How about this one? 45
How about this one? 46
You can make it helpful“After testing severaldifferent sitemap designson users, I decided to tryputting one on every pageo...
ConventionsIt is certainly probable, then, that placing these objects in expected locations would give an e-commerce site ...
Conventions                                                              If 90% or more of the big sites do things in a si...
Conventions• Some things are  becoming de rigor• Deviate when  you’ve got  something better• Not because you  are bored   ...
Now combine• Follow expectations based on conventions• Design a hierarchy based on task  importance• Err on the side of si...
Homework• Analyze two competitors, one complementor  – Layout  – Inputs/functionality  – Groupings  – Hierarchy           ...
Graphic DesignUNDERSTANDING
Designing to UnderstandUse                  For• Hierarchy          • Importance• Layout             • Sequence• Images   ...
WHAT IS THE SINGLE MOSTIMPORTANT THING?
LOOK                                                    LOOK    LOOK     LOOK                                             ...
WHAT ORDER SHOULD I LOOK?
Order and CompositionLAYOUT
PAINTING
PAINTING
Comics are read in    the west left to   right, like a page.    However, good   artists add visual   elements to help     ...
TYPE
I am a serifed font     I am sans-serif
I am Times New Roman       Hey, I’m arial
I am Comic Sans    I am the devil
I am Impact    LOL
Display fonts aren’t   readable   Use them only for titles. (Hi, I’m Georgia, and I’m always welcome!)
COLOR
Cheaters Tricks• One color, with variations. One accent. Period• Use a generator site  http://www.colourlovers.com/• Use n...
nature
IF PHOTO-HEAVY, USE LITTLE COLOR
LINE
Warm, hand drawn lines= Artisanal
Lines gently reinforce the grid = scientific
Simple lined Navigation = Artwork
Grid edged with lines=Modrian=Modern
RELATIONSHIPS
Which pair of pants are     now 39.99?
Which car is 49.99?
If you are putting boxes around things to make it       clear, you probably should start over
See http://contrastrebellion.com/DIFFERENCE & CONTRAST
Take advantage of the mediumPROGRESSION
This is a very tall page
This one too
This is a long page
Flipboardmoves in avariety ofdirections
Even if you use the “wrong”gesture, Flipboard reacts correctly.
Fake it til you make itGRAPHIC DESIGN HACKS
Minimalist Design• Only use one font. Preferably helvetica.• Only use three, all very very different. Perhaps a  fourth fo...
Cheats•   Patterns•   Kits like this•   Libraries•   Odesk•   Conference proceedingsYou can’t buy taste
Homework• Analyze two competitors, one complementor• Do wire frames for three key screens• Optional: begin interfaces
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
The Principles of Interface
Upcoming SlideShare
Loading in...5
×

The Principles of Interface

10,188

Published on

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

Published in: Design
1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,188
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
152
Comments
1
Likes
22
Embeds 0
No embeds

No notes for slide

Transcript of "The Principles of Interface"

  1. 1. Designing InterfaceCore Principles And Considerations
  2. 2. Sentence diagramming
  3. 3. Interface diagramming Product (noun) Costs Buy (verb) (adverb)Look (verb) Costs (adjective)
  4. 4. The Language of InterfaceGraphical (understanding) Interactive (doing)• Layout • Affordances• Objects • HUD• Type • Feedback• Color • Modes• Line • Input• Hierarchy • Navigation• Relationships
  5. 5. Interactive Interface DesignDOING
  6. 6. Affordances
  7. 7. Buttons Look Pushable
  8. 8. Buttons with meaning
  9. 9. Links Look Clickable
  10. 10. Links Have Hierarchy
  11. 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. 12. HUD Heads Up Display: Information user needs nearby to be effective
  13. 13. A integrated approach
  14. 14. An email HUDAll HUD, no content
  15. 15. A social HUD
  16. 16. Feedback
  17. 17. Inputs
  18. 18. Form Principles• Consider Context• Set expectations• Use appropriate inputs• Give sift and clear feedback• Ask for less• AB test
  19. 19. Formshttp://www.lukew.com/ff/entry.asp?1502
  20. 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. 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. 22. The magic number? • 13 tabs– no one saw them. Six tabs, everyone saw them23
  23. 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. 24. Navigation orders complex pages 25
  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. 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. 27. Global Navigation ‘03 vs ‘1228
  28. 28. Global navigation29
  29. 29. Global navigation ‘03 vs ‘1230
  30. 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. 31. Local Navigation ‘03 vs ‘1232
  32. 32. Local Navigation 200333
  33. 33. Secondarynavigation is now temporal
  34. 34. Local Navigation35
  35. 35. Contextual navigation• Inline links• Related items• Document management36
  36. 36. Inline links37
  37. 37. Related items38
  38. 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. 39. Ad negotiation40
  40. 40. Print/email/clip41
  41. 41. Sort42
  42. 42. Secondary Navigation• Site Maps• Indexes• Table of Contents 43
  43. 43. Have you ever seen this page? 44
  44. 44. How about this one? 45
  45. 45. How about this one? 46
  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. 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. 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. 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. 50. Now combine• Follow expectations based on conventions• Design a hierarchy based on task importance• Err on the side of simplicity51
  51. 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. 52. Graphic DesignUNDERSTANDING
  53. 53. Designing to UnderstandUse For• Hierarchy • Importance• Layout • Sequence• Images • Location• Type • Reassurance• Color • Motivation• Line • Involvement• Relationships • Seduction• Progression
  54. 54. WHAT IS THE SINGLE MOSTIMPORTANT THING?
  55. 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. 56. WHAT ORDER SHOULD I LOOK?
  57. 57. Order and CompositionLAYOUT
  58. 58. PAINTING
  59. 59. PAINTING
  60. 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. 61. TYPE
  62. 62. I am a serifed font I am sans-serif
  63. 63. I am Times New Roman Hey, I’m arial
  64. 64. I am Comic Sans I am the devil
  65. 65. I am Impact LOL
  66. 66. Display fonts aren’t readable Use them only for titles. (Hi, I’m Georgia, and I’m always welcome!)
  67. 67. COLOR
  68. 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. 69. nature
  70. 70. IF PHOTO-HEAVY, USE LITTLE COLOR
  71. 71. LINE
  72. 72. Warm, hand drawn lines= Artisanal
  73. 73. Lines gently reinforce the grid = scientific
  74. 74. Simple lined Navigation = Artwork
  75. 75. Grid edged with lines=Modrian=Modern
  76. 76. RELATIONSHIPS
  77. 77. Which pair of pants are now 39.99?
  78. 78. Which car is 49.99?
  79. 79. If you are putting boxes around things to make it clear, you probably should start over
  80. 80. See http://contrastrebellion.com/DIFFERENCE & CONTRAST
  81. 81. Take advantage of the mediumPROGRESSION
  82. 82. This is a very tall page
  83. 83. This one too
  84. 84. This is a long page
  85. 85. Flipboardmoves in avariety ofdirections
  86. 86. Even if you use the “wrong”gesture, Flipboard reacts correctly.
  87. 87. Fake it til you make itGRAPHIC DESIGN HACKS
  88. 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. 89. Cheats• Patterns• Kits like this• Libraries• Odesk• Conference proceedingsYou can’t buy taste
  90. 90. Homework• Analyze two competitors, one complementor• Do wire frames for three key screens• Optional: begin interfaces
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×