Menus or Navigation for Your Website

My colleague Shan Pesaru of Sharp Hue recently tweeted about menus and navigation: "Think 'navigation' -- specific ways of getting to a destination. 'Menus' allow people to get lost by their own choices."
People in the trade don't usually talk about menus (except in restaurants, natch), but actually lots of our clients do -- and maybe you do. The very idea of a menu brings to mind a lavish array of items to choose from... do you want to begin with caviar with creme fraiche, you can ask yourself, or perhaps the caviar blini... Let's look at the wine list while we're deciding...

Wrong mindset for web design. People don't sit back in a happy, considering frame of mind and read through all the delectable options on the homepage before choosing the most appealing among them. They don't enjoy sampling a variety of possibilities before settling in to savor the page that sounds most enticing. They really don't like clicking back and forth in search of something, as people might share bites of an appetizer at a restaurant.

Nope. Most people who go to your website want something. They want the answer to a question, a solution for a problem, or a specific piece of information. Maybe even a bit of entertainment and inspiration, but they still want to find it quickly.

In a meeting today, a client spoke bitterly of websites that don't take that into account. "Don't make me search for things!" she said. Her expression was that of someone who had taken a bite of caviar without realizing what she was getting herself into -- expecting berries, perhaps, rather than the delicate globes of fish eggs.

Give up the idea of menus for your website and think in terms of navigation. It could make all the difference.

A Clever Trick for Website Planning

Sometimes planning the navigation for a website is easy:

• homepage
• about us
• products
• services
• contact

You whip out the plan and get to work.

Sometimes it's not like that.

Yesterday, I was working on a site that has lots of pages. There are many ways that they could be organized. and in fact, on the current site, many of them aren't organized at all -- they live in limbo and are linked from multiple points.

I teach writing in my spare time, so I took a leaf from the book I use when teaching freshmen to organize their papers. I wrote down all the elements which all the stakeholders wanted, each on its own little card. Then I sorted them into piles and tried them in a variety of arrangements until I found the one that seemed most logical and practical.

If the client doesn't like it, I can just shuffle those cards and try again. It's much better than writing the site, only to realize that I have some orphaned page I hadn't put into its proper place.

How Many Choices Should You Have at Your Website?

One of the things you'll notice immediately about the "Before" screens I show you here from time to time is that they tend to have a lot of choices for navigation -- sometimes dozens.

This "Before" version of the Ozark Natural Foods website had 14 choices down the side, several of them repeated across the top.

This current version of the Family Chiropractic Center website has crowds of them -- as a drop-down menu, which is a whole other problem. The "After" websites always have, as you can see in the Sky Ridge website at the top of the page, five to seven choices.

The new Ozark Natural Foods site, as you see, has five choices.

This reflects a basic fact about the human brain, supported by extensive research in cognitive psychology: we can only keep about seven things in our minds at one time. So we can conceptualize five or six choices and decide among them, but we can't do that with ten or twelve.

This is so well known and easily proven that you'd think clients would immediately agree to it, but this is not the case. The desire to put one more choice on the homepage often trumps common sense and common knowledge. Some people aren't all that impressed by cognitive psychology.

I have new evidence. Money Magazine just reported on a study involving samples of high-end jam. They offered people six choices at a sample kiosk. Then, another time, they offered 24.

People were more likely to stop and hang out at the kiosk with 24 jams. The feeling of having lots of choices appeals to people. But they didn't buy. When they had six choices, they were able to gather all their options in their minds at once and make a decision. Faced with 24, they wrestled with the whole Damson Plum vs. Gooseberry issue, but they couldn't make a decision easily, so most gave up and left.

At a website, we could give people a choice like this:

• Most Popular Fruits
• Tropical Fruits
• American Regional Specialties
• European Specialties
• Mixed Fruits

Then, once they had chosen European Specialties, let us say, they could have the further choice:

• Traditional French Jams
• Traditional English Jams
• Traditional Scandinavian Jams

Then they could hone in on that Gooseberry Jam happily.

We could, in fact, put Strawberry under the Most Popular jams, as well as under the Traditional English jams,  and add confiture de fraises under Traditional French jams, too, if we wanted to. The right number of choices leads to happy browsing and buying, while too many leads to frustration and clicking away.

Can You Do Without a Homepage?

Okay, maybe you're not thinking of putting your contact form up all by itself on the internet. But I have had some conversations lately about websites without the traditional homepage.

First, of course, there are blogs that are just blogs. They may have an associated "About Us" page or other related pages, but a blog can be the heart of the website, and the primary landing page. Shan Pesaru and I have been talking about a site that could end up like that.

A site of this kind can be limited in its function. Seth Godin has a site centered on a blog, with additional satellite sites for his books, his services as a speaker, and so on. A vet trying to reach a local audience? It might not work. However, if you want to avoid a home page, this may be an option.

Then there are splash pages -- a page that has little more than the name of the company and a bit of rudimentary navigation, sometimes no more than "enter."

