Wednesday, July 25, 2012

Thinking with Type | Contents

Thinking with Type | Contents

Mixing Typefaces: Single-Family and Multi-Family

Mixing Typefaces: The Small Print

the word: new york magazine Design: Chris Dixon, 2010. This content-intensive page detail mixes four different type families from various points in history, ranging from the early advertising face Egyptian Bold Condensed to the functional contemporary sans Verlag. These diverse ingredients are mixed here at different scales to create typographic tension and contrast.

Tuesday, July 24, 2012

Let’s Make The Web Faster: A Guest Post by Gareth Williams � Green Room � Guest Posts � Rock n Roll Bride

Let’s Make The Web Faster: A Guest Post by Gareth Williams � Green Room � Guest Posts � Rock n Roll Bride

I’ve since come to realise our website had been getting marginally slower month by month. But because Team Rock n Roll Bride has reasonably powerful computers and super-fast Internet access we never noticed it directly. It wasn’t until I was trying to load the site on a slightly outdated laptop and over a slower connection that I first became aware. And just think, as smart phones, tablets and 3G become more prevalent a light-weight, blazing-fast website is increasingly important.
So, over the last month I have been up to my elbows learning about the surprisingly complex world of page load times and I’ve picked up a few tricks which I think almost every small business could benefit from.

Benchmarking

To find out how fast (or slow) your website really is you need to gather some data. My two favourite tools for this job are Google Analytics and Google Chrome. This is where it starts to get interesting, or tricky… depending on your perspective.

Google Analytics

Around November 2011 Google Analytics started collecting page load times from approximately 1% of all visitors. This means, as long as you are using Analytics, you have some data available to you right now! Just go into your reports and choose Content > Site Speed > Overview to see the graph. The problem with this is, even with our not-insignificant traffic, a 1% sample rate creates a very erratic graph. A visitor from Uganda is going to have a much slow experience than one from the UK, for example.
The only way to get anything useful out of this data is to aggregate it by month rather than day. Fortunately, Google give us the ability to increase the sample rate up to 100%. To make this change you will need to add a line to your Analytics code. Let’s take a look at a typical Analytics tracking script with the extra option defined:
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxx-x'],
    ['_setSiteSpeedSampleRate', 100],
    ['_trackPageview']);
  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
</script>

The new option can be seen on the fourth line and is called ‘_setSiteSpeedSampleRate’. For the more technically inclined further information about this method is available from the Google Developers site. If your Analytics tracking code was added by a more techy partner or a third party, you’ll likely want them to make this adjustment too.
With this implemented Google Analytics will give us great data about page load times. Using the built-in reports we can drill down to locate individual pages which are too slow, we can compare page load time by country and we can monitor how any changes we make in the future affect the rest of our visitors. I also recommend you download this great custom Dashboard for Analytics from Google. It gives you tons of really useful metrics at a glance. We now have no excuse to sit ignorantly behind our quad-core processors and 30” displays while Joe Bloggs struggles to scroll our enormous pages up and down on his grandma’s Packard Bell.

Google Chrome

