How to Design UI for an Ecommerce App
No matter how new technologies change our lifestyle, people will always shop. Developing and designing mobile apps for ecommerce businesses has its own tricks. And online shopping follows adheres to the same principles as offline shopping. If customers don’t like what they see, they won’t buy. That’s why intuitive interfaces and catchy designs are invaluable for any ecommerce app.
Here at Yalantis our designers take a consumer-centered approach. We analyse user behaviour and design apps that cater to our users needs. For this article, we asked our design department to share their tips and tricks for designing an ideal ecommerce app.
Ecommerce apps contain three essential components: a catalogue (list of goods), search and filter options, and a shopping cart (or checkout).
A Catalogue or List of Goods
How do users wish to browse your product catalogue? Running A/B testing can reveal how your customers prefer to interact with your store’s app. Here are a few tips we can offer to help you design an effective catalogue:
Hick’s law says that every additional choice increases the time required to make a decision. Paring down the number of items in your menus can have a direct influence on conversion rates, since users will not feel overwhelmed by too many options. Organize all menu elements according to the principle of visual hierarchy.
The principle of visual hierarchy says that by using color, contrast, texture, shape, position, and size, you can organize elements on a page so that users instantly understand which object is the most important.
- Increase the size of select items, and display them one at a time.
In ecommerce, fewer is often better. Our attention spans are limited, and we cannot adequately take in a huge grid of items simultaneously. A study about ecommerce conducted by Visual Website Optimizer showed that increasing the size of product images can increase conversion rates by as much as 10%.
Read also: 5 design tricks to succeed in 2016
[Clothing Shop App by Yalantis]
The image showcasing this jacket has been enlarged in the right-hand screenshot, and other visual elements have been removed to provide greater focus.
In fashion/style apps, as well as in ecommerce apps, there are generally two types of filters. One is very broad ( for example, men’s/women’s/kids’), the other much more specific. The crucial question is not whether filters are important, but rather how to arrange filters in an optimal way to increase sales.
Research shows that the price button is arguably the most “clickable” among all filter buttons: if you were to look at your app screen using heat maps, the price button would be bright. Price is followed in order of significance by size, color, and materials.
In the example below, color, size, and price are shown in a line and given equal visual emphasis. Such a filter is simple to use.
[Fashion app by Yalantis]
This animation illustrates a showroom for a high-end fashion brand that offers a luxurious shopping experience. Notice that with this approach we chose large cards to present each item individually. This imitates the feel of an expensive boutique.
Shopping Cart or Checkout
There are four steps that characterize the final stages of any shopping experience: adding items to a cart, reviewing the cart, choosing a payment option, and processing payment.
Therefore, the next logical step after filtering search results is to move a user’s attention to the “Add to Cart” button. Making “Add to the Cart” stand out against the background of your app and stand out from other buttons is essential. You can accomplish this in several ways: by focusing on the button’s size, color, transparency, or position on the page.
In our design below we chose a green button against a white background. A white background is often the best choice for ecommerce apps, as it prevents your app from becoming too cluttered with shapes and colors. Additionally, a white background does not distort any color displayed against it. Green is subconsciously associated with positive emotions and approval, and so we selected a green “Add to Cart” button to motivate our customers.
[Filters for a fashion app designed by Yalantis]
Placing the “Add to Cart” button in the middle of the screen can also be a wise choice considering that around 20% of your users will be left-handed. Placing the button in the center makes it equally convenient to reach for both right-handed and left-handed customers.
The Shopping Cart Screen
The final destination for a customer in any ecommerce app is the shopping cart. The cart is an extremely important element because it is a key point at which customers may abandon their mobile shopping. If too much time is required in-cart, then customers are likely to leave an app. When this happens, it’s likely that they won’t come back and complete the order later.
What are the elements of a well-designed shopping cart? Your shopping cart should include such elements as a product summary, a field for promo codes, several payment options, several shipping methods, final pricing, and buttons to continue shopping or proceed to checkout. Depending on the platform your app is running on and your target market, you may opt to include other elements as well, but these are the basic set of features that represent your starting point.
[Pay with Apple Pay screen designed by Yalantis]
The animation above illustrates a well-thought-out shopping cart design: it gives the feeling of a spacious store filled with luxury goods. The calm, subtle color scheme is ideal for women’s fashion shopping.
Customers expect multiple payment options. They also expect a quick and secure checkout. The animation above assumes that a customer will pay for their goods with Apple Pay.
Why Apple Pay and not some more traditional payment options? One reason is because Apple Pay requires fewer steps for a customer to complete the purchase. Customers don’t need to type in all their credit card information (such as credit card number and expiration date). Paying with Apple Pay requires only choosing a credit card and touching the home button to confirm the transaction with Touch ID.
Why is simplifying the payment process so crucial for mobile ecommerce?
People who shop using their mobile phones don’t want to be burdened by the laborious process of registering a new account. A recent customer behavior study showed that 14 percent of users didn’t want to create an account with an online shop and 11 percent don’t want to share much personal information. The long and the short of it is that if you require your customers to register their credit card information or leave their email before they can even add an item to the cart, your conversion rate will be disastrous.
What important tips about mobile ecommerce design should you take home?
- Simplify your menus.
- Opt for fewer images of a larger size.
- Carefully consider which filters are most critical for your products, and then make them stand out.
- Use visual hierarchy to make your Add to Cart button impossible to miss.
- Determine the most convenient payment options for your customers (run a\b testing if you are not sure).
- Use bold notifications or an animation to indicate that the order is being processed. People want to know at every instance that your app has not crashed and that something is happening — especially when their payment is being processed.
Designing ecommerce or fashion apps is all about turning online shopping into the joyful experience that real shopping can be in a high-end shop. Make the shopping experience fun for your customers! Being limited by the size of mobile screens, designers have to think hard to make the user interface of shopping apps simple, intuitive and visually appealing.
Our designers have learned these principles from their own experience. Follow their tips and your customers are sure to love your fashion app!
Originally published at yalantis.com.