Now that we’ve summarized the guiding principles of making a ‘usable’ website in part I, it’s now time to delve into practical tips for designing your homepage, navigation and testing your results.

(…tune in later for a few graphic images to help you understand better. Or, order a copy of the book and have all of Krug’s ideas at your fingertips)

Happy Reading!!!

Section II – Things You Need to Get Right

With these guiding principles in mind, now it’s time to see how these principles apply to the two biggest and most important challenges in building a website. That of course is the navigation and the Home page.

Since each of these chapters is quite long, I won’t be able to cover everything but hopefully you should be able to easily get the basic idea. For more, get yourself a copy of Don’t Make Me Think from your local bookstore or Amazon.

Chapter 6: Street signs and Breadcrumbs – Designing Navigation

If someone can’t find their way around your website, they won’t use it…it’s that simple. As web users too, just think about how you feel when you’re on a site that’s hard to navigate. You get fed up, leave and probably never return.

So how do I create clear and consistent navigation then?

Krug uses the analogy of a brick and mortar store which is good. Grocery stores, department stores and other retail outlets generally have navigation in a store to help you find what you’re looking for. First you start with the department the item is likely to be in then you move on to find the particular aisle.

Web navigation and site hierarchy works the same way.

When arriving at a site, users are generally looking for something, be it information or an actual product. Like an old fashioned store, they decide to either browse or ask someone. In the online world, browsing is akin to using navigation to find something. Asking someone is the equivalent to using a site search (…a feature all sites should have)

Navigation gives us something to hold onto when surfing a site. It tells us what’s here, how to use the site and gives us confidence in the people who built the site. Navigation elements include a Site ID, Sections, Utilities and Subsections (See illustrated examples on p. 61).

Persistent navigation elements need to be included so users know where they are at all times. Navigation elements should not (…and in fact cannot) be exactly the same throughout your site.  But the following elements should be on all pages (except pages w/ forms like a checkout or signup and the homepage):

• Site ID
• Sections
• A way home
• A way to search
• Utilities

Other ways to counteract the whole “lost in space” reputation the web has is to leave what are called breadcrumbs in your navigation. Include a clear hierarchy on each page and be sure you highlight someone’s current location in whatever navigational bars, lists or menus appear on your page.

And be sure the current location indicator clearly stands apart from other elements on your page…simply saying ‘you are here’ is too subtle and ends up just adding more noise to the page.

Tabs across the top are another way you can help people easily identify where they are on a site.

Once you have a mock-up of a page’s navigation, Krug suggests trying what he calls a trunk test. Imagine someone threw you in the trunk of an old Cadillac, drove you around for awhile and dropped you off on a page deep within a site (metaphorically of course).

Well designed pages answer the following questions without hesitation:

• What site is this? (Site ID)
• What page am I on? (Page name)
• What are the major sections of this 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?

See examples of a trunk test beginning on page 85.

Chapter 7: The first step in recovery is admitting that the Home page is beyond your control – Designing the Homepage

Homepages are the water-front property of a website. They have to accommodate several things like site identity and mission, site hierarchy, site search, teases, promos, timely content, deals, shortcuts and registration if that applies to your situation.

In addition to these needs, a homepage needs to meet a few more abstract objectives like:

• Show me what I’m looking for
• …and what I’m not looking for
• Show me where to start
• Establish credibility and trust

And to add insult to injury, you’ve got to be able to do all of this blindfolded. What Krug means by this is everyone in your company wants a piece of the action on a homepage. They want a promo or a link to their section. This is where intense internal turf battles regarding websites emanate from.

Homepages can’t do everything and those who try and make them do everything usually create a cluttered homepage. Failing to convey the big picture is usually the first casualty if you approach the homepage this way.

So how do I communicate the big picture?

Everything on the homepage should contribute in some way to helping us understand what the site is about. However, there are two important spots you should place explicit statements of what your site is about. One is the tagline usually located next to your company’s name in the top left of the page. The other is the welcome blurb.

A tagline is located in probably the most valuable bit of real estate on your homepage right next to your Site ID. In a few short words, it describes what your entire site is about. The welcome blurb is a more terse description of the site that’s usually displayed in a prominent spot on the homepage that’s visible without scrolling.

Not everyone will use or even see these elements on your page. Most users simply try and guess what a site is. If they can’t, you definitely want a place where they can go find out.

Section III – Making Sure You Got Them Right