Analytics is a great tool for telling you about your visitors’ activity on your site but we also need to understand how our own sites fit into the greater eco-system. How does your photography website compare to your nearest competitors’, for example? Perhaps you don’t need to worry about having the fastest site on the Internet, it might be enough just to be the fastest among your peers. Remember, if you and I are being chased across the plains by a lion I don’t need to outrun the lion, I just need to outrun you.
A really great way to benchmark your own site against others is simply to use the Google Chrome web browser.
Open your website in Google Chrome then press F12 on your keyboard to access the Chrome Developer Tools. In the DevTools window click the gear icon at the bottom right to bring up the settings dialogue. For now I suggest you just ensure ‘Disable cache’ is ticked so that your measurements will reflect those of a new visitor; a returning visitor does not typically need to re-download all the elements on your webpage. This should give us nice, repeatable, worst-case scenario data.
Close the settings dialogue and click the ‘Network’ icon at the top of the window. Now you’re ready to get timing! Switch back to the main Chrome window and refresh your website. When it finishes loading switch back to the DevTools window to see the results.
There’s quite a lot of data presented in the DevTools Network tab but for now you can ignore most of it. We’re really only interested in the timing data at the bottom of the window.
The image above is a sample of this site taken using the above settings. The particular area I want you to focus on is the grey bar at the bottom of the window. The first thing it tells us is that loading this webpage results in 103 separate requests. These requests will typically be images, JavaScript or external CSS files. At this stage, you don’t need to worry too much about what the requests are just know that more of them is bad; they are expensive, time-wise. And importantly smart phones and tablets will be more noticeably affected by them.
The next number on the grey bar is the total download size. Here you can see our homepage is 3.26MB. This will fluctuate slightly as the posts rotate and the images change but sits steadily in the low 3MB range. In case you get curious, the ‘three minute blog’ I mentioned earlier came in around 70MB.
The third number is the money shot, this one tells us how long the web page took to load. So here we have a surprisingly good result of 1.68 seconds. The two numbers in brackets give a little more detail about the load time by indicating when the web browser reached various stages in the load. Don’t worry about those for now.
Having measured how fast your computer can download your site it’s simply a matter of loading other people’s websites to get their vital statistics for comparison. When doing these tests bear in mind that any activity on your Internet connection will skew the results, e.g. streaming music. For the best accuracy you will also want to repeat the test several times for each site and calculate averages.
Feel free to leave a note in the comments with your page times and a link to your site. It could come in useful to have a record of it for comparison. If you’d like to time Rock n Roll Bride for yourself and put your results in the comment too that’s fine by me!
There are lots of other tools and services available online but Analytics and Chrome are the two I’m reaching for on a daily basis because of their ease of use and the richness of the data they provide. Remember, you don’t need to outrun the lion. Well, not just yet anyway.
Set a reminder to come back next Tuesday to read my follow-up post where we’ll learn how to advance from observation stage to making the first changes towards building a faster web.

Saturday, July 14, 2012

Why Landing Page Videos Lead To Phenomenal Results – The Daily Egg

Why Landing Page Videos Lead To Phenomenal Results – The Daily Egg

9 Ways To Turn Web Video Into Your #1 Sales Tool – The Daily Egg

9 Ways To Turn Web Video Into Your #1 Sales Tool – The Daily Egg


According to a 2011 Content Marketing Institute study, 90% of B2B marketers do some form of content marketing, whether they realize it or not.


More importantly, 60% of B2B marketers plan to spend more on content marketing in the next year. As interest in content marketing continues to rise, so does interest in video as a sales tool. In fact, 53.5% (and 70.8% of Internet users) will watch videos online in 2012. That’s a 7.1% increase from 2011!


Here’s how you can turn video into your number one sales tool. (Oh, you didn’t know? Video is also Content Marketing)


1. Hardwired to Watch



You’ve heard it before and you’ll hear it again: our brains are hardwired to respond to visual stimulation. We already know that research shows that nearly half the population learns visually. If given the choice between reading a full page of content and watching a 60-second explainer video, the video would win out every time. Not only is it faster to watch a video than read written content, but we retain more information when our brains are both verbally and visually stimulated.


Use this natural predisposition to video to your advantage. A simple video introducing your product or service can go a long way. Place it on your landing page and watch conversions increase.


2. Short and Sweet



We also know that the average person will spend 2.7 minutes watching an Internet video. Still, the idea is to ensure everyone watches your video from start to finish, so it’s best to keep your video short and sweet. We typically recommend between 60 and 90 seconds for best results.


By staying well below the average, you ensure that you have the potential to hold everyone’s attention. Plus, 60 seconds means 140 to 160 words. That script restriction means only your most important (and powerful) benefits make the video.


3. Make the Call Pop