Lee Ann Larkan and I are working on a site right now for an artist who has this idea in mind. She's thinking she can use a nearly blank page to direct people to her portfolio and her blog in a creative and unusual way. One concern with this type of page is that it's hard to get enough content on the splash page to get good rankings with the search engines. The client may not care about search right now, but it could become an issue in time.

Then there are mini sites or commerce-oriented landing pages living at a main site's domain. They may be almost an ad or sign-up sheet for a particular event or project. Marcel Sendrea and I are contemplating how to do a couple of these.

In each of these cases, we're currently thinking about how best to approach the site, and the big question is: do we need a home page?

I think the answer has to come from the user journey.

How is your user going to approach your site, and what will he or she do once arrived? Another site I'm working on right now is for a brick and mortar store. We think that someone going to this website is likely to want the location or phone number of the store, information about their products, or perhaps a look at any current special offers. Customers wanting to get that data quickly would get tired of an artistic splash page pretty quickly. They don't want to click repeatedly to get what they want.

But the visitor to the mini-site we're working on will likely approach it by searching for the product, and that will be an appropriate landing page for that visitor. Should they have to go in through a homepage introducing the company and all the other things they do, or would they perhaps like to get right to the product?

Make a guess, and test the guess before you make up your mind.

I'm late, I'm late!

I'm late in drawing your attention to this year's  Bad Usability Calendar. It's great anyway. You can have it in many different language, and you can download it and post it up somewhere as a bad example. Or a good reminder. Look at previous years, too. If you want 2009 in Ukranian, you can have it.

Many thanks to Net Life for this excellent annual project.

Website Checkup: the Navigation

Navigation is extremely important to the success of your website. Here are some simple rules to use to check the navigation at your site:

• Have some navigation. The pre-redesign homepage above gives no clues, on this full-screen shot, about the structure of the site. As far as the visitor can tell, it's just one page.

• Put it where people expect to see it. The page above does have some navigation buttons, in the lower right hand corner. People expect to see the navigation across the top or vertically along the side, where you can see there is none.

• Make it look like navigation. There are lots of links in the sample above; the links going to the main pages of the site don't look different from the links that go offsite. In the example below, the links are a collection of icons -- it takes an extra step to figure out that they are in fact the navigation bar.

• Offer a reasonable number of choices. Five to seven navigation buttons are plenty. Ten buttons isn't navigation. Even if you have hundreds or thousands of pages, organize them into fewer choices and let people choose a path to the information they need. They'd rather do that than read through long lists.

Here are a couple of good examples:




The example above is fancier than the one below, but both of them do their jobs.





So for today, ask yourself whether your navigation looks more like the good examples or the bad examples. If you recognize elements of your site in the "befores" then it's time for a navigation makeover.

Your Website vs. Web 2.0?

Social media supports your website and extends the value of your investment in that website. Crowdsourced and user-generated content are great opportunities for linkbuilding, wonderful places to meet your customers and show them what great goods and services you offer, and the ultimate in professional networking.

So where's the vs. in "Your Website vs. Web 2.0"?

It came from a question a client asked me yesterday. "If you're good enough at social media," she wanted to know, "could you do without a website?"

It's an interesting question. If your business is adept enough with Twitter, Whrrl, Facebook, MySpace, LinkedIn, Squidoo, Digg... and so forth ... then that could be your entire online presence. People searching for you could type in your name and see your Amazon lists, your Flickr and YouTube contributions, and your deviantART portfolio, and learn all about you.

There could be advantages to this:

• In general, those sites are free. You save the cost of building a website.
• You can present different sides of your business to different markets.
• You can change and update your information continually even if you have very limited technical skill.

There are also disadvantages.

• Those sites are only free if your time is free. Putting time in at a few sites is great support for your website, great for networking, and good business practice. Managing your business via forum and aggregate site is extremely time-consuming. I know people who spend most of each day maintaining their presence at multiple free sites. They aren't running profitable businesses. These two facts are connected.
• All your different sides will be visible to potential customers at all times. So will all your changes and reinventions. I'm extremely visible on the web, myself, and you could see different sides of my life if you made the effort to do so -- but my website is primary. That means that the professional face I choose to present is the main one. People who search for my business aren't going to happen upon pictures of my family unless they make an effort to find them. If you conduct your life all over the web, you have little or no control over what tops the list when people search for you, and it will change from day to day.
• Even if you maintain a consistent presence across all Web 2.0 spaces you inhabit, you still have very limited control. Some sites will allow you to show products and some won't. Some will give you the option of showing certain information and some will insist that you do. None will let you present a consistent visual effect -- especially if you have limited technical skill. Forget branding your business.
  
• Your customers will hate you. Seriously. Let's say that I discover your products on Flickr and contact you via Twitter to buy something. A couple of months later, I think what a great gift that item would make for a friend -- but I can't remember your Twitter name. I Google you and find your Ning page -- but with no website, I can't track down your products easily, and I've already spent fifteen minutes getting cross about not being able to find your website. I'm not going to make the extra effort involved in finding you.
• It shows a lack of seriousness. All businesses need websites. If you don't have a website, it's going to be hard for people to take you seriously enough to send you money.

