Better Product Pages Turn Visitors Into Customers
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Take a break with a 3D game built on Netlify!
Build skills. Boost ROI.
Click here to kickstart your project for free in a matter of minutes.
Start with a free demo —
Sponsor OWD on GitHubThe way you present your product or service is essential to its success — or at least it could be if you know how to do it right. On the Web, like anywhere else, the first impression you make on people is crucial. When selling a product, you want that first impression to be as positive and remarkable as possible.
Once people visit your website, make sure to attract their attention. If you have managed to draw them in, you will need to introduce the product within a few seconds. According to last year’s Google Analytics benchmarking report, bounce rates in the US were as high as 42.5%. If people don’t understand what you are offering them or how it works, they will lose interest quickly. Show them that your product is just what they want, that it’s useful and that it adds some kind of value to their lives.
Further Reading on SmashingMag:
- A User-Centric Guideline To Product Pages
- Creating A Client-Side Shopping Cart
- What Successful Products Teach Us About Web Design
A smart product presentation does all of that. Here, we will cover different aspects of a product presentation and give examples of how to use them to your advantage. The idea is to give you an overview of the different elements that make a product page successful.
Attract Attention
Before convincing anyone of the quality of your product, you need to make sure it gets noticed. No matter whether people are looking for your particular product, once you have caught their attention, you are in a good position to arouse their interest and get them engaged. The things you can do to catch the user’s eye are limited only by your creativity. Here are three examples that we believe are effective.
Stand Out From the Crowd
Countless companies and people freelance in the creative sectors, and all of them offer some kind of information about their services and prior work. Usually, you can browse portfolios to find a bunch of boring screenshots accompanied by even more boring information.
(Image: Chris Bower)
Web designer Chris Bower has found a unique and appealing way to demonstrate his expertise. His professional presentation of his work on various devices accomplishes three things. It is the ultimate eye-catcher on an otherwise clean website; it conveys the designer’s quality because it looks truly professional; and it shows that Chris designs for any device you can think of. With only a glance at his home page, you know whether to enter or leave the website.
Surprise Your Visitors
Another great way to attract attention is by surprising visitors. Offer them something they did not expect; make them pause and think to make sense of what they see. We like to be surrounded by the familiar, and things that don’t fit our expectations automatically draw our attention.
(Image: Nike)
Nike presents its new running shoes in the shape of wings, with the promise of a “Super-natural ride.” The arrangement of these multi-colored shoes and the fade in the middle almost force people to take a second look. The visual is not only appealing, but attracts attention because people are not sure whether they are looking at wings or shoes or both.
People Love Humor
Plenty of products out there are easy to promote, whether because of their function, popularity or unique look. Other products are less conducive to effective marketing and require a more creative approach.
(Image: Evian)
One such example is the brand Evian. How could boring water possibly attract attention? Quite simple, actually. Come up with a product-related slogan, such as “Live young,” and then translate that slogan into a visual campaign using some great humor. A couple of years back, Evian’s funny campaign videos went viral — proof that its unique approach works.
Explain The Product
The way you present the product is crucial to people’s first impression of both you and the product — including what they think of you and whether they understand the nature of the product. Online services and new products especially need clarification in order for the audience to make sense of them. Obviously, if people don’t get your product or understand why they would need it, they won’t pay for it.
Introduce the Product
With the ease of access to technologies such as the Internet, the number of inventions has significantly increased. Any ready idea nowadays can be turned into a product or service, but some of these ideas are so abstract that they require careful explanation.
(Image: Tickera)
The people behind Tickera recognized a need to carefully explain what their system is about. Their home page is simple, and the focus is on the product and its main features. Of course, a ticketing service is not a physical product that you can arrange nicely and take pictures of. But they did a great job of translating their service into a beautiful and trustworthy visual. With only a look, it becomes clear what Tickera is about.
How Does It Work?
Related to how you present the product is your explanation of how it works. Basically, you can do this by showing the product in action. And there is a big difference between showing a screenshot of software and showing the software on the device it is intended for.
(Image: Square)
Square is a perfect example of how to present a product and demonstrate what it is and how it works. The high-resolution image shows how simple collecting and processing credit-card payments on the go can be. All you need is the little Square card reader, an iPhone and the app — no words needed to convey the value of this product.
Convince People That They Need It
It could happen that people understand how your product works but don’t recognize its potential benefit to them. This is why you should point out the advantages that people will get from your product. People consider something to be more relevant if they can relate it to themselves.
(Image: Action Method)
The task-management tool Action Method focuses on its main advantage to the user: always being in sync. Seeing these different devices together, the visitor can see that this app could make life much easier for them. Perhaps they’re thinking about how annoying it is to take notes on a laptop and not be able to access them later on from a different device.
Focus On The Main Selling Point
Most products have many features but only a few or even one selling point that makes them special. Distancing yourself from competitors is important, whether through hardware features, design, service or something else. Point out this difference when presenting the product and show people that the product is different, special and better.
Quality
Quality is an effective selling point. And if the product costs a lot, people will want to be especially sure they are getting good quality in return. Competitors might offer the same product or feature but not the same quality. Reflect the quality of the product in your presentation of it.
(Image: Chanel)
Chanel present all of its products in high-resolution photographs. The images were obviously taken by professionals. The white watch above is bedded in perfectly white soft feathers. The image is extremely detailed, the viewer instantly gets a feel for the quality and luxury of the brand.
Features
Whatever your product, chances are high that at least one competitor offers something similar. To convince people that yours is the better choice, focus on features — particularly those that are relevant or essential to your target group.
(Image: HTC)
All smartphones basically offer the same functions. For example, they enable people to make calls, send messages and connect to the Internet. Instead of listing all of the things that all smartphones can do, HTC focuses on special features that are of concern to its target group: camera and sound.
Customization
People love products that have some personal meaning for them. That’s why we love to personalize our possessions, such as phone settings, laptop screens and clothing style. Customizing things helps us shape our identity, which is why customizable products are more special to us.
(Image: Converse)
Offer customization options to connect customers to your brand and products. Converse really makes a point that people can design their own sneakers. Being able to customize your own shoes definitely adds value to the brand.
Don’t Underestimate Copywriting
On the Web, our senses are limited. We send messages blindly, without looking our correspondent in the eyes. However, our limited senses should not limit our creativity. We can use more than plain images and text to make our point. Our message is shaped by our choice of words, typeface, font size and even punctuation.
Play With Words
Puns are a great way to attract attention because they wrap a message in a familiar concept. You are giving visitors something they recognize and are linking it to your own message. Wordplay can be used to explain a concept quickly and convey familiarity.
(Image: Apple)
Apple does this very effectively. It pioneered the tablet and puts everything into showing that it is the best in the field. The iPad 3 has a revolutionary display, which is the main selling point of this latest version. The pun “Resolutionary” is powerful and demonstrates in a single word the high quality of the product.
Don’t Get Too Serious
A good laugh helps people bond. You can surely think of more than one example of an inside joke that fostered a sense of connectedness and belonging. The same can be done online. A funny or ironic headline could be all you need to sell a product. Obviously, you can do both: bond with visitors and send a meaningful message.
(Image: Jax Vineyards)
A perfect example of a funny and powerful headline can be found on the website of Jax Vineyards: “Your food should be so lucky.” Of course, your food would not actually be lucky, no matter which wine you pair it with, but the idea of cherishing your food by choosing the right wine is appealing. Imagine spending hours preparing the perfect dinner; spoiling it with the wrong wine would be a shame, right?
Use Metaphors
Metaphors can bring copy — and, by extension, the product — to life. Metaphors help us understand the world around us and make sense of unfamiliar things. Abstract ideas such as the reason why your product is so special could also be easily explained with the right metaphor.
(Image: Adidas)
Adidas promotes its new running shoe with the slogan, “Sweat nothing, climacool seduction.” The melody of the words and the association triggered by the word “seduction” could easily cause us to misread the slogan as “Sweet nothing, climacool seduction.” The ad gains a risqué charm, giving off a light and comfortable feeling — perhaps acquiring an association with alluring lingerie. The link between running shoes and lingerie is not at all obvious, but it works brilliantly and transfers a positive and familiar association to a new line of running shoes.
Make Use of Context
The context in which you present a product is just as important as the product itself, if not more so. It is the space in which you show the product in action. It is the accumulation of associations that trigger emotions in customers. It draws people in and convinces them that they need your product.
Awake Desires
Motion pictures are a great way to draw people into a different world. Why else do we go to the movies, if not to escape our everyday lives and immerse ourselves in some romantic love story or surrealistic adventure? You can use the same effect on your customers and enable them to experience, say, the pleasure of a vacation.
(Image: Post Ranch Inn)
The 24-hour time-lapse video of the idyllic Post Ranch Inn gives visitors the feeling that they have already been there. The website takes you on a journey from sunrise to sunset, whisking you away from your desk on a long-awaited and deserved vacation.
Trigger positive emotions
You can also use a narrative or mascot to add value to the product. Focusing not on the product itself but on the emotions that come with it is a clever strategy. Customers might have plenty of options, but if you sell them the right feeling, they will be easily convinced.
(Image: Fanta)
Fanta uses animated characters who enjoy life to the fullest and have a lot of fun. The slogan “More Fanta. Less Serious.” communicates the idea that Fanta will relax you and let you have fun. There is no reference to the drink itself, such as ingredients. The only thing you see is the emotional triggers of happy characters and bright positive colors.
Appeal to Your Target Group
Every target group is different, with different interests, levels of knowledge, expectations and so on. Clearly define your target group to make sure you appeal to the right people. Defining a target group means truly understanding what makes them tick: their motivations, goals and habits. Only with a clear picture of who you are designing for will you be able to create a product that people really need and desire.
(Image: Olay)
Products like the age-defying line from Olay have a clearly defined target group: middle-aged women. Products for the body — especially related to sensitive subjects, such as aging — are considered intimate and require a high level of trust. Olay appeals to just that desire and presents its products in a professional yet familiar and trustworthy way.
Offer Sufficient Information
Factual information can be important to selling a product. People make rational decisions based on factual information, especially when purchasing expensive items — at least they like to think so. Factual information not only answers questions people might have about the product, but makes people more confident in their decision.
Highlight Advantages
Facts are a great way to point out a product’s advantages. Clear statements and factual information can be very convincing, and that’s what you intend to do at the end of the day, right?
(Image: Heineken)
You would not necessarily expect a beer brand to volunteer factual information. Yet Heineken presents its tap beer with clarity and sophistication. The information is given a serious and refined atmosphere, instead of Heineken’s usual fun style.
Make Detailed Information Optional
For some products, people really need certain information before being able to decide. This information could be a list of features, technical specifications or anything else. If your product requires such information, make sure people don’t have to hunt for it.
(Image: Viking)
Viking presents a high-resolution image along with a simple textual description. The first impression is very clean. Of course, when buying a lawn mower, a person needs more detailed information; thus, technical specifications and equipment details are neatly included in separate tabs.
Convince With Facts
Use facts to underpin the message that you are conveying visually. Information helps a person feel more confident if it confirms something they already feel.
(Image: Porsche)
No one really needs a sports car. But people do want them, and they buy them for leisure. Porsche uses a lot of great visuals to convey a feeling of speed, excitement and precision. Yet it also offers some information with these visuals — some, though, not much; just enough to underpin the emotions conveyed by the image: power, independence and luxury.
Conclusion
Whether you are selling a gadget, software, service or anything else, your presentation will have a direct impact on people’s first impression. And on the Web, which offers many choices and where people can leave your website in a mouse click, this first impression is crucial to your relationship with visitors and to gaining new customers.
A good presentation will draw the visitor’s attention, help them understand the product and even convince them to buy it. Use sketches, detailed illustrations or vivid photographs to communicate your message. Together with thoughtfully written copy, this presentation could well be the most important asset on your website.
Editor’s Note: This article was created using a new tool from Usabilla, that allows you to collect and discover design elements, like the ones presented in this article. Find more design elements at: discover.usabilla.com.
(al) (fi)
