Fast loading pages aren’t important for just web rankings – if a page is loading slowly or times out, how many will hang around to wait for the page to load?

Whatever the reason for a slow loading page – antiquated server, extra coding, improperly formatted images – having one (…or several) will certainly cause you to lose visitors and more importantly, customers. To see how important this is to the average web user, check out this page load graphic courtesy of Blue Compass Interactive and our friends at Planet Ocean.

So how can I speed up my page’s load time? And what’s the recommended page load time for both search engines and web users?

For the best results, it’s recommended all pages on your website load within three seconds.

If your pages are taking longer to load, the following 5 tips will help optimize page load time and ensure your rankings (…and customers) will not slip by the way side due to slow loading pages.

1. Use an image editing program that provides a “Save for Web” setting

Images are by their very nature pretty big. If your webpage is loading images as-is it can dramatically lower your page load time. A “Save for Web” setting will export your image in a compressed file size. Also, don’t forget to specify the original file size in your HTML code (i.e. 500 pixels x 300 pixels). Not specifying these dimensions means your web browser will have to work harder to display the image, thus increasing page load time dramatically.

2. Keep HTML coding to a minimum

Many webmasters, perhaps you, use WYSIWYG (…what you see is what you get) type HTML editors. These programs though add a lot of unnecessary code to your page and thus, slow page load time down tremendously. Examples of unnecessary coding include “comment” lines and “date stamps” to name a few. One program you can use to compress your coding is the GZip HTML Compression tool.

3. Consolidate Cascading Stylesheets (CSS) and JavaScript

These days, every page has at least one cascading stylesheet (CSS), third-party application or JavaScript file to load before the page will function properly. This can slow even the smallest of web pages. Therefore, it’s best to force the browser to fetch as little external information as possible. Consolidate your CSS sheets down to one if possible and embed them at the HEAD of the individual page.

4. Control how your site content is ‘cached’

Demarking and controlling how your site’s content is cached by the search engines will dramatically speed up your page load time. How you do this depends on the type of server you’re hosting your site on.

For an Apache server, you can physically adjust the “Expires” or “Cache control” header attributes. The process for a Windows server is similar and involves manipulation of the HTTP ‘client cache’ element. And if your site is hosted through WordPress, download and install the WP Super Cache plug-in which serves up static HTML pages to the majority of your audience and dramatically boosts page load time.

5. Reduce the amount of cookies

Consider downloading and installing a free ad-on like View Cookies for Mozilla Firefox to monitor the amount of cookies being exchanged between you and your site’s visitors. Review these cookies and see which ones you can reduce in size or eliminate altogether. If you can’t recognize the cookie, then you probably don’t need it. The fewer cookies your page has, the faster it will load.

As we always say, one ranking factor alone won’t determine the success or failure of your site in the search engines. With that said, on-site technical improvements are a sound way to securing long-term rankings. Therefore, if you find your site’s load time is a bit lagging, make sure you pay close attention to the above metrics.

But once you’ve grabbed their attention, you’ve got to keep them there.

Bad site design from a usability perspective will certainly kill your site’s good will. How many websites didn’t have easy to follow navigation or otherwise made it difficult to find what you needed?

Sadly, this is more common than anyone wants to admit.

Below is a list of the 10 most common web design mistakes compiled by usability expert Jakob Nielsen. Of course, there are other design issues from an SEO perspective you need to consider. But these following 10 mistakes will kill the experience for your visitors, which will depress the number of visits and conversions you ultimately receive.

#1 Most Common Web Design Mistake – Bad Search

When site visitors can’t find what they’re looking for through the site’s navigation, they turn to search. Some just jump right to the search bar and type in their query. However, many online users don’t have a keen sense of grammar and spelling. If your site’s search functions are overly literal, this could hurt you.

Be sure your search functions are able to handle typos, plurals, hyphens and other variations of important terms on your site’s materials.

#2 Most Common Web Design Mistake – Over-use of PDF Files

Adobe PDF files are generally reserved for extensive e-books and other information that’s better off being printed. If a user encounters a PDF while browsing, it breaks their flow and leads to a bit of frustration. Also, layouts for these documents aren’t meant for the web and usually display in very small fonts that are difficult for users to handle on-screen.

