SlideShare a Scribd company logo
Don’t Make Me Think
- A Common Sense Approach to Web Usability
Steve Krug
New Riders Publishing
--- summary only for my personal use.
1. Don’t make me think!
I could list dozens of other things that visitors to a site shouldn’t spend their time
thinking about, like:
Ø Where am I?
Ø Where should I begin?
Ø Where did they put ____ ?
Ø What are the most important things on this page?
Ø Why did they call it that?
2. How we really use the web.
Scanning , satisficing, and muddling through
We don’t read pages. We scan them.
Ø We’re usually in a hurry.
Ø We know we don’t need to read everything.
Ø We’re good at it. We’ve been scanning newspapers, magazines, and
books all our lives to find the parts we’re interested in , and we know that it
works.
We don’t make optical choice s. We satisfice.
In reality, though, most of the time we don’t choose the best option- we
choose the first reasonable option, a strategy known as satisfying. As soon as
we find a link that seems like it might lead to what we’re looking for, there’s a
very good chance that we’ll click it.
Why don’t Web users look for the best choice?
Ø We’re usually in a hurry.
Ø There’s not much of a penalty for guessing wrong.
Ø Weighing options may not improve our chances
On poorly designed sites, putting effort into making the best choice
doesn’t really help. You’re usually better off going with your first guess and
using the Back button if it doesn’t work out
Ø Guessing is more fun.
3. Billboard Design 101
Designing pages for scanning, not reading
Faced with the fact that your users are whizzing by, there are five
important things you can do to make sure they see- and understand- as
much of your site as possible.
Ø Create a clear visual hierarchy on each page
Ø Take advantage of conventions
Ø Break pages up into clearly defined areas
Ø Make it obvious what’s clickable
Ø Minimize noise
Create a clear visual hierarchy
Ø The more important something is, the more prominent it is.
Ø Things that are related logically are also related visually.
Ø Things are “nested”visually to show what’s part of what.
Conventions are you friends
Conventions enable users to figure out a lot about a Web page, even if they
can’t understand a word of it.
Ø They’re very useful
Ø Designers are often reluctant to take advantage of them.
Break up pages into clearly defined areas.
Make it obvious what’s clickable.
Keep the noise down to a dull roar.
One of the great enemies of easy-to-grasp pages is visual noise. There are
really two kinds of noise:
Ø Busy-ness
Ø Background noise.
Users have varying tolerance for complexity and distractions: some people
have no problem with busy pages and background noise, but many do.
When you’re designing Web pages, it’s probably a good idea to assume
that everything is visual noise until proven otherwise.
4. Animal, Vegetable or mineral?
Why users like mindless choices
In general I think it’s safe to say that users don’t mind a lot of clicks as
long as each click is painless and they have continued confidence that
they’re on the right track. I think the rule of thumb might be something like”
three mindless, unambiguous clicks equal one click that requires thought.”
We face choices all the time on the Web and making the choices mindless
is one of the main things that make a site easy to use.
5. Omit Needless words.
The art of not writing for the web.
Omit needless words
Vigorous writing is concise. A sentence should contain no unnecessary
words, a paragraph no unnecessary sentences, for the same reason that
a drawing should have no unnecessary lines and a machine no
unnecessary parts.
Getting rid of those words that no one is going to read has several
beneficial effects:
Ø It reduces the noise level of the page
Ø It makes the useful content more prominent
Ø It makes the pages shorter, allowing users to see more of each page at a
glance without scrolling.
Happy talk must die.
- A lot of happy talk is the kind of self-congratulatory promotional
writing that you find in badly written brochures. Unlike good
promotional copy, it conveys no useful information, and it focuses
on saying how great we are, as opposed to delineating what makes
us great.
Instruction must die.
- The main thing you need to know about instructions is that no one
is going to read them. If the instructions are wordy, the odds of
users finding the information they need is pretty low.
- You objective should always be to eliminate instructions entirely by
making everything self-explanatory, or as close to it as possible.
When instructions are absolutely necessary, cut them back to the
bare minimum.
6. Street signs and Breadcrumbs
Scene from a mall – We need a decision chart*
Web Navigation 101
Ø You’re usually trying to find something
Ø You decide whether to ask first or browse first.
Ø If you choose to browse, you make your way through a hierarchy, using
signs to guide you.
Ø Eventually, if you can’t find what you’re looking for, you’ll leave.
The unbearable lightness of browsing
Ø No sense of scale: In web, there could be huge corners we’ve never
explored.
Ø No sense of direction: meaning up and down, the direction in hierarchy- to
a more general or more specific level.
Ø No sense of location: We develop a sense of where things are and can
take shortcuts to get to them.
The overlooked purposes of navigation
Two of the purposes of navigation are fairly obvious: to help us find
whatever it is we’re looking for, and to tell us where we are.
Ø It gives us something to hold on to.
Ø It tells us what’s here: By making the hierarchy visible, navigation tells us
what the site contains.
Ø It tells us how to use the site: Navigation tells us implicitly where to begin
and what your options are.
Ø It gives us confidence in the people who built it. Clear, well-thought-out
navigation is one of the best opportunities a site has t create a good
impression.
Web navigation conventions
The basic elements are:
Ø Site ID
Ø Sections/Sub-Sections : sometimes called the primary navigation- are the
links to the main sections of the site: the top level of the site’s hierarchy.
Ø Utilities: Important elements of the site that aren’t really part of the content
hierarchy.
// About Us, Archives, Checkout, Company Info, Contact Us, Customer
Service, Discussion Boards, Downloads, Directory, Forums, FAQs, Help,
Home, Investor Relations, How to Shop, Jobs, My____, News, Order
Tracking, Press Releases, Privacy Policy, Register, Search, Shopping
Cart, Sign in, Site Map, Store Locator, Your Account
Ø “You are here” indicator
Ø Page Name
Ø Local Navigation(Things at the current level)
Ø Small text version
Ø A way home
Ø A way to search
Homepage and Forms
Ø Homepage is not like the other pages- sometimes it makes sense not to
use the persistent navigation there.
Ø Forms: It’s useful to have a minimal version of the persistent navigation
with just the Site ID, a link to Home, and any Utilities that might help me fill
out the form.
Just click your heels three times and say, “There’s no place like
home”
There’s an emerging convention that the Site ID doubles as a button that
can take you to the site’s Home page. It’s a useful idea that every site
should implement, but a surprising number of users still aren’t aware of it.
Ø include a Home page link in either the Sections or the Utilities, or
Ø add the word “Home” discreetly to the site ID everywhere but the Home
page to let people know that it’s clickable.
A way to search
Unless a site is very small and very well organized, every page should
have either a search box or a link to a search page.
Ø Fancy wording: “Search”, not Find, Quick Find, Quick search, or Keyword
Search.
Ø Instructions: “Type a keyword” just makes you sound clueless.
Ø Option: Only give the option when it is useful.
Secondary, tertiary, and whatever comes after tertiary
I almost inevitably get a flowchart that shows a site four levels deep… .
I think this is one of the most common problems in Web design (especially
in larger sites): failing to give the lower-level navigation the same attention
as the top. In so many sites, as soon as you get past the second level, the
navigation breaks down and becomes ad hoc. The problem is so common
that it’s actually hard to find good examples of third-level navigation.
The reality is that there’s users usually end up spending as much time on
lower-level pages as they do at the top. And unless you’ve worked out top-
to –bottom navigation from the beginning, it’s hard to graft it on later and
come up with something consistent.
The moral? It’s vital to have sample pages that show the navigation for all
the potential level of the site before you start arguing about the color
scheme for the Home page.
There are four things you need to know about page names:
Ø Every page needs a name
Ø The name needs to be in the right place
Ø The name needs to be prominent
Ø The name needs to match what I clicked
“You are here”
The common failing of “You are here” indicators is that they’re too subtle.
They need to stand out: if they don’t, they lose their value as visual cues
and end up just adding more noise to the page. One way to ensure that
they stand out is to apply more than one visual distinction-
“Breadcrumbs”
You are here: Home > Hobbies > Book Collection > Welcome
Breadcrumbs alone are a good navigation scheme. Breadcrumbs are self-
explanatory, they don’t take up much room, and they provide a
convenient, consistent way to do two of the things you need to do most
often: back up a level or go Home.
Ø Put them at the top
Ø Use > between levels
Ø Use tiny type
Ø Use the words “You are here”
Ø Boldface the last item.
Ø Don’t use them instead of a page name.
Four Reasons why I love tabs.
Ø They are self-evident.
Ø They’re hard to miss
Ø They’re slick: Web designers are always struggling to make pages more
visually interesting without making them slow to load. If done correctly,
tabs can add polish and serve a useful purpose, all without bulking up the
page size.
Ø They suggest a physical space. Tabs create the illusion that the active tab
physically moves to the front.
Amazon
Amazon was one of the first sites to use tab dividers for navigation.
Ø They’re drawn correctly.
Ø They load first.
Ø Rollovers. : To implement rollovers in tabs or button bars, each button
needs to be a separate graphic. Rollovers have merit, but in most cases I
don’t think they pull their weight.
Ø A misguided belief that it will be faster.
Ø They’re color-coded. : Color is great as an additional clue, but you should
never rely on it as the only cue.
Ø There’s a tab selected when you enter the site.
Try the trunk test: Test for good Web navigation
Ø What site is this? (Site ID)
Ø What page am I on? (Page Name)
Ø What are the major sections of the site? (Sections)
Ø What are my options at this level? (Local navigation)
Ø Where am I in the scheme of things? (“You are here” indicators)
Ø How can I search?
Circle**********
1. Site ID
2. Page Name
3. Sections and subsections
4. Local navigation
5. “You are here” indicator(s)
6. Search
Chapter 7 Designing The Home Page
The first step in recovery is admitting that the Home page is beyond
your control
Think about all the things the Home page has to accommodate:
Ø Site identity and mission. Home page has to tell me what site this is and
what it’s for – and if possible, why I should be here and not at some other
site.
Ø Site hierarchy. Home page has to give an overview of what the site has
to offer-both content (What can I find here?) and features (What can I do
here)-and how it’s all organized. This is usually handled by the persistent
navigation.
Ø Search:
Ø Teases. Like the cover of a magazine, the Home page needs to entice me
with hints of the “good stuff” inside. Content promos spotlight the newest,
best, or most popular pieces of content, like top stories and hot deals.
Feature promos invite me to explore additional sections of the site or try
out features like personalization and email newsletters.
Ø Timely content: may needs to have some content that gets updated
frequently
Ø Deals: Home page space needs to be allocated for whatever advertising,
cross-promotion, and co-branding deals have been made
Ø Short cuts: The most frequently requested pieces of content may deserve
their own links on the Home page so people don’t have to hunt for them.
Ø Registration: for new users
Ø Show me what I’m looking for.
Ø … and what I’m not looking for. some of good things the site has to offer
that I might be interested in – even though I’m not looking for.
Ø Show me where to start: There is nothing worse than encountering a
new Homepage and having no idea where to begin.
Ø Establish credibility and trust: For some visitors, the Home page will be
the only chance your site gets to create a good impression.
And you have to do it… blindfolded
Some of the usual constraints:
Ø Everybody wants a piece of it.
Ø Too many cooks.
Ø One size fits all.
Everybody wants to drop a line on the Home page. And they want good
bait (a large, eye-catching link) and a good location (above the fold).
The First Casualty of War – They haven’t made it clear enough what
the site is
Ø What is this?
Ø What can I do here?
Ø What do they have here?
Ø Why should I be here- and not somewhere else?
How to get the message across
There are two important places on the page where we expect to find
explicit statements of what the site is about
Ø The tagline. One of the most valuable bits of real estate is the space right
next to the Site ID. When we see a phrase that’s visually connected to the
ID, we know it’s meant to be a tagline, and so we read it as a description
of the whole site.
Ø The Welcome blurb. The Welcome blurb is a terse description of the site,
displayed in a prominent block on the Home page that’s visible without
scrolling.
Here are a few guidelines for getting the messages across:
Ø Use as much space as necessary.
Ø … but don’t use any more space than necessary.
Ø Don’t use a mission statement as a Welcome burb.
Ø It’s one of the most important things to test: You can’t trust your own
judgment about this. You need to show the Home page to people from
outside your organization to tell you whether the design is getting this job
done because the “main point” is the one thing nobody inside the
organization will notice is missing.
Nothing beats a good tagline!
Ø Good taglines are clear and informative.
Ø Bad taglines are vague
Ø Good taglines are just long enough. Six to eight words seem to be long
enough to convey a full thought, but short enough to absorb easily.
Ø Good taglines convey differentiation and a clear benefit.
Ø Bad taglines sound generic.
Ø Good taglines are personable, lively, and sometimes clever. Clever is
good, but only if the cleverness helps convey-not obscure- the benefit.
The fifth question
When I enter a new site, after a quick look around the Home page I
should be able to say with confidence:
Ø Here’s where to start if I want to search.
Ø Here’s where to start if I want to browse.
Ø Here’s where to start if I want to sample their best stuff.
Home page navigation can be unique.
(The homepage navigation and the persistent navigation)
“Yes, it can be different. But not too different”
Given the unique responsibilities of the Home page, it often makes
sense not to use the persistent navigation there. Typical differences
include:
Ø Section descriptions. Since the Home page has to reveal as much as it
can of what lies below, you may want to add a descriptive phrase to each
section name, or even list the subsections- something you don’t have the
space to do on every page.
Ø Different orientation. The Home page often requires a very different
layout from all the other pages, so it may be necessary to use horizontal
instead of vertical navigation, or vice versa.
Ø More space for identity. The Site ID on the Home page is usually larger
than in the persistent navigation, like the large sign over a store entrance,
and it usually needs some empty space next to it for the tagline, which
may not appear on every page.
The trouble with rollovers/Pulldowns
Ø You have to seek them out, and hard to scan.
Ø You can only see one at a time
Ø They’re twitchy.
Ø They’re ineffective unless the popup appears near where you’re pointing.
This is where most rollovers fail miserably – and for a good reason.
Rotate your stock
Instead of several small promos that are always visible, you can use the
same amount of space to cycle through a series of three larger promos,
displaying a different one each time the page is loaded.
• The worst case is sites that require users to register before they can even
browse the site.
You be the judge
Decide for yourself how well these two Home pages get the job done.
Take a quick look at each one and answer these two questions, then
compare your answers with mine.
Ø What’s the point of this site?
Ø Do you know where to start?

