So you’ve been given the green light to redesign your website. Your peers have high hopes. Your boss has high expectations. Not wanting to disappoint them, your team must tailor your website to accomplish a number of things for your business. However, your efforts will inevitably fail if the people who come to your site cannot find what they’re looking for. How do you make sure they can find them? And how do you make sure it’s in the most efficient and desirable manner possible?
Here are some general principles your team must follow if they’re going to improve their chances for success.
1. Provide orientation clues
In most public-facing websites, your users don’t think about your organization in the same way you do. They have diverse reasons for coming to your site. You need to be able to immediately answer several of their questions:
Am I at the right site?
Your website should be able to clearly explain to anyone likely to find his way to your site that he has arrived at the right (or wrong) place. There are two ways to accomplish this effectively.
- Put a company logo prominently in the header, preferably on the upper left hand side of your screen. Make it so that clicking this logo will take the users to your home page.
- Include in your header a short website-specific tagline that explains your business. This isn’t an elevator speech and, unless you’re a well-known brand, your audience is fairly well established and static, or it happens to also be descriptive of your company’s purpose, it’s not your company’s motto, either.
Bad Tagline - netmarket.com. "Save Time. Save Money. Save Your Sanity." Okay. Ummm, what do you do, exactly?
Good Tagline - refdesk.com. "Fact Checker for the Internet." That's pretty straightforward. Now, can you deliver?
No Tagline Needed - Yeah. We already know you, eBay.
(Credit for examples goes to Steve Krug)
Am I on the right page?
Not only should your website assure your users that that they’ve arrived at the right site, it should also let them know where in the site they’ve landed. There are a number of ways to accomplish this.
Where should I go next?
Just as important as knowing where they are, your customers are going to want to know where they should go next. For this, you must make your navigation easy to identify and easy to understand.
2. Display system status
The website should always let users know what’s going on. This will help users understand that your website (and by extension, your company) is both helpful and responsive, because it never lets these questions go unanswered:
Can and does the website recognize me?
This is especially important if you offer some sort of benefit for registration and logging in. Prominently showing universally and reminding the user at key places within their experience that the site can recognize and meet their needs can help drive leads.
Though not as prominently displayed as it could be, this message on USA Today lets me know that I'm not signed in and one of the benefits (weather on-the spot) I can get by becoming a member.
Did what I just do make any difference?
Have you ever clicked something and nothing happened? Try to avoid it. Even as broadband adoption expands, it’s still important to keep your website lean by reducing latency periods. When someone clicks something and expects to get something in return, your website should not delay in providing it.
How long will this process take?
Sometimes your website must make some calculations, and latency periods are unavoidable. In these instances, if you know about them ahead of time, provide some feedback to acknowledge that the user has done something, and let him know that the system will deliver momentarily.
Gmail lets you know that what you asked for will be delivered momentarily.
Don’t rely on long-form copy to explain that the process can take between 25-30 seconds, buried somewhere in the paragraph and a half it takes to explain that they should click the button to get to the next screen.
3. Create a recognizable interface
For websites intended for mass audiences, recognition is better than recall. In other words, people who see something should immediately recognize how interacting with it will affect the system. By virtue of the way it looks, they should be able to answer several questions about it:
Can I click on this?
Put simply, buttons should look like buttons and links should look like links. If it’s clickable, it should appear clickable. Conversely, if it’s not clickable, it should not appear clickable.
Example 1: Click Here (Good!)
Example 2: Click Here (Bad)
What will happen when I click on this?
Will it take the user to a new page? Will it submit the credit and billing information he just entered, or will he have an opportunity to confirm his order information before submitting it? Clear, concise instructions and an intuitive interface, designed from an accurate understanding of the audience, can help make it easy for people to predict the website’s behavior given any intended interaction.
Example 1: Next button
Example 2: Proceed to confirmation button
Should I click on this?
Knowing what is clickable and what isn’t solves only part of the problem. The other part of it is communicating whether clicking on something will benefit the user. One tactic that is often overlooked is communicating to the user whether clicking on two different links will take him to the same place, or whether he’s already been to a page where another link would take him. To solve this, use consistent terminology and ensure your links appear different when someone has already visited a page.
4. Plan defensively for errors
You’ve done well, but maybe your users are in a rush, they weren’t paying close attention, and they either clicked on something they shouldn’t have, or the servers are going through convulsions at any given moment. How can you help them recover?
Help users quickly answer a few questions.
Why am I here?
Was it a server error, a bad link, or was it something he did wrong? Use concise, plain language, and format it in a way that is easy to quickly identify and scan.
What should I do next?
Imagine searching for Elvis songs in a music distribution application. What if you weren’t paying attention and you submitted “Elviss” or “Elbis?” If you search for “The King,” will the system return music options from the the or B.B. King? What if you’ve ordered Elvis music before, should the application recognize your preferences and deliver more meaningful results?
Example: Google Did you mean…
Search isn’t the only place where people can experience difficulties. Good prior planning can make sure users have some meaningful choices when they’ve encountered an error.
Will I be able to avoid this problem in the future?
Understanding why something went wrong is critical to understanding how to avoid it in the future. Whatever the reason is, communicate it. Even small, growing companies with server issues can avoid audience abandonment by assuring their users that they’re taking steps to fix the problem.
5. Test, test, test
Guidelines are useful up to a point, but every project is different. It’s a constant struggle to straddle the fence between being unique and innovative and providing something of value that people can actually use.
Since you’re dealing with goals that seem to be at odds (being both innovative and conventional), why not take positions that seem to be at odds with each other?
Be a skeptical optimist.
Don’t be afraid to try something new, but test your ideas. Test your prototypes while in development. After all, your website’s success is measured by how well it supports your business, and to support your business, visitors must have a positive experience on your site.
People find websites useful, enjoyable, and valuable for different reasons. But chances are that very few will speak highly of a company when they get lost on their website.
You’ll never be able to save everyone from getting lost, but if you follow these simple rules, you’ll save a lot more than you lose.
Other resources:
Jakob Nielsen’s 10 Usability Heuristics
Don’t Make Me Think
Ambient Findability
The Design of Everyday Things
Defensive Design for the Web
2 Comments | Trackback | Categories: Testing, Tips and Tricks | Email This Post
May 12th, 2009 at 7:52 am
In part 3, is the bad example so bad that the link doesn’t work?
June 3rd, 2009 at 8:17 am
That’s exactly right, Charlie. The point is that if something looks clickable, it should be clickable. The second underlined link in that example is not a link, although it looks like one.
(Used for demonstration purposes only. Do not attempt at home.