In all honesty, this type of question always makes me rethink my past design works. “Better” is defined by the ever-shifting preferences of the clients, the users, your boss, and the UI/UX standards, so the answers likewise change over time. As a UI/UX designer in the middle of a huge chain of e-commerce businesses, I understand how daunting this challenge can be, but by engaging with this question, we can better help our clients stand out.
First, we need to define ‘elements.’ In the field of e-commerce UI/UX, ‘elements’ refer to the many moving pieces and combinations that make up a web page or app interface such as images, copy, colors, and shapes. Larger elements such as buttons, product cards, menus, footers, etc. may have different functions, priorities, and meanings, but ultimately have similar goals of quickly attracting users’ attention, quickly expressing information, and facilitating the users’ decisions, all while firmly aligning with the brand.
Let’s dive deeper into these larger elements to understand how to improve. For each element, I’ll start by covering the basic rules before moving on to real examples that showcase more persuasive design elements.
1. CTA Buttons
In my opinion, buttons are the top priority of all UI/UX elements. Nearly 100% of your clients’ income online comes from buttons. Therefore, it is essential to create effective experiences through your button designs.
First of all, all buttons must have a certain consistency; all of your buttons will need to have the same height and their titles will need to have the same padding on all four borders of the button.
We all know common use cases such as a “Get Now” button in the hero slider, a “Shop Now” button on the product card, an “Add to Cart” button on the product page, a “Read More” button for any content section, a “Sign Up” in the newsletter section, etc. By making many different buttons consistent, you let the users understand without a doubt that these are the buttons that let them make certain actions or decisions.
An easy way to ensure your buttons always match is by making a quick style guide for your buttons, like the example below:
Of course, we also have some exceptions. In the example above, “Shop Now” and “Add to Cart” are very critical CTA buttons for buying, and thus utilize a bigger width in order to draw attention and facilitate an easier buying experience.
Secondly, it’s important to keep using the business’s branding colors on all the buttons. Take a look at this style guide from another business:
In this case, orange and blue are the primary brand colors and should be used as background colors for their buttons. These colors should then be paired with a contrasting color for the button title. Together, this ensures that the buttons can quickly draw the users’ attention compared to other elements on the page.
Thirdly, your design element should include a hover effect when the mouse is on top to show that users can press the button. Implementing a hover effect is as simple as changing the button’s background color to another or adding an obvious drop shadow. This micro-interactive action tells the user “You’re in the right spot. Go ahead and click!” However, at least 40% of today’s e-commerce websites still rely on a dead button on every page, which makes for a confusing user experience. One common pitfall to be cautious of when creating your hover effect is overly subtle differences from the default. Let the user feel that they are hovering. The hover state should also be clearly defined in your style guide like so:
2. Product Cards
Product cards are a crucial element of any e-commerce website. Customers spend time on your online shop to evaluate your products and make a purchasing decision, rather than examining the intricate website design. As the key element to any online storefront’s business, the product card must include essential information to facilitate the buying journey. This often includes the product image, product title, ratings or reviews, price, basic specs, CTA button, and more. Let’s break down the best practices for each piece of this element to understand how they improve the overall product card.
Product Image
A high-def, sharp, and clear product image is necessary. To keep this product image with the product itself stand out, a cut-off image is ideal. If the product is grouped with other products, create visual interest around the focal product and grey out the non-sell products to eliminate confusion. Then, include an additional lifestyle image when the user hovers over the product. This will demonstrate to customers how they can use and enjoy the product as well as the scale of the product. Needless to say, a lifestyle image serves as a vivid advertisement for your product and effectively draws customer attention.
Product Title
Be sure to use a combination of the key features or key specs for the product title. Anything that stands out for this product, such as “waterproof,” “3.5 x 5 inch,” or “Removable,” can be a part of the title as they communicate the important details without the user clicking on each product page.
Ratings or Reviews
Where possible, including ratings and the total number of client reviews for a product can improve the product card. Buyers are influenced by ratings, but only if there is a sufficient number of reviews. For example, a 4-star rating with 35 reviews will always be more persuasive than a 5-star rating with only two reviews. However, it’s unlikely that every single product will have high ratings or reviews, so it’s vital to ensure the most popular or most profitable products are front and center with accurate data. Remember to put yourself in the shoes of a picky customer when designing and consider how users will feel.
Price
The price tag should stand out on the product card. It should cluster to the corresponding product card with information that is clear and easily recognizable for your customers. We know the product cards should be shown in the list page as well, but be sure to separate price tags appropriately to prevent misunderstanding about which prices belong with which products.
More importantly, a better price tag will clearly show the unit price for any products that are sold by set, weight, case, etc. Nearly all customers will compare the unit price to similar products, including those sold by competing brands.
To improve your price tag element even further, be sure to show the Sale Price and Original Price on the product card. Make the Sale Price stand out by using your primary color and denote the Original Price with a strikethrough line in your secondary color for a clear comparison.
Basic Specs
Better-designed product cards will list key features, especially for any spec-driven products. Be sure to keep these features in separate lines instead of presenting them as a block of text to ease legibility. Bullet points are a great way to organize features and lead the user’s reading. Since the Title element may already include features, this key features list should either use the brand’s secondary color or be greyed out.
CTA Button
Keep in mind that customers won’t buy every product on a page at the same time, and will instead want to consider each specific product. Adding a CTA button to every product card’s default state will only create a busy and uncompelling list view. Instead, I recommend showing the CTA buttons when the customer’s mouse is on a specific product so that it stands out instantly. As discussed before, an effective CTA Button utilizes a significant hover effect to communicate usability to your site’s visitors. Similarly, a good product card design will also use a hover effect to assist user navigation by highlighting the product they are interested in.
It is important to note that the hint area should include the entire product card section, meaning that the image, title, description, and price should all be affected by hovering. We need to let the user get to their preferred product easily, rather than requiring a pixel-perfect hover on the image alone to see the desired effect. When a product card is hovered, a solid border frame or drop shadow should be shown to draw a clear line between the preferred product card and other cards. A CTA button reading “Add to Card,” “Choose Options,” etc. is effective, but I suggest avoiding a “Quick View” button. The overlay quick view window not only increases loading times on your list page but can also mislead customers into thinking they are currently on the product page, resulting in confusion when trying to browse other products.
Designers should create clearly defined guidelines about the default product card and hovering status to assist the development team in creating an easy-to-operate product card.
3. Navigation Menus
For better, more natural navigation menus, we’ll start with creating good category taxonomy. Different business fields and marketing strategies will have some impact on how to define and set the menu items. Here we’ll focus on UI/UX improvements we can make to the layout of navigation menus, though there are many more best practices to learn about taxonomy as a whole.
Better navigation menus tend to keep to the rule of flat navigation. This means that all first-level categories are shown in the main menu, reducing the number of steps as much as possible so that users will easily understand how to quickly reach their destination. Using a flat navigation menu allows the user always to see the scope of all products. Remember that when a customer browses your site, their intention is not to see each and every one of your product lines. Once they have filtered results down to the line they seek, they will ignore the rest of your menus.
In this example, Ironman 4x4 America puts all their categories in the very front of the navigation which makes it super easy for the customer to find the appropriate products, no matter their familiarity with your brand or site.
Similarly, MrTakeOutBags exemplifies the rule of flat navigation as well to showcase their main product lines directly.
As mentioned above, an e-commerce website is an online business first, so the navigation design should also follow general business and marketing principles. Successful e-commerce websites will have their key products or services listed in the main menu. MrTakeOutBags highlights “Custom” design options as a selling point of the brand and the style of the menu draws much more attention to this item. Both examples above also have “New Arrivals” and “Deals” options to let customers quickly get to popular sections, following the basic business trend of customers buying the newest or on-sale products first.
Make a clear indicator to distinguish between menu items that include submenus from those that don’t. So long as it is quick and understood by users, this indicator can be simple in design, such as a small arrow added to indicate items with sub-menus.
For menus that have sub-categories, a dropdown menu is needed regardless if it is a mega menu or a simple dropdown list.
Please also remember to use hover actions to trigger the submenus, rather than a click. Once the mouse is over any of the items with a submenu, it should show instantly and automatically. Don’t let the user waste time on clicking each one to open your submenus.
Additionally, better navigation menu designs will adopt some algorithms either to keep the submenu open for a little longer once the mouse is out of the hint area or to capture the trajectory of the mouse to determine if the gesture is leading to the submenu itself or another main category. Overall, a better navigation menu will eliminate any discomfort when users are browsing the submenus to allow them to open and stay on them more smoothly.
Always make sure your design is clear about which main category is dropped. You never want users to guess which subcategories belong to which main category. A great way to ensure this is by making the main menu in a different style to represent its opening.
The hovering effect should transfer to your submenus as well, albeit using a different style to indicate which submenu the user is on. If we use a mega menu design, I encourage showing a corresponding submenu image to give the user a solid understanding of which subcategory they have selected.
Grouping the submenus according to specific business or marketing rules is very important to an e-commerce website with a large scale of product lines. A great submenu not only arranges information in a way that cleans up and sorts all product lines effectively for users, but also represents the business as professional and trustworthy.
I also recommend using representative images to showcase each group to bring users a better understanding of your products and brand.
Another practice to consider when designing your navigation is a sticky menu. A sticky menu retains the navigation at the top of the browser window as the user scrolls down a page so they can quickly navigate elsewhere on your site if they change their mind or want to browse.
4. Footer
A well-designed footer can bring much more value to an e-commerce business than you might expect. After the header, this is your next best anchor to keep customers on your website and engaged with your brand or services.
To create a better footer, we first have to consider the brand guidelines as a whole. Here we have another opportunity to emphasize the brand’s logo, colors, and font styling.
Make sure all footer links are grouped and arranged properly. There should be at least four groups of links in the footer:
-
Product Categories: This should ideally include your main categories and first level of sub-categories.
-
Services and Terms: This encompasses logistical items such as shipping, returns, a privacy policy, account settings, and more.
-
Company: This covers information about the company, branded blogs, careers, and so on.
-
Contact Info and Social Media Links: This section contains contact information for support and links to external social media profiles.
Aside from those four groups, footers are also a great place to include the payment methods that are accepted by the e-commerce website or newsletter signup.
To stay on brand, we can introduce more complex elements to the footer as well. For example, a theme background image to emphasize the style and character of the website or CTAs for the business’s best-selling products and services.
Here are some great examples of fully functional footers:
With that, I bring this list to a close. Though I dove deep into how designers can improve elements such as product cards, CTA buttons, navigation menus, and footers, we’ve barely scratched the surface of great web design. There are still many other moving parts to a website that we can improve on to effectively grab customer attention and boost an online business.
As they have in the past, best practices will vary from business to business, especially as customers continue to evolve. However, these basic rules are fairly stable and unlikely to change anytime soon: to design better elements, aim to attract user attention quickly, express information clearly, help customers make decisions easily, and stay true to the brand.
Curious about why brand identity is so vital to creating great elements? Check out our blog post on why branding matters to learn more or reach out to us directly at info@arcticleaf.io.
Arctic Leaf is a digital agency with over 10 years of e-commerce experience serving clients of all industries. Our entire team is Baymard UX certified and our amazing developers can build everything from simple Shopify themes to fully custom headless experiences.
