Published on <a href="http://ift.tt/2olGrnA">| Prototyping: From UX to Front End &mdash; Medium</a> Robyn Hwang 
We’ve all seen them. Gorgeous websites and apps with huge, beautiful hero images and carefully crafted icons. Plenty of white space. Tasteful pops of color, or maybe a stylish monochrome look. Delightful animations on every page.
<img alt="" src="http://ift.tt/2oU8Cgz">Squarespace promises it all in the form of templates.
Unfortunately, it’s not always <a href="http://ift.tt/2ombEbK">possible or pragmatic</a> to use these modern, and arguably beautiful, design patterns when you’re in the business of selling lots of things online.
Here are a few things I’ve learned while working on sites and apps for e-commerce companies.
<h3>Find a balance between white space vs. information</h3>
To sell things, you usually want to visually showcase your products, but you also probably want to show more than just a few products at a time (unless you’re the rare company that only makes a few).
But your customers also care about the details — size, color, material, style, dimensions, cleaning instructions, ports, charging needs, warranty/return information, and whatever other specs are relevant to actually buying the product (your ultimate goal).
On a major retailer site with thousands of products, this all adds up to a lot of information very quickly. So you get categories, subcategories, filters, sort abilities, pagination — really anything to help you narrow down your choices. There’s even a global search box and a “trending now” section that allows you to a slightly wider net.
<img alt="" src="http://ift.tt/2o2NMrh"><img alt="" src="http://ift.tt/2oU11ys">Desktop and mobile browser
Scroll down and there’s more…
<img alt="" src="http://ift.tt/2o2PBEz"><img alt="" src="http://ift.tt/2oTVTKS">So many categories of just women’s TOPS.
Despite the many items shown on the page, <a href="http://forever21.com">Forever21</a> has still decided to hide most of the individual product information.
Compare that with <a href="http://amazon.com">Amazon</a>, which is home to many, many more products, but also leaves more information out in the open: Prime shipping or not, estimated delivery date, your “savings” amount, used and new offers, number of items on the page, etc.
<img alt="" src="http://ift.tt/2o2ZbHz">
By contrast, lots of non-e-commerce sites can afford to leave much more white space. Even text-focused sites like Medium.
<img alt="" src="http://ift.tt/2oU7nht">So meta.
(I admit this is probably because Medium makes a concerted effort to make you focus on one thing at a time. Compare with <a href="http://cnn.com">CNN</a>.)
<img alt="" src="http://ift.tt/2o2YDRW">
Even in data-oriented products, there’s a trend toward visual appeal over information. Data visualizations are stripped down to show only the essentials and are sometimes not only hidden, but completely off-limits.
For example, <a href="http://mint.com">Mint’s</a> <a href="http://ift.tt/Z3V2nk">mobile app</a> has pie charts that don’t tell you the percentage of the pie each slice is taking up. You have to tap on each pie slice — no matter how thin, which can require some real finesse — to see the dollar amounts.
<img alt="" src="http://ift.tt/2oU7U2U">TIL the Mint app doesn’t let you take screenshots. Neat! This is from their Google Play page.
Even after tapping, no percentages to be seen. And if you want to see the total amount you’ve spent that month, you have to navigate back to the original page and look at a different “card.”
<h3>Find a balance between hand-holding vs. freedom to explore</h3>
Another way the trend towards “simplicity” manifests itself is in heavily guided tours. Forget “wizards” like Microsoft Word’s Clippy — now you have entire pages that you can only access in a particular order.
Or you have a giant call-to-action/magic box that gives you what you want. This works great on a site like <a href="http://airbnb.com">Airbnb</a>, where the inputs are fairly manageable.
<img alt="" src="http://ift.tt/2o2JFLD">
But when there are endless fascinating paths to follow and a million potential products to explore, it’s probably wise to allow that to happen. We’ve all been sucked into a website just by continuing to click and click and click and click… that’s usually good (for the website).
At some point, though, you should try to remind or prompt the customer to finish checking out.
<h3>Find the balance between following the pack and forging a strong identity</h3>
E-commerce, especially retail, is a tough space to be in and it can feel risky to stand out too much. You’ll find that a lot of e-commerce sites have similar feature sets.
So… if most other retailer websites have a favorites function on every single item, then you might be very tempted to include that on your site. But what about product reviews? Wishlists? Collaborative wishlists? Wedding registries and baby shower registries? Sharing on social media — which channels? There’s a lot that can be done and you can be sorely tempted.
But as ever, there are tradeoffs with every feature that gets added to the product: time, resources, speed, visual clutter, narrative, and brand identity are a few. So you may need to think about what matters the most to your company and forging a strong identity.
For example, <a href="http://everlane.com">Everlane</a> doesn’t have the crazy expansive product list that some retailers do, because it focuses on transparency and a close relationship with its factories. The header categories make this clear.
Everlane also features a single product prominently on its homepage. They don’t care that they don’t have as many product lines; that’s not their thing.
<img alt="" src="http://ift.tt/2oTPnUm">
<a href="http://loft.com">LOFT</a>, on the other hand, goes the more traditional route.
Enticing sale banner at the top, another sale offer on the right side of the page. A menu of options that include a search bar and a wishlist.
<img alt="" src="http://ift.tt/2o2QNrr">
Neither approach is good nor bad; it’s just what they’ve decided for their respective brands.
<h3>So… how do you find the right balance, exactly?</h3>
Unfortunately, not something I or any one person can answer.
But, I hope you find these ideas useful as:
<ul>
<li>Ways to frame tradeoffs and product direction for other stakeholders</li>
<li>Ways to plan your design process</li>
<li>Ways to jump-start the next innovations in e-commerce</li>
</ul>
Let’s see what happens next!
<img src="http://ift.tt/2oUf2fR" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2o2QMnu">Finding balance when design trends clash with e-commerce needs</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Finding balance when design trends clash with e-commerce needs

Top Stories