Chapter 3: Designing to Sell

In This Chapter

Understanding the purpose of website design

Preventing distraction from the sales process

Using branding basics

Keeping it legal

Testing for usability

Do not be fooled by people you hear downplaying the importance of having a website for your business. Not only is it imperative to have a website, but the quality of its design is also more crucial than ever before. Even Google evaluates your website for quality design and even factors your branding into its algorithm. If Google thinks your design is important, you should too!

This chapter is devoted to using several design techniques to guide your website visitors through your online sales process without distracting them. You discover how to think about the effect of elements that appear on your site: branding, colors, fonts, and graphics. After making these key decisions, you’re ready to consider how to pull these elements together on your site layout — and in particular, ways that make the best use of important areas on a web page. You also find tips along the way to help you design a site that’s easy to use. The last section in this chapter explains easy ways to test your site’s usability.

Branding Your Look

If you read any book on marketing or branding, you will see common examples of the ultimate goal of branding, such as Xerox “owns” the word copiers. McDonald’s “owns” hamburgers, and Levi Strauss “owns” the word jeans. What word or phrase does your product or service own or aspire to own?

Branding is a simple concept to understand yet sometimes a painstaking process to implement. Big companies pay marketing firms thousands of dollars to have expert teams produce branding strategies over weeks and months of brainstorming. So, if you’ve been struggling with your branding for a while, you’re not alone.

If you’re new to this term, you will find many definitions for the word branding. Branding is simply getting prospects and repeat customers to see and remember your product as the only solution to their specific problem or need. Other alternative items might be similar, but nothing on the market is exactly like what you offer. Of course, branding is accomplished by all the things you hear about in formal definitions like creating a logo, establishing a corporate identity, packaging your product, advertising, bonding with your customers, and establishing loyalty.

Every word you write and every image you place on your website can help you build visitors’ perception of you as a leader in your field. People buy from leaders and innovators, not from followers.

The following sections explain branding strategies that can help your visitors form a positive perception of you when visiting your website.

Creating taglines and slogans

Taglines and slogans are short phrases that convey important ideas to customers. During the branding process, your tagline should be created even before your logo design begins, because the meaning of your tagline will have an influence on that logo design. Create a branding tagline for your own website that will mirror your branding image but won’t change over time. For example, Carpet Exchange (www.carpetexchange.com) has a great tagline — Your floor store — displayed online under its logo, as shown in Figure 3-1. It’s short and meaningful, and it even rhymes!

Use www.rhymezone.com to come up with words that rhyme if you would like your tagline to rhyme, or use www.morewords.com to find words of a certain length, lettering, or number of syllables.

A branding slogan is a little different in that it changes depending on the type of promotion you’re running. JELL-O is a good example. One of its slogans is Every Diet Needs a Little Wiggle Room. But, when winter comes around, it could change this tagline in promotions to Every Vacation Needs a Little Wiggle Room.

Developing a branded logo

Perhaps one of the most overlooked elements of doing business in general — let alone online — is the importance of having a meaningful logo. Many Internet marketing gurus will tell you not to waste your time or money producing a logo. But, if you are promoting a company on the web, a good logo is a vital ingredient: It helps you communicate a lot about your business to a website visitor in a fraction of a second. When people see your logo (or lack of one), they can immediately rate various elements of your business in their minds. This act of evaluation might even occur in their subconscious. Some of these include your

• Level of professionalism

• Ability to create or innovate

• Enthusiasm for your product

• Level of traditionalism

• Attention to detail

Visitors will associate words with your business based on the appearance of your logo, such as funny, silly, exciting, desperate, growing, content, or curious. So, be careful what you ask your designer to create for you.

When it comes to your website, it’s more important than ever to at least have a logo to identify your business, if not a logo for each of your products too! The following list invites you to take a look at some good logos that are memorable but also define the business and even the personality of the business:

• www.ContractorsAccess.com: One look at this logo and you know exactly what this company produces: high-rise equipment that you see window washers standing on, among other things. So, a logo alone can sometimes bring it all together to tell a visitor what your business does.

• www.monkeybizness.com: On the other end of the spectrum, you find Monkey Bizness, with the tagline where kids monkey around. Everything about this logo is playful and not too serious, from the font type used to the coloring and the slight animation of the monkey jumping up and down.