Your business website is the foundation of your online presence. Your participation elsewhere on the web supports it. But you can't do without it. (Want some figures? Check out "Can You Do Without a Website?")

Vocabulary and Your Website

I was talking earlier today with the client I mentioned in the post called "The Call to Action" and in "Your Website is Not a Piece of Paper." We've fixed his website up since I wrote those posts. It's far better than it was before, and in fact he's ready for another round of optimization, for a new and narrower group of keywords.

This is a great idea. But as I was talking with him, I had to think about vocabulary. This guy's website specializes in animal tissue and blood for research. We're working on terms like "mouse albumin," "tyrosine hydroxylase," and "tissue homogenates."

I have another client who specializes in transporting chemicals. We've been working on terms like "Ammonium potassium thiosulphate" and "acetone" (and you might be surprised how much there is on YouTube for that term).

And yet just yesterday I was trying to work with a client to get rid of phrases like "empowers operational continuity." And just this morning I was working with a client to change things like "public facilities hygiene management" to "We clean restrooms."

These are all questions of vocabulary. And all questions of vocabulary come down to what your audience is really used to and using. The picture above, for example, is for me a picture of Icarus.

I'm aware that there are huge swathes of humanity to whom that word means nothing.

So, if I'm going to write web content to go with that picture, how do I decide whether to use the name "Icarus" or to write something like "There is a Greek story about a boy who made himself a pair of wings..."?

You just have to know your audience. If I'm the kind of person who needs to buy some rabbit complement, then I probably use that term. "Hey, guys!" I shout down the hall to my colleagues in the next lab, "I'm gonna order some rabbit complement. Do you need any glutamate receptor antibodies while I'm at it? How are you for anti-sera?"

But if I need someone to clean the toilets at my restaurant, I probably don't say, "You know, we really need a public facilities hygiene management expert." I probably say, "We need someone to clean the restrooms." And when I go to Google in search of some temporary tech guys to help me through a staffing change, I'm sure not going to type in "empowers operational continuity."

There are fields in which the experts who supply the stuff use different terminology from the people who actually buy the stuff. If your field is one of these, clean the jargon out of your website. You'll be glad you did.

How Original Should Your Website Be?

Naturally, you want your website to be different and exciting. You don't want it to look as though it were made with a template. You want it to be special and unique.

But before you get too carried away, or allow your designer to, think of elevators.



We can be pretty flexible about elevators. The color, the surface decoration, whether there's a single elevator or a pair or a bank of them.



We'll accept elevators on opposite sides of a foyer, or both on one side.



We can handle different materials.




But there are limits. We want doors, walls, floors. We want the elevator buttons to be very obvious and easily reachable. We have a mental idea of where the front of the elevator is supposed to be, and we expect certain things to be there.

It's the same with websites.

They can have all kinds of graphics and colors and stuff going on, but they should still meet the user's expectations. Navigation should be clear and obvious. The most important things should be above the fold, especially on the homepage. Contact information should be in the places where people look for contact information. The name and logo of the company should be readily visible.

Sometimes designers feel that this is limiting. Sometimes I feel like I'm working with designers who think it would be really cool and edgy to put the wheels of the car on the top, in a pentagon. "No, no," I say, "you have to have the wheels under the car, roughly in the four corners." I can tell I'm spoiling their fun.

But once the initial coolness of a truly original website wears off, people will find it irritating. They won't want to go there for practical purposes (like buying things from you or hiring you). So the best plan is to build a usable, search optimized website, and challenge your designer to work within those limitations to create a thing of beauty.

There's a lot of satisfaction in that.

The User Experience at Your Website

Tom and I are working on a very fun e-commerce website right now. The owners are fun, their products are fun, the customers are fun, it's just a fun project all around.

At the moment, the owners probably aren't having any fun at all.

The reason is that as I tried out their website in the course of my basic research, I found that the user experience wasn't what the owners expected.

• There's no link to the catalog -- or even any hint of the existence of a catalog --until way at the bottom of the page, where people would have to scroll to find it. And most don't.
• Before you can shop, you have to fill out quite a long form. You can't even check on shipping before you do this.
  
• When you click the button to put something in your shopping cart, you get a big notice warning you that the security certificate has expired.
• If you persevere in spite of that, you find that the payment information form has some odd features -- the name of the company that does the processing is right above the place for shoppers to give their info, and the form is built differently from most credit card forms. Enough people are antsy about online security that the payment info section is just not the place to be creative. It should look and behave like all the other credit card forms the customers see every day.
• If you got to wondering about the company and wanted to contact them to find out what was going on, you would quickly discover that there was no contact information anywhere -- not so much as a phone number.
  

We're talking about a very unusable site, here.

The owners of the site were surprised by this. They had never tried it out.

