Petrus Theron

Undesign Your Retail Website Published Mon Jul 13 13:00:00 SAST 2015

What is the purpose of your retail landing page? Is it to:

  1. Download a 5MB PDF food menu?
  2. Watch a Flash intro before proceeding to your real site?
  3. Hear auto-playing music?
  4. Get customers off your site and into your physical store so you can make a sale? (Hint: it's this one.)
  5. Keep customers on your site to achieve a secondary purpose, like build trust to make a sale?
  6. Send customers elsewhere to make a sale?

If you run a retail store with decent brand equity, the answer is probably (4): to get people off the web and into your store ASAP — everything else derives from this. In select few cases you may want to keep customers on your site to build trust before attempting a sale.

Retail establishments like restaurants and shops have traditionally suffered from over-designed websites filled with distractions, when the customer really just wants a map with driving directions so they can give you their hard-earned money.

What to Convey

Content before style. Here are the bare necessities:

  1. Minimal branding to establish identity, e.g. “ACME Inc.”
  2. Big obvious phone number and email address, above the fold.
  3. Physical address with map and clear driving directions.
  4. Obvious pricing. Most phone calls are to ask, “How much is X?”
  5. Minimal social proof to establish trust like “150,000 happy customers” with a few selected testimonials.

Instead of hiding contact details on a different page, put a phone number prominently on your home page, above the fold.

Don't like answering the phone as a retail owner? Invest in phone support first.

How to Convey It

Focus on what you can measure: content and usability. Avoid "pretty" or flashy design.

Eliminate Question Marks

Baseline usability is about avoiding unnecessary questions like:

  • “Is that a button?”
  • “Can I click on that?”
  • “Why is that there?”
  • “Is 6:00 in the evening or the morning?”

Whilst efficiently answering necessary questions like:

  • “What does it cost?”
  • “When are they open?”
  • “Who do I call?”
  • “How do I get there?”
  • “How do I buy?”

Omit elements which introduce unnecessary questions while answering sales-driven questions.

Required reading on usability is Don’t Make Me Think by Steve Krug.

Hallway Testing

Test your assumptions with a simple hallway test:

  1. Pull a customer off the street for a 60-second usability test. Offer free bacon or coffee.
  2. Tell them the action you want them to achieve, e.g. “What does an iPhone 5 Screen repair cost?” Encourage them to think aloud.
  3. Shut up and watch what they do. Give no guidance. Pay particular attention when they get stuck: those are your question marks.

Five hallway tests will identify 90% of all usability problems on your site.

Do’s And Don’ts

“Users spend most of their time on other sites.” - Jakob's Law of the Internet User Experience

Do’s:

  • Use minimal design. Good design is as little design as possible. Remember Windows Vista? Yuck.
  • Minimum font-size: 16px.
  • Line-spacing: 1.6 (line-height: 1.62em).
  • Two or fewer fonts: one for headlines and one for copy.
  • Good contrast between text and background.
  • Limit line length to 12 words per line, or max-width: 30em.
  • Use a different color for visited links.
  • Support mobile.
  • Balance heavy or busy space with whitespace. Better yet, avoid busy space.
  • Keep vital information above the fold. If you need a “scroll down” button, you have failed.
  • Have a single clear primary call-to-action like a phone number, “buy” button or link to pricing. Even better, show pricing on the homepage if you can.
  • Use rich black for headlines or large blocks of black. Write scannable content. People Don’t Read on the Web.

Don’ts

  • Don’t use more than two fonts.
  • Don’t reinvent native user interfaces like scrollbars or - mouse pointers.
  • Don’t use rotating elements like carousels.
  • Don’t hijack scrolling with any kind of “smoothing behaviour.”
  • Don’t let JavaScript break navigation. Can you link to a particular page? Test your site with JavaScript disabled. - Don’t depend on hover for navigation or showing vital information (esp. tooltips), because it breaks on touch pads.
  • Don’t use non-standard link colors.
  • Don’t design for the sake of design.
  • Don’t use animations, unless you want to draw attention to that element. If you need to draw attention, your page may be too busy.
  • Don’t use pure black for large dark areas.
  • Don’t overwhelm the user with a wall of text.

Now go undesign your retail site! Let me know if this helps.

← back to list