These two logos paints a memorable picture in your mind. And that’s what branding is all about: creating something that remains in people’s minds for days, weeks, or months to come.

Professional designers are your best resource for creating a logo that matches how you want your business to be perceived. Keep in mind that logos take time to conceptualize and create. So, be prepared that by the time you approve a logo, you might see several iterations, costing several hundreds of dollars. The best scenario from a time standpoint is when your website designer is also the creator of your logo. That way, you don’t have to worry about the logo designer getting the right formats to your web designer and waiting for that communication to take place. But, many web designers do not work with logos and require a logo to be submitted before beginning work on your website. See Chapter 7 of this minibook for resources.

Creating a consistent look with CSS

If you’re working with a web designer, you need to know whether your designer is formatting your fonts, as well as the rest of your site, with Cascading Style Sheets (CSS). This is important because a website can be designed on one computer yet appear totally different on the next. This is a browser and operating system issue as well as a display issue. The most dramatic differences can be seen if you look at a website on a PC versus a Mac, use Internet Explorer version 6 versus 9, use Firefox versus Chrome, or view on different monitors. Consistency, though, must be a key element when branding your site, and CSS is the common thread that allows that consistency to be maintained.

Among other things, using CSS helps ensure that

• Larger fonts don’t appear too large

• Smaller letters don’t come across as unreadable

• Text and other elements have a consistent look on every web page

• Rows and columns appear the same width and height

• Spacing between images and text is the same

• Border colors and thickness are identical

CSS styles can get pretty involved, and the details of crafting them are beyond the scope of this book. If you’re interested in finding out more, see CSS Web Design For Dummies, by Richard Mansfield. If you’re designing your own site, Web Sites Do-It-Yourself For Dummies, by Janine Warner, can walk you through the nuts and bolts of creating your site, including styling web page elements with CSS. And Building Web Sites All-in-One For Dummies by Doug Sahlin, can help you use CSS in web design. (All books published by John Wiley & Sons, Inc.)

If you’re not interested in designing your website, that’s fine. Just share this information with your designer so that, together, you can plan for the appropriate CSS components to help every page of your site appear visually consistent, no matter what type of computer, monitor, or browser people use to view it.

Many designers do not have the programming expertise to migrate their own web designs into proper CSS styles. Expect the possibility that you may need to pay an additional helper who’s more specialized in programming and CSS coding to finish the job when your design is complete. As the web gets more complex, the use of multiple specialists on the same project is becoming more common.

Styling Text on the Web

Website visitors rarely read text word for word on a website; instead, they scan information and wait for something to catch their interest. One important element of a website that captures people’s interest and attention is font size and font type.

• Font size: Some designers like to push the limits by using huge fonts or really tiny text.

The Internet is a great place to test different methods, but don’t get too carried away or your sales can suffer quickly.

• Font type: Use one of these fonts listed in order by popularity: Arial, Comic Sans, Verdana, Trebuchet, or Georgia. These are by far the most widely used and readable fonts on computer screens and browser types. Specifically, here are the strengths of each font

• Arial is great for headlines and subheadings.

• Comic Sans gives a site an informal look and is a good font type to use if your business has a more casual audience.

• Georgia is a good all-around font for screens with easy-to-read text for primary content and italics.

• Trebuchet is another good all-around font but only in standard 10, 11, or 12 point — or larger sizes like 18, 20, and 24.

• Verdana is the most readable font overall among web-based text fonts, but Trebuchet is becoming increasingly popular.

Be careful not to use more than two or three font types or colors for your website text. Also, don’t capitalize everything in a sentence. In all capitals, it’s like you’re yelling at your visitors.

Using the Right Colors for Your Website

Website visitors react to color more than you might realize. That reaction can mean the difference between a visitor buying a product online with confidence versus a person being blinded by ghastly color combinations and hitting the Back button in less than three seconds. Talk to your designer about the potential uses of color. If you don’t have a web designer chosen yet, make color options a point of discussion before hiring that helper. We all make decisions daily based on the colors we see, so color should be an important component of your website’s design.

The following sections invite you to consider how color sets the tone for your website as well as how technical aspects affect color on the web.

Considering what colors convey

Here is a summary of how most people interpret and react to colors:

• Blue (the most popular) suggests honesty, trustworthiness, calming, and loyalty.

• Black displays authority, sophistication, power, elegance, and technical prowess.