Therefore, only use PDF for manuals, e-books and other large chunks of content that need to be printed. Convert any information that should be browsed or read on-screen into a real webpage.

#3 Most Common Web Design Mistake – Not Changing the Color of Visited Links

Understanding where you’ve been helps you better understand where you’re going, both in life and on websites. For the web, links are the key component in this navigation process. Knowing which links you’ve already visited keeps you from unintentionally revisiting the same page again. Testing has shown if sites do not change the color of a link once it’s been clicked, much disorientation and frustration among users will result.

Therefore, be sure you setup your links to change color once the visitor has clicked on it. This will help your visitors avoid visiting the same page twice, or three times.

#4 Most Common Web Design Mistake – Non-Scannable Text

A big mistake among web copywriters and designers – not having copy that’s scannable makes it look intimidating to readers. Boring and painful are other metaphors that can describe one’s feeling when they run into non-scannable text.

Use bullet points, sub-headings, bold-print, short paragraphs and a simple writing style to make your copy more inviting. Remember, most users scan, they don’t actually read everything word for word.

#5 Most Common Web Design Mistake – Fixed Font Size

Web design platforms like CSS (Cascading-Style Sheets) provide an option to allow you to disable a web browser’s change font function(s). The default most of the time, 95% of the time in fact, sets the font-size kind of small, reducing readability. This can be especially frustrating for users over 40 or with poor eye sight.

Respect users’ choice and allow them to easily resize the font to a level needed for them…to make it easier, express font-size in relative terms rather than pixel size.

#6 Most Common Web Design Mistake – Page Titles with Low Search Engine Visibility

Your site’s <title> tag is a very important element of your website. It’s what search engines will display in your site’s listing, which is what users first see about your business and will click on if they’re searching on Google or Bing. It’s also the default setting if users bookmark your site. Many sites though say ‘Welcome to’ or begin their <title> tag with ‘the.’ Also, many sites don’t have different <title> tags for each page.

For your homepage, begin your <title> tag with your company’s name followed by a brief, keyword-rich description of what you do. Search engines though only display the first 66 characters but you can have a few more if you need them. For other pages’<title> tag, include important details of the page’s content using keywords you’re targeting.

#7 Most Common Web Design Mistake – Advertisements (…or things that appear as one)

As the web has developed, users have become quite keen on avoiding anything that looks like an advertisement – or anything that interrupts their ‘goal-driven navigation’ as stated by Nielsen. Text-ads in search results are an exception to this rule of course. Unfortunately, many good design elements have similarities to ads and get ignored as well.

It’s therefore best to avoid any design elements that look like advertisements. Banners, pop-ups and overly aggressive animations can all potentially pose frustrations for users. If you have them, it’s more likely they’ll be ignored. Pop-ups in particular may in fact draw scorn from users.

#8 Most Common Web Design Mistake – Violating Design Conventions

One of Jakob Nielsen’s laws of usability – “users spend most of their time on other sites”

Meaning, users have certain expectations already set before they reach your site, which are formed by their experiences on other sites. Consistency is therefore an important principle – when users know what to expect, they feel in control. When expectations are broken, many will feel insecure and leave your site.

Stick with common design conventions in order to maintain consistency with what’s commonly done on most other sites. You can of course, and should, make yours unique from your competitors. But with certain navigation and design elements, you want to maintain some form of consistency.

#9 Most Common Web Design Mistake – Opening New Browser Windows

If you’re like me, having a new window or ‘pop-up’ just come up on the screen can be frustrating as all get out. Considering systems can freeze up, loading a user’s machine with more ‘junk’ can in fact lead to a lot bad feelings. Besides adding pressure on their systems, new browser windows disable the ‘back’ button, which is what a vast majority of users use to navigate away from a page.

Links should therefore only replace the current page with new content. If a user wants to open the page in a new window, they can easily do so by right-clicking on their mouse.

#10 Most Common Web Design Mistake – Not Answering Questions

