We help you sell more | Request a Free Quote
1-888-553-8776
Marina Lippincott
Theme Features Every Client Will Request for their Websites
When a new clients starts thinking about a potential redesign for their Shopify store, they’ll often have a wish list: sliding full screen images; animated image popups, and Instagram feeds scrolling across the page.
In order to understand why clients are after this stuff, one has to start asking questions why? Most of the time is from seeing these thing on the sites of a competitor.
Not this is a bad thing. Consumers often have certain expectations on how sites should look and behave when shopping online. That’s why all high-end UK fashion stores look exactly the same.
Therefore; when a client wants to sell in the clothing brand space, where everyone offers a lightbox to zoom in and cycle through photos of their products, one doesn’t think it’s the worst idea to follow suit.
Too often the client’s ideas actually constitute a “Frankenlist”, a set of features cobbled together from every website they’ve seen without any real though behind how they should work on their site, or why they’re there in the first place.
HOW TO WORK WITH FRANKENLISTS
In this article, we’re going to pick out four things that are commonly seen on Frankenlists, and try to provide suggestions on working out when and how to best implement them in a way that complements your client’s site.
Carousels
Clients love carousels. They love them almost as much as designers love to bash them. They’re popular because they allow the inclusion of more content without taking up lots of space. They are flashy and add a bite of animated spice on the page. And all the competition is using them.
Here’s the problem. Carousels are pretty sucky when it comes to user experience and accessibility. Jared Smith, a usability expert, has a good overview of the issues with carousels on his site Should I Use A Carousel?
When a carousel comes up as as potential feature for a thee, the first thing I try to do is understand why? If its because it “look cool” or is “standard”, it’s a good idea to present an alternative way to present the same content in a wireframe or mockup. Often, you can meet the business needs of a client without introducing the usability issues of a carousel.
There are situations where you decide a carousel is the way to go, if a client twists your arm. In these cases, here are a couple of implementation suggestions:
-Use high quality images that render well on retina screens, and are all the same size.
-Use text labels to allow navigation between slides, instead of ambiguous “dots.”
-Don’t automatically animate slide transitions. In fact, turn off automatic animation when the user moves their mouse over the carousel.
-Mark up your carousel with WAI-ARIA attributes to improve their accessibility.
Newsletter Popups
Now that more store owners are realizing the importance of a large, engaged email list, ecommerce stores are getting more and more aggressive in their push to collect visitors email addresses. This has led to the rise of the “Newsletter Popup”, a floating box that appears when a visitor first arrives on your site, asking for their email address.
Oftentimes, when browsing the web, some people find these things incredibly annoying and will almost never subscribe.
Oddly, the data generally suggests that these thing works, and it’s pretty difficult to argue with data. Ultimately, if your client is going to see a lot of value from building their email list, then some form of popup is probably going to be useful.
Here are a couple of thing to remember:
-Offer an easily understandable value proposition. “Newsletter subscribers get 15% off everything. Join now is better than subscribe to our list, especially for visitors landing on your page for the first time.
-As at the right time. Instead of throwing the box up in their face as soon as they land on your page, remember the timing it to display when they’ve already shown some interest in your site. Generally after a certain time period, or after they’ve scrolled through 60% of an article page.
Respect the user. If a user dismisses your popup, don’t show it to them again on the next page they visit. You won’t get their email address, and you won’t get their business either.
Holistically measure. Don’t just look at the effect the popup has on your email signup rate. Also measure any impact it may have on your store’s overall conversion rate.
Fancy Navigation
The most important design consideration for an ecommerce store is working out how customers are going to find their way around the site. It’s not only important for people to be able to easily find their way to the products they’re interested in, but also to have a good sens of where they are at any point in time.
The biggest problems I see with ecommerce navigation occur when store owners pick up a navigation system they like from another store and wedge it in to their own without considering their own customers and use case.
A common navigation pattern is the “mega menu”. A dropdown fro a header menu that provides a large number of subcategories.
This pattern works well for retailers with large product ranges, where categories need to be broken down into subcategories which themselves may have dozens of products. However; the mega menu is not a good idea when you don’t have many products.
You should follow these basic rules:
Navigation should be designed for your customers. Categorize products in ways that make sense for visitors. For instance, “Men’s Fashion”/”Women’s Fashion” for a clothes brand.
Make a product search box available. It should be friendly and easy to use. So if a customer is confused by your navigation, they can always fall back to the search.
Make certain that your navigation works on mobile and tablet devices. With over 50% of ecommerce traffic on these devices, you want to make sure navigating your site is easy for mobile users as well.
If you use categories and subcategories, make use of breadcrumb navigation to help customers understand where they are in your site and how to get back to higher levels.
Lightboxes
High-quality product photos are an essential part of almost every successful online store, therefore; it’s natural for clients to want to show them off. Lightboxes are a common way for stores to let their customers get a closer look at their products, without taking the out of the flow of the purchase process.
A couple of tips to make your lightboxes work well:
-Use progressive enhancement. If a customer has Javascript turned off, or if something goes wrong, the basic functionality of your light box, allowing the customer to see a larger version of a product image, should still work. The best way to do this is to start by having your light box trigger elements as simple links to a larger version of the image that opens in a new window, then have your Javascript progressively enhance those links to add light box functionality.
-Consider using this default behavior on mobile devices, where light boxes are generally less useful, as the regular images displayed on your product pages are often going to be nearly full screen to begin with.
-Make sure it’s keyboard accessible. You may expect visitors to open a lightbox using their mouse or a tap, but that doesn’t mean that should be the only way to interact with your images.
-Customers should be able to close your lightbox using the Escape key, as well as be able to navigate through multiple images using the arrow keys.
-Don’t break the user flow. Remember that a lightbox is a tool to aid in your overall goal of getting the customer to the checkout. A lightbox that spends too much time on flashy animation or makes a customer lose their place on the page has the potential to hurt rather than help sales.
When your lightbox opens, it should be clear to the customer how they can close the box, navigate through multiple images, and proceed with adding the product they’re looking at to their cart.
Recent Projects
Tech-savvy and innovative, Marina is a full-stack developer with a passion for crafting seamless digital experiences. From intuitive front-end designs to rock-solid back-end solutions, she brings ideas to life with code. A problem-solver at heart, she thrives on challenges and is always exploring the latest tech trends to stay ahead of the curve. When she's not coding, you'll find her brainstorming the next big thing or mentoring others to unlock their tech potential.