• White symbolizes purity, peace, and youth: neutral and clean.

• Red excites with passion, energy, and excitement.

• Pink suggests innocence, softness, and sweetness.

• Green invites feelings of nature, growth, and regeneration.

• Dark green however, implies wealth and conservatism.

• Yellow is optimistic and cheery, yet can come across as too dominating if overused.

• Purple is associated with wealth, sophistication, and mystical, spiritual tones.

• Brown is genuine, although it often emotes sadness.

• Orange conveys happiness, freedom, creativity, playfulness, and confidence.

• Gold as you would expect, suggests expensive taste as well as prestige.

• Silver also emotes prestige but is cold and more scientific.

• Gray has a more corporate, somber, and practical appeal.

A good example of a website that uses colors in an interesting way is www.SecureFinancialGroup.com. The website features a trustworthy black-and-gold outline mixture, with gold and silver coins featured, of course. But, a subtle palette of grays is used for the navigation bar, which gives a calming effect to the visitor and yet a sort of scientific feeling that’s appealing to people who want to invest. Clearly, this is a website trying to differentiate itself in the precious metals investing industry from the gold buyers that you see advertising on every city street corner.

If you have an existing website, study the colors. Do the colors work together to convey a meaning that is consistent with your business? If you do not yet have a website or are working on a redesign, this is a great opportunity for you to make a list of two or three colors to include in your design, plus a few that you want to stay away from.

Using web-safe colors

Even modern screens display colors differently. You may intend to have red text, but it could end up looking purple on some monitors. So you need to test your colors on multiple screen types to know what your visitors really see.

Years ago, when CRT monitors were only capable of displaying 256 colors, 216 colors were considered “safe” in that they displayed appropriately on monitors of the time. These web-safe colors became the standard recommended for use on the Internet. Today, all LCD monitors can view the whole spectrum of 16 million colors. But, when it comes to text, you should still use the same web-safe colors, because people are used to seeing those colors. Blue underline links and red headlines are two examples of web-safe colors because those are certain colors that people have come to expect.

Here is a great resource to see the most widely used web-safe colors in the color spectrum, along with their Pantone Matching System (PMS) color associations:

www.visibone.com/colorlab

PMS is a way for printers, paint manufacturers, graphic designers, and others to communicate exact colors to each other. Because all colors can be matched by using a mixture of varying levels of red, green, and blue, their properties can be documented and shared using what are called hue values.

Combining colors for your website

If your website uses a blue header for the top of your pages with an orange left column, what third color could you use that would match the other two? If you had to think about the answer, chances are you’ll appreciate the free Color Calculator tool, offered by Sessions Online by School of Design at

www.sessions.edu/for-students/career-center/tools-quizzes/color-calculator

The tool helps you choose three colors based on the color wheel.

Adding High-Impact Photos

What do people look like when they’re using your product or service? What lifestyle do they lead now that they finally took your advice? Good design means using photos well to describe more than just your company image, for example, the outcome of using your product or service. Here are some real-world examples:

• Product shots

• If you have a dude ranch vacation destination, show a group on horseback, all smiling because they’re having a wonderful time in the beautiful country surroundings. Figure 3-2 shows a website promoting the Bitterroot Ranch in Wyoming (www.bitterrootranch.com). The purpose of the dude ranch is evident, and if you were to take a trip to the same place, that’s the look you would expect to receive.

• If you sell jewelry, have a photo of a woman looking at her new diamond ring as her husband-to-be peers over her shoulder. Showing interaction of a buyer with a product, rather than showing just a picture of the item itself, sells the product better.

• Concept shots

• If you sell perfume, show a couple getting close.

• If you’re a personal success coach, show a photo of parents spending more time with their children.

Create a vision in your mind of the positive outcome people will enjoy by using your product or service. That’s the image to create using photos throughout your website.

To get these photos, you can either create your own or purchase them:

• Create your own photos: To create your own photos, you can hire a photographer in your area or try shooting and editing your own photos. Your best bet is to take high-resolution photos, crop and correct them if needed, and then size them for the web. Details about digital photography are beyond the scope of this book, but Digital Photography For Dummies by Julie Adair King (published by John Wiley & Sons, Inc.) explains how to compose, edit, and size photos.