More Related Content

What's hot

User Research 101
User Research 101User Research 101
User Research 101
Christina Wodtke
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
GDGKuwaitGoogleDevel
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
Morgan McKeagney
 
Customer Journey Maps and Buyer Personas
Customer Journey Maps and Buyer PersonasCustomer Journey Maps and Buyer Personas
Customer Journey Maps and Buyer Personas
Ambachtelijke Marketing
 
Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Carles Farré
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
Evan Samek
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 Slides
Jordan Julien
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
Dotinum
 
User Experience
User ExperienceUser Experience
User Experience
Commit University
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
Michał Aleksander
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
Nicolas Demange
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
KANKIPATI KISHORE
 
The Elements of User Experience
The Elements of User Experience The Elements of User Experience
The Elements of User Experience
brandextract
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
 
UX design
UX designUX design
UX design
Tanay Kumar
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
Patrick Broens
 
The Ultimate Guide To Landing Page Optimization
The Ultimate Guide To Landing Page OptimizationThe Ultimate Guide To Landing Page Optimization
The Ultimate Guide To Landing Page Optimization
Kumaran Balachandran
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
MoodLabs
 

What's hot (20)

User Research 101
User Research 101User Research 101
User Research 101
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
Customer Journey Maps and Buyer Personas
Customer Journey Maps and Buyer PersonasCustomer Journey Maps and Buyer Personas
Customer Journey Maps and Buyer Personas
 
Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Web Usability (Slideshare Version)
Web Usability (Slideshare Version)
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 Slides
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
Ux for beginners
Ux for beginnersUx for beginners
Ux for beginners
 