Try out your site. See what happens when you try to find it, or try to shop there, or try to -- well, whatever you want people to do at your site. How hard is it? How fun is it?

Are you surprised?

Planning a Website for Older Users

I'm working with designer Jon Schleuss on a website for the local chapter of the American Association of University Women, an organization to which I belong and which I support wholeheartedly.

Last night I presented information about the planned site to the board of directors. Knowing that one of the main goals for the group was to increase diversity among the membership, and that the average age of the association was 60, I was confident that a new, usable website would be something everyone would value. I don't believe in stereotyping older people as lacking internet savvy (my mother is a popular blogger), but I'm also aware of the research that tells us that younger users rely heavily on the internet for information.

People under 50 don't use phone books or printed maps. Half of all executives under 40 use Twitter. People under 30 may conduct their entire lives from their Blackberries and iPhones. People under 20 have never had a better information source than the internet.

So I was assuring the group that their goal of reaching younger university women made a functional website essential, and there was widespread agreement, especially among the younger women present.

So far, so good.

Then we looked at the site structure, and one of the older ladies saw that the directory was to be online.

"I hate the internet," she said. "I spend too much time reading emails. I'd never go to a website."

There was some real distress there. The rest of the over-seventies were looking pretty tense, too.

"You don't carry a computer around with you," one said. "What if I need someone's phone number?"

There was a moment of silence while the rest of us -- the ones who do carry computers around with us -- readjusted our thinking to the idea of needing to look up a phone number and dial it on a telephone.

"I can't find anything on websites anyway," another objected.

"Maybe we can print it out, too," someone said. "We can have both."

I suggested that it would be easy to print copies on demand whenever someone wanted a physical copy, and one of the women asked whether it could be a PDF.

"I'll have the file, " I said, "so I can easily make a PDF for printing."

"Can you copy something from a PDF and put it in an email?" the woman wanted to know.

We had a bit of a conversation about PDFs and what they're for. On the other side of the room, the woman who hates the internet was speaking in scandalized tones about the fact that without a printed yearbook we wouldn't know what the upcoming programs were. Those who weren't still coping with the PDF question began discussing the difficulty of getting the programs set up a year in advance for the sake of the yearbook.

"You don't need to set them up a year in advance if it's online. You can change it any time and keep it up to date." That was me, trying to make the website more appealing. I pointed out that it was easy to email things to people if the things were on the internet already. We finished with a clear split in the room: the Facebook crowd, who were happy, and the others, who weren't.

My goal: to get everyone happy with the final product.

Here's the original concept mockup that Jon came up with. The stock image at the top will be replaced by images of women of different ages and ethnic backgrounds, and of course there'll be real content there, but this is what I had come up with in discussion with the president and secretary of the organization, and Jon carried it out nicely.



We had already thought about the importance of using black text on a white ground for visibility, and also about having very straightforward navigation. Jon went with a good amount of white space, and clear headings on the sections.

After the board meeting, I think we also need to have very obvious navigation buttons, even more so than usual. We need to keep them identical on all the pages. Assuming that the reluctant users make the effort to get to know this website, we need to make sure than they can easily find those phone numbers whenever they want them.

Those of us who've been using the internet since the '80s -- whether that's when we were born or when we first got email at work -- have grown up along with the internet, and we know how it works. There's no reason to expect people who retired in the '80s and haven't gotten fond of the internet in the interim to have that knowledge.

That doesn't mean that older people aren't visiting your website. In this particular case -- and perhaps in yours as well -- we know for sure that a lot of the potential users of this site are going to be pretty old. We should design the site with this in mind.

But it's something to think about for many businesses. Right now, somewhere out there, someone is giving a PC to her grandpa and showing him how to visit that online fishing tackle store or music website. Is yours the next one he'll try?

Can We Talk About Usability?

One of my favorite publications on web design is .net magazine. In a recent publication, they have a nice little directory of terms for talking about usability, including "usability." "You shouldn't use [these words] when talking to users, developers, or managers," they say lightly.

It caught my attention, because I'd had a conversation on the subject with Shan Pesaru over at SharpHue. I'd sent him a link to Seth Godin's video, "This is Broken," and he came back complaining, "The word 'usability' is not said once throughout the presentation."

"Think of the audience," I said. "I write about usability all the time at my blog, but I hardly ever use that word, because my readers probably don't all use it."

It is, as .net says, jargon.

But is it really? They've got "usability" on the same list as "RITE" and "wireframe." They might be wrong. Have a look at a site redesign Shan and I did for Australian painters Courtney & Wise:



Right above you see the old site. I've given details of this redesign at "SEO Website Redesign #2" so I won't repeat them all. But I think you can see, if you compare the old look to the new one below which has just launched, that there were issues in usability.

The original look was hard to read, especially for the older customers who are very likely to want their houses painted. Contact information wasn't as obvious and navigation was less clear.



These things are about usability -- making the site more usable, better for users. That's not a concept that's only valuable for designers and engineers.