Now that we’ve covered the general concepts and things to do on your homepage and navigation, it’s time to discuss implementation and testing. By implementation, I mean the internal disputes likely to erupt between different stakeholders and how you should handle them.

Testing is pretty self-explanatory except for one thing – many websites don’t bother testing since they think it carries a high price tag. Krug lays out ways you can do great testing at a low cost. Considering it helps you find problems with your homepage and navigation, its well worth the effort.

Chapter 8: “The Farmer and the Cowman Should Be Friends – Why most Web design team arguments about usability are a waste of time and how to avoid them”

As you probably can tell, it takes several different skills to build a website. You need a good designer, developer and business development team. And of course, you’ve got the CEO who has their own ideas.

Each of these players has a different perspective on the best route to take. A developer for example may like a site with lots of cool features but not much in the visual department. Designers will most likely think most users like visually appealing sites because they like visually appealing sites.

These two perspectives can often clash and cause bad feelings.

On top of that, a business development team and upper management focus more on making whatever promises are needed to attract customers, strategic partners, revenue-generating deals and venture capital to the site.

Art Kleiner details a culture split between developers/designers (craft) and business development/upper management (hype). This continuous struggle between hype and craft adds even more complexity to any discussions involving usability.

Debates that often ensue between these parties often are ‘religious’ in nature, meaning they can go on and on. Conversations like these generally involve people expressing strongly held views about things they can’t prove. These debates can go on for weeks while nothing gets accomplished with the website.

Another tendency all of these players fall into is thinking all web users are just like them. So many websites out there are designed with one user in mind. The team who put it together assumes the majority of web users are just like them so they design their site with that in mind. That’s where the myth of the average user comes in.

This belief can cause meetings to be rife with gridlock. After hours of debate, the team decides to find some way to determine what most users like and get a picture of their Average Web User.

Watching web users for many years, Krug certainly believes there’s no Average Web User.

We’re all unique in our own way of approaching the web, each with our own intentions, motivations and thought processes.

If you approach a site with the Average Web User mindset, the idea that good design simply involves you figuring out what people like gets reinforced. While it’s tempting and easy – pulldowns are good because most people like them or having links to every page on your site from your homepage – it certainly is rife with consequences.

In fact, there’s no right or wrong answers to these kinds of questions. You can ask users and certain percentage will say they like Flash while a certain say they won’t. Some people like to use navigation while others like search.

What works good is an integrated design that’s carefully thought out, well executed and tested and that also fills a need.

Speaking of testing, continue reading for a recap of ways you can test your site and address any usability issues.

Chapter 9 – “Usability testing on 10 cents a day – Keep testing simple so you do enough of it”

As Steve Krug will tell you, many companies like to wait until the last minute to do some usability testing. Some don’t even mess with it at all.

There’s many excuses for not testing – not enough time, not enough funds, no expertise, no facilities, lack of knowledge of how to interpret results – are just a few examples.

Many of these excuses are simple myths according to Krug, who explains how usability testing can be done for as little as 10 cents a day. If you can afford to hire a professional do so, but if you’re on a tight budget, you can do the following to learn about the weaknesses in your site.

• Test three or four individuals rather than 8 or more like the pros
• Almost anyone will do. Grab a few people from around the building
• A lab can consist of any office or conference room. All you need is someplace quiet
• Tests can also be done at any time without much scheduling
• Decide which pages you’re going to show and run tests continuously throughout the design process
• Debrief results with your team immediately after the tests

Try to find users that reflect your audience but don’t get too worked up about it. Get further perspective by finding people outside of your target audience. Offer reasonable incentive to your participants and avoid discussing the site with them beforehand.

There are two types of tests you will want to run throughout your development process. One is the “get it” test, which basically means exactly what it says. Does the test subject understand the purpose of the site, the value proposition, how it’s organized, how it works and so on?

The other test is the “key task” test where you ask the user to do something then watch them how they do it. See if more than one user gets hung up somewhere and address the problem immediately.

Typical problems users will encounter include the following:

• They’re unclear on the concept
• The words they’re looking for aren’t there
• There’s too much going on

When you’re addressing problems though, go for the low hanging fruit and avoid the temptation to add things. Krug also suggests you should take ‘new feature’ requests with a grain of salt.

In the end, test early and relatively often. It’s a shame to see sites that obviously haven’t taken the time to see if their pages and navigation are usable.

In the next and final section, we’ll be discussing usability as a courtesy to others, accessibility for disabled users along with interactions with your superiors…so check back next Tuesday afternoon for third and final installment