12. 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.
13. HUD
Heads Up
Display:
Information
user needs
nearby to be
effective
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
21
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
22
23. The magic number?
• 13 tabs– no one
saw them. Six
tabs, everyone saw
them
23
24. Global links
But not everything is simple
Related Web search
Services inbox
masthead Log out
Mail tools
upsell
Folders
And there
inbox Write mail
tip
ads
isn’t even upsell ad
Other
properties
content!
Related
Services
Mail tools
ad
24
26. Understanding Navigation
Message and Access
Global Navigation Where Am I?
Local Navigation
What's Nearby?
Content Lives Here, What's Related
With Contextual
Navigation Inline
To What's Here?
Or Separate.
26
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???)
27
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?
31
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
39
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/sitema
p.html
47
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
48
61. LOOK
LOOK LOOK LOOK
LOOK
Law of Focal Point
The idea that a point of interest, something emphasised or different will
catch and hold the viewers attention (Chang, 2002).
HIERARCHY GIVES CLARITY
83. 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/
127. 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
128. Cheats
• Patterns
• Kits like this
• Libraries
• Odesk
• Conference proceedings
You can’t buy taste
129. Homework
• Analyze two competitors, one complementor
• Do wire frames for three key screens
• Optional: begin interfaces