By Tom Deutsch, VP Creative Services at InteractOne
The practice of User Interface (UI) design can sometimes feel like a leap of faith. While we are “supposed” to test everything, most of us don’t. Most merchants (including many you’ve heard of!) just don’t have the staff, the infrastructure or … the patience … to turn every design decision or UI choice into an A/B test. Particularly in the planning, mock-up and pre-launch stages of design, merchants are making many gut-level choices about the UI vocabulary they will use.
This is not a bad situation; just make sure your gut is well equipped to make the call. Here are a few “some-assembly-required” approaches for building an effective eCommerce UI. Think of these as jumping-off points for testing, and you may find yourself ahead of the curve.
1. Benchmark: Use Success as a Model
This seems obvious enough. Look at the competitors you envy or the market leaders in your category. See what UI tricks and techniques they employ. The warning that comes with this approach is to know what’s really working on your competitor’s site. It would be a mistake to make an assumption based on some design feature they have that you don’t. Also, be aware that the truly huge eCommerce businesses (eg Amazon) are constantly testing; in other words, a cart arrangement you screen-shotted this morning might be gone by this afternoon (especially if it didn’t work!)
Simply wireframing somebody’s excellent site also doesn’t guarantee your customers will convert at a higher rate. You have to look at a bunch of successful competitors – and you have to have done it recently – if you want the benchmarking approach to be remotely effective. Take the common elements you find (nicely responsive on all platforms, minimal gigantic banners, text renders large enough to easily read, cannot miss the “add to cart” button …) and then look for the design principles that were used to make those effective elements consistent across the site. Truly, for most mid-market merchants, benchmarking is the foundation for all other approaches and should be done early in the planning process, before design mockups.
2. Set guidelines when re-theming
Most ineffective shopping experiences aren’t a result of “bad” design. That would be too simple to fix! Especially among Magento merchants, most conversion killers stem from a lack of consistency within the site, or from a mess of priorities for the shopper to sort through.
Among newer, responsive redesigns, a lack of discipline in setting up style sheets and PHP classes can have numerous ill effects – from strangely overlapped elements to …s…l…o…w… page-load speeds. Both of these are off-putting to your customers, to say the least. Talk to your developer about their approach to front-end coding and do some research to verify that they know what they are talking about. A beautiful wireframe or mockup doesn’t mean shoppers will be able to use the page once it is coded!
The second aspect where a disciplined approach is called for is in carrying over legacy structures. The old site may have “worked,” but the old site may have been a different platform or highly customized. Look carefully at shifting internal processes to conform to the best practices coded into the default software before you decide you must carry over a legacy feature.
3. Stick to the Theme
Basing your business on a template or theme might feel like a design cop-out. But simply put, the best theme developers will benchmark success before they build their theme.
Especially if you have few resources, adherence to the theme means fewer customizations and less expense in getting everything to work.
The trick here is to pick a well-built theme. Half of design is research and much is warranted when shopping for a theme. Often, the most popular themes are also the most well-built themes, but not always. Have a reputable Magento expert you trust check it out before you decide or purchase.
Once the theme is selected, decide to use the basic structure – leave it intact – and apply your brand priorities within these boundaries. With this approach, you will gain better control over the variables you have introduced with your new design, limited code modifications that can slow the site, and preserved your flexibility for future changes as needed.
4. Use Standard Navigation design Language
The advent and growth of mobile browsing accelerated the invention of navigation and action symbols. But it’s a free world, out there and there is no definite standardization. Users are the enforcers, in that they will decide (and let you know … if you’re paying attention) whether or not they understand your design and symbol vocabulary. Pay attention to them!
That said – choosing UI and navigation images, icons and colors effectively is far from trial and error. Demographics are key. Users of different ages, genders or other socioeconomic strata may be more or less accustomed to some of the iconography and shorthand that mobile users are encountering. Depending on your audience, it may be a mistake to apply the “hamburger” mobile menu indicator to the desktop site, or it may be a wise branding decision. For others, some symbols that you, individually, understand might simply bewilder a large sector of your shoppers.
More than anywhere else – symbol and navigation aid design are evolving. Make sure your research and ongoing traffic analysis includes these variables.
5. Know Your Platform
We’ve all heard the old truism: form follows function. Applying the principle to eCommerce, design (form) should highlight and follow the functionality built into your platform. If Magento is your platform, you have to ask yourself if your design is maximizing Magento’s best functional elements. Flexible and easily assignable categories and attributes are the most visible advantage that Magento offers; does your design detract or add to your shoppers’ ability to use them?
Mobile shopping is especially aided by a well-thought-out system of categories and sortable attributes. Does your design place these tools front and center? Are you being judicious in your use of promotional banners and blocks and on which devices they will display, or do they obscure navigational and product sorting tools?
Of course, this is where design intersects with operations, since your product managers and merchandising team has to make the effort to build employ the powerful settings available for displaying and sorting products and creating custom attributes categories based on shopper desires and habits. Since this can often require a shift in product planning as well as eCommerce administration, it often does not happen – at least to the extent that Magento makes possible. This is a missed opportunity from a UI perspective, since finding products easily and with certainty greases the path to conversion, upsell and cross-sell like no promotion can. (“Sort-by” filters enable the merchant to direct a customer’s search whereas a blank search bar does not!)
Any Magento merchant who dedicates more time and resources toward maximizing the shopper-directed advantages the Magento platform offers, instead of customizing a design arbitrarily, will be rewarded with higher conversion, AOV and a better overall UI.
6. Ask Someone Else!
Short of running a full test on a feature, simply asking an outsider (someone not already familiar with the site) to test your UI idea or assumption can be a quick and effective way to back up your instinct or intuition.
An effective UI is within every merchant’s reach. Making decisions concerning the user interface is not simply a design exercise, nor is it only valid when every step is scientifically tested. The tips outlined above can help you put your “gut” to work as you contemplate any change to the design of your eCommerce site.