Following on from last week’s “tips on improving the performance of scarce online retail real estate,” I wanted to share three ways in which tech-savvy online retailers are making the most of precious screen space.
And if you’re in charge of an online store you don’t need me to tell you it’s tough to find enough screen space for all the information you want to share with cyber-shoppers. Indeed, those precious pixels are a prime example of scarcity, that vital element of economics classically described as “scarce means that have alternative uses.”
For example, in my last post I talked about the challenge of balancing just two alternatives: product shots and offers (such as discounts, price cuts, shipping deals, and all the other incentives to buy that reside in the online retailer’s arsenal). I referenced an excellent post by Kevin Ertell in which he pointed out how often (hint: too often) online stores err on the side of promotional messaging versus presentation of the products, eventual purchase of which the promotions are designed to encourage.
But product shots and promotions are just a few of the space hogs you need to feed. There are product details, endorsements, testimonials, reviews, and ratings to accommodate. Then you have the nuts and bolts of the shipping and return policies, payment options, and so on. So what can you do to ease the strain of competing demands for screen space? Here are four suggestions:
1. Check visitor screen size and adjust content to suit.
You could call this the “leave no pixel unused” strategy because it involves adding more content if there is room to display it. This is made possible because your web servers can detect the size of a shopper’s screens and your store’s pages can be coded to show more content to those who have larger screens (the screenshot below shows how you can access the resolution setting via the Monetate dashboard).
For example, if a shopper has a wide screen you can add more content to the side of the regular page. This is often possible because online stores, like many other commercial web sites, are designed to conservative standards in order to look good on as many different systems as possible.
A few years ago “typical” notebook screens were 1024 pixels wide and before that they tended to be 800 pixels wide. But even as 1024 screens became the norm, online store pages were often made 800 pixels wide so shoppers with older machines could still see the whole page without scrolling sideways. Most notebooks sold today have a screen width of more than 1400 pixels but online store pages still tend to average about 1000 pixels. This gives you plenty of extra room to add content “on the side” for those with wider screens (the same “extra” content can still be shown on narrower screens if placed in line with the rest of the content–while this results in a longer page, that may not be as bad as you think–read item 4).
2. Check visitor segment and display content to suit.
It’s common sense, but it bears repeating: There is no need to present every visitor to your store with the same set of information. If your warehouse is in Kansas and the shopper is from Iowa there is no need to dedicate prime real estate to describing how happy you are to ship purchases overseas. On the other hand, if the shopper is coming to your site from France, you can swap out the “Next Day Delivery” message and swap in the “Yes, we ship to France” messaging.
And there’s a whole bunch of stuff you don’t need to display up front to returning visitors, but that same stuff needs to be on display for new customers (things like how easy it is to shop your store, the many convenient payment options you provide, the great track record you have with shipments to the visitor’s general location, and so on).
The point is, segmenting your online store traffic to personalize the shopping experience not only has the immediate benefit of increasing conversion rate and raising average order value, it gives you an opportunity to develop strategies for placing more relevant content on each page and ending some of those contentious either/or battles about what has to give in the design process.
3. Check purchase progress and overlay content to suit.
Another way of using screen real estate more efficiently, while at the same time moving the purchase process forward, is to present certain information at certain times, on demand rather than on every page. Consider a coupon offer made to all traffic from a certain affiliate. At some point you need to provide shoppers with the terms and conditions of the offer, and at several points you need to reassure shoppers that they are getting the promised discount. However, you don’t need to keep that information visible at all times.
With clever design you can include a small reference to the coupon offer on each page while keeping the terms and conditions in a popup box that only appears on mouseover or click. This leaves more room for product shots, descriptions, reviews and other information that will help the customer find and buy exactly what they want.
4. And don’t hesitate to hit below the fold.
See how I changed that up and broke the parallel construction of the numbered list? Sometimes you need to go against convention to get the job done and that’s what some savvy retailers are doing with below-the-fold content.
Conventional web design wisdom has always been: “People don’t scroll, so keep the important stuff above the fold.” Now there is good research that says it’s okay to go below the fold, if you do it wisely. I strongly recommend you read the entire article, but here are 3 design tips that the research authors put forward to help you ensure that content below the fold is seen:
- Less is more: don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.
- Stark, horizontal lines discourage scrolling: no need to ban horizontal full width elements, but encourage scrolling by keeping a small amount of content just visible, poking up above the fold.
- Avoid the use of in-page scroll bars: users look to the browser scrollbar as an indicator of the amount of content on the page, more scroll bars within the page can confuse.
Of course, you will want to test any page re-designs you undertake in light of these ideas, whether it’s longer pages, wider pages, or swapping content. But I think you will find there is room for improvement (pardon the pun). And hopefully the 4 strategies outlined above will give you some fresh ideas about how your online store can make the most of screen real estate. If you have any other tips, or suggestions, please feel free to share them in a comment.
.
