the principles of interface
Post on 16-Sep-2014
25 views
DESCRIPTION
Graphic and interactive elements together in harmony can create a great user experience.TRANSCRIPT
![Page 1: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/1.jpg)
Designing Interface
Core Principles And Considerations
![Page 2: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/2.jpg)
![Page 3: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/3.jpg)
Sentence diagramming
![Page 4: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/4.jpg)
Interface diagramming
Product (noun)
Buy (verb) Costs (adverb)
Look (verb) Costs (adjective)
![Page 5: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/5.jpg)
The Language of Interface
Graphical (understanding)• Layout• Objects• Type• Color• Line• Hierarchy• Relationships
Interactive (doing)• Affordances • HUD• Feedback• Modes• Input• Navigation
![Page 6: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/6.jpg)
DOINGInteractive Interface Design
![Page 7: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/7.jpg)
Affordances
![Page 8: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/8.jpg)
Buttons Look Pushable
![Page 9: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/9.jpg)
Buttons with meaning
![Page 10: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/10.jpg)
Links Look Clickable
![Page 11: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/11.jpg)
Links Have Hierarchy
![Page 12: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/12.jpg)
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.
![Page 13: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/13.jpg)
HUD
Heads Up Display: Information user needs nearby to be effective
![Page 14: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/14.jpg)
A integrated approach
![Page 15: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/15.jpg)
An email HUD
All HUD, no content
![Page 16: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/16.jpg)
A social HUD
![Page 17: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/17.jpg)
Feedback
![Page 18: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/18.jpg)
Inputs
![Page 19: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/19.jpg)
Form Principles
• Consider Context• Set expectations• Use appropriate inputs• Give sift and clear feedback• Ask for less• AB test
![Page 20: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/20.jpg)
Forms
http://www.lukew.com/ff/entry.asp?1502
![Page 21: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/21.jpg)
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
![Page 22: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/22.jpg)
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
![Page 23: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/23.jpg)
23
The magic number?
• 13 tabs– no one saw them. Six tabs, everyone saw them
![Page 24: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/24.jpg)
24
But not everything is simple
masthead
Global links
Folders
Mail tools
ad
Other properties
upsell
Web searchRelated Services
tip
inbox
ads
ad
Related Services
upsell
Mail tools
Log out
inbox Write mailAnd there isn’t even content!
![Page 25: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/25.jpg)
25
Navigation orders complex pages
![Page 26: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/26.jpg)
26
Understanding Navigation
Message and Access
Where Am I?
Wha
t's N
earb
y?
What's RelatedTo What's Here?
Global Navigation
Loca
l Nav
igat
ion
Content Lives Here,With ContextualNavigation Inline
Or Separate.
![Page 27: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/27.jpg)
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???)
![Page 28: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/28.jpg)
28
Global Navigation ‘03 vs ‘12
![Page 29: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/29.jpg)
29
Global navigation
![Page 30: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/30.jpg)
30
Global navigation ‘03 vs ‘12
![Page 31: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/31.jpg)
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?
![Page 32: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/32.jpg)
32
Local Navigation ‘03 vs ‘12
![Page 33: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/33.jpg)
33
Local Navigation 2003
![Page 34: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/34.jpg)
Secondary navigation is now
temporal
![Page 35: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/35.jpg)
35
Local Navigation
![Page 36: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/36.jpg)
36
Contextual navigation
• Inline links• Related items• Document management
![Page 37: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/37.jpg)
37
Inline links
![Page 38: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/38.jpg)
38
Related items
![Page 39: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/39.jpg)
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
![Page 40: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/40.jpg)
40
Ad negotiation
![Page 41: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/41.jpg)
41
Print/email/clip
![Page 42: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/42.jpg)
42
Sort
![Page 43: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/43.jpg)
43
Secondary Navigation
• Site Maps• Indexes• Table of Contents
![Page 44: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/44.jpg)
44
Have you ever seen this page?
![Page 45: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/45.jpg)
45
How about this one?
![Page 46: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/46.jpg)
46
How about this one?
![Page 47: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/47.jpg)
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/sitemap.html
![Page 48: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/48.jpg)
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
![Page 49: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/49.jpg)
49
ConventionsIf 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
![Page 50: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/50.jpg)
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
![Page 51: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/51.jpg)
51
Now combine
• Follow expectations based on conventions• Design a hierarchy based on task
importance• Err on the side of simplicity
![Page 52: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/52.jpg)
Homework
• Analyze two competitors, one complementor– Layout– Inputs/functionality– Groupings– Hierarchy– Trust/reassurance
Product (noun)
Buy (verb) Costs (adverb)
Look (verb)
Costs (adjective)
![Page 53: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/53.jpg)
UNDERSTANDINGGraphic Design
![Page 54: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/54.jpg)
Designing to Understand
Use• Hierarchy• Layout• Images• Type• Color• Line• Relationships• Progression
For• Importance• Sequence• Location• Reassurance• Motivation• Involvement• Seduction
![Page 55: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/55.jpg)
WHAT IS THE SINGLE MOST IMPORTANT THING?
![Page 56: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/56.jpg)
![Page 57: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/57.jpg)
![Page 58: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/58.jpg)
![Page 59: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/59.jpg)
![Page 60: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/60.jpg)
![Page 61: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/61.jpg)
HIERARCHY GIVES CLARITY
Law of Focal PointThe idea that a point of interest, something emphasised or different will catch and hold the viewers attention (Chang, 2002).
LOOK
LOOK
LOOK
LOOK
LOOK
![Page 62: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/62.jpg)
WHAT ORDER SHOULD I LOOK?
![Page 63: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/63.jpg)
LAYOUTOrder and Composition
![Page 64: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/64.jpg)
PAINTING
![Page 65: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/65.jpg)
PAINTING
![Page 66: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/66.jpg)
![Page 67: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/67.jpg)
![Page 68: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/68.jpg)
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/
![Page 69: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/69.jpg)
![Page 70: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/70.jpg)
![Page 71: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/71.jpg)
![Page 72: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/72.jpg)
TYPE
![Page 73: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/73.jpg)
I am a serifed font
I am sans-serif
![Page 74: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/74.jpg)
I am Times New Roman
Hey, I’m arial
![Page 75: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/75.jpg)
I am Comic Sans
I am the devil
![Page 76: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/76.jpg)
I am Impact
LOL
![Page 77: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/77.jpg)
![Page 78: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/78.jpg)
Display fonts aren’t readable
Use them only for titles.
(Hi, I’m Georgia, and I’m always welcome!)
![Page 79: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/79.jpg)
![Page 80: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/80.jpg)
![Page 81: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/81.jpg)
![Page 82: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/82.jpg)
COLOR
![Page 83: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/83.jpg)
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/
![Page 84: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/84.jpg)
![Page 85: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/85.jpg)
![Page 86: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/86.jpg)
nature
![Page 87: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/87.jpg)
![Page 88: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/88.jpg)
![Page 89: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/89.jpg)
![Page 90: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/90.jpg)
![Page 91: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/91.jpg)
![Page 92: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/92.jpg)
IF PHOTO-HEAVY, USE LITTLE COLOR
![Page 93: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/93.jpg)
![Page 94: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/94.jpg)
![Page 95: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/95.jpg)
![Page 96: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/96.jpg)
LINE
![Page 97: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/97.jpg)
Warm, hand drawn lines= Artisanal
![Page 98: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/98.jpg)
Lines gently reinforce the grid = scientific
![Page 99: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/99.jpg)
Simple lined Navigation = Artwork
![Page 100: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/100.jpg)
Grid edged with lines=Modrian=Modern
![Page 101: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/101.jpg)
RELATIONSHIPS
![Page 102: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/102.jpg)
Which pair of pants are now 39.99?
![Page 103: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/103.jpg)
Which car is 49.99?
![Page 104: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/104.jpg)
If you are putting boxes around things to make it clear, you probably should start over
![Page 105: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/105.jpg)
DIFFERENCE & CONTRASTSee http://contrastrebellion.com/
![Page 106: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/106.jpg)
![Page 107: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/107.jpg)
PROGRESSIONTake advantage of the medium
![Page 108: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/108.jpg)
This is a very tall page
![Page 109: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/109.jpg)
![Page 110: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/110.jpg)
![Page 111: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/111.jpg)
![Page 112: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/112.jpg)
![Page 113: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/113.jpg)
![Page 114: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/114.jpg)
![Page 115: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/115.jpg)
![Page 116: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/116.jpg)
This one too
![Page 117: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/117.jpg)
![Page 118: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/118.jpg)
![Page 119: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/119.jpg)
![Page 120: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/120.jpg)
![Page 121: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/121.jpg)
This is a long page
![Page 122: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/122.jpg)
Flipboard moves in a variety of directions
![Page 123: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/123.jpg)
![Page 124: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/124.jpg)
![Page 125: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/125.jpg)
Even if you use the “wrong” gesture, Flipboard reacts correctly.
![Page 126: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/126.jpg)
GRAPHIC DESIGN HACKSFake it til you make it
![Page 127: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/127.jpg)
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
![Page 128: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/128.jpg)
Cheats
• Patterns• Kits like this• Libraries• Odesk• Conference proceedings
You can’t buy taste
![Page 129: The Principles of Interface](https://reader033.vdocuments.net/reader033/viewer/2022061106/541857697bef0a25558b6cac/html5/thumbnails/129.jpg)
Homework
• Analyze two competitors, one complementor• Do wire frames for three key screens• Optional: begin interfaces