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
49. 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
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
50
51. Now combine
⢠Follow expectations based on conventions
⢠Design a hierarchy based on task
importance
⢠Err on the side of simplicity
51
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