11 + Ways Online Shops Can Make Their Merchandising Pop, Engage & Convert
Web design matters a lot in engaging your shoppers and buyers to learn more about your products, get excited and think about owning them. So it pays to know a few creative tricks of web experience that can make your sites pop with irresistible pull into your product story. Here are a few techniques that I see work well to achieve that effect.
See if you can apply any of the below to your site experience to spice up the shopping path. Also, while at it, remember to test before you do so (because what works for one site, might break your conversion easily), so do not over indulge, below are just suggestions to explore vs. copy direct.
1 Mesmerize with Parallax Scrolling Effect
Parallax scrolling has been around for a few years, yet not many merchants use that unless they are new to the ecommerce industry and selling a unique product or technology. ‘Parallax’ means parallel movement of objects when moved from different positions and came to web design from video games design. You have the background images move slower than the foreground ones to create an illusion of depth. When used well, it can help the users discover gradually what the product or experience you are selling offers. So, your foreground messaging can lead the experience, while the background photo or video expands at a slower pace as it follows the lead of the main copy or design element. Because, we are visual beings, a lot can be communicated with a background imagery, while still keeping our focus on the foreground with a key message. Good applications in ecommerce are Pebble Watch (video on the feature), Krystal Rae (video of the design element in action) and Hatch Baby brand sites.
2 Pull People In With Micro UX
Micro UX are the design elements that are telling us what is happening on the other end. You probably are familiar with iPhone text message reply when you see the other person is typing. Or you have noticed interactive elements in your favorite mobile app or even Facebook. When applied in ecommerce, the experience becomes more alive and humanized, which surely increases the level of engagement. You can use it in forms in the checkout funnel or make your cart more interactive. My favorite applications are in booking travel with Virgin Air and Booking.com. See how the message appears in the booking forms of mobile experience for Virgin America and before I start shopping on the Booking.com site ( “now you know how to say hi in X language and the # of people who booked something below).
3 Charm Window Shoppers With Ghost Buttons
Ghost buttons are simply de-emphasized call to action buttons that are not key yet add to the engagement level. You can spot them on my site – see the difference on the home page of “Talk To Me” and “Learn More”. They allow to not compete for the attention with the main call-to-action buttons like “Buy”, “Preorder”, yet still serving as guideposts for other levels of engagement with your content.
4 Control The Progression Of Interest With Infinite Scroll Fade Ins
Infinite scroll can surely be addictive (that what happens to you when you are on Pinterest, Google Images, Facebook or Twitter), this is why you cannot leave. Yet, your attention is getting grabbed by new and new content, giving you the influx of dopamine that keeps you engaged. What happens eventually is that you can get totally distracted on why you came here and lose focus, or you can be guided on the path as long as you zero on the right product. This is where the fade in comes in because it progresses with your attention and removes all other stuff that you seem to pass by, hence undesired or revealing you more sequentially, thus still holding your “projector light” on the key path. Content sites do well with it as their major goal is to keep you reading and being exposed to their ads. For eCommerce sites, this application works best on your blog where you are still pre-selling the idea of the experience your products can deliver when owned, used or even bought. Or if you do sell content (video, movies, classes) and have a size of a big marketplace, you still can leverage this feature well. Askmen.com does a clean job in delivering the experience. You can intensify it even more through speeding up the fade in, as in this demo on Github.
5 Let Shoppers See Instantly What Your Product Brings To Their Life With HTML 5
This is surely a trending design element that many sites use on home page, yet my favorite applications are with Nest.com that features its product experience on the product page more effectively (see the video).
6 Inform & Entertain At The Same Time With Dynamic Charts (if your product is complex)
If you have a product that does some kind of measuring and has differences in models, you can showcase its features via dynamic charts that show data and still have your hero product be in the view as an image or video to help customers visualize the usage. I have an example of the business site that does a good job (Zendesk, see the actual example of me – walking you through it). In my view, using this design technique, any fitness device brand can implement effectively in its demo and landing pages.
Here is a combination of dynamic charts and motion design from DailyBurn. Here is a video to see what I mean.
7 Simplify Choices With Card Design
Card design also came from Pinterest and Instagram experiences and can play on the habitual preferences of your audience (if they heavily use that platform) to interact similarly in your search pages. It is just easier for the eye to see what you offer as small stages, with its own show going on (minimalistic and simple mini booth for each product). Plus, it works well on mobile devices with no change of code required most of the times. My favorite examples are with desktop versions of JackThreads, Housen and Victoria Secret ecommerce sites.
8 Offer Image Altering To Visualize Opportunities
This feature must be a standard, yet not all retailers give it much focus. The idea is to instantly switch image color or model type on the hover or tab, without much clicking. In other words, it is not just a click switch, but getting the change experience to the micro level. See the difference among Zappos and ED by Ellen experiences: the former requires a click, the latter is a simple hover.
9 Experiment With Flat Material Design
Material, or flat design comes from Google “makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows”, thus arriving at the mix of following good design principles and giving the layout seem techy, scientific looking. See more specs from Google developers. For you as a site owner, it allows to create a specific look that is more prominent and obvious for the user interactivity.
Does it work for ecommerce? It depends. I have seen sites that use this principle from the branding perspective and they do not seem to benefit of any extra boosts in conversion, in fact, having it on the lower end, like Pebble example above (it has the elements of flat design). Yet, there are some that are super intuitive. My examples include Coloud Headphones and Muse Meditation Band.
Now, Flat Design is usually used by tech companies, yet here is a good application for a consumer food related business, Kitchit, where you can order a chef to your house party to cook for your guests and you, clean and go). Well done with balance, I’d say.
10 Invite Your Customers To Become Models For Your Products
Why not offer your shoppers to buy and then be featured in your product photos? This could be a good strategy to increase engagement for buys, reviews and social traffic. White House Black Market does that.
11 Offer To Buy More At Once
Or if you deal with repeat buyers, let them buy more, add it as an option.
11 + or 12 Refocus Attention With Motion Design
Sometimes, you need to bring the attention back to the item of choice and one way to do that is apply motion design elements in your pages. See what this site did, while displaying its headsets stock. Or the jewelry retailer, Charming Charlie, who used an element of suprise, having one picture suddenly change.