Hot Topics:

Project: Online Store Design

Design pros share the dos and don'ts of creating a welcoming Web site.

We all know design is an important part of a Web site. It demonstrates your professionalism and your dedication to your business—and, for visitors, it can mean the difference between a comprehensive tour of your Web site or a quick exit.

Whether your site is a place where your customers will shop for your goods, or read about you, your business, your products or your area of expertise, first impressions count—big time.

To see what makes for a good and welcoming site, we turned to two experts: Auctiva Lead Designer Chrystal Jaeger and Tim Ash, CEO of SiteTuners, a company devoted to optimizing businesses’ Web sites. Jaeger spends her days creating attractive designs to entice visitors, while Ash spends his evaluating the effectiveness of various sites, so we know they have great information to share.

A common mistake

Before we get into the basic elements of a solid Web page, we thought we’d share the most common mistake people make when putting together a Web site, according to our experts: trying to cram too much onto one page.

“Often, there’s too much information competing for the viewer’s attention,” Jaeger says.”People need to really focus on the hierarchy and flow of information, then give visitors a big call-to-action button or smaller buttons to get the answers to other information they may need.”

Focus on the top three to five things you want visitors to know or do when they visit your page

Examples of calls to action include “add to cart,” “buy now,” “sign up today,” and other statements that encourage visitors to perform a task, or take action. Buttons like these allow people to scan your site, and get information quickly and in the appropriate order, Jaeger says.

“Focus on the top three to five things you want visitors to know or do when they visit your page,” Jaeger advises.

Do you want them to read your blog, buy your items or subscribe to your newsletter? Add buttons or links they can easily identify and will tell them instantly what they should do.

“If the visitor can’t process the information you’re trying to give them in a glance—three seconds max—they will likely leave your site,” Jaeger continues.

And if they don’t leave your site, they probably won’t do whatever it is you want them to do, adds SiteTuners’ Ash. That’s because when you focus on too many things, you “destroy” a visitors’ ability to find information, “and paralyze them from making a decision,” he writes. “If you emphasize everything, then nothing will be important.”

So, take a few minutes to ask yourself what you want to do with your site. Do you want shoppers to buy your items? If so, don’t bog the page down with text. Show your products right away. Don’t make visitors scroll down to find out if the page they are visiting is an online store. If the site is a blog, have your newest entries at the top of the page, and only display the first couple of paragraphs of each post on the blog’s home page so visitors will see multiple blogs “above the fold.”

Keep it simple

Now roll up your sleeves. It’s time to get your hands dirty. Let’s start with your background choice. This element is important because you’ll stack other visual elements on top of it, i.e., text, buttons, scrolling galleries, photos, etc.

While colors such as yellow and red will certainly stand out, these loud colors won’t be easy on your viewers’ eyes. They actually hinder readability, prompting viewers to go elsewhere.

The same holds true for image backgrounds. Keep your backgrounds simple and avoid extremes—very dark or intensely bright colors—and be wary of adding too many attention-grabbing features, such as blinking buttons or animation. While these can show visitors that you are tech-savvy, use them sparingly. Too much can be distracting and off-putting. Put yourself in your visitors’ shoes. Would you find multiple pop-ups annoying? Probably.

Time to text

Now let’s talk text, because after all, the elements of your design are meant to help you convey a message and enhance the content you have on a site. Even if you’re designing an online store, you’ll need at least some text. At minimum, you should have Contact Us and About Us pages to give shoppers some background about yourself, and to foster trust. And, of course, you’ll need item descriptions.

White space is your friend: It keeps your site looking organized and makes reading text easier on the eyes

Your content should be reader friendly. Opt for short paragraphs (no more than four sentences) and concise sentences that get right to the point. Put the most critical information at the top. Remember, you have mere seconds to catch the visitor’s attention. The information you provide should reward them for venturing further into your site. Will visitors learn something new? If this is an online store, will shoppers be able to easily get all the information they need about a product, or will they have to sort through long paragraphs that don’t provide specific information?

Don’t be afraid to use various fonts on your site, but do be consistent.

“One font for the whole site is a good idea. A second can be added for headlines,” Jaeger says. “Then it’s best to stick to as few font sizes and font colors as possible, and make them different enough in size that it’s instantly clear to the visitor the importance of what they’re looking at.”

Keep in mind, when it comes to Web design, less is more, she adds. White space is your friend: It keeps your site looking organized and makes reading text easier on the eyes. Online, viewers want information at a glance, and will usually scan sites instead of taking a detailed look at them.

Navigation is key

Odds are that you’ll have multiple pages on your Web site. And while this is a good thing, you’ll need to ensure visitors can easily find their way around. To help them, be sure every page includes a link back to your home page.

You should also have a Contact Us page so visitors can leave you feedback and let you know what is and isn’t working. Consider adding some type of feedback form to your pages so you can see if your site is doing what you want it to.

It’s all in the details

Finally, you’ll need to double check that you’ve dotted all your i’s and crossed all your t’s. Navigate through your site as if you were a visitor. Click every link and read every page. This will let you see if you have any dead links, if the wrong page loads, if you have any typos, etc. And don’t forget to review your site on different Internet browsers, as they may affect the way pages display. Firefox, for instance, is more forgiving if you have a slight mistake in your HTML code. Internet Explorer isn’t this way.

Now let the designing begin!

About the author

Olga Munoz
Olga Munoz is editor of TheOnlineSeller.com. In addition to writing news and feature articles about e-commerce, selling trends, online marketing and other topics of interest to online sellers, Olga manages the site's social media efforts. A journalism graduate of Chico State, Olga says her favorite part of being a journalist is learning interesting facts that help put stories into perspective, attending industry events and meeting interesting people "that leave you smiling, even in tough situations." Opinions expressed here may not be shared by The Online Seller and/or its principals.



Newsletter Signup

Subscribe!