- 51% of Americans prefer to shop online
- 96% of Americans with internet access have made an online purchase in their life, 80% in the past month alone
- E-commerce is growing 23% year-over-year, yet 46% of American small businesses do not have a website
- Online orders increase 8.9% in Q3 2016, but average order value (AOV) increased only 0.2% — indicating that transactional growth is outpacing total revenue.
1. Make the branding instantly visibleFrom the business perspective, branding is a crucial thing: it enables to provide a product, company or service with a recognizable face and personality. In general terms, branding means a sort of image created via a set of distinguishing features and promoting awareness and recognizability of the product or service on the market. Branding tends to be essential in an e-commerce user interface design, especially if stakeholders want to use the digital product as the additional flow of customer attraction. Moreover, identity integrated thoughtfully into the interface is the effective way to increase brand awareness. The time taken for proper market and user research, target audience definition, competition analysis and development of brand identity on the basis of all that data by a professional designer is a worthy investment. If that's done before launching the process of UI design, the product gets higher chances of becoming recognizable faster and easier. In this case, UI designer working on the interface, its color palette, shapes, types and fonts, illustrations and icons, will consider design solutions appropriate and corresponding to the general branding concept of the product that will make them mutually supporting each other. It provides more natural and harmonic feeling of the brand in general and the particular interface as an integral part of this brand. There are numerous ways to add branding to the interface, still some layout zones and elements which have the highest potential in this issue: Headers. In the article about website header design, we showed in detail that headers present the area of high visibility. So putting strategically important elements of branding in it is a good way to strengthen its memorability. Splash screens. In mobile applications, splash screen or welcome screen is the first screen seen by a user while the application is loading and starting. It's a good idea to use a logo, mascot or any other thing setting the instant visual connection with a brand. Moreover, adding a bit of wow-effect with slight stylish animation, it's easy to make the sign even more attractive and memorable. Preloaders and pull-to-refresh indicators. These are the elements which show the flow of the current loading process on the app or website. Branding applied elegantly in them can add much into the consistency of both UI and identity design. Mascots. Mascots are images, usually personified, which often represent the brand, product or service identity and can be its symbolic convention in all the application or website. Mascots push the limits of personification and give the chance to create the unexpected combinations of elements or make fantastic and non-existing characters alive. A mascot becomes the element of identity and inter-connector between the user and the product. In many cases, it is the basic element of communication and interaction delivering the necessary message to the user.
2. Set clear and easy navigation as the core taskIn the article on UX design for e-commerce, we stated: whatever an amazing website or app is, whatever the stylish and trendy design and breathtaking images it features, its success will be measured not by the number of «wows». The efficiency is analyzed simply - by the number of complete purchases. If users don’t buy, design means nothing while stakeholders lose their money. Clear intuitive navigation plays the premier violin here. At every step of interaction, users need to understand clearly plenty of simple things, like:
- what company or brand they are dealing with
- what page they are at
- where the menu is
- how they can get back to home page or catalog
- where the search and filters are
- how long the page-loading process is going to take
- how they can see the detailed information about the item
- how they can choose between the option for the same item (color, size etc.)
- how they can pay for the item
- how they can save the items they would like to get back to later
- how they can contact the seller
- how they can see the rating and reviews of previous buyers etc.
3. Check the scannability of the page or screenAs it was already mentioned, users don’t usually read and observe all the content on the page or screen from the starting point: instead, they start from quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles and laws of visual hierarchy, designers and information architects can put the core data and interaction elements to the zones of high and natural visibility. Calls to action (CTA), in particular, should be instantly seen in the first seconds on the page or screen. In the interfaces for e-commerce, CTA elements are the core factor of effective interaction with the product playing the crucial role in usability and navigability and therefore in getting profits. When all the path of interaction and transitions is built clearly for users but CTA element is not thought-out, placed or designed well, users can get confused and will need to take additional effort trying to achieve their goals. That increases the risk of poor conversion rate and general user experience.
4. Minimize user's efforts whenever it's possibleThe respect to the customer lies not in pouring out your thanks. The real respect is in saving users' time and effort day in and day out. Here are some design practices which can make the interface effort-saving: Show related products. Seen on the item page as recommendations close to the features of this particular product can make the process of search and browsing much faster for users. However, it's vital to check together with developers that this section really works according to the algorithm which shows suitable items, not random ones. Strive for a minimal number of clicks. If going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every users' click possible. Too many operations are tiring and annoying which is a kind of negative emotion. And emotions have a huge influence on user experience and make retaining users much harder. Minimize the number of clicks in the way of choosing and buying whenever it's possible - this way you respect user's time better than politest words of thanks. Simplify the sign-in process. Imagine the situation when you got to the amazing website selling the goods of your dream, and they are presented in such a stylish way that you want to buy them at once. But when you click the button "Buy", you are taken to the huge long from which you have to fill in to register on that website. That will cool down your hot wish to buy everything right here, right now, isn't it? You change from the state "Take my money, give me that" to "Really? 20 points to fill in before I can buy?" in split seconds. Not all the users will survive that transformation and the website or app will lose a part of buyers. So, it's necessary to make the sign-in/log-in process as simple as possible. User shape and color marking to group the items or types of content. Color and shape codes enable designers to apply Gestalt principle of similarity not only on one screen or page but on the whole app or website. Color or shape markers simplify navigation and keep the consistency of design enabling users to remember the prompts and find the content they want easily. For e-commerce platforms which are usually full of numerous items, it can make the interface much more user-friendly. Check that perception of the layout is natural and harmonic for the human eye. There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds or pages loading for ages - any point of that stuff can spoil the experience quickly and move users away.
6. Use landing pages for specific purposesFor business aims and profits rate, this tip may bring crucial changes. E-commerce UI design principles are usually based on dealing complex websites or apps which are filled in with a variety of information. So, the approach of directing all the traffic from outer sources to the home page can be a step killing profitability and reducing conversion rates. Users might get overwhelmed, distracted or even annoyed with the amount of data they have to process finding what they need, especially if they are focused on a particular narrow goal presented in the source they come from. Using landing pages when you need to concentrate user’s attention on something specific can solve this problem efficiently. Landing page is focused on one item, to make it quickly found and reduce delays when target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses.
7. Make the homepage informativeHome page can satisfy multiple functions: it’s a card of invitation, a starting point of the journey around the website, a storage of the vital links and data, and a strategic asset for marketing goals. In the majority of cases, it is the first visual and emotional touch to the website. Certainly, design is one of the core ways to make this touch gentle, smart and helpful. With all the progress the World Wide Web has witnessed, this position doesn’t change: home page often defines if a user goes further around the website, not only by beauty and style but first of all by information which is looked for. Making it accessible, noticeable and clear, designers grow the chances of positive user experience. In general, home page can include the following data:
- the nature of the website
- brand or company identity elements
- internal search
- links to the core interaction zones
- contact data and links to social networks
- signs of trust (testimonials, reviews, big numbers of presence in social networks etc)
- for e-commerce websites, it can be visual presentation of bestselling and/or exclusive items, for example, specific books, toys, clothing, equipment etc.
8. Apply high-quality images giving the messageImages take a big part in usability: as the vast majority of users are visually driven, images become the hook points of getting basic data about the website or app. They present the part of the content which is both informative and emotionally appealing. The level of detail and functionality allow classifying the images in user interfaces into types, among which: — photos: theme photos creating the appropriate mood and setting the message, demonstration photos, photos of the items, title photos for blog articles and pages of special offers etc. — illustrations: custom illustrations in graphic interface design can look both informative and original allowing the design to stand out of the competition. — hero banners: applied mostly in web design, they are big images which are usually the first visual element catching user’s attention in the initial seconds of interaction; they usually give the attractive visual presentation of the main content of the resource. — icons: these are small but meaningful pictograms which are informative and support data exchange between the informer and addressee. Icons play the key role in providing clear and intuitive navigation, but they should be checked on proper clarity and the absence of double meanings. — mascots: images, usually personified, representing the brand, product or service identity. — visual identity elements: various visual signs of branding like logos, custom lettering for brand name and/or slogan etc.
9. Think about promotional videos of different kindsThere are several common types of promotional videos:
- introduction video (the first insights on the company, product, or brand showing its benefits for users)
- product presentation videos (details about product’s features and advantages, special steps of interactions and the problem-solving potential of the product)
- landing page videos (strengthening the message driving users to a particular call-to-action offered on the page)
- video testimonials (the reasons and signs of trust and loyalty to the company, brand or product)
- entertaining and educational videos (rising emotional appeal and often presenting the material for viral marketing).