User Experience
User ExperienceUser Experience
User Experience
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
The Elements of User Experience
The Elements of User Experience The Elements of User Experience
The Elements of User Experience
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
UX design
UX designUX design
UX design
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
The Ultimate Guide To Landing Page Optimization
The Ultimate Guide To Landing Page OptimizationThe Ultimate Guide To Landing Page Optimization
The Ultimate Guide To Landing Page Optimization
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 

Similar to Don't Make me Think - Book Summary

Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me think
Jason White
 
Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me think
Jason White
 
How to Design Effective Websites
How to Design Effective WebsitesHow to Design Effective Websites
How to Design Effective Websites
Jason Slowey
 
Web Usability July 2011
Web Usability July 2011Web Usability July 2011
Web Usability July 2011
Prototype Interactive
 
10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve
Lauren Martin
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website Redesign
Christy Van Heugten
 
What is good design?
What is good design?What is good design?
What is good design?
Saeid Zebardast
 
Don't Make Me Think Review
Don't Make Me Think ReviewDon't Make Me Think Review
Don't Make Me Think Review
sus22
 
Rational Website Design
Rational Website DesignRational Website Design
Rational Website Design
WilliamVisconage
 
Auditing Your Website for Usability Issues
Auditing Your Website for Usability IssuesAuditing Your Website for Usability Issues
Auditing Your Website for Usability Issues
Legal Services National Technology Assistance Project (LSNTAP)
 
