Retail Web Design: Small Decisions for a Huge Impact

At The 2018 NAMM Show, web designer Michelle Schulp shared her experience with designing and building websites for clients from different industries, including the AV/pro audio industry. She revealed her tips and design secrets for effective retail websites that make a big impact. Here are highlights from the session. (Also, watch the video to view the complete presentation.)

Know Your Audience
Schulp began by stressing the importance of knowing your audience and why they’re visiting your website. Likewise, know yourself, why you’re uniquely able to give customers value and what a win looks like to you. (What do you want your customers to do when they come to your website?)

Minimize Website Friction
Friction is what gets in the way of people doing what they came to your website to do—and results in lost conversions. It’s common across websites, but you want to remove it. Consider the 8-second rule: You have 8 seconds for people to make a decision to stay or leave your website, so start by minimize their frustrations with your website.Also, don’t force visitors to sign up when they’re making a purchase. Let them check out as a guest. You can lose a lot of potential customers and money this way.

The Zero Interface Concept
This is a website design concept where there’s no interface (i.e., you think about something and it happens). Schulp stated that we’re getting close to this through software, such as virtual assistants and voice control, but we’re not there yet. The zero interface is ideal. It means focusing and simplifying web design down to only what needs to be there.

Simplify and Focus Your Content
Remove visual clutter. This can even include ads. Give your audience decisions, not options. You have about 8 seconds to make it easy for your visitors to do what they came to your website to do.

Follow Good Design Principles
Schulp showed examples of good versus bad design. These all are aimed at making it easy for visitors to interact with your site and do what they came to your website to do.

• Rule of Thirds. Use this photography principle for design.

• Color. Pick two to three colors plus a neutral. Don’t go crazy with color unless you really know what you’re doing.

• Contrast. Make sure type is legible, and keep in mind those with vision issues.

• Typography. Pick fonts that aren’t too similar, and don’t pick too many fonts. Make sure they’re legible in small sizes. Schulp shared a design tip: You either want things to look exactly the same or different on purpose.

• Readability. You want your content to look easily accessible and be easily scannable, and to be directed and precise.

• Visual hierarchy. It tells people which element (text or images) is most important.

• F-Shape movements. When we read in English, we start in upper left corner, move to the right and down (F-pattern). When you lay out your information, keep this mind.

Use Definitive Design
• Clear calls to action. Make it obvious to visitors what you want them to do.

• Encapsulation. Put your CTAs inside a box, making it distinct from the rest of the content.

• Directional cues. Sometimes, this means literally adding arrows to direct visitors.

• Affordance and clickability. Make it easy to visitors to know what’s a button and link they can click on and interact with your website. Don’t make it confusing.

• Convert from anywhere. Make the cart and contacting you accessible from anywhere (any page) on your site. Put something in the header, footer, or sidebar. Make it easy to purchase.

• Provide context. Make it easy for visitors to navigate on your site to find what they’re looking for.

• Exploration and organic discovery. Some people may have an idea of what they want, but they still want to look around on your site to see what you have to offer.

• Include breadcrumbs. This shows you where you are on a site relative to anywhere else.

• Taxonomies. A list of ways to classify things. Provide that to visitors to show them what options are available.

• Filtering. The ability to filter is extremely useful if you have an extensive product offering.

• Search. Everyone wants search. Even if your menu is good, search lets visitors type in the exact thing they’re looking for. Schulp recommended search plus autocomplete, which makes it easy for your visitors.

Pay Attention to Form Design
A call to action usually includes a form: contact page, sign-up, registration, purchase and so forth. As website owners, do the cost-benefit analysis of what you need from a visitor and what they want to give you. Note: Visitors typically want to give little to no information, and you probably want all the information you can get. Depending on what the visitor wants, the information you collect will vary. Some guidelines on form design:

• Minimal fields. Make sure forms are easy to use and don’t ask too much, depending on the level of commitment from your visitor.

• Contextual errors. Tell your users what went wrong. For example, did they type in their user name incorrectly or their password? Don’t make them guess.

• Avoid bad patterns. Don’t have multiple calls to action. Keep in mind the most important thing you want your visitors to do, and focus on that primary win.

• Concise and clear language. People want certainty about what to do on your website, so use specific language, such as “add to cart.”

• Overzealous forms. Collect as little information as needed to let you do your job, while allowing visitors to do what they came to your site to do.

• Antipatterns. An example would be checkboxes that are automatically checked. (“Yes, I want to receive all of your marketing promotions.”) This is using frictionless design against visitors. If you have good content, they’ll want to sign up to receive more information from you.