Since web users are inherently ‘goal-driven,’ not answering important questions about your products or services is a big failing of many websites. Not providing any specifics or burying them deep beneath a bunch marketing jargon will make users think what you offer can’t help them. One of the best examples of this is price – how much does it cost?

Ecommerce sites generally don’t make this mistake but a lot of B2B sites do unfortunately. But many B2C ecommerce sites too may leave the price out of lists like category pages or search results, which can lead to user frustration and reduced conversions.

One principle we always like to remember and urge you to think about – “people buy things from people, not websites.” Therefore, their experience must be enjoyable and not rife with uncertainty and errors. It should move along flawlessly – each flaw reduces good will and ultimately conversions.

But considering the fact many websites contain hundreds, maybe even thousands of pages, it can be a daunting task regardless of how careful you are. Proper planning helps ensure it all goes smoothly…no or very little planning can turn it all into a big nightmare.

Pages can get mixed up, deleted or otherwise not be available on the new site, which can end up costing your company thousands of dollars.

To avoid this calamity, you need to consider the following factors before, during and after. Continue reading to learn about all of these considerations you need to keep in mind when redesigning your website.

Before doing anything though, you need to get some baseline information and backup your old site just in case something goes awry. Load time, conversion rates, search rankings, bounce rates for your top landing pages and a list of important inbound links is information you need to have in-hand before you even get started.

Once you have all of this, it’s time to start your site re-design. Taking the following 34 steps during this process will ensure it all goes smoothly and you begin reaping the benefit of a new website as quickly as possible.

Prior to New Site Launch

1.       Have the old site available to put back online immediately if something goes wrong.

2.       Retain your existing URL structure if possible so you can minimize impact on search rankings.

3.       Address methods to eliminate duplicate content to prevent it from occurring in the first place.

4.       If you’re unable to keep existing URL structures, have a plan on how you will handle switching to the new file structure, including 301 re-directs, updating links, marketing materials and PPC ads.

5.       Keep a copy of the old site on-hand just in case.

6.       Use a link checker utility like Xenu to scan your new site and find any broken links.

7.       Take a moment to review titles and meta descriptions on your new site.

8.       Before launching, check your new site manually using multiple web browsers (Internet Explorer, Firefox, Safari and Chrome). Many differences exist between these browsers.

9.       Update XML and HTML sitemaps so search engines can easily crawl your new site.

10.   Verify all web forms and other interactive features are working properly.

11.   Protect your site from competitors and search engines during development. The best way to accomplish this is to develop the site locally and internally to your firm.

12.   Review existing RSS feeds

13.   Verify your new site will work properly with traffic tracking codes like Google AdWords and Google Analytics.

14.   Develop a plan to add current analytics tracking to your new site before launch.

During new site launch

15.   Did you back up your old site? If not, now is your last chance.

16.   Update your .htaccess and robots.txt files so any 301 redirects will work properly.

17.   Be sure AdWords and PPC campaign pages are updated and working properly.

18.   Update payment gateways or other important sites if your server’s IP address changes.

19.   Test all email address and make sure they’re working properly.

20.   Remove any temporary no-index tags, robots.txt and be sure any other robot control tags are updated in case you had something blocked off during the development process.

After new site launch – catching any mistakes

21.   Run your spider/link finder once again to catch any broken links you may have missed.

22.   Test your new site’s load time. Google has claimed load time is now a big ranking factor.

23.   Make double-sure you put tracking codes/scripts on your new pages

24.   Check server logs for any 404 or other server errors.

25.   Look at your Google Webmaster Tools and Bing Webmaster accounts to see if the search bots are spotting any errors.

26.   Update any broken inbound links at the source of the link or through a 301 re-direct.

27.   Verify PPC ads are still correct.

28.   Make sure your XML sitemap is up-to-date.

29.   Compare bounce rates for the new site vs. the old one.

30.   Monitor how newly indexed (…or re-indexed) pages are ranking.

31.   Now that your site is live online, test it once again with all web browsers and even a mobile smartphone if you’re able to.

32.   Manually test all web forms and other interactive scripts.

33.   Check where your site is in the search results after the search engines have indexed it once again.

