May's Feature Article: Ten Best-Practice Essentials for Your Next Web Redesign (part 1)
How do you judge whether your site is doing its job? Is it the look and feel? Is it copy that grabs you and doesn't let go? Is it organization and ease of use? Is it that the site comes up first in search engines? Most businesses will redesign their web site every 3-4 years, and chances are, you're already thinking about your next redesign. In this article, we identify ten general best practices that can help you increase the effectiveness of your next web site, regardless of your industry.
Welcome to our premiere issue of &cetera - our monthly newsletter for friends and clients. In this first of a multi-part series, we'll explore how look-and-feel, clear navigation, visual hierarchy, and easy-to-scan text are best practices you shouldn't ignore in your next site redesign. Want a sneak peek at all ten best practices? Download an abstract here (79K PDF).
1. A Look and Feel That Reflects Your Brand
Your web site is often the first impression your company makes, so your site's look and feel should reflect the character and professionalism of your organization. Though there are lots of elements that help define your brand, we'll focus here on the visual look and feel.
Build Consistency
It's often tempting to treat your web site as a departure point for exploring creative possibilities in developing the company's "new look," but this is often a mistake. Your customers need to know that they've found the right URL when they visit your site, even if your company hasn't yet developed a comprehensive brand identity program. If possible, use the same color schemes, font styles, graphic elements, and logos that you're using in other materials. Not only does this leverage your previous marketing investments, it builds consistency and trust with your audience while reinforcing your visual identity.
Fit and Finish
A key strategy for building successful brands is to consistently deliver a quality experience. This concept carries over to your customer's experience on your site. Visitors notice your site's "fit and finish," so take some extra time to polish what they'll see. Take an extra pass at your copy to eliminate typos, and use a consistent template for your page layouts so elements like copy and navigation don't jump around from page to page.
See It Like Your Audience
Finally, make sure to test your site thoroughly using the same environments your users will, using different operating systems, browsers, and screen settings. What your designer sees on their Mac using a 30" Apple Cinema Display and Safari browser could look markedly different from what your customer sees on his Dell laptop using Firefox.
2. Clear Navigation
Your site's navigation should skillfully show visitors where they are, where they can go, and how they can get there. Web users have short attention spans, and aren't afraid of jumping to a potential competitors site that's easier to use.
Logical Structure
Create a logical, organized structure for your content, and have your navigation mirror it. When in doubt, follow the "seven plus or minus two" rule of cognitive information processing (Miller, 1956) when organizing content into major categories - generally, this means limiting navigation categories to between five and nine choices per menu, though this rule can be broken where appropriate. If you use cascading menus, make sure that your site can be navigated effectively even with JavaScript and Flash turned off. It's good standard practice to include a redundant set of text-only main navigation links at the bottom of each page, next to your legal and copyright statements.
Provide Visual Cues
Global navigation isn't the only way to make it easy for customers to return to the home page or other pages they've recently viewed. The style and color of hypertext links aid navigation too. Too often, graphic designers without much interface design experience will "clean up" the look of a page by making all links - even visited links - the same color, or turn off link underlines except when people mouse over them - and even remove link underlines from the site altogether. These visual clues help visitors distinguish what's clickable from what's not, and where they've been from where they haven't.
Test for Usability
If time and budget permit, conduct a simple usability test, and watch what untrained users do when asked to use your web site to "order fifteen #10 widgets" or "find our company mailing address." Usability expert Steve Krug's book Don't Make Me Think makes a great read during a plane ride, and explains the hows and whys of conducting simple usability tests. Testers are usually not shy about telling you what's wrong with your site, but "real world" users often simply get frustrated and go somewhere else. Make sure your interface works - and fix what doesn't - before it hurts your bottom line. The best navigation doesn't require extra thought on the part of the user, though achieving this can take extra planning, usability testing and design revisions.
Don't Make It Invisible
Finally, don't put your main navigation on the right side of the page. We'll touch more on why in the next section, but the main reason is that browsers cut off the right side of the page first when a site is wider than the browser window.
3. Visual Hierarchy
As a student of art history, I've always been amazed at the way the great masters use composition to control the flow of the eye across a painting, telling a story. Just like a great painting, the overall composition of your site's pages need to draw visitors' eyes to what's most important.
Harness Cultural Convention
Our Western-language culture trains us to process information top-down and left-to-right. We can't change that, but we can use it to our advantage. Start with the assumption that your viewers eyes will start at the top left corner of your page. Then use cues like color, contrast, size, and relative placement to tell your audience what the most important elements in your composition are.
Create Rules
To be consistent, you'll need to create a set of rules for how to visually treat information with different levels of importance, and follow these consistently. Modern browsers support Cascading Style Sheets (CSS), allowing all the pages on your site to share the same set of rules.
Stylesheet Essentials
In your stylesheets, be sure to create size, color, placement, and font treatment standards for:
- Navigation elements, including hypertext links
- Page titles, main headings, and at least two levels of subheads
- Body text, including special cases such as bulleted and numbered lists, block quotes and captions
- Form elements such as text boxes, dropdown lists, and buttons (and don't forget data labels!)
- Small text, such as that used for copyright statements or redundant links
- Table elements, such as headers and data cells
4. Concise, Easy-to-Scan Text
It's easy to hold some romantic notion that someone's going to brew up a mug of coffee, curl up with their laptop on the couch, and browse your web site for a while. Trust me here - that never actually happens (except in commercials). If people are visiting your site, they're there for a reason. As much care and love as we might put into crafting captivating copy, the honest truth is that most visitors won't actually read it. In reality, they'll probably scan it for a second or two to see if it's what they're looking for, and move on if it's not.
Headline. Intro. Body. Conclusion. Repeat.
But that doesn't let you off the hook - in fact, it means that your writing must be even more concise, organized, and hierarchical than usual. I want you to remember back to 4th grade, when you first learned to write essays. I can hear it now: "Intro, Body, and Conclusion." Dust off that phrase and hum it like a mantra while you're writing your web copy. Start by creating outlines - for each page and every paragraph within that page. Intro... Body... Conclusion... Now summarize the page content within the first paragraph. Now go back to each paragraph and summarize its content of within the first sentence. You're almost done. Now go a step further and give your paragraphs a subheading (or group paragraphs together under one heading if it's starting to look messy).
Make it Easy on the Eyes
Finally, don't tire reader's eyes with small type, brash color combinations and wide columns. While we're at it, let's touch on font choices. While the conventional print wisdom is that serif fonts make more distinguishable word shapes, and are thus easier to read, a notable font-readability study (Web Marketing Today, 2001) found that web readers tend to prefer sans-serif fonts. Microsoft, Adobe, Apple and others have done a lot of work over the last decade to optimize screen readability for many of their popular fonts, but remember this golden rule: you can specify any font for a web page, but people will only see the fonts that they have installed on their computer. For this reason, I usually recommend Verdana or Arial, as boring as those choices might seem.
Continued Next Month...
In our next article, part two of our series exploring web site best practices, we'll see how including differentiation and sales messaging is a best practice you shouldn't ignore for your next site redesign. Want a sneak peek at all ten best practices? Download an abstract here (79K PDF).
Miller, G. A. (1956). The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information. Retrieved May 9, 2007, from York University: Classics in the History of Psychology: http://psychclassics.yorku.ca/Miller/
Web Marketing Today. (2001, March 1). HTML E-Mail: Text Font Readability Study. Retrieved May 9, 2007, from Web Marketing Today: http://www.webmarketingtoday.com/wmt6/html-email-fonts.htm
About the Author
Dan Wilson is a marketing consultant who has been helping companies reach the next level through their communications efforts for over 13 years. Dan's passion for helping clients achieve their goals has led to many successful campaign launches for Fortune 1000 companies. Dan also served for several years on the program advisory panel for UC Davis Extension, developing course curriculum for and teaching web design and multimedia courses. Dan holds an AA in Art and a BS in Business Marketing, and is the Principal and Founder of Brand, Etc. LLC, a brand development and marketing communications firm based in the Sierra Foothills.
Web Effectiveness Study Ranks Leading Area Companies
This month, we completed a study of web sites from over 200 Sacramento-area business leaders. Here's what we found.
- Study Results
PDF (256K) - 10 Web Best Practices
PDF (79K) - Raw Aggregate Data
PDF (113K)
This Month's Quote
"On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar."
-David Ogilvy