Since 2006 we have held these fourteen website design guidelines as the most fundamental principles of the best website design.
Every website is unique to its own audience, so you can’t include things like the best colors to use, or anything that will tell you exactly how to design a site. What we’ve put together is a report card that can be applied to any website, of any age. We’ve had this report card for almost a decade and when we update it (like we did today), all of the rules still apply.
[text_ad]
The age of the Internet has created many websites that are like older homes that have been remodeled again and again with no master plan for making the rooms work together. Our research indicates that many of these complex websites will function much better when untangled to create a network of websites, each with streamlined functionality that the user can learn to use effectively.
This means there are many pitfalls waiting to ensnare the overworked, over-extended website publishing team. Brand integrity, clear messages, easy-to-use order flows and intuitive navigation fall victim to the race to keep up with “technology.” It may give you some relief to know that best practices in website design and execution are often a simple case of common sense—that, and an understanding of your audience’s expectations and perspectives.
To create the 14 Website Design Guidelines, we’ve reviewed hundreds of websites and interviewed dozens of website publishers. We’ve conducted a series of expert usability reviews and actual user tests to determine what we believe to be the top 14 best practices for running a Mequoda system.
While these 14 website design guidelines are by no means the complete list of website design practices, they are essential to sound, effective website design. We’re sure that implementation of these practices will result in happier, more satisfied, readers.
1. Strategic Intent, or Purpose
To communicate strategic intent you must know two things:
- What are your users trying to do at your site?
- What do you want them to do at your site?
At least one of those goals should be a way to monetize the visitor. Clear strategic intent is much easier to achieve when the website has very simplified functionality. Complex websites confuse users.
The Mequoda System™ asks two key questions to classify websites into one of seven models:
- Is the user looking for content or commerce?
- Who pays the website publisher for successful task completion, the user or the sponsor?
Knowing the answers to these questions is key to designing a website with clear strategic intent.
| STRATEGIC INTENT | |
| A | Clearly indicates the action to be taken |
| B | Action to be taken is present |
| C | Too many actions to be taken |
| D | Fuzzy about what can be done |
| F | Can’t do anything |
2. Content Webification
The Internet is not a book, magazine, or newspaper. Nor is it TV, a live event, or a brick-and-mortar store. The Web is a unique medium. A well-executed website offers the opportunity to do things that other media and physical venues cannot do, the execution of which is particular to the Web.
Let’s look at a few examples:
- Users buy books at Amazon because it offers a selection and an interactive capacity not available in any physical bookstore.
- eBay lets users interact in a way that wasn’t possible from traditional classified advertising or auctioneering.
- ConsumersReports.org makes 48 months of magazine content available in a searchable format, which is very different from the same content delivered by the monthly magazine.
- Forbes.com offers 1,500 new business stories to its users every day with searches and alert services to guide them to the content they want.
- AmericanGreetings.com can deliver a gift card across town or around the world in a matter of seconds.
The key to successful website publishing lies in responsive design so that a visitor can view the site on any mobile or desktop device and easily read and/or find content. It lies in exploiting the user benefits that the Web has to offer at the expense of traditional media and retailers. Successful website publishers use content to create unique user benefits. These website design guidelines for content webification makes sure the content is accessible to a user on any device.
| CONTENT WEBIFICATION | |
| A | Responsive design, innovative use of interactivity and multimedia technology |
| B | Responsive design, some use of web-based communication technology |
| C | Text and graphics have been webified |
| D | Website looks like a book, magazine or other old media |
| F | Website content is non-existent and/or hard to consume |
3. Relationship Building
Website success depends on providing incentives to encourage visitor email registration. Email registration permits the website to follow-up with visitors at a later date, using alerts or newsletters. If a website does not attempt to capture the visitor’s email address, visitors may never revisit. While every website should have an email capture method, the Portal is designed to be at the hub of a Mequoda System that uses frequent email communication to drive traffic to the network’s ecommerce websites. For an editorial website, capturing opt-in email newsletter subscribers must be Job One.
| RELATIONSHIP BUILDING (EMAIL CAPTURE) | |
| A | Aggressively invites visitors to receive content via email |
| B | Clearly invites visitors to receive content via email |
| C | Email newsletters available, but not prominent |
| D | Email newsletter is hidden |
| F | No email newsletter |
4. Community Building
Some of the Internet’s most successful websites enable their users to generate more than 99 percent of website content. Monster.com, eBay and BookReporter.com are all websites that build community by letting the users do the talking. The user product ratings and reviews at Amazon is another way to let the users participate in building the websites. On our freebie landing pages, we suggest customers leave reviews in the comments and let us know what they think about the content. Does the website encourage feelings of belonging, enthusiasm, and loyalty? Does it motivate you to become involved by asking a question or contributing a comment?
| COMMUNITY BUILDING |
|
| A | Clearly invites visitors to become involved with other members |
| B | Community involvement devices are present |
| C | Community involvement devices are available but not prominent |
| D | Community devices hidden |
| F | No community involvement devices |
5. Persistent Navigation
Users of your site should be crystal clear about where they are in your site, where they can go, and how they can get back to somewhere they’ve been. With the exception of certain processes, like order flows, they should be able to navigate to all major areas of your website from anywhere in your website. Does your persistent navigation reflect the depth and breadth of your content? Does it provide quick and easy access to customer service? Is it intuitive? Is it consistent throughout your site?
Our research indicates that a change in top-level navigation is best accomplished when you also change the nameplate and the URL. For example, depending on which tab you’re on at Mequoda.com, you’ll see the nameplate change also.
| PERSISTENT NAVIGATION | |
| A | Does an excellent job at letting user fulfill goals |
| B | Is confusing or has too many levels |
| C | Is not persistent or not consistent |
| D | Changes without any perceptible reason |
| F | Isn’t persistent or universal |
6. User Task Depth
Does the website encourage you to take the next step, such as request more information or make a purchase? We have found that there are three to five fairly common tasks that account for 80 percent of user activity.
Not surprisingly, for content sites, the top task is to get more detail on a news headline. For commerce sites, the user is most often trying to complete a purchase. Browsing and searching are common to all. For retail websites that involve the shipment of physical products, users are increasingly seeking to take care of customer service tasks at the website—canceling or returning an order or reporting a problem with delivery.
| USER TASK DEPTH |
|
| A | User was able to complete all four tasks |
| B | User was able to complete at least three tasks |
| C | User was able to complete at least two tasks |
| D | User was able to complete at least one task |
| F | User was not able to complete any tasks |
7. Affordance
Proper affordance means that something that is linked should look like it is—and that which is not linked should have no underlining or color-coding. Good affordance means that you aren’t making the user mouse-over the page looking for links. Good affordance also requires a website publisher to understand how different age groups expect a website to behave.
| AFFORDANCE | |
| A | Links and buttons do clearly what they can “afford” |
| B | Most of the links and buttons have clear affordance |
| C | Some of the links and buttons have clear affordance |
| D | Links and buttons are inconsistent and confusing |
| F | Links and buttons clearly violate web conventions |
8. Labeling and Language
Far too many websites use language that is better understood by the site’s sponsoring organization than by its audience. Attention needs to be paid to the labels used in navigation and page titles so that it is consistent with itself and with the audience’s mental models for the content. The added bonus here is that key phrases and words that your audience understands will also improve your ranking in search engines, as they have been designed to evaluate relevancy as a “human” would.
| LABELING & LANGUAGE |
|
| A | Is audience-centric, has good representation of keywords and phrases |
| B | Some confusion in taxonomy for labels |
| C | Uses jargon or language reflective of organization, not reader |
| D | Labels are inconsistent and confusing |
| F | Poor language and labeling |
9. Readability (Content Density)
We’ve known for ages in print that effective use of white space (number of columns, bolding, margins, etc.) increases reader pleasure. The same principles apply to website design guidelines. Actually, white space and employing Gestalt principles of continuity, similarity and proximity are even more important when formatting news content for the Web. This is because Web users tend not to read pages to determine if the content is relevant to their information search. Instead, they scan the page seeking information or clues to where they might find what they are looking for.
| READABILITY (CONTENT DENSITY) |
|
| A | Uncluttered, adequate qhite space, column width, type size and face |
| B | Does a reasonable job balancing graphics to text |
| C | Too many graphics or too much text, too many columns |
| D | Cluttered, jammed or confusing |
| F | A total mess |
10. Organization (Marketing Quadrants)
On content-heavy websites, finding space to provide important marketing links is a challenge. Actual eye-tracking tests have revealed that people use a “Z” shaped scanning pattern when scouring Web pages for information. More importantly, they are less likely to scroll down the homepage than they are on pages that are several levels down. Keeping critical marketing information and contextual navigation “above the fold” is essential. Using primary marketing quadrants to generate brand-related revenue or build relationships and communities with users is the sign of a well-designed site.
| ORGANIZATION | |
| A | Marketing quadrants are appropriately exploited, navigation OK |
| B | Primary links in only one top quadrant |
| C | Primary task links present, but obscure |
| D | Primary task links missing |
| F | Total lack of organization |
11. Content Freshness
How up-to-date is the information on the website? Our website design guidelines aren’t limited to colors and white space, it includes content as well! Website credibility plummets if the home page or Portal promotes an event that occurred two months ago. Websites should be considered “works in progress” that are constantly updated if only so that they don’t bore repeat visitors. Research has shown that websites with a high update frequency generate more repeat visits per month per unique user. With the average number of websites per user going down and the average time spent on the Web going up, it is imperative that the content on your website be as fresh as possible.
| CONTENT FRESHNESS |
|
| A | New content is available throughout the day |
| B | New content is available daily |
| C | New content is available weekly |
| D | New content is available monthly |
| F | The update schedule is infrequent or unclear |
12. Load Time
Two phenomena contribute to the users’ expectation of download time:
- Improvements in internet and wi-fi speeds has dramatically shortened download time, but
- Websites are increasingly using more media and complex designs that take more time to load.
Most users are looking for information. If they can’t get a lead on what they are looking for quickly, they will Google their way right off your site and onto another.
The Pingdom Tool will test a full website page by loading the complete HTML page, including scripts, fonts, images and CSS. The tool then acts as a web browser would and loads the page.
Each test will give you valuable information including statistics on the total load time of the page, the total number of objects tested and the size of the site including all of the objects. If there are pages on your site that have high bounce rates, test their load times.
We do not use Google Analytics anymore to judge load time, because page speed as a whole is beyond our borders. If one reader connects to our site on a slow connection, in a mountain range somewhere, it might take three minutes for a page to load. If you’re going to standardize this metric where everything becomes equal, the audience can’t be a wildcard. If you use an independent tool like Pingdom, it’s no longer a wildcard.
| LOAD TIME |
|
| A | Under 3 seconds |
| B | 3-6 seconds |
| C | 6-9 seconds |
| D | Over 9 seconds |
| F | Gave up waiting |
13. Aesthetics
The average user expects professional websites to be clean-looking, information-rich, and intuitive. They respond best when the aesthetics of the site support the purpose of the site and are consistent with the user’s mental model. Is the design appropriate for the firm or organization the website serves? Layout, colors, and typefaces determine the site’s personality and image.
| AESTHETICS | |
| A | Support the purpose of the site, is consistent with the user mental model |
| B | Support the purpose of the site, but confused about user mental model |
| C | Disregards user mental model |
| D | Totally ad-driven |
| F | Totally ugly |
14. Brand Preference
Most websites have a strong brand that often has roots in the physical world—but on the trend to dot-com, the brand can sometimes cause confusion. Are you building and maintaining your brand? Or are you using valuable space on your homepage to promote a “new brand” that represents you and a bunch of other players? Are you creating the type of brand preference that websites like Amazon enjoy where more than half of all visitors arrive by typing “Amazon.com” directly into their browser’s URL field?
| BRAND PREFERENCE |
|
| A | Clearly supports and builds brand preference; encourages return visits |
| B | Supports and builds brand |
| C | Sends confusing messages and subjugates brand to higher authority |
| D | Sells something else |
| F | Doesn’t support brand at all |
Evaluating Websites
We encourage you to score your website on each of the 14 website design guidelines, add them together, and arrive at a cumulative score. The goal is to emphasize the importance of balanced, usable websites. Your website should achieve respectable scores in all areas, rather than over-emphasizing a single area or two or omitting other areas completely.
How else do you measure a website? What other website design guidelines do you follow? Leave a comment and let us know.
This article was originally published in 2006 and is updated frequently.
This article is literally a hidden gem haha. Also, I never heard of the Pingdom tools for load site speed, will use it for sure. Great article Kim 🙂
The Website Design Scorecard is a handy tool for keeping it real.
These design guidelines help keep the focus on the user and how they see the site.
Don
Excellent job on these guidelines. Some I’ve been using just by intuition but a number have caused me to go back and check out if I’m violating any of them.