Your script and visual effects will be the focus for the majority of the video, but they won’t turn your viewers into customers. What truly increases sales is a fantastic call to action at the end of the video. Just as it is on a landing page, a video call to action is what pushes visitors into the sales funnel. The best calls to action tie into the theme of the video while still standing out.


For example, Comet’s whiteboard style explainer video has an effective call to action. The logo and tagline are visible for a full 10 seconds. All of the whiteboard elements from earlier in the video surround the branded info, bringing the entire video full circle. Also, the voiceover narrator clearly defines the next step for the viewer: contact Comet to discuss potential solutions.


For even better results, use tools that allow you to add links to your video content. For example, Google Voice’s explainer video has an active website link thanks to a YouTube feature. All viewers have to do to act on the call is click the bubble around the link in the video.


4. Perfect the Tone



The tone of your script and voiceover narrator is vital. Do you want your video to be conservative and to-the-point or casual and laid back? The bigger question is: how do you want your brand to be perceived? The words and style of your script can make a huge difference. Of course, so can the way the voiceover actor reads the script. The same sentence could be interpreted in two very different ways, depending on the tone the narrator uses.


SonicBox is the perfect example of a company that put a great deal of thought into its explainer video’s tone. The team wanted a video that resonated with a young, fun audience. The tone of the video fits the target demographic perfectly and depicts SonicBox as an edgy brand. Note that the content of the script and the product are not all that edgy. It’s the video’s tone that conveys that message.


5. Set to Music



Voiceover narration is not the only auditory stimulation your video should be capitalizing on. Whether you set your video to music or sound effects, finding the perfect match can be difficult. The key is to insert the music or sound effects strategically, much like you would a keyword on a landing page. You don’t want to overuse or underuse the two. Music should be played softly in the background so not to distract from the script. For the same reason, sound effects should only be used to match animation or movement.


“We found that the video with music performed better than the same video without the background music. People watched longer and around 10% more people completed the video”, says Daniel Debow, Co-Founder of Rypple.


Be sure the tempo and genre of music matches your theme and brand. If the video is upbeat and fast-paced, don’t set it to classical music.


6. Live Action vs. Animation



With so many options, deciding on the style of your video is an adventure in itself. Live action and animation are just the beginning. Whiteboard and claymation style videos are also wildly popular. When it comes down to it, the decision depends on who your target audience is and what your goal for the video is.


For example, whiteboard style tends to be more popular with business or professional facing videos. Conversely, animation tends to be more popular with consumer facing videos. The deciding factor is truly your personal preference and what you believe will resonate with your specific audience (while accurately representing your brand).


7. Stay Funny and Edgy



Earlier, we mentioned representing your brand with a conservative and to-the-point video.


Some brands are simply traditional and less than casual. There’s nothing wrong with that, but it doesn’t translate to video well.


No matter how short a video is, if it’s not interesting and entertaining, it will lose viewers (and potential customers). That’s why we recommend that companies look to insert either humor, edginess or controversy into their videos. Whether that added element is in the script or the visual aspect of the video, it’s important that it’s there (even if it’s just a little bit).


8. Search Engine Boost



Optimizing videos for search engines is really quite easy, but the results are spectacular. In fact, research shows that video results are 50% more likelyto appear on the first page of Google search results than written content. All it really takes is tweaking the title, description and tags to match your keywords.


Your title should be under 120 characters, just like a blog post title. Your description should mention two to three keywords naturally. Your tags should do the same, especially since some video hosts use tags as a way of searching and sorting content.


Another great way to use video to your SEO advantage is by uploading a transcript, which will also contain your keywords.


9. Simplify Brand Messaging



We mentioned that the brevity of effective videos greatly restricts the word count. That means there’s only room in your script for the best and most powerful benefits. The restriction forces you to choose your words carefully and simplify your brand messaging.


Your value proposition must be established quickly and clearly, which potential customers appreciate. By removing unnecessary details that complicate your communication with potential customers, you can look forward to increased sales.


And that’s all there is to it! Marketing experts are predicting that video will continue to grow in popularity. Now is the time to start learning more about the strategy behind, and the production of, videos.