34.   Go to Google and Bing and type “site:yourdomain.com” in the search bar to see if the number of pages indexed has improved over your previous numbers.

Taking these all important steps helps ensure your site transition goes as smoothly as possible. Also, they help you spot any errors and allow you to make those corrections before any negative consequences arise.

Double, perhaps even triple check your site to make sure everything is working properly. If not, you’re certain to suffer devastating setbacks in the search engines as well as eroding good will of your site visitors.

Remember what Thomas Edison once said – “Good fortune is what happens when opportunity meets with planning.”

Specifically and technically speaking, this particular update was algorithmic rather than manual in nature. All told, it affected over 12% of search queries in the U.S.

That adds up to some pretty significant numbers so therefore, it’s logical to see how more than just ‘content farm’ type sites were affected…many sites with good, high-quality sites were affected to. Many forums back this up as some sites say they lost as much as 50% of their U.S. based traffic from Google.

So what exactly were the issues surrounding Google’s Panda update and how do they affect my site?

While many of these affected sites claim they generated 100% original content, a deeper examination yielded of some of the example sites shown on forums and articles weren’t quite 100% original.

Specifically, sites affected by the update included one or more of the following 7 criteria:

(There were many more actually but these were the 7 most common)

1. Incorrectly or failing to use a canonical tag – especially common among e-commerce sites as Google would index two identical URLs

2. Excessive use of RSS feeds

3. Not providing unique content – as decided by Google. Essentially, they decide if your site is ‘authoritative’ enough and if they trust it

4. Optimizing for search engines rather than your audience

5. Using boilerplates too much and across too many pages

6. Having too many ads ‘above the fold’

7. Any site previously blocked manually by Google Chrome Personal

It’s safe to say sites undeserving of these kinds of penalties got caught in the cross-fire…Google even setup a Webmaster forum on the topic and has even admitted that it’s possible considering the fact this update was algorithmic rather than manual in nature.

Google says in reply to questions on its forum that since the Panda update was completely algorithmic in nature, Google cannot make any individual exceptions.

So basically what they’re saying is tough luck, too bad or whatever euphemism you can come up with to describe the situation. Considering this fact, it won’t do you much good to appeal to Google but if you find other, non-content related issues, then we suggest (…and our friends at Search Engine News do too) you contact Google about those issues.

To address these problems, we want you to remember this one important axiom – content is king!

It’s likely there are specific pages in your site that’s causing you to lose traffic. Isolate those pages and see if they fit any of the 7 criteria mentioned above. Either way, you should ensure those pages have 100% unique content.

If you’re an e-commerce site, generate product descriptions starting with your big products and working your way down. Not only does this prevent negative impacts from these updates, it will position your site for better long-term rankings.

These various pictures and examples can help you easily visualize the concepts author Steve Krug outlines in his book. See an example of a tagline and welcome blurb. See an illustration of how designers view web pages they create and how people out in the real world view them.

Having these illustrations better explains the usability concepts outlined in Don’t Make Me Think and make it more interesting to read. We all like pictures and charts, right?

So if you’ve already read our review on Don’t Make Me Think but would like to see some illustrations to help you understand web usability further, by all means check out parts I, II and III again. And if you haven’t read the book review, start by reading the intro and basic concepts of web usability in part I.

Of course, to really understand web usability fully, we suggest you purchase a copy of Don’t Make Me Think today. It’s available on Amazon at a really good price (…w/ free shipping too!!)

One more note – thank you to Steve Krug for providing these wonderful illustrations from his book. We definitely feel they give our book review the added appeal to make it really useful for burgeoning web marketers.

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

He also outlines other issues to like accessibility for people with disabilities and the importance of including elements in your page to help ALL visitors, not just the perfect ones you’ve identified through market research. The final chapter quickly discusses ways to convince your boss of the validity of your recommendations. Some bosses and executives may have a difficult time understanding the virtue of good web usability. Krug gives some great examples for you to consider.

If you haven’t seen them yet, read parts I and II of our book review to fully understand the intricacies of web usability.

Section IV – Larger Concerns and Outside Influences

Chapter 10: “Usability as common courtesy – Why your Web site should be a mensch”