Whether you create your own photos or buy them, use photo-editing software to make sure that they’re optimized to display quickly when someone visits your website. Images that take too long to load will cause you to lose customers. Adobe Photoshop Elements is a popular choice for editing photos. You might also have editing software that came with your digital camera. Gimp software is a free option that you can download from www.Gimp.org.

When you get to the editing stage, you want to change the resolution setting to 72 ppi (pixels per inch) and save or export the file in .jpg format.

• Buy photos: An alternative to hiring a photographer is to purchase photos from an online gallery or a stock photo house. iStockphoto (http://istockphoto.com), Bigstock (www.bigstockphoto.com), and Clipart.com (www.clipart.com) are a few resources to get you started.

Downloading photographs or images from a website to use on yours is a potential copyright infringement and can be punishable by fines. If you must use existing photos and images, use a reputable company for your purchases and keep a printed copy showing proof of purchase for every image you use from its gallery.

Laying Out Content on Your Web Pages

Good web design is more than adding fancy colors and a visually exploding, movie trailer–like splash page; the layout needs to complement your branding while also inspiring visitors to take action. The “action” is that your visitor either clicks one of the links provided in the layout or progresses through the content on the page. Google is a good example. It uses a minimalist design, but its layout is very strategically created to provide only the information you want in a quick and easy way. When people think of visiting Google, they know to expect simple results — fast.

One of the easiest ways to get a simple, clean design is to use a template. If you use WordPress for your website, you can find predesigned WordPress themes such as WooThemes (www.woothemes.com), Template Monster (www.templatemonster.com), and Website Templates (www.website templates.com). You’ll see hundreds of website designs that you can purchase for as little as $20, or you can simply get design ideas and have your designer create a more unique look for you that uses ideas from the templates. Chapter 4 of this minibook has more details on working with templates for WordPress.

In the sections that follow, you discover how to evaluate visitors’ experiences on your current site layout (or the layout of your competitors). You also find tips for making the most of key areas on a page. Every page of any website should feature multiple opportunities for a visitor to take action of some kind. Those opportunities might include

• Buying a product for sale on your website

• Calling you for more information

• Signing up to receive a free report

• Connecting with you on Facebook, LinkedIn, or other social media

• Visiting another page of your website

In addition to the images, text, colors, and words displayed on your site, the placement of these key components is the most significant decision you make on your entire website.

Evaluating layouts with a heat map application

Designing a website is very similar to designing a store. In fact, your website really is a store — a virtual store on the Internet. Grocery store chains have spent millions of dollars in market research watching and documenting how shoppers enter the store, turn right or left, and then graze their aisles. You need to know how a visitor enters your website and what his eyes look at. For example, if you decide to have a sale this month, you might want to add a special sale image, say, at the top of your right column. Wouldn’t you want to know if the majority of your visitors are seeing that special notice?

Fortunately, you don’t have to pay thousands or even hundreds of dollars to know what your visitors look at first, when they enter your website, and where their eyes go next. You can use the free heat map tool at Feng-GUI online (www.feng-gui.com) to upload an image of your web page. Feng-GUI then displays how most people might be looking at that particular page when they see it for the first time. In Figure 3-3, notice how Feng-GUI displays the upper-right corner and the right column as viewed most often by the different weighting. Then the attention shifts to the middle of the page.

The following steps explain how to create a similar map of your own site:

1. Open your browser and visit the homepage of your website (or any subpage).

If you don’t have a website yet, you could use a heat map analysis of a competitor’s website to see what its visitors are interested in.

2. Take a screen shot of your homepage (press the Print Screen button on your keyboard).

3. Open Microsoft Paint or your favorite graphics editor and paste your screen shot into a new document.

Paint is available on most Windows machines; choose Start⇒All Programs⇒Accessories⇒Paint. When a new document opens, simply right-click and then choose Paste from the contextual menu that appears. Your homepage should now appear in Paint.

4. Save your screen shot by choosing File⇒Save As. Give your image a name and then choose .jpg from the Save as Type drop-down list.

5. Point your browser to www.feng-gui.com and scroll to the bottom of the homepage, where the free demo heat map utility is located. Click the Browse button to find and upload the JPEG file that you just created.

6. Click the Analyze button.

You see the most important areas of the page that your visitors’ eyes gravitate toward.

Ask yourself the following questions after running a heat map simulation, whether you use your competitor’s website or your own as the example:

• Are these areas of the page where the attention of your visitors should go first? For example, is your logo so dominating in the upper-left corner that your visitors see it first and immediately start scanning down the left navigation of your page, bypassing the fact that you have a special for the month appearing in your upper-right corner?

• What feature should you have in place where the majority of your visitors look first when they land on that page? For example, if you want to create an educational content page (see Chapter 5 of this minibook), the first thing you would want visitors to see is a captivating headline centered at the top of the page. But, on a professional speaker’s website, you would want a meeting planner to be drawn to your speaking topics and one-sheet (a printable promotional brochure promoting your speaking availability) or a strong and convincing testimonial from a well-known company CEO.

• Is there anything visual about this page that is a huge turnoff and a reason why so many people might leave the site prematurely? See Table 3-1 for common possible reasons why people leave websites.

The visual component of your website is the first thing visitors see and is the most common reason why visitors leave in less than five seconds.

You can use Google Analytics to monitor the path that your visitors take when they arrive on your website.

Using the upper-right quadrant (URQ)

The upper-right quadrant (URQ) of a page on your website is one of the most critical areas because it’s the first place people see when they arrive. In Figure 3-4, practically anything you would want to do on this website is featured in the URQ, including requesting a quote, contacting staff, viewing samples, calling for a quote, and making a request online.

Another use of the URQ would be to eliminate a buying objection before the question even arises. In the site shown in Figure 3-5, the URQ is used for the sole purpose of showing visitors that the company has been in this online business for quite a while — since 1995!

There are no rules as to exactly what should be placed in the URQ, but this is an important area to test and modify often to see whether leads and sales increase or decrease. Yes, even a simple change to the upper-right quadrant of your website can impact your results. Here are some additional things to test in the URQ of your website:

• Your phone number (most popular addition to the URQ)

• A special promotion that you’ve never offered

• Important company news, like a finalized merger or new product release

• A testimonial or celebrity endorsement

• A photo with a recognized authority figure in your industry

• An award image

• Better Business Bureau badge

• Image of your new book cover

• Search box so that visitors can search for a topic or specific product

Inspiring action with the horizontal navigation bar

Have you ever visited a website to look up movie start times, register for an event, or get directions to a store? If so, you know how annoying it can be when you can’t find the information you need that should be featured in an obvious place.

Proper use of the top horizontal navigation bar (the links or buttons you see going across the top of a web page) is critical for increasing leads and sales for your business. The top navigation area serves one purpose — to get a visitor to go to another page. Part of the trick is knowing what obvious utilities or content should be featured. The other is how to graphically produce the links to lead your visitors to those important sections. Determining what people expect can be discovered by

• Reviewing competing websites: Visit some of the websites you are in competition with. Run a heat map test on them to see where their visitors are looking. See the section “Evaluating layouts with a heat map application,” earlier in this chapter, for details.

• Participating in forums: Search for a forum (otherwise known as a discussion board) focused on discussions with people in your industry. Pay attention to the forum categories and topics that participants are talking about. These could become specific titles for your main navigation.

• Knowing your target audience: Find people in your own network who fit your target audience and ask them what they would expect to see when arriving at your website.

Many visitors know exactly what they’re looking for, and you want to provide that information immediately. Your challenge is to decide what actions your website visitors will want to take and feature them prominently in the top navigation area.

Here are a few additional rules you’ll find useful when creating a horizontal navigation bar for a website:

• Location: Websites usually have a banner at the top of the page featuring a logo on the left and then some other graphics in the middle and right. Place horizontal navigation directly under the banner. That way, a visitor can first focus on the upper-right quadrant of the page and then scan across the graphics to give him confidence that he’s at a website worth investigating further. Then allow him to naturally move down to where the horizontal navigation bar catches his eye.

• Type: Navigation bars include either buttons or text links. Sometimes when you roll your mouse over a navigation link, a menu of options unfolds. These are called menu trees, which contain either text links or buttons. Which is better, text links or buttons? That is more of a personal preference on your part. What is important is that your text or buttons are easy to view and identify. Do that much and you’ll get the click. And, again, that’s the only goal of your navigation bar — to get the click.

• Number: People like odd numbers. If we see anything on the web that is in even numbers, we’re wondering where the next item is. So, keep three, five, or seven items on your horizontal navigation bar. In fact, limit the number to seven to avoid a cluttered navigation bar.

• Order: When you have a strong URQ that draws the eye of your visitor to the upper-right part of your page first, the next natural place the visitor will look is from right to left across your top navigation buttons. What feature would you like your visitors to see first on that nav bar? Here are some options for your navigation bar:

• Home: Give your visitors an easy way of navigating back to your homepage.

• Contact info: If you want your visitors to contact you, include a Contact button.

• About Me: Most visitors are going to want to know more about you before buying something from you.

• Blog: Blogs have become expected. Turn to Chapter 5 in this minibook to find out how to integrate your blog into your website. Book VI is also devoted to blogging.

• What else goes into your navigation bar depends on your business. Here is an example of a typical top navigation bar for some different types of businesses:

Car sales: Home | About | Buy a Car | Sell a Car | Service | Blog | Contact

Speakers: Home | About | Speaking | Meeting Planners | Reviews | Blog | Contact

Membership: Home | About | Join | Calendar | Testimonials | Blog | Contact

• Words: The top navigation bar should be designed to get people to actually do something. People like to do things online. They like to search, view, register, find, review, subscribe, add, get, contact, evaluate, demo, download, play, go to, and discover things, for example. Use the words in your top nav bar to get people engaged with your website — to get them to do something. Consider using the following navigation bar:

Search Products | View Events Schedule | Subscribe Now

instead of this one:

Products | Events | Newsletter

Choosing scrolling over clicking

Some people believe that no one wants to scroll down a web page — that people would rather click for more information. But, if you think about it, the only reason we click through links instead of scrolling is to get to a page where the correct information is featured. When we get to the right page, we expect to find enough information to satisfy our curiosity, and we’re happy to scroll when we are on a web page that provides us with the information we are looking for.

Valuable content (as described in Chapter 5 of this minibook) is what inspires people to want to scroll to read more and to consider all the details they need to make an informed decision. Good design is what allows the content to keep you engaged as a reader to scroll down the page, whereas forcing you to click to more pages would just be cumbersome and annoying.

A good example of this is on CoachClemens.com (http://coachclemens.com/2012/01/08/overuse-leads-to-pitching-injury), where the author introduces an important subject and just at the time when you have to scroll, you’re riveted and willing to scroll (see Figure 3-6). See how you have to scroll to read the entire article? But the subject is captivating enough that it’s worth it to us, the readers, to do so.

Attracting attention with arrows, buttons, and more

Specific elements on a web page also encourage visitors to take action. Here are some next-action design elements to try:

• Red arrows: One of the most commonly used graphics online is a big red arrow pointing to something important. Why are they so popular? Because red arrows instruct people what to do, and people want to be directed. Think of using arrows as a courtesy to your visitors by guiding them to where they should be interested in going.

• Guarantee sections: Guarantees might be written in text, but it’s the graphic piece that brings attention to it. After people are made aware that a guarantee is offered, they’re often more willing to take the next step.

• Outlined text boxes: A page full of content needs to be divided into sections, or it will just look long-winded without purpose. But an outlined text box draws attention.

• Inline text links: Throughout the content of a page, consider featuring links to other pages where more topic-specific content can be found. These inline links should always be underlined and blue in appearance. Designers will try to be creative and convince you to use other colors. Programmers will use CSS styles to remove the underline from all text links because they believe the page looks less cluttered without a bunch of links all over it. But let’s face the facts. Blue, underlined text links have been around since the word hyperlink was invented. When we see it, we know it’s a link. Here are other colors as potential links:

• Red is probably not a good color for links because red means “stop” in our society. We have red stop signs, red stop lights, and even red Corvettes make us stop and look.

• Green is not a horrible choice for a link. After all, we look at green as meaning “go” whenever we’re sitting at a stop light. The problem with green is that it doesn’t stand out very well on a white background unless you use a larger font or bold the text. And, bolding every text link really drives designers crazy!

• Yellow, orange, and even white links could be used when reverse text is concerned. Reverse text is when you have a very dark design forcing you to use very light colors for the text. In that case, try a lighter shade of blue for your links so that they stand out.

Yes, the color blue will be your best fit for a text link color. That’s not just because of tradition or because it’s what the pros do, but because blue works and we’re conditioned to look for blue when we want more information on a topic. People look for blue, underlined links. And you don’t want to let them down.

Completing the Website Preflight Checklist

Just as you would want to crunch numbers and run what-if scenarios before launching a new company, you want to put your plan to paper for your website design as well. Collect information on these 25 top items when submitting your project scope to a website designer for a price quote:

• Company information, including name, address, phone, and e-mail

• How long you have been in business

• The primary goal of your business (what you sell)

• A description of your business in 25 words or less

• A list of three groups of people who might benefit from your product or service

• Your branding slogan

• The main domain name for your website (search www.uownitdomains.com for available domain names and then register them)

• A list of at least three websites that you like and what you like about them

• A list of at least three websites that you dislike and what you dislike about them

• A list of at least three competing websites

• A description of your potential customers’ demographic profile, which you can find by searching www.quantcast.com for a high-traffic website related to your target industry

• Whether your potential customers are Internet savvy or technically challenged. (You find this out by attending seminars or networking events where your target audience is present and talking with them.)

• What you would expect if you were one of your potential customers

• The goals of your website (sell product online, generate leads, and so on)

• Whether visitors ever need to print pages from your site

• What the top navigation buttons will be

• What the left navigation buttons will be

• What special features will be displayed in the right navigation area

• What should be included in the footer of every page of the site

• Whether you will supply photos, or whether the designer should include photos in the quote

• Whether you will supply content, or whether the designer should include copywriting in the quote

• Whether you will supply a logo, or whether the designer should quote a price for logo creation

• Whether the website will require an online shopping cart

• Whether you already have an Internet-capable merchant account

• Whether you will offer an online newsletter sign-up form on the website

If you need help with any of these points, check out the related sections earlier in this chapter.

Designing for Optimum Usability

Assuring that your website is usable by your audience is partly the responsibility of the designer and partly the responsibility of the programmer. If something as simple as a link to another page isn’t functional, for example, a visitor will quickly become frustrated and leave the site searching for a better solution. The following sections introduce you to usability standards, many of which might be familiar to you if you’ve read earlier sections of this chapter. You also discover how to test your site to ensure that it meets usability standards.

Incorporating usability standards

Follow this ten-step checklist to evaluate the usability of your new website before its launch:

• Have all links on the site been tested to be functional?

• Does a CSS file contain all font sizes, colors, and table border details?

• Is alt text (alternative text) used for all images that have a possible description?

• Are links descriptive of what the user will see on the landing page?

• Does the site operate similarly on multiple browsers, versions, monitors, and operating systems?

• Can the navigation be easily followed and understood?

• Are text links underlined and blue?

• Does individualized metadata exist on each page of the website?

• Do you have a link to the homepage on every subpage?

• Are the URLs descriptive of what will be found on each page?

After you’re sure that your website has passed the usability basics test, now it’s time for the ultimate test — a live test for usability.

Testing live for usability

Usability testing is one of the most neglected aspects of creating and launching a website. Maybe you have had your friends or family take a look at the new design but have never brought in a focus group (folks who’ve never seen your website). After all, who has time for that?

If your website is a hobby for you, usability testing might be put on the back burner. However, if you’re in business and you plan for your website to be a major contributor to your annual revenue, usability testing is essential.

You should always test your own website for usability by viewing it with multiple browsers, multiple versions of those browsers if possible, multiple screen sizes, and multiple computer platforms (PC versus Mac). But the ultimate test to see how truly usable your website has become is to invite people to your location and have a focus group with a live review session. That way, you can be present in the room to see visitors’ first reactions. Here are some things to consider when testing for usability with a live group:

• Test each person on the same computer.

• Give each reviewer a checklist of things to try to find on your website.

• Write their comments as each navigates the site.

• Don’t say a word.

Offer no assistance. That’s what a usability study is!

• Share the results with the group at the end and allow open discussion.

• Be grateful for all feedback that you receive. Remember, if one person has a problem with your website’s usability, another thousand future visitors will experience the same issue. So, don’t be offended or angry; just fix the issue.

“Hot seats” are becoming more popular at seminars and workshops. In essence, a member of the audience volunteers to have her website brought up on-screen for all in the room to critique. If you ever have the opportunity to be in the hot seat, jump at the chance! Having several first-time visitors provide unbiased, immediate feedback about your website is worth the entire price of your registration.

The best news is that the work you do on the design, layout, branding, and usability of your website will serve as a tremendous training ground for when you begin to promote your core business through multiple websites.