10 Design Elements to Avoid for a Professional-Looking Site


Most online store design rules are common sense, e.g. no music players unless you’re selling music. I think we’ve all got a handle on that one – it’s been a long time since I’ve seen anyone break it.

There are others that should be common sense, too, but some people still don’t follow them. Like the one that says you need to double-check your spelling, because if you can’t get their/there/they’re down, no one’s going to trust you with their credit card information. But those are still simple enough that we don’t need to spell them out again (and again).

The ones we’re interested in are the ones that aren’t intuitive, or that many online businesspeople – especially the newer ones – might not have even realized they’re breaking.

So if your e-store includes any of the following items, remove them immediately. They’re giving your viewers eyestrain, killing your conversion rate, and hurting your attempts to be taken seriously.

1. Popups for Anything Besides a Call-To-Action

↑ Back to top

As we’ve mentioned in a previous article, a single popup – set to trigger when your visitors leave the site – can be an excellent place to invite customers to sign up to your email list. But that’s the only time you should use a popup. And be aware that even that will annoy a portion of your viewers.

I assume anyone reading this is smart enough to stay away from popup ads – there’s a reason they’ve been largely relegated to the same kinds of sites that give you malware.

2. Too Much (Or Too Little) Contrast

↑ Back to top

On one hand, you have the sites that look like the designer was blindfolded and spun around before being let loose on a hex chart.

These are usually built by well-intentioned amateurs who want their websites to “pop,” but don’t know anything about color theory or combinations. On the other, you have websites with light gray text on a white background – a design crime often committed by pros who should know better. Neither extreme is what you want, so make sure to properly study how to mix and contrast colors on your site.

3. Too Many Fonts and Sizes

↑ Back to top

You only need two to three fonts: one for your header, one for your body text, and if you’d like some more visual interest, one more for captions and other design elements you want to set apart from the rest of your site. But that’s it.

Don’t go overboard with the H1s and H2s, either. If you want to emphasize something, bold or italicize it. But even that should be done sparingly.

4. Excessive Multimedia Content

↑ Back to top

Videos are proven to enhance conversions on sales pages, but I can’t think of any reason to have more than one per page. Your viewers came to buy something, not to simulate a TV store window from the 70s.

5. Too Many Products Per Page/Category

↑ Back to top

On a related note, too much choice on one page can overwhelm your visitors. It’s been proven that the more choices a store offers, the more people will stop to look, but the less they’ll buy. Research suggests that the more choices you offer, the more time it will take viewers to think them over, and the more likely they’ll be to postpone the decision until some unspecified time that often never comes.

But wait: don’t throw any of your variant products in the garbage. The best way to deal with this is simply to organize your site so that there are more categories—but again, not too many—so your viewers can more specifically nail down what they’re looking for. Then limit the amount of choices within each category to a few strong options.

6. PDFs

↑ Back to top

I can see a few uses where these would be acceptable, like ebooks, downloadable white papers, and… and… No, that’s pretty much it. Anything else you care about your viewers seeing should be on a real page on your website. Even your sales brochure should have an online equivalent. Long articles about your business, like scans from local newspaper reviews, should be reduced to a few snippets you can put on your testimonials page.

7. Weird Sizing

↑ Back to top

Fitts’ Law states that people are more likely to click on bigger things. No, it’s not some internet joke rule. It’s actually far more interesting and complex than that summary, but that’s the most efficient way to put it. It’s common sense, but a lot of web designers still get it wrong, giving undue importance to trivial things and hiding the important ones by making them small and out of the way.

For example, how many sites have you seen where the contact link was tiny and hidden in the footer? Or where the social buttons were miniscule, off to the side or towards the bottom of the page, and made the same color as the rest of the page in order to blend in? And how many sites have you been to where it was difficult to access the sales page? So take this into consideration when you design.

8. Vague Homepages

↑ Back to top

If your readers have to read the “about” page or, even worse, sit through an intro to figure out what the site’s about, you have a problem. This isn’t too common with online stores. Usually it’s an issue relegated to design studios, art collectives, and apps. Still, online businesses who put looking cool over actually being informative can easily fall into that trap.

9. Distracting Backgrounds

↑ Back to top

There’s a reason the minimalist, vertical-scrolling look is popular among online businesses these days. Personally, I think it’s getting a little old, but it does one thing very well: it keeps the customer’s focus on the content.

There’s nothing wrong with using a tasteful photo or illustration as your background, but it’s advisable to blur it, lower its contrast, or find some other way of making it fade into, well, the background. You don’t want your viewers continuously looking back to it instead of at the products.

10. Tiny Product Images

↑ Back to top

If you’re going to make anything online, let alone something expensive, you want to see large, detailed pictures of it from multiple angles. This is basic, but you’d be amazed how many new online stores still fail to provide images larger than 500×500. If you’re worried about how to incorporate them into your layout, just use them as zoom images, or provide a link to the larger version.

There’s a special addendum to this section: make sure if you have a small primary image with a mouse-over zoom function, that mobile users also have some way of easily accessing the hi-res version.

Conclusion

↑ Back to top

It’s strongly recommended to get a professional designer to implement your ecommerce website design. No matter how cool the image of your site you have in your head is, a professional can implement it better. Plus, ideas often run headfirst into reality when you try to implement them. Everything takes longer, is more expensive, or requires more coding than you’d expected – or worst of all, you get it the way you wanted, but it still looks like it’s missing something. However, if you have to do it yourself for the time being, these tips should keep your site looking at least competent.

What’s your least favorite product page design problem? And how did you avoid these problems when you were designing your own site? Any more advice? Let us know in the comments.

Image: Death to the Stock Photo

cta-banner-10-product-page-v2_2x
Brenda Avatar

About

3 comments

  1. Great post, Brenda ! These tips should be taken into consideration while building a website and yes, designer plays a very important role in designing the images for the website.

    Ready Themes
    November 11, 2014
  2. Hi,

    WOW,Your blog looks great!. Thank you for sharing this information.

    Please check out my website buy premium WordPress theme

    with kind regards,

    Memoona

    memoona
    November 12, 2014
  3. @ Brenda , first like to pay thanx for these tips. I am still confused with this point ” Too Much (Or Too Little) Contrast ” i tried Adobe color combinations but my clients are not happy with those combinations. I am big fan of woothemes. Can you give me a Thumb rule for choosing colors .. what to do for header , footer etc
    or provide me your any article where you mentioned those tips, it will help me alot.

    Thank You

    Imran
    November 26, 2014

Stay up to date with WooCommerce emails

View our privacy policy. You can unsubscribe anytime.

Subscribing...

There was an error subscribing; please try again later.

Thanks for subscribing!
Emails will be sent to

View our privacy policy. You can unsubscribe anytime.

You're already subscribed!
Emails are sent to

View our privacy policy. You can unsubscribe anytime.

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.