Besides building clarity into your website, you also need to be considerate of your users as well. Is your site clear? Does it behave badly and erode goodwill among users?

Consider this:

You’re booked on a flight but a pilots’ strike begins two days before you’re scheduled to leave. You go to the airline’s website to find information about the strike. After searching for awhile you give up amid frustration. Undoubtedly, this erodes much goodwill you had toward the airline.

Users in fact, including you, have a reservoir of goodwill. You begin very optimistic and eager to find what you’re looking for. Not

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

everyone’s reservoir is the same…some people have a shorter fuse than others. And this also depends on the situation. Your goodwill will drain away quicker if you’re in a hurry.

Fortunately, goodwill is refillable so if the site makes some mistakes but makes up for it, the user will leave in a good mood and more likely to return.

Here are some things that erode goodwill:

1.       Hiding information people are looking for

2.       Punishing users for not doing things your way

3.       Asking for information you don’t really need

4.       Shucking and jiving users

5.       Putting too much ‘sizzle’ (i.e. Flash intro) in the way

6.       Site looks amateurish

And some things that increase goodwill:

1.       Knowing what your visitors are looking for and making it obvious and easy

2.       Telling your visitors what they want to know

3.       Saving steps

4.       Putting effort into your site

5.       Making it easy to recover from errors

6.       Providing creature comforts like printer-friendly pages

Doing things like this and more to increase goodwill is not only courteous, but good business practice. If people coming to your site have an easy time and enjoy themselves, they’ll be more likely to return and tell their friends.

Chapter 11: “Accessibility, Cascading Style Sheet, and you”

Unless you decide all of your users are perfect in every way, you’re going to need to think about accessibility. Adding features into your site for disabled persons is not only good business, it’s the law.

Specifically, the law is what’s known as Section 508 of the 1988 Amendments to the Rehabilitation Act, which specifies information technology accessibility standards for companies wanting to do business with the U.S. Government.

When discussing accessibility, designers and developers naturally get a little anxious since it potentially means more work for them. Making a site accessible is definitely harder than it should be, but well worth it from both a legal and business standpoint.

To understand how to make your site accessible, there are several articles and books you can read like Building Accessible Websites by Joe Clark and Constructing Accessible Websites by Jim Thatcher and others.

Using Cascading Style Sheets (CSS) is one thing you can do to make an accessible website. In the beginning of the Internet, everything was text. Designers and developers didn’t have much control over layout so they began using tables.

CSS sheets give you much more control over formatting, consistency among browsers and other benefits. CSS sheets also allow you to make specific changes in your site’s HTML code to make it more accessible.

Chapter 12: “Help! My boss wants me to_______”

There will be times your boss will want you to do things that are not good from a usability standpoint.

Maybe they’ll want the site to ask users for more personal information than you need. Or maybe they want more ‘pizazz’ to the site – things like splash pages, animation and music.

Steve provides some great examples of letter he’s written to CEOs and other executives warning them about the dangers of doing these things and others.

Well that brings us to the conclusion of Don’t Make Me Think. It’s a very interesting read and easy too – if you’ve got about 4-6 spare hours (…whew, who does?), you can easily read it in one sitting. If not, put it down and easily pick up right where you left off.

To conclude, all of the tips or ‘rules’ outlined here and detailed more in the book are not iron clad. There are certain situations – or interfaces – where doing something contrary to what’s in the book or on here is okay. If your site for instance is designed to make people think, puzzle or challenge them, then by all means do what you got to do.

You can buy Don’t Make Me Think on Amazon for a great price. I certainly recommend it if you want to learn more about a core issue

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

to being successful online.

Let us know if you’ve picked up a copy and your thoughts…we’ll provide further updates into the year.

Until next time…