Selling to seniors & web design for seniors
Selling to seniors & web design for seniorsSelling to seniors & web design for seniors
Selling to seniors & web design for seniors
Tom Wilson
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
Kathy Gill
 
Web usability
Web usabilityWeb usability
Web usability
8raystech
 
20 Website 'Must Haves'
20 Website 'Must Haves'20 Website 'Must Haves'
20 Website 'Must Haves'
Matrix Internet
 
Week 4 - A User Centred Design
Week 4 -  A User Centred DesignWeek 4 -  A User Centred Design
Week 4 - A User Centred DesignGraeme Smith
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!
Ashley McQuaid
 
Custom Landing Page Design | Common Mistakes & Tested Techniques
Custom Landing Page Design | Common Mistakes & Tested Techniques Custom Landing Page Design | Common Mistakes & Tested Techniques
Custom Landing Page Design | Common Mistakes & Tested Techniques
WSI Premier Esolutions
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
D'arce Hess
 
Landing Page Best Practices
Landing Page Best PracticesLanding Page Best Practices
Landing Page Best Practices
Red8 Interactive
 
香港六合彩 &raquo; SlideShare
香港六合彩 &raquo; SlideShare香港六合彩 &raquo; SlideShare
香港六合彩 &raquo; SlideShare
biyu
 

Similar to Don't Make me Think - Book Summary (20)

Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me think
 
Don’t make me think
Don’t make me thinkDon’t make me think
Don’t make me think
 
How to Design Effective Websites
How to Design Effective WebsitesHow to Design Effective Websites
How to Design Effective Websites
 
Web Usability July 2011
Web Usability July 2011Web Usability July 2011
Web Usability July 2011
 
10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve10 Design & Layout Principles Guaranteed To Improve
10 Design & Layout Principles Guaranteed To Improve
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website Redesign
 
What is good design?
What is good design?What is good design?
What is good design?
 
Don't Make Me Think Review
Don't Make Me Think ReviewDon't Make Me Think Review
Don't Make Me Think Review
 
Rational Website Design
Rational Website DesignRational Website Design
Rational Website Design
 
