eCommerce Design: Function and Fashion

eCommerce Design: Function and Fashion

The experience of shopping online is centered on usability. And with good usability comes an attractive aesthetic design, as well as a functional one. The key to successful eCommerce is a perfect balance of these two important qualities.

This challenge is bigger than you may think; there are those web designers who mainly focus on creating beautiful websites, while business-driven entrepreneurs might solely want sites that optimize conversion rates. In order to appeal to users’ visual tastes while also enabling a simple shopping process, it’s important to keep both aspects of usability in mind. Here are some tips and examples of how to do this.

Best Practices For Functionality

Display a tagline
Users take the first few seconds of entering a site to judge its credibility and understand its purpose. Make the purpose of your website immediately clear by including a descriptive tagline that both explains your product and what it does for users.

Enable site-wide search
If customers are looking for a specific product, the first thing they’ll look for on your site is a search bar. It’s now common practice to have a site-wide search feature to get customers the best and quickest results.

Improve your speed
When you’re making a first impression on users, every second counts. Shoppers easily get impatient when web pages load slowly; 40% abandon the page after waiting more than three seconds. To gauge how your site is currently performing, do a site speed test. Then you can make changes to improve speed like deleting large files or images, getting rid of flash, etc. Each time you make a change, test it again to make sure the change was effective.

Show shopping cart contents
Online shoppers want to feel like they are in control of their shopping experience – just as they would at a physical store. Display a “shopping cart” image or icon on every page that indicates whether it holds any items so that customers can always view and edit its contents.

Best Practices For Good Design

Build page layouts that are easy to scan
People tend to view web pages in an “F” shaped pattern, instead of reading each word left to right. Use this to your advantage by placing important page elements in this scanning path, and break up information with adequate spacing and varying typeface sizes and weights. Viewers are more likely to take in more information and stay involved if the page has assorted interest points.

Place calls-to-action above the fold
Calls-to-action can greatly contribute to portraying the purpose of a website, so make them stand out from the rest of the page with vivid colors or textures. Use concise copy to accompany them so that users can clearly tell what they do. Place them above the fold so users don’t have to scroll in order to take action.

Use ample white space
There’s nothing like a cluttered display of information overload to overwhelm a customer. Just like a bricks-and-mortar shop, your ecommerce site should have a clean and organized layout to enable easy and enjoyable browsing. A minimal layout that emphasizes products conveys a professional, trustworthy and quality brand.

Brand yourself
Familiarize yourself with your company’s (or the company you’re building a site for) mission, values and logo design. From there, you can build on the brand identity by developing a layout and design style that reflects these characteristics. For example, the navigation system should be intuitive by guiding users to the most important aspects of the site, and your icons, illustrations and type design should mirror the character of the logo and company’s voice. Branding should reflect a unified identity to show a well-developed business model and thought-out design. Amazon’s Ecommerce Webinars offer a more in-depth look at store design and product merchandising best practices.

Test Your Designs

A great way to gain a quantitative evaluation of the performance and impression of your web design is to conduct A/B Tests. These allow you to create single, specific variations of design elements on a web page, and test their effectiveness on Internet users. Even minute details can have great impact on the way users interact with your site, like colors of calls-to-action, font sizes, content wording and image placement. Continue to do tests on various elements to achieve the best performing pages that please your users the most.

Examples of Quality Ecommerce Designs

Blik

 

This site uses images and textures that reflect the product: a background pattern and logo that are representations of the sticker decals the company sells. This emphasizes the creative side of both the company’s values and the personality of its target audience.

 

Kiki & Bree

 

The designer of this website used the logo’s simple imagery to create a background pattern, which builds up the brand identity and helps users recall and associate the image with this company. One functionality improvement could be to reduce the number of menu bar links to more directly guide users with limited options.

 

The Book Garden

 

This navigation system is very helpful and intuitive. It has a clear menu bar, an advanced search option and helpful, categorized links on the left side. This placement follows viewers’ scanning pattern and offers quick and thorough help finding specific products.

 

Winestore

 

This design is a great balance of design and functionality. It shows how sufficient white space with minimal but vivid use of color can emphasize different aspects of the page. The type and icon design reflect the brand’s image while conveying important information and directing users to the calls-to-action.

 

Callaway

 

This is an example of how a minimalistic design style and quality product photos can attract users who are looking for a sleek, professional brand. The gray/silver that dominates the page reflects the classic shine of golf clubs. The subtle but very intentional use of a signature color moves the eye throughout the page, and ultimately to the call-to-action.

 

Need Help Getting Started?

Now you know the basic principles of creating a balanced and usable ecommerce site. But you may need assistance in constructing a foundational structure; Amazon’s Webstore helps you find the perfect solution to your unique brand’s web design needs. As you build on this foundation, remember to keep testing your designs to further refine them to fit your users’ desires.

Posted in Web Design
Don't Miss Out On Deals Or Updates!
Be the first to find out what Designrfix has to offer. Signup to our newsletter for all the latest Top Designer Resources, Tech Products and Giveaways.

Written by Rob Toledo

Rob Toledo is a freelance designer, working alongside Shutterstock in an effort to help other designers avoid common stock photography clichés. Without access to a professional photographer or videographer, he recommends stock photos and stock footage as a great alternative. He can be reached on Twitter @stentontoledo
  • Why not using big pictures where ever possible? I have observed that it is one of the best way to improve bounce rate. When I change my fashion eCommerce store I observed up-to 15% increase in stay time and increase in sales yet to be quantify.