I’ve been toiling away at some pretty big changes to my ecommerce website and I’m just about done. Some of them are already live. Although the changes I made may seem small (my site pretty much still looks the way it did before), my tweaks have improved the site usability. Today I want to talk about changes I made that make optimal use of limited space.

A truly effective web page conveys all the information a customer needs to make a purchase decision WITHOUT the appearance of an overwhelming amount of copy. So what do consumers need to know?

From your site navigation:

• All product categories
• All product sub-categories
• Various ways to shop (e.g. search, by color, what’s new, by collection, etc.)
• All informational pages (e.g. returns, contact info, company info, customer service, press, etc.)

From your product pages:

• Product description
• Product options (e.g. size, color, etc.)
• Product photos
• Sizing chart
• Shipping information
• Special Offers
• Related Products

So how did I present this information without putting a novel in the customer’s face? By making use of some simple CSS and Javascript.

My Navigation Fixes:
When visitors mouse over my top and left nav bars my product categories expand, displaying all their subcategories. This allows me to get over 35 links into my left nav bar without the customer having to see them all at once.

This new navigation scheme made space for me to merchandise products in more ways. Customers can now browse by collection, color, gift guides and popular themes.

My Product Page Fixes:
My old product pages were on the long side. To read all the information a customer would have to scroll pretty far down and might miss something important. I fixed this problem by adding tabbed navigation to my product pages.

I got a lot of my site improvement ideas by reading the articles I post here on Fridays and by visiting the websites of major brands. If you’re thinking about some usability fixes for your site, check out what major brands are doing like Nordstrom, Victoria’s Secret, Pottery Barn, Amazon. Pay attention to what information they display, and how and where they display it. You’ll benefit from the ideas of experienced, highly paid and specialized professional web designers.

Since a lot of the types of changes I’ve talked about today involve client side code, you can even sneak a peak at the code that makes other websites run. Just view the source of their pages and take a look at their CSS and Javascript. If you’re not tech savvy yourself, send your web designer to the sites you’re hoping to emulate and ask them to do something similar. While I’m not advocating copying other site’s designs, other sites are a great place to shop for ideas for your own website design.