I guess I've generally called it "user-friendliness" or "accessibility." But "usability" is in many ways a more direct and descriptive word. It's worth learning. So I've gone back and tagged the posts on usability, and you can find them by looking at the tags on the right.

Perhaps, if we all learn and use this word, we might encourage recognition of the importance of usability. We might even encourage usability.

Stumble It!

Friction at Your Website: Good or Bad?

Friction is a key concept in transportation, but it's also an important idea in commerce. Economist Thomas Friedman describes human contact during commerce as "friction."

You drive up to the gas pump, slide your card, pump your gas, take your receipt from the machine, and drive off. No human contact, just the essentials of the transaction. Compared with having someone come out to your car and ask what you want, fill your gas tank, clean your windshield, accept payment, take it inside to complete the transaction, bring your your change or a bill to sign, exchange some concluding pleasantries -- well, the friction slows the transaction down, doesn't it?

You can find the same contrast at websites. One e-commerce site may give you an opportunity to arrive signed in, select items from your past purchase list, and be out of there with a click or two. Another may tempt you with special offers, include a blog and tips and a community to chat in, and generally be a virtual hangout.

Do you want a smooth transaction at your website, or do you want some friction?

• What are you selling? If you have a commodity for sale, something that people need and will buy anywhere they can get it cheaply and easily, then you don't want friction. You want to get that car insurance, battery, or hotel reservation into the consumer's virtual hands as fast and painlessly as possible. If you're selling an experience, or something that people have to think about for awhile before committing to, then you need some friction.
• Can you upsell? Maybe your customers arrive with something basic in mind -- a packet of green tea -- but could be persuaded to hang around. Offer some recipes and health information, and they might add some matcha and mochi bites to the order.
• Don't forget the basics. I visited the website of a local bookstore last night in the city where I'm visiting. There's a lot at that website -- book lists, history, events... I may go back and read it sometime. It made the store look interesting to me, and might be something that keeps the regulars coming back. However, I wanted to go to the bookstore. Hours. location, maybe a phone number would have been handy for me. In this case, the friction could have prevented me from visiting the bookstore, and I walked out (once I found the place) with a dozen books. Basic info above the fold would have been a smart choice.

As with so many other issues of web design and web content, it comes down to usability. Figure out what your customers want to be able to accomplish without friction: getting your contact information, making simple repeated purchases, checking their accounts. Make those things easy.

Then offer a bit of community, a bit of opportunity for play or learning -- a bit of friction.

Stumble It!

It's in There... Somewhere!

Yesterday I finished up edits on content for a new website. One of the issues that came up frequently in the conversation was the idea of repetition. The client felt that we had already said things on some other page, so we shouldn't say them again.

I understand that point of view. I rarely write for print any more, but I do write for a couple of online magazines, and I teach academic writing. I haven't entirely forgotten about avoiding redundancy.

The thing is, we can't count on our visitors' actually going to all the pages at our website.

My client didn't want to hear that. "What's the point of writing all this, then?" she very reasonably asked.

All of our pages will be visited by someone. We have to write great stuff for the people who get to that particular page. But the way a website is read will look more like a flowchart than like a book.

I have an example for you. I've been working on a couple of cute websites with designer Jeff Wain. At one point, Jeff sent me a link to the majorly cute site whose screen capture you can see at the top of this post.

It didn't work as an inspiration for the preschool site we're working on, as he had thought it might, but it did look like the perfect place for me to buy a little gift I needed.

Here's their very nice and friendly-sounding page for ordering.



I went ahead to checkout, blithely ignoring the "terms and conditions" because, what the heck, I was just buying a little something there and they seemed trustworthy. I clicked on their link, sure, but I didn't scroll down the page. I glanced, concluded that they were talking about privacy and copyright, and clicked back. I think that page got four seconds of my time.

Had I actually scrolled down and read that page, as they wanted me to, I'd have seen this section clearly explaining that the company only ships to Singapore, and that the dollar sign refers to Singapore dollars:



I didn't. I completed my transaction. I was amazed at the low shipping costs that showed up as I checked out, and amazed also when -- after the transaction was completed -- I discovered that a favorable exchange rate made my purchase even less expensive than I had thought it would be.

What's more, I told all my girlfriends about this great place with extremely cute gifts and what a bargain they were. I might have posted the link on my Facebook page.

In order to avoid unnecessary suspense, let me tell you that the kind people at Pally Giraffe emailed and told me that they don't ship to the United States, where I live, but that they'll make an exception in my case. They could also have refunded the purchase price and not sent my order. I'd have understood. I think I'm going to have to send them a present to make up for their loss on my purchase with them.

Pally Giraffe tells us that they only ship to Singapore, and also tells us to go read that page where they say so. Problem is, I -- like the rest of the people who might visit your website -- don't use websites the way the owners want me to. I use them the way I want to. In this case, I saw the product page Jeff sent a link to, the About page, where I read and admired the company's statement of environmental responsibility but found no hint of physical location, and the shopping cart. I got that present ordered in about five minutes and moved on to my next email.

