Design and Functionality: The Perfect Mix

    written by Rob Toledo

    Online shopping has quickly grown to rival shopping at brick and mortar stores. It’s important as ever for designers to create e-commerce websites that present a balance of aesthetic and functional design. Customers want quick and easy access to online products with minimal hassle. And if they have a good experience on your site while also enjoying the aesthetics, they are likely to return. Below is a breakdown of tips to create this perfect design mix.

    Essential Features for Usability

    1. Navigation System

    Shoppers don’t want to spend time figuring out complex or illogical navigation systems, so products should be categorized in a coherent way so that customers can easily find what they’re looking for.

    Breadcrumb navigation is a great feature to map users’ search paths. It lets them know where they are in the site and allows them to go back without having to start the search all over again.

    Design and Functionality: The Perfect Mix

    Amazon does a great job of showing the path you’ve taken throughout the site, allowing you to return to any of the categories. If you need help creating easy to understand navigation ecommerce software can help you develop the organizational structure of your site.

    2. Search Box

    A crucial element in a convenient navigation system is a visible search box. This enables customers to find what they want without having to explore the whole system to find one product. It’s a good idea to show the box on every page so it can be accessed at all times. If you offer a lot of products, an advanced search capability is also beneficial.

    Design and Functionality: The Perfect Mix

    Etsy has a search box that is always accessible if users don’t want to look through categories (which are also well-organized).

    3. Related Products

    Customers are encouraged to purchase more if you show them related products to the ones they’re buying. This can be done in the checkout section so the customer sees them before placing the order.

    Note: It’s important to display high quality images of products so shoppers can view details before buying.

    4. Shopping Cart

    Online shoppers look for a “shopping cart” just as customers at walk-in stores carry their items in baskets. It’s smart to show the cart icon and whether it has contents on every page. If customers are always aware of what they’re planning on buying, they feel more in control of their shopping experience.

    5. Contact Information

    Even if your online store works well, there are bound to be questions from customers. They have to be able to reach you for help. Your contact information should be visible so that you can answer questions and receive feedback. It also backs up your credibility.

    Design and Functionality: The Perfect Mix

    JCPenney provides customer service 24 hours a day, so customers know there’s always someone to help them.

    6. Ordering Process

    Checkout is where most people change their minds about the items they’ve chosen to buy; so ordering should be simple and efficient to avoid frustration.
    Break up the ordering process by placing the steps on separate pages. Breadcrumb navigation should be used once again to show buyers where they are in the progression. Make sure to also display and email a confirmation page after the customer places the order.

    Give customers peace of mind while checking out by displaying security certificates like VeriSign to assure privacy protection.

    Visual Design to Balance Usability

    Many sites that are well balanced make use of minimalism and an attention to detail in their designs. To keep shoppers from being overloaded with information upon entering a site, intentional use of white space, quality imagery, typography and color enhances their shopping experience. Here are sites that have combined good design with functionality to strike a beautiful balance.

    Design and Functionality: The Perfect Mix

    Ball Chair does a lovely job of showing an attractive minimalistic style and great usability. It’s clear what the user’s options are. The orange from the chair is used as a great accent color in the toolbar. Featured items run through a slideshow on the homepage, so the viewer can get a lot of information, but the white space makes it easy to digest.

    Design and Functionality: The Perfect Mix

    The Famous 4th Street Cookie makes great use of detail while still maintaining a simple layout. Detail is important in online shopping, and viewers of these cookies can easily see what they’ll be getting. The site also uses appealing color and typography that reflect the brand’s personality.

    Design and Functionality: The Perfect Mix

    Design and Functionality: The Perfect Mix

    Tinkering Monkey‘s use of subtle texture and a ton of white space is so visually appealing that the viewer wants to keep browsing these wonderfully separated items. This shop is visually balanced with easily searchable and perceivable products.

    While beautiful design is important for ecommerce sites, functionality has to be priority in this situation, because customers will quickly leave your site if it’s confusing or inconvienient.

    Authored by

    Rob Toledo loves all things design, CSS3, and staring at the source code of websites he admires. He can be reached on Twitter - @stentontoledo

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

1 Comment
  • Maneet Puri says:

    December 1, 2012

    Great Rob :)

    It is the responsibility and often the necessity of a web designer to maintain a balance between functionality and design in case of an ecommerce portal. I believe what most of the clients are worried about in case of online shopping is the security feature in the ‘mode of payment’. Rest it is upto the presentation of a given product both with images and description that educates a user. A web designer should also be consistent in designing the web page to offer a much professional appeal to the website. Hope you agree with me!