(…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

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

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.

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

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.

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

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

No matter if it’s a website, an electronic device or a really nice car – if you can’t easily use it, you’re going to get frustrated pretty quickly.

This is especially true of websites…they must be user-friendly for each type of visitor coming to your website. There’s no one-size fits all here!!

With that said the title of a book I recently read on the subject – Don’t Make Me Think – sums up the purpose and spirit of making

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

sure your website is easily usable. If you remember anything from this, remember those 4 important words and you will understand the essence of good web usability, which should answer four important questions in a matter of seconds without the user having to think.

First of all, I’d like to say this easy-to-read book by Steve Krug is a must have for anyone wanting to market a business online. Krug’s strong visuals and eloquent prose help you easily visualize how homepages, sales pages and any other page on your site should be structured.

Besides the good writing and illustrations, the book is an easy read as well. Like Krug says in his introduction, it can easily be read in the time it takes to fly from New York to L.A.

Well enough of the glim and glam, let’s get down to the book and what it’s about. Continue reading for a brief overview of each chapter and the concepts Krug explores. Of course to fully understand web usability, I strongly suggest you get a copy of Don’t Make Me Think the first chance you get.

While this book isn’t very long, a blog post summarizing all of the important points would be. With that in mind, this review will be broken into two parts. Below is the first part of our review for your enjoyment and enlightenment. Check back in a few days for a summary of more of Krug’s insights (…and illustrations too).

Don’t Make Me Think – A Common Sense Approach to Web Usability by Steve Krug

Krug’s nearly 200 page book comes jam packed with illustrations and tips for making your website more usable. It’s divided into 4 sections and contains 12 chapters in all. Continue reading for a quick overview of each chapter.

Section I – Guiding Principles

Chapter 1 – Don’t make me think!

Krug’s first law of usability and the one thing you must remember when designing a website. Website visitors should be able to “get it” – what it is and how to use it – without having to think about it. In other words, it needs to be self evident to the point that someone with absolutely no knowledge of what you do can understand it in a matter of seconds.

Making people think when they land on your website saps their mental energy to continue. If your website is hard to navigate, it won’t take very long for someone to get mentally exhausted and leave.

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

Many websites contain things that do make us think. Cute or clever names are typical culprits along with marketing-induced names, company-specific names and unfamiliar technical terms. Links to buttons that aren’t obviously clickable is another source of question.

Rather than providing another checklist to follow, Krug says you should simply understand the basic principle of eliminating question marks. If you do that, you will be well on your way to making a very user-friendly website.

Chapter 2: How we really use the web

If you stop and think about it for a minute, most of us don’t read a webpage word for word. We glance at a page, scan some text and click on the first link that we think has what we’re looking for. Many web designers though create websites under the assumption people will laboriously pore over each page and weigh their options before choosing where to go next…nothing could farther from the truth.

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

Many designers think their sites are works of great literature while the reality is much closer to a “billboard going by at 60 mph.”

Below are 3 facts regarding real world web use:

1.       We don’t read web pages, we scan them

2.       Since most of us are in a hurry, we don’t make optimal choices, we just ‘satisfice’

3.       We don’t figure things out, we muddle

Krug in fact said something very interesting about muddling and that is experts aren’t really experts, they’re simply “…muddling through at a higher level.” Remember that the next time someone poses as an expert.

Chapter 3: Billboard Design 101

Considering web users are generally surfing the web at lightning speeds, web designers and marketers need to view their homepage and other pages as billboards rather than great works of art.

Those of us who have worked on web pages take great pride in our work. While this is admirable, it’s important we view our web pages in the proper context in order for them to be successful.

In Chapter 3, Krug outlines 5 things you can do to make sure users see and understand as much about your site as possible. These include:

1.       Creating a clear visual hierarchy on every page

2.       Taking advantage of conventions (both naming and graphic)

3.       Breaking pages into clearly defined areas

4.       Making it obvious what constitutes a clickable link

5.       Minimizing noise

There’s nothing new about visual hierarchies in fact. Prominence, grouping and nesting are concepts used in newspapers for ages.

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

They’re basically designed to give the reader useful information on the contents of the page before the reader actually reads anything. Conventions are also something newspapers have used for ages. Headlines, sub-headlines, picture captions are some examples of both traditional and online conventions.

#3 is pretty obvious…clearly defined areas are a must. Again, this feeds into the goal of creating a webpage users can figure out in a matter of seconds without any thought.

Making sure links clearly state they’re clickable is also important for maintaining patience and goodwill among your users. And finally, keep noise to a minimum. Visual noise can kill an otherwise good page. Having too many things on a webpage can overwhelm users and cause more of them to just leave.

Chapter 4: Animal, vegetable or mineral? Why users like mindless choices.

Over the years, web designers and usability professionals have spent lots of time debating how many clicks you should expect a user to go through to get what they want without getting too frustrated…many designers in fact have rules specifying the maximum number of clicks to get to any page on a site.

Krug thinks numbers aren’t so important though – while it seems like a useful criteria to him, it’s generally safe to assume most users don’t mind a lot of clicks as long as they’re effortless.

Making choices as mindless as possible is in fact one main task to making a site easy to use. Be sure links and drop-down menus are clear in what they offer.

Chapter 5: Omit needless words – The art of not writing for the web.

Considering the vast majority of web users scan web pages and don’t read them word for word, having needless words in your copy will only frustrate matters from a usability perspective.

In his Elements of Style book, E.B. White details several rules, the 17^th of which is the following:

Omit needless words

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

Omitting needless words has several benefits, including:

• Reducing noise level on a page
• Making useful content more prominent
• Making pages shorter, which allows users to see more of the page without having to scroll

Therefore, if you’re going to omit needless words, all the happy talk (i.e. self-congratulatory promotional writing) must go. You can tell when you’re reading some. In the back of your head, you hear voices saying, “Blah, blah, blah, blah, blah…”

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

Another way to omit needless words is to eliminate instructions. No one is going to read them unless they’ve failed several times at just ‘muddling’ through. Eliminate instructions by making everything as self-explanatory as possible.

From Don’t Make Me Think: A Common Sense Approach to Web Usability. © 2006 Steve Krug. Used by permission

This brings us to the end of part I of Don’t Make Me Think, which outlined some guiding principles you need to understand in order to build a useful website. Check back with us in a few days to learn how you should design your navigation, homepage and even how you can deal with the inherent controversies that stem from building a website for your company in part II of our review and summary.

And while this webinar is a little old now (originally airing in November), it contains some great commentary on how web marketers can approach and find the right balance between images and copy on their webpages.

Perhaps the biggest take-away I got from the webinar was this – “People don’t buy from websites, they buy from people”

This is perhaps one of the most insightful comments on web marketing I’ve ever heard and will do my best to remember it going forward. But for now, let me give you a quick review of the presentation and invite you to take an hour to watch it yourself – you certainly won’t come away disappointed.

Starting out, Marketing Experiments director Dr. Flint McGlaughlin explained how a lot of things common to websites pose impediments to conversions. Perhaps you know what he’s talking about here – many websites contain or don’t contain elements that prevent you from getting the maximum amount of conversions.

That’s where the Principle of Congruence comes in, which requires every element of a page state or support your page’s value proposition.

Say your value proposition is custom-made products shipped fast – do all of the elements of your page work to support this value proposition?

Images or Copy – Which do I focus on more?

When approaching this question, you need to ask yourself what communicates value more effectively – images or copy – according to Flint and the researchers at MECLABS.

The effectiveness of any webpage element to communicate the value proposition can be measured by the following two capabilities:

1.       Ability to communicate value with force

2.       Ability to communicate value with precision

When considering images and copy, keep in mind that images have a greater potential to communicate value with force and copy has greater potential to communicate value with precision.

Images

The force of an image is directly related to three things:

1.       Relevance – an image’s force increases as the connection between the image and perceived value becomes clearer. Images are great for communicating brand.

2.       Reality – an image’s force increases with its authenticity. Images can reduce the distance between the actual value and the reader’s perception of that value (see example in slide #23).

3.       Relative Weight – an image’s force increases as its relative graphical proportion increases…or in layman’s terms, images that look different than other elements on a page get your attention. This naturally draws the reader’s eye-path. Therefore, if the image provides proper relevance and reality, it will bring more force to bear on the inherit value.

Copy

In short, copy has two distinct advantages over images.

First of all, copy has the ability to include specific, quantifiable detail to your webpage. Secondly, copy gives your site personality and has the ability to include a tone that matches your visitors’ motivations.

Of course, there’s a right way and wrong way to use copy. You don’t want to use phrases that make you seem arrogant – examples include “Your Hunt is Over” and so on.

Also, be careful about your call-to-action copy. In their example (slide #30), a form has an intimidating tone that seems to imply that you will receive incessant phone calls from sales people once you complete it.

What about SEO?

Last but not least, Dr. Flint and the team at MECLABS explored the impacts all of this has on search engine optimization. How do you balance landing page optimization (LPO) with SEO?

In a sense, SEO is a secondary concern. You first need to work on maximizing conversions and then worry about boosting search rankings afterwards. There are many examples of high-ranking pages that fail to convert because the site owner focused solely on SEO, which according to Dr. Flint is just a channel to get people to your page. In other words, it’s a means to an end, not the end itself.

They outlined some questions to consider when identifying the proper balance between SEO and LPO:

1.       Where does your traffic come from? If it’s organic, how well does it convert visitors into customers?

2.       What are your needs in terms of LPO and what’s its potential impact? Are the needs radical or minor? How much will these changes affect your bottom line?

3.       What contributes the most to your SEO ranking – content or authority?

4.       Can you measure the impact of page changes?

After discussing some ways to identify the proper SEO/LPO balance, Dr. Flint and the team evaluated a couple of sites given to them by one of the webinar’s original participants and offered tips on how to strike the right balance between images and copy to maximize conversions.

In the end, the webinar is well worth the one-hour it takes to watch it and take some notes. I’m sure I’m leaving something out since it was so extensive and informative. Watch the video or tell us about your experiences in using images and copy and how well your balance worked to increase conversions.

Click image to see video presentation

Or listen to an audio version here.

Until next time…

In short, a site with good usability is able to answer four important questions in a matter of seconds without the user having to think. Three seconds is a good rule of thumb. Those questions are:

• Where am I?
• What can I do here?
• What do they have here?
• Why should I be here and not somewhere else?

Websites who do not answer these questions immediately do not experience their potential. If someone has to think very hard about how to navigate or even have to expend mental energy trying to figure out what you’re about, they’re most likely going to leave and never return.

Good web usability also makes it easy for a person to find out where they are in a site. Say for instance a visitor is on a product page deep within your site but wants to start over at the beginning. Good usability allows them to do that in one click without having to put much thought into it.

Speaking of the homepage – it’s very different than the rest of the pages on your site – different in that it must address each type of prospective customer that visits your site in a short space.

For homepages, the following guidelines are a good place to start. Remember, guidelines are more like suggestions so these are not meant to be all inclusive. Some may not work for the type of business you’re in or you may find yourself needing to add something else.

Regardless of that, below are some of main elements your site’s homepage needs to have in order to answer the four questions above for any type of user.

Site Identity and Mission – Include a unique tagline and value proposition in the top left area of your page. A person who reads this should be able to figure out what you do just by reading these few words.

Site Hierarchy – Make your site’s hierarchy is clearly visible and navigable. Top or side navigation helps users find out what you offer and channels them to the place they’re looking for.

Search – Some people just like to search rather than click links to get from place to place on a website. Like a search engine, a site search box allows you to type in a keyword phrase and find all documents within the site that include those words.

Teasers, promos, etc. – Encourage users to interact with your site and spread the news to their friends. Teasers, promos and discounts draw readers’ interest and provide them with a tangible benefit to choosing you over someone else.

Timely Content – Farther down the homepage, you should also include snippets of relevant and timely content. Doing so builds your credibility as a trusted source as well as gives users not too familiar with what you offer the opportunity to learn more.

Include Shortcuts – Shortcuts can be used to provide users easy access to popular pages. Perhaps someone already knows what they’re looking for. Give them the opportunity to get it in just one easy click.

Of course, there are many other usability conventions you have to be aware of for all of your pages. Clear, clickable links is one example that comes to mind. Links must be clearly identifiable or else a visitor will search around for a link and then leave your site.

Over the next few weeks, we’ll be adding more information about usability and how you can design a website that’s easy to navigate, figure out and requires little to no thinking. We’ll also provide some names and resources for you to learn more.

Until next time!