There are ways to design your site to encourage people to take particular paths through your site, but even if you've done that, you can't count on them. Your visitors are at your site for their own purposes, not for yours, and you're not there to say, "Hey, you're not using this website correctly!"

Here's what Pally Giraffe could do, if they find themselves suddenly inundated with orders from Americans needing gifts for little girls:

• Add their address to their home page and contact page, in hopes that foreigners will check on whether or not they ship internationally.
• Add a statement like "We ship only within Singapore" at strategic points along the path to purchasing.
• Get their IT guy to teach their shopping cart to recognize and reject foreign addresses.

A similar case came up recently with an online bookstore whose website I wrote. They weren't getting the orders they wanted, even though traffic was great, so I got some subjects and tested the website. The sticking point became clear very quickly: visitors had to register before shopping. This was explained on the FAQ page -- where people naturally weren't going before attempting to make purchases.

While I'm used to the idea of registering before shopping, the testers often descended to helpless clicking all over the page (you know what I mean -- if you don't do it yourself, you know someone who does) before discovering this requirement. Many of them were frustrated by the time they actually reached the registration page, and were no longer willing to register.

Here's the solution: when you plan your website, plan it with the user journey in mind. Instead of imagining it as a document people read through, try out the different ways people might navigate through it. Make sure your call to action is at every point at which people might decide to take action. Have any important caveats at all the points where people might need them. Put your contact information on every page, unless you really don't want anyone to contact you.

Oh, and if you live in Singapore, you can find some seriously cute stuff at Pally Giraffe.

Stumble It!

Web Accessibility

The Web Accessibility Initiative describes web accessibility this way: "Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web."

Clearly, this is a good thing. From the point of view of your business, it is as important that all your customers can access your website as it is that all your customers can access your physical place of business. The Web Accessibility Initiative folks point out, further, that standards-compliant web design is like Universal Design in the architecture of physical spaces, in that it can benefit people without disabilities as well.

Indeed, many of the items on the WAI checklist for content are things we've discussed in these pages before.

But the question of accessibility took on a particular urgency for me when I was working with Sharp Hue to develop a new website for Quality Life Associates, a non-profit working specifically with people with disabilities. QLA's clients include individuals with traumatic brain injuries and both mental and physical limitations of various kinds. Their services include vocational assistance and various kinds of support for daily living, as well as facilities designed with the principles of Universal Design.

Here is their previous website:



And here's the quick list for accessible web content from WAI:

• 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
• 1.2 Time-based Media: Provide alternatives for time-based media.
• 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout ) without losing information or structure.
• 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
• 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
• 2.2 Enough Time: Provide users enough time to read and use content.
• 2.3 Seizures: Do not design content in a way that is known to cause seizures.
• 2.4 Navigable: Provide ways to help users navigate, find content and determine where they are.
• 3.1 Readable: Make text content readable and understandable.
• 3.2 Predictable: Make Web pages appear and operate in predictable ways.
• 3.3 Input Assistance: Help users avoid and correct mistakes.
• 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

The old website, pretty though it was, didn't meet those criteria. The flash elements came and went too quickly for people with limited vision or tremors that cause difficulty focusing. The complex drop-down menus were hard to navigate with a screen reader, and their delicate transparent look was hard for those with limited vision to read. In fact, the overall low level of contrast was a problem for many visitors.

The site was built with flash and frames, which were not comprehensible for those using screen readers to visit the site. There were also pages requiring multiple clicks for access, another negative for those using screen readers. And there were large sections of content that had been reprinted from professional journals, which were simply too hard to understand for some of Quality Life Associates' visitors.

Here's the new website:



With a high level of contrast, simple and predictable navigation, and readily understood content, this design fits with Quality Life's slogan, "envisioning independence for people with disabilities."

Not coincidentally, it's also now easier for human visitors and search engines to figure out what QLA does. The pretty, airy look was maintained, and all the necessary information was included, but the site is now far more accessible.

What about your website? Are you accessible?

Stumble It!

SEO Website Redesign #2

Today I'd like to show you a slight redesign I did with Shan Pesaru of SharpHue, Inc.

The client in this case is Courtney and Wise, Pty, an upscale painting and decorating outfit in Sydney, Australia. I'm calling this a slight redesign because we didn't start over. Michael and Joanne Peters, the kind and charming proprietors of Courtney and Wise, had an elegant website to begin with, and they liked its look. Here is the old one:



Unfortunately, while this website had its charms, it also had some real problems from the point of view of search and usability.

The first point is that it's just hard to read. Upscale painters naturally have older people in their client base. Older people find it more difficult to read text with low contrast. Chances are very good that their target customers, if they came to this page, would leave again immediately without attempting to read the page.

It also has little to catch the eye of the searcher at the top of the page -- which is what visitors will see before making the decision whether to stay and scroll down to read more. In fact, many of the most interesting parts of this site's content are actually hidden in obscure little links at the bottoms of pages.

