(This is a sponsored article.) More than ever, people are engaging with their phones in crucial moments. The average US user spends 5 hours per day on mobile. The vast majority of that time is spent in apps and on websites.
The difference between a good app and a bad app is usually the quality of its user experience (UX). A good UX is what separates successful apps from unsuccessful ones.
Designing the best experience is a challenge, and every designer and developer has their own way of tackling it. But, well, no matter how different our approaches are, one thing is for sure: We can learn a lot from each other.
To give you your dose of UX inspiration, we are happy to announce that our dear friends at Adobe, are streaming live from the Awwwards Conference which will take place in Berlin on February 8th and 9th.
Earlier this year, support for CSS grid layout landed in most major desktop browsers. Naturally, the specification is one of the hot topics at meet-ups and conferences. After having some conversations about grid and progressive enhancement, I believe that there’s a good amount of uncertainty about using it. I heard some quite interesting questions and statements, which I want to address in this post.
“When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.
Editor’s Note: Making big changes doesn’t necessarily require big efforts — it’s just a matter of moving in the right direction. We can’t wait for Paul’s new book on User Experience Revolution (free worldwide shipping starting from April 18!), and in this article, Paul shares just some of the little tricks and techniques to bring around a big UX revolution into your company — with a series of small, effective steps.
The two charts pictured below changed the way I think about thinking. Rebproduced from a classic 1996 psychology study, the story behind these charts is a vivid illustration that the way we humans feel in the moment as we experience the world can be very different from how we feel when we think back on those experiences later. Understanding the difference between experience and memory — and the ways they are related — can make us more sophisticated experience designers.
Released in March this year, Adobe Experience Design is a new all-in-one tool that lets you design and prototype websites and mobile apps. XD is still in beta and available for Mac with a Windows version on track for a release later in 2016. It is bound to provide a fast and efficient way to create new user interfaces, wireframes, and visual designs with various devices in mind.
As an icon creator, I tried to use XD to create icons from scratch and to apply them to a new user interface. In this tutorial, I want to guide you through the steps it took so you can follow along. We’ll take a look at how to create a set of office icons for a new app. Plus, I’m going to show you how you can use XD’s features to interact with your newly-created user interfaces during the prototyping phase. So, let’s get started.
Apps and devices designed to improve people’s health are becoming more pervasive. I serve as VP, Director of User Experience, in the New York office of a global agency with both healthcare and consumer clients. During my 13 years of working in the healthcare space I have never before had such a rich opportunity to directly affect health behavior.
In this article I’ll guide you through best practices when designing consumer-facing healthcare apps. (We’re not covering medical devices that need to be approved by authorities.) We’ll explore how to plan and conduct research, design moments of delight, integrate data from third-party devices and develop a messaging matrix. We’ll also look at examples of apps live in the wild that have been designed for delight at every moment of interaction.
Product pages are the doorways that lead to conversions and revenue for an eCommerce store. A good product page plays a pivotal role in taking a customer from just browsing to actually adding the product to the cart. Most eCommerce websites, therefore, invest a significant portion of their time and money in making their product pages more attractive and persuasive.
But then, how do you do this?
Essentially, it comes down to creating a great User Experience for your customer. An effective User Experience (UX) requires relevant and useful information designed in a manner which takes the customer seamlessly through the buying process. In this blog post, we are going to talk about 15 product page elements that add to the UX for your product pages and makes them high-converting. You will be familiar with most, if not all, of these. My intention here is to create a short checklist for every element that you can use to optimize that element. There’s also a surprise for you at the end of this post, so hold on!
1) Product Name
Product Name should be descriptive. This gives more clarity to the customer as well as boosts SEO for that page. For example, ’24 Carat Gold Ring’ is much more descriptive and SEO-friendly than ‘Gold Ring’
The name should be unique. This sounds like common sense but you’ll be surprised by how often eCommerce websites give similar names to their products which makes finding them through search really difficult. Needless to say, this also negatively affects the SEO for the products.
2) Call to Action (CTA) Button
This is the most important element on any product page. The CTA affects the decision – making of the customer through its size, color and text. Thus, marketers should pay significant attention to optimizing all these aspects.
Different colors denote different things across different cultures. When deciding on color, keep in mind two things. Firstly, whether that color triggers the emotion in your target audience that you are hoping for. And secondly, how does it contrast with the color scheme of the rest of the page. Ideally, you want the CTA to stand out so that it grabs customer attention.
When deciding on the text, keep in mind that certain words mean different things in different countries. For example, see how Amazon changes the CTA text on its US and UK websites to adhere to the local flavor.
Amazon US Page
Amazon UK Page
3) Product Price
Understandably, this is the least controllable of the page elements. As a marketer, your main focus should be the appearance of the price tag.
The price should be placed close to the Buy button. In fact, the product name, price and CTA should form a kind of visual hierarchy so that the act of buying flows seamlessly in the mind of the customer.
Use multiple images clicked from different angles to give the overall look of the product.
Use inspirational product images (product image used in a setting; for example, a customer wearing the dress that is displayed on the product page). These images add social proof as well as make the product more desirable.
5) Product Description
Keep product descriptions short and make sure to include important keywords so that the page ranks well in search engine rankings
6) Quantity Option
Quantity option takes a very small amount of screen real estate but can lead to a bigger sale. For example, if I want to buy 5 copies of a book, I shouldn’t be forced to go to the page and click 5 times on the ‘Buy’ button. Not having this element means you are potentially leaving a lot of money on the table.
It should be placed near the CTA.
7) Product Reviews & Testimonials
According to an iPerceptions study, 61% of customers read online reviews before making a purchase decision, while 63% of customers are more likely to make a purchase from a site which has user reviews.
The problem with having reviews on your product pages is that so many pages just have so few reviews. This can result in negative social proof. To combat this, follow the eBay model of buyer/seller feedback. That means, as soon as someone purchases a product, send them an email asking for feedback about the product. Many customers feel that such feedback request is part of the buying process and they are more likely to fill in the feedback form. This will ensure that your review section is filled.
Ask people to rate reviews. This ensures that the most helpful reviews rise to the top.
8) ‘Add to Wish List’
This option is particularly helpful in case of indecisive customers who are evaluating your product. Also, while browsing, some customers may stumble upon a product which they like but are not yet ready to buy. This option gives them the flexibility to ‘bookmark’ the product to which they can return later.
9) Cost Savings
Many times, if a product has been discounted, the product page shows the original price along with the discounted price. This is a smart trick used by marketers to cash in on the loss aversion tendency of people.
Show both the percentage saving as well as the actual saving made on the product. Different customers are induced by different messages.
10) Cross-selling & Up-selling Options
As a business owner, you want the user to purchase add-ons, related products and accessories of the products they buy. One way to achieve this is to provide good options for up-selling and cross-selling on the product pages.
Good suggestions for similar and related products not only improve the browsing experience but also aid in product exploration.
11) Social Media Integration
Social media buttons provides the friends/followers with social proof, which may result in increased purchases of the same item.
It helps to spread brand awareness.
It may also increase traffic on your website which will help in increase in overall sales, quite apart from the particular product which has been shared.
Keep in mind, however, that if the number of likes and share are too few in number, it may result in negative social proof.
12) Delivery & Returns Information
Nothing is more irritating to a customer than selecting a product, making a purchase and reaching the checkout section only to discover the addition of unexpectedly high delivery charges and hidden taxes.
Posting the total cost on the product page eliminates the surprise of a high shipping cost and also lets the customer factor in the total cost before adding the product to the cart.
13) Live Chat Widget
According to an Econsultancy report, Live chat has the highest satisfaction levels for any customer service channel, with 73%, compared with 61% for email and 44% for phone.
Often times people have questions that may not have been answered in the product description or in the customer reviews. If you force them to guess, or leave them wondering, they are going to leave and find the answer to their question elsewhere.
14) Product Videos
Visuals work much better than text when it comes to conveying a message. Many eCommerce sites are using videos in different ways to improve customer understanding
of their products as well as make their content more engaging and intimate. SixPackAbsExercises.com, a VWO customer, A/B tested videos on the sales page which resulted in increased conversions by 46%.
Videos also help the customers to gain a more intimate understanding of product look as well as functionality.
If you decide to have videos on your website, you may also look at having transcripts for the
videos. These not only ensure that viewers with hearing disability can access your video content, it also improves the SEO for that video.
Breadcrumb navigation helps the user to understand the product hierarchy as well as navigate to other areas of interest. They are also known to reduce bounce rates.
That’s it! One last piece of advice: keep testing. One thing that we at VWO have learned over the years is never to trust experts. The best way to improve product page performance is to keep testing out new ideas and concepts with A/B testing and keep optimizing your product pages.
Now it’s time for the surprise we told you about. We’ve designed a beautiful eCommerce product page template for you which employs many of the elements we just talked about. Scroll down to see it.
We have designed 4 more templates specially for you. Click on the button below to get a free eBook on ’5 eCommerce Product Page Templates to Boost your Sales and Conversions”.
Nowadays, displaying onboarding screens to first-time users has become a common practice in mobile apps. The purpose of these onboarding screens — also referred to as walkthroughs — is to introduce the app and demonstrate what it does.
Given that these are often the first set of screens with which users interact, they also set the users’ expectations of the app. Therefore, it is essential that those involved in creating the product — product managers, designers, developers — take the time to evaluate whether onboarding is necessary for the app and, if so, to determine the best way to implement it.