It’s time to start tapping into that 70.8% of the Internet population that’s watching video.

How Compelling Is Your Website’s Copy? A Simple, 4-Step Checklist – The Daily Egg

How Compelling Is Your Website’s Copy? A Simple, 4-Step Checklist – The Daily Egg


While most of us spend a lot of time fussing over the design of our website–making sure the color will create the right emotion or the call-to-action button is positioned effectively–we often neglect the copy.


We figure we’ll hire someone to write that. And cross our fingers that he or she knows how to seduce a reader.


Yet if you not only knew what strong copy looked like, but even could write a few lines of persuasive copy yourself, then you could potentially bring more value to your clients.


It could certainly help you write better copy for your own site…persuading visitors to become subscribers or even clients.


So how can you tell if your copy is compelling? Use this 4-point checklist.


Compelling Web Copy Is Useful



Think about it: whenever you jump on Google you are looking for something. You want a solution. Answers to a problem. You want a practical formula.


  • How do I invest in a 529 college savings plan?

  • Where is the best place to eat when visiting Singapore?

  • How do you seal a tubeless wheelbarrow tire?



Useful web content will answer that question. It will announce that it can answer that question in the headline–and then deliver on that answer in the body copy.


This is why “How-to,” lists or “Why” headlines work so well. You are signalling to the reader that you can show him how to do something.


Here are some examples to help you generate ideas:



 Compelling Web Copy Is Urgent



When someone reads your web copy they should feel a little bit of pain if they don’t act. You should paint a picture of the undesirable outcome that will occur if they don’t follow your advice.


Urgency appeals to the self-interest of your reader. He doesn’t want to suffer the outcome–so he’s willing to do what ever it takes.


Can you see urgency in these examples?



Compelling Web Copy Is Ultra-Specific



Imagine you are reading a page of web copy. Your were intrigued by the headline which said “How to Generate Trust with Your Landing Page.” But the body copy is limp.


It’s never very clear how to generate trust. The writer doesn’t even offer any bullet points. Just a handful of paragraphs about why trust is important.


Let’s amp that post up. For starters, we can increase the curiosity and credibility factor of the headline by being specific: 10 Idiot-Proof Ways to Generate Trust with Your Landing Page Copy.


Now we’ve got ourselves a winner. The number  (10) alone tells us that we are going to get some very specific and practical advice. It sounds like the writer has done his homework. The “Idiot-Proof” phrase, too, adds a sense of simplicity (anybody can do this) but also a little bit of urgency. The reader is given the impression that he better check out the article to see if he’s an idiot.


But you don’t stop being specific with the headline. In the body copy you need to give detailed instructions. Throw in some statistics. And include a step-by-step process that anyone can follow.


Compelling Web Copy Is Unique



Finally, your web copy needs to be unique. You could write the most specific, useful and urgent copy you’ve ever written in your entire life and it still fall flat if it is not original.


Take the recent Panda update for an example.


There was–and still is–a lot of advice being churned out. Naturally it’s getting harder and harder to create something totally unique. At first blog posts about Panda were pretty broad. Now, all the posts are narrow in focus, isolating one element of the update.


For example:



Each post after the March 8 date, which was closest to the Panda rollout, needed to approach the subject at a different angle.


Uniqueness doesn’t come easy. But it’s pursuit is satisfying. And when you reach originality in something you write–it’s rewarding.


So the question is, what can you as a web writer or blogger do to write a post that stands out? That’s original? And will be shared broadly?


Spotting great copy is a skill that takes a while to develop. Writing it takes even longer. But hopefully this 4-step checklist will help you get started.

Better Product Pages: Turn Visitors Into Customers | Smashing UX Design

Better Product Pages: Turn Visitors Into Customers | Smashing UX Design

The 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.
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.
(Smashing's side note: Have you already bought the brand new Smashing Book #3? The book introduces new practical techniques and a whole new mindset for progressive Web design. Get your book today!)

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 themsomething 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 productitself, 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.