There were also quite a few issues under the hood, as it were. The meta language had problems, the images are flash and therefore a closed book to the search engines, and there were a variety of technical imperfections that interfered with the best results from the point of view of SEO. SEOMoz has a cartoon showing Google wondering to itself, "Hmm... which page should I link to?" when faced with a choice between good design and content and "crummy" design and content, and we all know which way that decision goes.

Shan has a particular gift for search-friendly design, and I'm all about search-friendly content, so we were able to fix Courtney and Wise up with a well-optimized version of their website which maintains the original feeling but has a fresh, updated look.



As an early tester said, it now looks worth scrolling down to read.

This new look will launch soon, and traffic and conversions should rise. For this site, redesign wasn't as much about aesthetics as it was about SEO.

Stumble It!

The Call to Action

Recently I received a document from a client listing the pages she wanted on her website. One of them was "the call to action."

The problem here is the common one of imagining our visitors coming to our website and experiencing it just as we planned it. They'll start at our homepage, we figure, then read all the information about our company and all the details about our products, and then, having seen everything we have for them, they'll make a considered decision about the best button to click on. They'll go over to our Call to Action page, of course, be called, and take that action.

This isn't actually how it works.

Consider this web page. You are seeing the entire call to action for the page: "close."



If you click on that button (and, yes, it is a clickable button, the only one, down at the bottom of the page where people must scroll down to find it -- that's another problem entirely), the page simply closes.

There is a page at this website that explains how to order. You are supposed to call the company, having perused the list of goodies on offer, and tell them what you want. You were supposed to have gotten to this list by clicking a button and having this page pop up. That way, when you click on "close," you'll return to the "how to order" page.

Google Analytics tells us that a quarter of the people who make it to this page got there first. It was their landing page. They were searching, perhaps, for some nice pig spleens, they found this page, they thought five spleens for $65 was a good price, and they were set to order -- but there is no contact information on this page, no navigation, and no way to buy that pig spleen.

Compare with this page:




These handy buttons are on each page, in the same place every time. Wherever I land in this website, I am invited to contact the company and to invite my friends to check out the website.

I am much more likely to get a fishing trip than a pig spleen.

Here's one more example.



This website offers different calls to action on different pages. The page shown, which is for individuals, should get a different group of visitors from the page for corporate visitors. There is, therefore, a different call to action.

If we look at the first, highly unsuccessful page and compare it with the other two, we can find a simple rule for the call to action on a website: there should be one. On every page. Where people can find it.

The client who wants a "call to action" page won't get one. She'll get something much more effective.

Stumble It!

Testing Your Website

How can you test your website, and why would you want to?

The "why" is simple: you need to know what people are inclined to do when they get to your website. You know what you are inclined to do, of course, but that's not enough. While most people tend to do much the same thing when faced with a website, we all have our own little idiosyncrasies. It is very easy to build your website to cater to your own particular idiosyncrasies, on the assumption that you are normal and representative of all the right-thinking people in the world.

It's also true that many people have an idea of what they do that's different from what they really do.

In order to overcome these perfectly natural human foibles, you can easily test your site. We're not talking about complex testing that measures where people's eyes light on the screen and the fractions of seconds it takes to respond. This is valuable, but it isn't simple or easy. We're talking about simple, easy testing that gives you a good starting point for your plans.

Here are the steps:

• Find naive subjects. "Naive subjects" means quite simply that you don't tell people what you're doing, explain things to them, or choose a bunch of web designers. Just find some random people who are willing to sit down in front of a computer and let you watch them. Cameras are fine, but you can also just hang out with them and watch. I find that people -- random people at my home, in the office, in the classroom -- will gladly do this. I haven't asked strangers in coffee shops yet, but I bet they'd do it, too. It only takes a couple of minutes, and it's painless.
  
• Observe, don't interact. Say the same thing to everyone. I like to say, "Please navigate to [URL]." Then I just watch and make notes of what they do. For example, with the website below, I found that almost half of the 25 people I tested went to the video first. About a quarter became concerned about the "login code" on the left.They dropped their hands from the keyboard, stopped interacting with the website, and asked, "Am I supposed to have a login code?" in alarmed voices.
  

• Take notes. You won't remember accurately. Trust me on this. Ideally, you'll stand there with your notebook and timepiece and write "Subject #1 looked at the screen for 5 seconds, then clicked on the video. After 12 seconds, subject said, 'Oh, I see what this is' and clicked on..."

Once you have the data, you can do some analysis. You can compare what you've observed with what your Analytics tell you, and with how you feel and the feedback you get. If only half of the people are watching your entire video, for example, then you can't have information in the video that isn't elsewhere on the page, and think that your visitors are all getting that information.

Pay particular attention to the surprises.

For example, visitors to the page in this example did not click on the buttons in the navigation bar, from left to right, as people typically do. No one did that. That's an interesting thing to know.

Even if you're not doing any redesign or updating, you might like to try a little testing on your website. You never know what you might learn.

Stumble It!

Your Website is Not a Piece of Paper

This very famous cartoon by Edward Koren has the caption, "Well, there's your problem."

I thought of it immediately when I looked at a new client's website today with Shan Pesaru over at Sharp Hue, Inc.

The client has a very attractive website, as you can see from this little piece of it. All the words there, by the way, are graphics.



There is the phrase "tissue lysates" at one point, but this is essentially a content-free page.

Shan and I were admiring it, thinking what a nice print ad it would make. It has an elegant design, and apart from the navigation buttons at the bottom, there's nothing about it that would cause you to think it was a website.

The client isn't happy with the website's performance. They don't show up for search for any of their keywords, and they don't get the kind of sales they'd like.

I instantly thought of Koran's mechanic.

From the point of view of the search engines, this is a page that says "tissue lysates." The fine graphic design, the carefully-chosen words incorporated into the graphics files -- those have no meaning at all for the search engines.

Our client isn't ranking for their keywords because Google has no clue what's going on at that page, and no way to guess.

From the point of view of the human visitor, this is a lovely page. You can sit and admire the spiralling DNA and the happy bunny and the dedicated scientist, but there's no indication of what's happening here or where you're supposed to go.

The navigation bar is composed of the bottom row of butter-colored squares with subtle white words on them, and human visitors will eventually find them.

Imagine walking into an elevator. You step in, turn to face the front, reach out with your right hand for the tidy row of buttons that is always in the same spot -- and it isn't there. Instead, the designers have decided to put the buttons in subtle swirly patterns on the opposite wall, near the floor.

This is roughly the effect of the yellow squares with their delicate suggestions of words on them. Perhaps "contact" and "search" are part of the artist's concept, just like the mouse on the calendar? Oh, no -- now you can see that this is actually the navigation bar, cunningly disguised.

Your human visitors just aren't supposed to have to work that hard. And the search engines won't work that hard. So the diagnosis of the problem was really easy: this page needs some content. Shan's going to put the navigation where web users expect it to be, and I'm going to write some words that will let the search engines in on the secret of what these good people do, and their results ought to thrill them.

The problem for many websites is that they've been designed as though they were a literal print page for someone to look at. That's just not the case. People don't interact with a web page the way they do with a print page. And search engines, of course, don't interact with print pages at all.

If you've forgotten that when you planned your website, then you really don't need to look any further when seeking the reason for your website's disappointing results.

Stumble It!

Winning Web Design

A new website for the University of Arkansas Master Chorale went live a couple of weeks ago. I wrote the copy for this website, and worked on it with the web design class at the university. Each of the students created and coded a design, and director Graeme Langager and I chose one for the new site. Dr. Thomas Hapgood, the prof for the course, described the design we chose as the "winning" web design.

This was true in the sense that there were competitors for the opportunity to have a design published online -- a great way for a new designer to start a portfolio. Joel McCourt, the designer of the final version, doesn't yet have a website or an online portfolio, but he can refer prospective clients or employers to this design. That's a nice prize. I assume he also got a good grade.

But it's also a winning design in the more general sense of being a really good design.

What characteristics make Joel's design a winner?

First, I have to say that I enjoyed working with the class and seeing all their designs. I hope to see more of their work in the future. The process for choosing the design for the website was simple, though it wasn't easy to choose just one.

Out of all the designs submitted, I narrowed it down to the ones that were the most user-friendly.



Ashley Keirksieck created this design. The navigation is clear, the look is elegant, and visitors can easily find what they're looking for. The pale gray background provides almost the same degree of contrast and readability as black-on-white, with the luscious color on the banner giving a bright and elegant look.



Corinna Aguilar went with a more daring color scheme, but kept readability with high contrast in the text area. She used arresting navigation buttons to help visitors find their way around.



Tim Graves used horizontal navigation across the top. Since people are accustomed to looking for the vertical left-hand bar, or for the horizontal top bar, either choice works well. Again, dark letters on a light ground give us good readability. Since the audience for this site includes older people, this was a particularly important characteristic.



Julie Lungaro created a more modern look, but again the navigation is very clear and the text is highly readable.

From these options, Dr. Langager selected McCourt's, with Kiersieck's design as a second choice. His reason was "the overall cleanness." Joel's design has the most basic elements, with a rhythm and movement that make it elegant rather than just minimalist. The decoration of the pages supports rather than competes with the images and words.

Cleanness is a quality highly prized in websites. We went through a spell of being all impressed by the fanciness possible in websites, but that time is past. Modern users spend a matter of seconds at a page determining whether it contains the content they're looking for. They may then settle down for many minutes or even hours if they've found what they want, but the initial demand is for an uncluttered page where the eyes can light immediately on the information sought.

The reaction from the chorale? In the words of a board member, "Awesome website! You rock!"

Thanks once again to Dr. Hapgood, Joel McCourt, all the students who participated, and webmaster Philip Shane Richey for their hard work on this deserving project.

Stumble It!