Auditing Your Website for Usability Issues
Auditing Your Website for Usability IssuesAuditing Your Website for Usability Issues
Auditing Your Website for Usability Issues
 
Selling to seniors & web design for seniors
Selling to seniors & web design for seniorsSelling to seniors & web design for seniors
Selling to seniors & web design for seniors
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 
Web usability
Web usabilityWeb usability
Web usability
 
20 Website 'Must Haves'
20 Website 'Must Haves'20 Website 'Must Haves'
20 Website 'Must Haves'
 
Week 4 - A User Centred Design
Week 4 -  A User Centred DesignWeek 4 -  A User Centred Design
Week 4 - A User Centred Design
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!
 
Custom Landing Page Design | Common Mistakes & Tested Techniques
Custom Landing Page Design | Common Mistakes & Tested Techniques Custom Landing Page Design | Common Mistakes & Tested Techniques
Custom Landing Page Design | Common Mistakes & Tested Techniques
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
 
Landing Page Best Practices
Landing Page Best PracticesLanding Page Best Practices
Landing Page Best Practices
 
香港六合彩 &raquo; SlideShare
香港六合彩 &raquo; SlideShare香港六合彩 &raquo; SlideShare
香港六合彩 &raquo; SlideShare
 

More from Adam Guerguis

كتاب وحيدا في كندا بالعربية Alone in Canada Book in Arabic
كتاب وحيدا في كندا بالعربية Alone in Canada Book in Arabicكتاب وحيدا في كندا بالعربية Alone in Canada Book in Arabic
كتاب وحيدا في كندا بالعربية Alone in Canada Book in Arabic
Adam Guerguis
 
Alone in Canada PDF Book (English Edition)
Alone in Canada PDF Book (English Edition)Alone in Canada PDF Book (English Edition)
Alone in Canada PDF Book (English Edition)
Adam Guerguis
 
06 cles du-recrutement
06 cles du-recrutement06 cles du-recrutement
06 cles du-recrutementAdam Guerguis
 
06 admin chercher-emploi
06 admin chercher-emploi06 admin chercher-emploi
06 admin chercher-emploiAdam Guerguis
 
Guide to finding new job leads in Quebec
Guide to finding new job leads in QuebecGuide to finding new job leads in Quebec
Guide to finding new job leads in QuebecAdam Guerguis
 
Quebec complete job search guide
Quebec complete job search guideQuebec complete job search guide
Quebec complete job search guideAdam Guerguis
 
Share cyclisy motorist
Share cyclisy motoristShare cyclisy motorist
Share cyclisy motoristAdam Guerguis
 
Carproof used-car-buying-guide
Carproof used-car-buying-guideCarproof used-car-buying-guide
Carproof used-car-buying-guide
Adam Guerguis
 
Facebook power editor
Facebook power editorFacebook power editor
Facebook power editorAdam Guerguis
 
Multichannel retail survey
Multichannel retail surveyMultichannel retail survey
Multichannel retail surveyAdam Guerguis
 
Demographics of Social Media Users - 2012 and 2013
Demographics of Social Media Users - 2012 and 2013Demographics of Social Media Users - 2012 and 2013
Demographics of Social Media Users - 2012 and 2013
Adam Guerguis
 
The Human Guide to Humans Religion
The Human Guide to Humans ReligionThe Human Guide to Humans Religion
The Human Guide to Humans Religion
Adam Guerguis
 

More from Adam Guerguis (15)

كتاب وحيدا في كندا بالعربية Alone in Canada Book in Arabic
كتاب وحيدا في كندا بالعربية Alone in Canada Book in Arabicكتاب وحيدا في كندا بالعربية Alone in Canada Book in Arabic
كتاب وحيدا في كندا بالعربية Alone in Canada Book in Arabic
 
Alone in Canada PDF Book (English Edition)
Alone in Canada PDF Book (English Edition)Alone in Canada PDF Book (English Edition)
Alone in Canada PDF Book (English Edition)
 
06 cles du-recrutement
06 cles du-recrutement06 cles du-recrutement
06 cles du-recrutement
 
06 admin chercher-emploi
06 admin chercher-emploi06 admin chercher-emploi
06 admin chercher-emploi
 
Guide to finding new job leads in Quebec
Guide to finding new job leads in QuebecGuide to finding new job leads in Quebec
Guide to finding new job leads in Quebec
 
Quebec complete job search guide
Quebec complete job search guideQuebec complete job search guide
Quebec complete job search guide
 
Inspection guide
Inspection guideInspection guide
Inspection guide
 
Share cyclisy motorist
Share cyclisy motoristShare cyclisy motorist
Share cyclisy motorist
 
Safe cycling
Safe cyclingSafe cycling
Safe cycling
 
Carproof used-car-buying-guide
Carproof used-car-buying-guideCarproof used-car-buying-guide
Carproof used-car-buying-guide
 
Facebook power editor
Facebook power editorFacebook power editor
Facebook power editor
 
Multichannel retail survey
Multichannel retail surveyMultichannel retail survey
Multichannel retail survey
 
Demographics of Social Media Users - 2012 and 2013
Demographics of Social Media Users - 2012 and 2013Demographics of Social Media Users - 2012 and 2013
Demographics of Social Media Users - 2012 and 2013
 
The Human Guide to Humans Religion
The Human Guide to Humans ReligionThe Human Guide to Humans Religion
The Human Guide to Humans Religion
 
Seofs2011 free
Seofs2011 freeSeofs2011 free
Seofs2011 free
 

Recently uploaded

APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
Rogerio Filho
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Brad Spiegel Macon GA
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
eutxy
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
Gal Baras
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
JungkooksNonexistent
 
This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
nirahealhty
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
laozhuseo02
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
3ipehhoa
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
Arif0071
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
JeyaPerumal1
 
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
3ipehhoa
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
natyesu
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
GTProductions1
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Sanjeev Rampal
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
laozhuseo02
 
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdfJAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
Javier Lasa
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
3ipehhoa
 
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptxInternet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
VivekSinghShekhawat2
 

Recently uploaded (20)

APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
 
This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
 
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdfJAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
JAVIER LASA-EXPERIENCIA digital 1986-2024.pdf
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
 
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptxInternet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
 

Don't Make me Think - Book Summary

  • 1. Don’t Make Me Think - A Common Sense Approach to Web Usability Steve Krug New Riders Publishing --- summary only for my personal use. 1. Don’t make me think! I could list dozens of other things that visitors to a site shouldn’t spend their time thinking about, like: Ø Where am I? Ø Where should I begin? Ø Where did they put ____ ? Ø What are the most important things on this page? Ø Why did they call it that? 2. How we really use the web. Scanning , satisficing, and muddling through We don’t read pages. We scan them. Ø We’re usually in a hurry. Ø We know we don’t need to read everything. Ø We’re good at it. We’ve been scanning newspapers, magazines, and books all our lives to find the parts we’re interested in , and we know that it works. We don’t make optical choice s. We satisfice. In reality, though, most of the time we don’t choose the best option- we choose the first reasonable option, a strategy known as satisfying. As soon as we find a link that seems like it might lead to what we’re looking for, there’s a very good chance that we’ll click it. Why don’t Web users look for the best choice? Ø We’re usually in a hurry. Ø There’s not much of a penalty for guessing wrong. Ø Weighing options may not improve our chances On poorly designed sites, putting effort into making the best choice doesn’t really help. You’re usually better off going with your first guess and using the Back button if it doesn’t work out Ø Guessing is more fun.
  • 2. 3. Billboard Design 101 Designing pages for scanning, not reading Faced with the fact that your users are whizzing by, there are five important things you can do to make sure they see- and understand- as much of your site as possible. Ø Create a clear visual hierarchy on each page Ø Take advantage of conventions Ø Break pages up into clearly defined areas Ø Make it obvious what’s clickable Ø Minimize noise Create a clear visual hierarchy Ø The more important something is, the more prominent it is. Ø Things that are related logically are also related visually. Ø Things are “nested”visually to show what’s part of what. Conventions are you friends Conventions enable users to figure out a lot about a Web page, even if they can’t understand a word of it. Ø They’re very useful Ø Designers are often reluctant to take advantage of them. Break up pages into clearly defined areas. Make it obvious what’s clickable. Keep the noise down to a dull roar. One of the great enemies of easy-to-grasp pages is visual noise. There are really two kinds of noise: Ø Busy-ness Ø Background noise. Users have varying tolerance for complexity and distractions: some people have no problem with busy pages and background noise, but many do. When you’re designing Web pages, it’s probably a good idea to assume that everything is visual noise until proven otherwise. 4. Animal, Vegetable or mineral? Why users like mindless choices In general I think it’s safe to say that users don’t mind a lot of clicks as long as each click is painless and they have continued confidence that
  • 3. they’re on the right track. I think the rule of thumb might be something like” three mindless, unambiguous clicks equal one click that requires thought.” We face choices all the time on the Web and making the choices mindless is one of the main things that make a site easy to use. 5. Omit Needless words. The art of not writing for the web. Omit needless words Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. Getting rid of those words that no one is going to read has several beneficial effects: Ø It reduces the noise level of the page Ø It makes the useful content more prominent Ø It makes the pages shorter, allowing users to see more of each page at a glance without scrolling. Happy talk must die. - A lot of happy talk is the kind of self-congratulatory promotional writing that you find in badly written brochures. Unlike good promotional copy, it conveys no useful information, and it focuses on saying how great we are, as opposed to delineating what makes us great. Instruction must die. - The main thing you need to know about instructions is that no one is going to read them. If the instructions are wordy, the odds of users finding the information they need is pretty low. - You objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to the bare minimum. 6. Street signs and Breadcrumbs Scene from a mall – We need a decision chart* Web Navigation 101 Ø You’re usually trying to find something Ø You decide whether to ask first or browse first.
  • 4. Ø If you choose to browse, you make your way through a hierarchy, using signs to guide you. Ø Eventually, if you can’t find what you’re looking for, you’ll leave. The unbearable lightness of browsing Ø No sense of scale: In web, there could be huge corners we’ve never explored. Ø No sense of direction: meaning up and down, the direction in hierarchy- to a more general or more specific level. Ø No sense of location: We develop a sense of where things are and can take shortcuts to get to them. The overlooked purposes of navigation Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for, and to tell us where we are. Ø It gives us something to hold on to. Ø It tells us what’s here: By making the hierarchy visible, navigation tells us what the site contains. Ø It tells us how to use the site: Navigation tells us implicitly where to begin and what your options are. Ø It gives us confidence in the people who built it. Clear, well-thought-out navigation is one of the best opportunities a site has t create a good impression. Web navigation conventions The basic elements are: Ø Site ID Ø Sections/Sub-Sections : sometimes called the primary navigation- are the links to the main sections of the site: the top level of the site’s hierarchy. Ø Utilities: Important elements of the site that aren’t really part of the content hierarchy. // About Us, Archives, Checkout, Company Info, Contact Us, Customer Service, Discussion Boards, Downloads, Directory, Forums, FAQs, Help, Home, Investor Relations, How to Shop, Jobs, My____, News, Order Tracking, Press Releases, Privacy Policy, Register, Search, Shopping Cart, Sign in, Site Map, Store Locator, Your Account Ø “You are here” indicator Ø Page Name Ø Local Navigation(Things at the current level) Ø Small text version Ø A way home Ø A way to search Homepage and Forms Ø Homepage is not like the other pages- sometimes it makes sense not to use the persistent navigation there.
  • 5. Ø Forms: It’s useful to have a minimal version of the persistent navigation with just the Site ID, a link to Home, and any Utilities that might help me fill out the form. Just click your heels three times and say, “There’s no place like home” There’s an emerging convention that the Site ID doubles as a button that can take you to the site’s Home page. It’s a useful idea that every site should implement, but a surprising number of users still aren’t aware of it. Ø include a Home page link in either the Sections or the Utilities, or Ø add the word “Home” discreetly to the site ID everywhere but the Home page to let people know that it’s clickable. A way to search Unless a site is very small and very well organized, every page should have either a search box or a link to a search page. Ø Fancy wording: “Search”, not Find, Quick Find, Quick search, or Keyword Search. Ø Instructions: “Type a keyword” just makes you sound clueless. Ø Option: Only give the option when it is useful. Secondary, tertiary, and whatever comes after tertiary I almost inevitably get a flowchart that shows a site four levels deep… . I think this is one of the most common problems in Web design (especially in larger sites): failing to give the lower-level navigation the same attention as the top. In so many sites, as soon as you get past the second level, the navigation breaks down and becomes ad hoc. The problem is so common that it’s actually hard to find good examples of third-level navigation. The reality is that there’s users usually end up spending as much time on lower-level pages as they do at the top. And unless you’ve worked out top- to –bottom navigation from the beginning, it’s hard to graft it on later and come up with something consistent. The moral? It’s vital to have sample pages that show the navigation for all the potential level of the site before you start arguing about the color scheme for the Home page. There are four things you need to know about page names: Ø Every page needs a name Ø The name needs to be in the right place Ø The name needs to be prominent Ø The name needs to match what I clicked
  • 6. “You are here” The common failing of “You are here” indicators is that they’re too subtle. They need to stand out: if they don’t, they lose their value as visual cues and end up just adding more noise to the page. One way to ensure that they stand out is to apply more than one visual distinction- “Breadcrumbs” You are here: Home > Hobbies > Book Collection > Welcome Breadcrumbs alone are a good navigation scheme. Breadcrumbs are self- explanatory, they don’t take up much room, and they provide a convenient, consistent way to do two of the things you need to do most often: back up a level or go Home. Ø Put them at the top Ø Use > between levels Ø Use tiny type Ø Use the words “You are here” Ø Boldface the last item. Ø Don’t use them instead of a page name. Four Reasons why I love tabs. Ø They are self-evident. Ø They’re hard to miss Ø They’re slick: Web designers are always struggling to make pages more visually interesting without making them slow to load. If done correctly, tabs can add polish and serve a useful purpose, all without bulking up the page size. Ø They suggest a physical space. Tabs create the illusion that the active tab physically moves to the front. Amazon Amazon was one of the first sites to use tab dividers for navigation. Ø They’re drawn correctly. Ø They load first. Ø Rollovers. : To implement rollovers in tabs or button bars, each button needs to be a separate graphic. Rollovers have merit, but in most cases I don’t think they pull their weight. Ø A misguided belief that it will be faster. Ø They’re color-coded. : Color is great as an additional clue, but you should never rely on it as the only cue. Ø There’s a tab selected when you enter the site. Try the trunk test: Test for good Web navigation Ø What site is this? (Site ID) Ø What page am I on? (Page Name) Ø What are the major sections of the site? (Sections) Ø What are my options at this level? (Local navigation)
  • 7. Ø Where am I in the scheme of things? (“You are here” indicators) Ø How can I search? Circle********** 1. Site ID 2. Page Name 3. Sections and subsections 4. Local navigation 5. “You are here” indicator(s) 6. Search Chapter 7 Designing The Home Page The first step in recovery is admitting that the Home page is beyond your control Think about all the things the Home page has to accommodate: Ø Site identity and mission. Home page has to tell me what site this is and what it’s for – and if possible, why I should be here and not at some other site. Ø Site hierarchy. Home page has to give an overview of what the site has to offer-both content (What can I find here?) and features (What can I do here)-and how it’s all organized. This is usually handled by the persistent navigation. Ø Search: Ø Teases. Like the cover of a magazine, the Home page needs to entice me with hints of the “good stuff” inside. Content promos spotlight the newest, best, or most popular pieces of content, like top stories and hot deals. Feature promos invite me to explore additional sections of the site or try out features like personalization and email newsletters. Ø Timely content: may needs to have some content that gets updated frequently Ø Deals: Home page space needs to be allocated for whatever advertising, cross-promotion, and co-branding deals have been made Ø Short cuts: The most frequently requested pieces of content may deserve their own links on the Home page so people don’t have to hunt for them. Ø Registration: for new users Ø Show me what I’m looking for. Ø … and what I’m not looking for. some of good things the site has to offer that I might be interested in – even though I’m not looking for. Ø Show me where to start: There is nothing worse than encountering a new Homepage and having no idea where to begin. Ø Establish credibility and trust: For some visitors, the Home page will be the only chance your site gets to create a good impression.
  • 8. And you have to do it… blindfolded Some of the usual constraints: Ø Everybody wants a piece of it. Ø Too many cooks. Ø One size fits all. Everybody wants to drop a line on the Home page. And they want good bait (a large, eye-catching link) and a good location (above the fold). The First Casualty of War – They haven’t made it clear enough what the site is Ø What is this? Ø What can I do here? Ø What do they have here? Ø Why should I be here- and not somewhere else? How to get the message across There are two important places on the page where we expect to find explicit statements of what the site is about Ø The tagline. One of the most valuable bits of real estate is the space right next to the Site ID. When we see a phrase that’s visually connected to the ID, we know it’s meant to be a tagline, and so we read it as a description of the whole site. Ø The Welcome blurb. The Welcome blurb is a terse description of the site, displayed in a prominent block on the Home page that’s visible without scrolling. Here are a few guidelines for getting the messages across: Ø Use as much space as necessary. Ø … but don’t use any more space than necessary. Ø Don’t use a mission statement as a Welcome burb. Ø It’s one of the most important things to test: You can’t trust your own judgment about this. You need to show the Home page to people from outside your organization to tell you whether the design is getting this job done because the “main point” is the one thing nobody inside the organization will notice is missing. Nothing beats a good tagline! Ø Good taglines are clear and informative. Ø Bad taglines are vague Ø Good taglines are just long enough. Six to eight words seem to be long enough to convey a full thought, but short enough to absorb easily. Ø Good taglines convey differentiation and a clear benefit. Ø Bad taglines sound generic. Ø Good taglines are personable, lively, and sometimes clever. Clever is good, but only if the cleverness helps convey-not obscure- the benefit.
  • 9. The fifth question When I enter a new site, after a quick look around the Home page I should be able to say with confidence: Ø Here’s where to start if I want to search. Ø Here’s where to start if I want to browse. Ø Here’s where to start if I want to sample their best stuff. Home page navigation can be unique. (The homepage navigation and the persistent navigation) “Yes, it can be different. But not too different” Given the unique responsibilities of the Home page, it often makes sense not to use the persistent navigation there. Typical differences include: Ø Section descriptions. Since the Home page has to reveal as much as it can of what lies below, you may want to add a descriptive phrase to each section name, or even list the subsections- something you don’t have the space to do on every page. Ø Different orientation. The Home page often requires a very different layout from all the other pages, so it may be necessary to use horizontal instead of vertical navigation, or vice versa. Ø More space for identity. The Site ID on the Home page is usually larger than in the persistent navigation, like the large sign over a store entrance, and it usually needs some empty space next to it for the tagline, which may not appear on every page. The trouble with rollovers/Pulldowns Ø You have to seek them out, and hard to scan. Ø You can only see one at a time Ø They’re twitchy. Ø They’re ineffective unless the popup appears near where you’re pointing. This is where most rollovers fail miserably – and for a good reason. Rotate your stock Instead of several small promos that are always visible, you can use the same amount of space to cycle through a series of three larger promos, displaying a different one each time the page is loaded. • The worst case is sites that require users to register before they can even browse the site.
  • 10. You be the judge Decide for yourself how well these two Home pages get the job done. Take a quick look at each one and answer these two questions, then compare your answers with mine. Ø What’s the point of this site? Ø Do you know where to start?