BlogmyQuery – BMQ

“Look at her: so beautiful, so friendly, so smart. And what a personality. She must be mine. Hooking up with her would make me the envy of all my friends. Sure, she’s young and she’s gorgeous. Besides, I can easily try something new if I get bored or something better comes along.”

No, that’s not an excerpt from Lolita. As cruel and inappropriate as they might seem, these thoughts are fairly common in our society. In fact, in the past year, millions of people have entered into exactly that type of relationship. Don’t bother calling the Special Victims Unit; what we’re discussing here is not what you think it is. It’s the Apple iPad.

Apple seems to have entranced people. It’s hard to walk down the street without passing someone who is plugged in to those iconic white headphones or to enter a coffee shop without hearing someone gabbing on their iPhone. Apple’s stores are crowded, and its products sell in absurd quantities.

Why is this? Apple might be a visionary company with a strong grasp of what’s hip. Yet I believe Apple’s appeal lies in something more than trends, something deeply ingrained in our psyche: relationships.

Psyche Revived by the Kiss of Love, Antonio Canova. (Image: Wikipedia)

We don’t simply own products; we have relationships with them. Intimate ones at that. We are in a state of courtship with every brand in existence. Each of them wants to be a part of our lives, and each wants love in return. Thinking about our relationships with particular products and brands in the same way that we think about interpersonal relationships yields interesting insights. When we decide to bring a person or product into our lives, we must first evaluate our options. The criteria we use to decide whether we love, hate or are indifferent to another person are the same we use to judge a product or brand.

There are many types of relationships, but we can put brand-consumer relationships into three categories: acquaintance, friend and lover.

When someone purchases a bag of apples at the grocery store, they’re demonstrating an acquaintanceship with apples. They’ve interacted with apples before, but there’s no deep attachment, and there has been very little bonding with the product.

The next step up — friendship — emerges because of branding. For example, I always purchase a certain brand of gum. I’ve come to know the brand and its offerings, and I enjoy having its product in my life. We’re friends, but that’s where the relationship ends. There’s no romance involved, and no longing or desire is felt.

Only certain brands manage to take the step from friend to lover. Apple is one of the most valuable companies in the world. It also provides a useful model of consumer courtship. Just about any iPhone user will proudly tell you, like a love-struck teenager on prom night, that they “love� their phone and would be “like, totally lost without it.� There are dozens of cell-phone manufacturers, but only one iPhone. Successful visionary companies, such as Apple, have mastered the art of relationship engineering.

Designing Attraction

Love is often likened to fire. In the early stages of a relationship, things start heating up. As the love grows stronger, the flames grow higher. When a relationship falls apart, we say that the fire has gone out. Whether someone lights or douses your fire has to do with the two core aspects of their being: how they appear on the outside and who they are on the inside. That is, a person’s appeal is based on two things: looks and personality. Let’s take a closer look at each of these aspects of appeal and examine how they influence people into relationships with brands and products.

Looks

Attractiveness spurs lust. It’s a simple cause-and-effect paradigm ingrained in our very nature. We all long for the cute guy or girl in class, and that same desire guides us when choosing a product.

Since the days of Plato, philosophers and artists have tried to pinpoint exactly what makes something aesthetically pleasing. No universal formula for beauty has ever been agreed upon. Beauty is subjective. The designer’s job is to appeal to the collective subjective, or the average of personal preferences. Doing so ensures a product appeals to the largest audience possible.

Making your product visually appealing is not superficial. In fact, design is often a product’s primary competitive advantage. iPod wasn’t the first MP3 player on the market; it didn’t have the largest capacity; it didn’t have the most features; and it certainly wasn’t the cheapest. It was, however, sexy. It was simple and self-explanatory. Its scrolling wheel was as intuitive as it was revolutionary. Perhaps most importantly, it introduced a unique and (now) iconic form factor. The market had been flooded with matte gray devices with black headphones, but this entrant had a clean white front and mirrored back. Even the earbuds were white. Many people tuck their devices into their pockets, which makes the headphones the most visible hardware. Apple exploited this and turned the earbuds into a mnemonic device. Spotting someone with white earbuds, even from afar, immediately told you which brand was on the other end.

The iPod now accounts for well over 70% of the audio-device market. Why? I think it’s because the iPod is just more distinct than its competitors. In a market full of brunettes, the iPod is Marilyn Monroe.

Facebook vs. MySpace

Facebook has more than 500 million users, and that number is growing steadily. MySpace has plateaued at around 125 million. How has MySpace, once the leading social network, fallen behind by such a large margin? There are a number of reasons, but design seems to be one of the most obvious (Newsweek and Mashable seem to think so, too).

Much to its detriment, MySpace allows users to apply their own style sheets. I can imagine the brainstorm that led to this decision: “Wouldn’t it be great to let users customize the look of their page? People love to make things their own and flaunt their personalities. This will surely encourage new users and give us the edge on Facebook. Hurrah!�

MySpace somehow failed to realize that most people’s design education consists entirely of WordArt tutorials taught by Microsoft’s Clippy. Perusing MySpace profiles is torturous. Hideous background images overshadow content, while animated GIFs and illegible text make for an irritating user experience.

Facebook realized that people want to connect with friends more than they want to customize style sheets, so it offered users a clean and uniform interface. Everything was nicely designed; nothing was gaudy or tasteless. The whole experience was much more visually appealing. While MySpace was pushing personalization, Facebook was refining a community to change the way we interact.

To Sum Up

• People are programmed to judge by appearance, so every interaction they have needs to be groomed to visual perfection.
• To maximize appeal, designers must be observant of the collective subjective.
• Design is not superficial. It can be your greatest competitive advantage.
• Visual distinction becomes a mnemonic device for your product. Incorporate it to increase awareness and encourage recall.
• Allowing others to control your appearance, while nice in theory, can lead to chaos and brand deterioration.

Personality

As we get to know someone, the novelty of their appearance fades, and something more substantial is required to maintain our interest. We start looking beneath the surface and noticing abstract qualities: intelligence, sense of humor, likes and dislikes, ambitions. These qualities have the power to shape how we see the true person. A person’s personality — the DNA of their character — builds lasting appeal.

Character compatibility forms friendship and love. Looks alone might seal the deal for a one-night stand, but acceptance of personality is required for healthy long-term relationships. We’re often told to “be ourselves.� This is good advice. Like a pheromone-ridden glue trap, flaunting your personality attracts and ultimately bonds you with like-minded individuals.

Personality has this effect in the commercial realm as well. Aligning yourself with your target audience is critical to success. I’m sure this is excruciatingly obvious, and many organizations are already tuned into their demographics, but many others either are too shy to display personality or fail to do so properly.

Humor is one of personality’s strongest pheromones. If done right, humor evokes laughter. And yes, laughter is enjoyable in itself, but have you every wondered why we laugh? Anthropologists are discovering that laughing is not necessarily something we do merely for enjoyment, but is actually a subconscious technique that builds rapport. By laughing, we indicate to others that we agree with or accept them. Dr. Robert Provine, who has done extensive research on how, when and why we laugh, likens laughter to a glue:

…“Ha ha ha’s� are bits of social glue that bond relationships… When we laugh, we’re often communicating playful intent. So laughter has a bonding function within individuals in a group.

Applying a coat of humor to your product or advertising campaign is a great way to spark the subconscious urge to bond. Just make sure people are laughing with you, not at you.

Going back to Apple, its “I’m a Mac; I’m a PC� ads focus explicitly on personality by actually personifying brands (Apple and Microsoft). The casual dress and easygoing nature of the Mac character exudes fun, simplicity and intelligence, especially when juxtaposed with the conservative, uptight PC character.

Also, the subtle dose of geek humor gets you laughing (and thus successfully bonding) with the Mac, and laughing at (disapproving of) the PC. These ads strengthened Apple’s reputation as a hip, intelligent, friendly company, while pegging Microsoft as uptight and out of touch with users’ needs.

Microsoft attempted to salvage its reputation by recruiting — or shall we say, throwing money at — Jerry Seinfeld, who starred in a series of ads alongside Bill Gates. For personality, Jerry Seinfeld is a great candidate. He’s famous, his show had some 75 million viewers, he understands everyday people with everyday problems, and he’s funny.

In a swing-and-miss attempt at comedy, the ads follow Bill and Jerry as they “connect� with “real� people. Is it me, or do these ads actually enhance the perception we have of Microsoft as unhip and out of touch?

Digg vs. Reddit

Have you seen the top story on Digg today? Neither have I. A year ago, I would have been able to recap all of the top stories for you. The website was powered by people like me, so I came to rely on Digg to keep me up to date on topics I was interested in. My personality meshed with those of other Digg users, and visiting the website became part of my daily routine. Yet I rarely visit this social-bookmarking website anymore. Instead, I look to Reddit for my democratically selected links.

What has changed? Ever since Digg released version 4, back in August, content quality has dropped significantly. Front-page stories lack relevance, top stories are now decided by far fewer Diggs, and the sponsored links disguised as genuine articles sour the whole experience.

Digg’s personality changed. It destroyed the very foundation upon which it was built. Suddenly, publishers could auto-submit content and bypass the users who once acted as a filter to determine whether articles were relevant to the Digg audience. No longer was Digg a democratic platform. The power shifted from user to publisher. In other words, Digg sold out.

This personality switch rightfully pissed off the core user base. Alienated users began flocking to… well, an alien. Some stayed to plead with Digg that it revert to its earlier version. Digg refused. In revolt, users began to submit direct links to Reddit. Within months, Digg crumbled and users flocked in hordes to Reddit.

Reddit offers a platform similar to Digg and, despite being owned by Condé Nast, lacks the tinge of corporate influence. Before Digg’s redesign, Reddit was serving a respectable 429 million page views per month. Condé Nast has just announced that Reddit now serves more than 1 billion. That’s more than double its pre-Digg-blowout numbers and a 300% increase over its January 2010 figures. Digg has finally pulled some of the features that led to the mutiny, but it might be too little, too late.

A valuable lesson can be learned from Digg: stay true to yourself. With followers come expectations. Personality attracted them, and every action that is out of character will push them away. Introduce advancements incrementally, and users might put up with it; change drastically, and they’ll leave.

To Sum Up

• Personality builds rapport. Don’t be afraid to flaunt it.
• Laughter is a powerful social glue, but use it with caution. You want people laughing with you, not at you.
• Define your personality and stay true to it. Out-of-character actions will be seen as inauthentic and will alienate your audience.

Conclusion

Studying the art of seduction and the rules of relationships can help you craft engaging user experiences and forge strong connections with users. Getting your audience to fall in love with your product is no easy task. It requires a holistic approach involving members of every team. As interactive professionals, our work bridges brand and consumer. We are the cupids of commerce. Sharpen your arrows; it’s time to spread some love.

This has been the first in a two-part series on relationship engineering. In part two, we’ll explore the art of maintaining a relationship and how to trigger purchase recursion via timely break-ups. Stay tuned!

Further Reading

• Andy Budd – Seductive Design
• Stephen Anderson on Emotional Design, Boagworld
• The Added Value of Design, AllAboutBranding.com
• Design With Personality, Culture, and History, Logo Design Love
• Designing Websites with Personality, Six Revisions

(al)

© Thomas Giannattasio for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: apple, relationships

Here is the harsh reality of e-commerce websites: according to recent e-commerce studies, at least 59.8% of potential customers abandon their shopping cart (MarketingSherpa puts it at 59.8%, SeeWhy at 83% and MarketLive at 62.14%). The main question is why do customers abandon their shopping cart so often? Is there some fundamental mistake that designers of e-commerce websites do very often? Are there any common guidelines or rules of thumbs that make it more difficult for our users to purchase products? And is there some meaningful way to improve the conversion rates for our products?

Well, that’s exactly what we wanted to find out. In 2010, we recruited a batch of Web users and conducted a usability study, focusing only on the checkout user experience, from “Cartâ€� to “Completed order.â€� The study was conducted using the “think aloudâ€� protocol and was documented by recording everything that happened on the computer screen. The behavior of the test subjects was then analyzed by scrutinizing these recordings at a later date.

The study has shown that it is often difficult to lead customers to the final step in the checkout process when the only thing left is to submit their credit card details.

The 15 e-commerce websites that we tested were: 1-800-Flowers, AllPosters, American Apparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart and Zappos.

In total, the test subjects were given more than 500 usability issues, ranging from being distracted by animated graphics to being thrown off course by an illogical checkout flow. These issues were then analyzed and distilled into 63 checkout usability guidelines in a report titled “E-Commerce Checkout Usability.” In this article, we’ll share 11 fundamental guidelines from that report with you.

1. Your Checkout Process Should Be Completely Linear

Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout.

One of the worst usability violations that we discovered in our testing was non-linear checkout processes. Websites with a non-linear checkout process left several of our test subjects confused and intimidated. At the time of testing, both Walmart and Zappos had a non-linear checkout process.

The typical way to “accidentally� end up with a non-linear checkout process is to create steps within steps. This happens, for example, when the customer has to set a “Preferred shipping address� (Walmart’s violation) or “Create an account� (Zappos’ violation) on a separate page, and is then redirected to a previous checkout step upon completion.

Below, you can see Walmart’s checkout flow in thumbnails (click image for larger view). Notice that it’s non-linear because the “Preferred shipping address� sub-step directs the user to a previous step:

Walmart’s non-linear process. Large view.

Luckily, making the process completely linear is easy. In this case, a sub-step such as “Account creation� should never redirect to a previous step in the checkout process, but instead direct the customer to the next step in the checkout process.

This is critical because the mental model of most customers dictates that a checkout process should be linear. Upon seeing the same page twice, most customers would conclude that the website has an error, because this is what happens with validation errors.

As one test subject said, “This looks suspiciously like the page I was on before. Is there something I didn’t do correctly?�

2. Add Descriptions To Form Field Labels

Issue: Without descriptions, many form field labels can be ambiguous.

“What does this “Address line 2â€� mean?” a test subject mumbled. Other test subjects were confused by “Billing address.â€�

The vast majority of test subjects had problems understanding certain labels. They varied in which labels they had trouble with. The problem was critical in a few cases, and one subject gave up a purchase because she couldn’t understand the label for a required field, making it impossible for her to complete the checkout process. Therefore, always provide clear instructions for each field.

One form that caused confusion belongs to HobbyTron, where test subjects had to guess what “First� refers to:

On Apple’s website, the majority of test subjects started typing their zip code in the field labeled “Area code�:

When you have form field labels without any explanation, some of your customers will likely be confused about what information is being asked of them. Alleviate this by adding short descriptions and examples next to labels. Because not all customers need the extra help, you may want to hide these instructions behind a “What’s this?� link, or perhaps slightly fade its color or reduce the font size.

Below are examples of how descriptions below form field labels can help customers understands what inputs are required of them:

Even unambiguous fields, such as “Email address,� are great opportunities to explain what you’ll use the data for. “Email address� may be a sufficient description, but most people would want to know how you’ll use their email address. Why do you need it?

Finally, for fields that users have to fill in by referring to a paper or card, illustrations can enhance the descriptions a lot (for example, an image of an expiration date from a credit card).

3. Avoid Contextual Words Like “Continue�

Issue: Contextual words such as “Continue� are ambiguous and tend to confuse customers.

Depending on the customer’s state of mind, a button labelled “Continue� in a shopping cart could mean one of two things:

1. Continue shopping
   Say, if the customer is also looking for a shirt to go with those jeans.
2. Continue to checkout
   If the customer has all the products they need and just wants to pay.

Another example is “Back.� Back to the last page? Back to the search results? Where? And how about “Proceed�? These are all contextual words that change in meaning depending on the context (i.e. the page) and the customer’s state of mind.

HobbyTron was one of the websites on which multiple test subjects clicked on the “Continue� button thinking they would continue to the checkout section:

Hobbytron’s Continue button. Large view.

After clicking a wrong button, one test subject said:

It was confusing because I thought, “I want to continue.� I didn’t think about continuing shopping, but rather I was continuing to checkout.

This is a good example of how contextual words, being open to interpretation, can confuse customers. Roughly half of the test subjects at least once clicked a wrong button because of contextual words.

Instead, use words that aren’t open to interpretation, such as “Check out now� and “Shop more.�

4. Visually Reinforce All Sensitive Fields On The Payment Page

Issue: Customers might hesitate if credit card fields don’t appear secure (regardless of actual security).

Many test subjects didn’t think about security until they had to enter their credit card details. In fact, several test subjects talked about certain parts of the checkout page in terms of being “secure� and “insecure� (typically related to credit card details).

Parts of the page with security icons, badges or text and a general “robustness� were perceived as being more secure, while parts without these visual cues inspired less confidence, despite the fact that these fields were all part of the same form on the same page. Technically, there was no difference in security. However, most customers don’t understand the technical workings of forms. All they know about your website is what their gut feeling tells them.

There is a clear divergence between the customer’s mental model of form-field security and the actual security.

As one test subject who had just abandoned their purchase said, “It didn’t look safe enough.� Her reaction wasn’t based on the technical security of the website, but rather on the perceived security of the fields.

Below is a quick mock-up I made to illustrate how you can visually secure your credit card form fields (version B). Notice the background color, padlock image and placement of the GeoTrust seal:

Mock-up of a visual reinforcement. Large view.

By adding visual cues (such as borders, background color, and security icons and badges) around the form fields for credit cards, you can increase their perceived security for non-technical customers.

5. Don’t Use An “Apply� Button In Your Form

Issue: Customers don’t understand “Apply� buttons for distinct sections of a form.

More than half of test subjects were confused by websites with an “Apply� button somewhere in the form; for example, to apply a shipping method to an order.

In almost every case, these buttons were either:

1. Not clicked, even if the relevant input field was filled out;
2. Mistaken for the main form submission button.

Test subjects simply didn’t understand the purpose of having a separate “Apply� button in a form.

Below is Newegg’s checkout, where only half of test subjects who filled in their zip code also clicked the “Go� button (problem 1 from above):

NewEgg’s Apply button. Large view.

The consequence of mistaking “Apply� for the main form submission button is that customers will be redirected back to the same page in order to apply the change, thwarting their expectation of moving to the next step and likely leading them to think that there’s an error on the page (as we saw in guideline #1). This happened to two test subjects, who were left to guess what the error was because no error message was displayed (since a technical error never actually occurred on the page).

Below is a form for American Apparel, where test subjects mistook the “Apply� button for the main form submission button (problem 2) and consequently couldn’t proceed with the purchase.

American Apparel’s Apply button. Large view.

If you really need to update a value before moving on to the next step, then auto-update the value using AJAX or the like, without showing an “Apply� button.

6. Format Field For Expiration Date Exactly As It Appears On Credit Card

Issue: Fields for credit card expiration dates can be tricky to decipher if they aren’t written exactly as they are on the credit card.

Some websites use month names, while other websites use a combination of month names and numbers, while still others just use numbers. Which is best? The correct way to format a field for an expiration date is to match what the customer sees on their credit card (i.e. numbers only). This minimizes confusion and misreading because the user can easily verify the field against their credit card.

Below are four examples of how not to format the fields for expiration date. Example D, with the month written as text and the year in four digits, is the worst.

The correct way to format the month field is to use numbers and to prefix all single-digit numbers (i.e. 1 to 9) with a 0, so that they appear exactly as they do on credit cards (for example, 03 for March).

The correct way to format the year field is to use just two digits, to match the number on the credit card (for example, 14 for 2014).

Our test subjects didn’t have any difficulties when month names were included, as long as they came after the digits. So, “03 – Marchâ€� is okay, but “March – 03â€� is not. Whatever is on the credit card should appear at the beginning of each option.

You could put a forward slash (/) between the month and year fields to further match credit cards (so, 03 / 14 for March 2014).

7. Use Only One Column For Form Fields

Issue: Customers have an amazingly difficult time understanding the relationships between form fields in two columns.

Half of the test subjects had problems when form fields were in two columns. There were two typical scenarios:

1. One of the two columns of form fields was missed. It was either dismissed as unrelated or simply overlooked by test subjects.
2. Unrelated form fields were filled in and/or submitted, often causing validation errors.

Below is Perfume’s form for signing into and creating an account:

Perfume.com’s shipping form. Large view.

This form was interpreted in three ways:

1. All form fields should be completed in order to create an account.
2. The “Email address� field and the fields in the right column should be completed to use “Guest checkout.�
3. Either the left or right column should be filled out.

Another example is PetSmart. There, the most common behavior was to overlook the second column, with the “Credit card identification number,� resulting in an error message:

PetSmart.com’s payment form. Large view.

On two occasions, test subjects abandoned their purchase because they kept submitting the wrong data in the wrong column.

Our suggestion is to use a single column. None of our test subjects showed any difficulty with this.

8. Use Shipping Address As Billing Address By Default

Issue: Most customers order products to their home, so requiring both a billing and shipping address doesn’t make sense.

Customers typically order products to their home address. So, by default, you should use the same address for shipping and billing, unless you happen to record data differently for your store.

By defaulting the billing address to the shipping address, your checkout process will have many fewer fields, making it less intimidating for customers. Users also reduce the risk of misspelling their address if they have to enter it only once; they won’t rush through the form as quickly, and if there are errors, the customer will have to fix them only once.

NewEgg’s checkout. Large view.

Moreover, you should hide the billing address fields entirely. Disabling the fields isn’t good enough. On the one website that did this, most test subjects were confused by why the fields were grayed out, with some users clicking on them. Instead, show only the fields for the billing address, unless the customer explicitly asks to use separate shipping and billing addresses.

Some websites have a “Copy shipping address� button. The problem with this is that it also copies any errors, so the customer has to correct the same information twice. While the customer could just click the “Copy shipping address� button once they’ve corrected the error, all of the test subjects in this situation forgot to do so.

Apple’s copy shipping address feature. Large view.

Also, depending on the website’s layout, such a feature could be easily overlooked. On Apple’s website, half of test subjects overlooked the “Copy shipping address� link and ended up typing in the same address again.

A check box (or something similar) is better for this purpose because errors will have to be corrected only once. Amnesty International’s checkout page is a good example of how to do this right:

Amnesty International’s checkout. Large view.

9. Use Clear Error Indications

Issue: Customers overlook error messages, making them less likely to resolve the errors.

More than half our test subjects had serious problems finding or understanding error messages on the websites we tested.

When a customer has problems with a form, the likelihood that they abandon the purchase increases significantly. When a customer fails more than once, they will be inclined to leave the website altogether (whether because they assume they were blocked or the website has a bug or something else).

Below are four examples of a lack of a clear indication of error.

On American Apparel’s website, the yellow bar at the top is actually an error message, saying that the data in the phone field at the bottom isn’t valid:

On Walmart’s website, the two red arrows (next to “Ship to home� and “Site-to-store�) are actually error indicators:

On PetSmart’s website, the red of “State/Province� is not an error indicator, but rather just the style chosen for this particular label:

On Perfume.com’s website, the red does indicate an error in the “Phone� field:

Unless placed in close proximity to the relevant fields, error messages were likely to be overlooked by our test subjects. Many websites present error messages only at the top of the page, not next to the form fields.

Without this proximity, error messages can be difficult to understand. Some test subjects, seeing nothing wrong with the fields, tried to submit the form again, assuming the page didn’t load properly the first time. This, of course, resulted in the same page being shown again with the same error message.

If a customer doesn’t notice or understand your error message, they will not be able to resolve the error or proceed through the checkout process. In such cases, abandonment is inevitable. So, put time and effort into designing and wording your error messages.

Make sure your error messages:

• Are contextualized (that is, not at the top of the page but in close proximity to the relevant fields);
• Are clear and concise;
• Stand out so people notice them (provide high contrast and maybe even use arrows or other visual indicators).

10. Registration Should Be Optional

Issue: Customers strongly resent having to sign up for an account.

Customers dislike having to register for yet another account. This quickly became evident during our testing as every single subject showed great frustration when forced to do it. 30% of them ended up abandoning one of their purchases as a result.

There are many reasons for this resentment.

For one, customers already have a myriad of user names and passwords to remember and don’t want to create an entirely new account just to buy one or two products from an online store.

Another reason is that 40% of test subjects expected to be spammed with marketing material, even if they explicitly declined to sign up for a newsletter during the checkout process. These customers have a mental model in which Account = Newsletter. Or, as one subject described it: “If I create an account, they can send me spam from now on and forever.� Their prior experience on websites that check the newsletter box by default and obscure it likely led them to this conclusion.

Also, customers likely realize that you’re storing their information indefinitely. While most companies keep a customer’s information in their database regardless of whether they registered an account, most customers don’t think of this. It’s about perception, and some customers just don’t like the idea of a website storing their personal information.

Signing up for an account also takes time. It adds more steps and fields to the process—and complexity. Yet another reason to dislike it.

Finally, many customers just don’t understand why they need an account to buy a product. As one subject clearly put it, “I don’t need to sign up for anything when I’m buying a perfume in a regular [brick and mortar] store.�

Most test subjects didn’t mind having the option to create an account, but they found it illogical and annoying to be required to do so. Some said they would voluntarily create an account if they regularly bought from the website.

If you’re looking for an unobtrusive way to get customers to sign up for an account, then consider simply asking them after they have completed their purchase. “Would you like an account? Just enter a password in the field below.� You can set their email address as their user name and fill in the account information with their order details. This way, the customer isn’t forced to create an account but has an easy way to do so after completing their purchase. (Remember to explain the benefits of having an account.)

11. Don’t Require Seemingly Unnecessary Information

Issue: Customers feel that their privacy is being invaded when they are required to submit seemingly unnecessary personal information.

Refusing to give up their phone number, one test subject anxiously clamored, “Look, why do they need my phone number? What do they need that for? They don’t need it!� Every test subject at one point or another complained about a website that asked for too much personal information.

Being asked for a phone number when the website already had an email address was especially irritating when subjects were trying to make a purchase. The logic goes, if the store already has one way to contact them, why does it need another?

Apple’s checkout process.

If the information is necessary, at least explain why. What is obvious to you may not be obvious to the customer. They have learned to expect the worst when shopping online (usually spam email and phone calls).

Our test subjects were surprisingly forgiving, as long as the website explained why the information was needed. Here’s a tip: don’t hide it behind a link; state it directly in the field’s description. In fact, the test subject we quoted above provided their phone number to another website without any complaints because the store clearly explained that the phone number was needed so that it could contact the customer in case of delivery problems.

The more expensive the order, the more accommodating the customer will be. When buying a laptop, customers want you to be able to contact them. But this holds true only if you require the information in order to complete the purchase. On websites where the field was optional, our subjects weren’t comfortable giving their phone number and simply left the field blank. However, this means that required and optional fields must be clearly distinguished.

Designing A Better Checkout Experience

While there are many more subtleties to designing a good checkout experience, these 11 guidelines go a long way. If you adhere to them, your checkout process will perform well above average.

In a study that he conducted 10 years ago, usability guru Jakob Nielsen concluded that large e-commerce websites violated many basic checkout usability guidelines. It seems little has changed when you look at websites like AllPosters and Walmart.

While a lot of the big websites boast impressive features such as geo-targeting, address validation and state look-up, they don’t manage to get basic usability principles right, and they suffer greatly as a consequence.

With the latest improvements in Web technology and browsers, the potential to create an amazing user experience has increased dramatically. Yet, advanced features shouldn’t be the focus until basic usability guidelines are met. If we add the latest technology just because it’s new and exciting, then today’s abandonment rate of 59.8% is unlikely to decrease.

Things like meaningful flow (see guideline 1), good copywriting (2, 3), simple form design (4, 5, 6, 7, 8, 9), and privacy considerations (10 and 11) go a long way to creating a great checkout experience.

Do yourself and your customers a favor by following these 11 guidelines. Once you’ve covered the basics, you can venture into more advanced territory.

You can find further checkout usability guidelines in our report titled E-Commerce Checkout Usability (not free).

Further Resources

You may be interested in the following related resources:

• MarketingSherpa, SeeWhy, MarketLive
  The three different sources that document the 59.8% cart abandonment rate.
• 10 E-Commerce Checkout Strategies
  Key strategies for making the checkout process easy for even inexperienced shoppers.
• E-Commerce Checkout Page Design: Learn From Amazon.com
  A walkthrough of an effective e-commerce checkout page.
• Happy Customers Through an Improved Checkout
  A collection of details to keep in mind when working on checkout forms.
• One-Page Checkouts for E-Commerce Sites
  Advantages of a one-page checkout, and how it boosts conversion rates.

(al)

© Christian Holst for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: e-commerce, usability

An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not.

This is useful since it makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Read full post

Posted in CSS.

Body copy makes up the majority of many websites. Headlines and other bits of typography are often considered more fun to design, or more artistic, but without a good design for your body copy, your overall project will suffer.

Body copy design requires you to consider two separate parts: character styles, and paragraph styles. Proper use of special characters can greatly increase the level of professionalism in your designs. And good paragraph styling can make a huge difference in readability, and therefore the amount of time someone is willing to spend reading your copy.

Using Special Characters

There are a number of special characters you can use in your typography designs that add a level of polish and sophistication that is lacking from many designs. Incorporating these characters takes some extra time on the part of the designer, but the end result is almost always worth it.

Ligatures

Ligatures are sometimes considered antiquated, and don’t show up often in web type. They’re not seen much more often in print design, either. But if your goal is to create a typographic design that has an antique, traditional, or very formal look, adding ligatures can be a fantastic way to reinforce that design style. Ligatures can also improve readability among certain characters, in certain fonts (especially italics and obliques).

If you want to use ligatures in your designs, there’s a great CSS declaration you can use to implement it in Safari, Webkit-based browsers, and Chrome: text-rendering: optimizeLegibility;. Firefox is already using this rendering setting for font sizes over 20px. There are a few glitches with using this declaration, which are detailed in the Aesthetically Loyal article about Cross-Browser Kerning-Pairs and Ligatures.

Ligatures are most commonly used for the following character pairs (shown regular and italic):

Hyphens and Dashes

Hyphens and dashes are two of the most improperly used characters in typography. Hyphens should only be used when hyphenating words. There are two different kinds of dashes: the en-dash and the em-dash. An en-dash is shorter, roughly the width of the letter “n” in a particular font (hence, the name). An em-dash is wider, roughly the width of the letter “m”.

En-dashes should be used when showing a range (such as January–March) or when creating an open compound word (South Carolina–Georgia border). To create an en-dash, just use –. The em-dash is used mostly in informal writing, and can replace commas, semicolons, colons, and parentheses. They’re often used instead of commas to set apart independent clauses or an abrupt change of thought. To create an em-dash, use —.

Smart Quotes

Smart quotes (sometimes also called “curly quotes”) are quotation marks that turn in toward the text they surround. There are both double and single smart quotes, and each requires a different html code. Smart quotes are often created automatically in word processing programs, but can be a huge pain for web typography.

Some CMSs, like WordPress, automatically convert quotes to smart quotes. While this is good in most cases, it can also cause problems, especially if you post code snippets on your blog (as you don’t want code snippets to contain curly quotes). In general text, though, you’ll want to use smart quotes for a more polished look in your body text.

Ampersands

Ampersands (‘&’) are another special character that are sometimes used in typographic designs. To create an ampersand, just use &. They work well in headlines and similar short blocks of text, but aren’t really appropriate for body text (despite the fact that many people seem to use them that way).

Ampersands are appropriate for use artistically, or in instances where space is limited (like in a table). Don’t use an ampersand just as an abbreviation for the word “and”. If using an ampersand artistically, you may find that ampersands in italic fonts are more attractive than their regular counterparts. Italic ampersands tend to follow the older style, and closely resemble the letters “e” and “t”, which make up the Latin word “et” (which translates to “and”).

Other Special Characters

Other special typographic characters include things like trademark (â„¢), registered (‘®’), and copyright (‘©’) symbols, tildes (‘Ëœ’), and pilcrows (‘¶’), among others.

If you use any of the above characters, make sure you use the proper entity codes for a professional and polished final result. About.com has an extensive table of entity codes for various typographical symbols and punctuation marks that makes a great quick-reference guide.

An additional note about pilcrows: using these rather than actual paragraph breaks can be an interesting technique for article intros that consist of multiple short paragraphs. Just make sure that you don’t use them throughout a long document, as they convert the entire document into one long text block, which is harder to read, especially onscreen.

Character and Word Spacing

The space between characters and words can be broken down into a few different areas. The basics are kerning, tracking, and word spacing. Kerning, which is the space around specific characters, is generally done automatically within individual font files. Programs like Photoshop or InDesign give you some control over kerning between individual characters, but on the web it’s mostly impractical.

Tracking is similar to kerning, but isn’t character-specific. The tracking can be adjusted easily with CSS, using letter-spacing. For the most part, adjusting the tracking of your text shouldn’t be overdone. But it can be used to great effect in small blocks of text. It’s most often seen in headlines or menus. Overdoing it can result in text that is difficult to read.

One place you’ll always want to use letter spacing is between strings of capital letters (includings small caps) and strings of numbers. Set a letter spacing of around .1em between capital letters, small caps, or numbers to improve legibility.

Word spacing can greatly improve readability if done correctly, as it makes word recognition easier. People often read words just by recognizing their shapes, and increasing the space slightly around each word can speed up this process. Word spacing is accomplished in CSS with word-spacing. Word spacing, by default, is .25 ems. It should be specified in ems, so that it adjusts according to text size. Also, word-spacing adjustments are made in relation to the default spacing. So if you specify a word spacing of 0.25 em, you’re actually getting a space of .5 em between words.

Paragraph Formatting

The paragraph is often referred to as the most basic unit of language that has meaning. Paragraphs are the building blocks of text content, and yet all too often, designers do little more than specify the font face and size. There’s a host of other formatting options we should be considering when we format our paragraphs.

There are a few things to take into consideration beyond the choice of typeface. The goal of typography at the paragraph level is to create text that is highly readable. To that end, we need to consider the alignment of our text, as well as the line spacing and line width.

Alignment

There are four basic alignment types: left, right, center, and justified. As a general rule, centered type is harder to read. It’s fine for headlines or things like photo captions. But for paragraphs, it’s not suitable. This is due to the fact that ragged edges on the left-hand side of a paragraph reduce legibility (because readers have to search for the beginning of each line).

Right-aligned text presents the same problem as centered text for paragraphs. As a general rule, stick to either left-aligned or justified alignment for long blocks of text.

Line Height and Leading

In the days of hand-set print type, leading referred to the space between lines. The term comes from the literal strips of lead that were used to put extra space between lines of letters. Line height is similar to leading, except it refers to the overall height of lines, including the letters and space above and below them.

In CSS, you can adjust the line height to whatever you want. Line heights that are anywhere from 1.2x to 1.8x as tall as the text itself are generally the most readable. For example, if your text is 12px high, then your optimal line height would be between roughtly 14px and 22px. Play around with line heights until you find something that looks good for your particular project.

You can see here how much easier text is to read at a taller line height.

Line Width

There are a few different theories regarding the perfect line length. Of course, the specifics between each vary. There are three basic ideas, though:

• Line widths of roughly twelve words.
• Line widths of roughly 39 characters (alphabet-and-a-half rule).
• The points-times-two rule (which requires some math to convert it to work for the web).

The last one is really the only one that requires any explanation. If you multiply the size of your point times two, and then use that in picas rather than points, you’ll get your line width. In print design, this is easy enough to figure out. If, for example, your text height is 11 points, you’d have a line length of 22 picas (or just over 3.5″).

It takes an extra step to convert that to web use. Take that pica measurement you just got (multiply your text’s pixel size rather than points), and multiple it by 12 (because there are 12 points in a pica), and that will give you your line width in pixels.

For some examples of fantastic paragraph styles, check out Jon Tan’s 12 Examples of Paragraph Typography.

Great Paragraph Typography in Practice

Vogue Magazine

The typography used in the paragraphs on the Vogue Magazine site has an obvious focus on readability. Generous line heights and a 14px font make reading even long blocks of text a breeze onscreen. In addition to the type size and spacing, using a very dark gray also makes the type more readable.

The basic code for this paragraph style is:

p {color: #333333; font-size: 14px; line-height: 24px; text-align: justify; font-family: Georgia,"Times New Roman",Times,serif;}

Sleepover, San Francisco

Sleepover applies a number of excellent attributes to their paragraph styling. First of all, headings are the same size as the body copy, but capitalized, with proper letter spacing:

{letter-spacing: 2px; text-transform: uppercase;}

The paragraphs themselves are also well-formatted. Font size is kept to 1 em, with a 1.85em line height (slightly larger than “normal”). The gray letter color is very easy on the eyes, though it might be too light for the taste of some. The added line height is extra important in cases like this, where there are other stylistic choices that might decrease readability. Here’s the basic paragraph code:

p {font-size: 1em; line-height: 1.85; color: #666666; text-align: justify; font-family: "Century Schoolbook",Century,Georgia,serif;}

Salt of the Earth

Salt of the Earth uses a larger font than is commonly seen for body copy. They also use very generous line heights. Rather than lowering the contrast of the type by lightening the font, they’ve opted to use a darker background and a black font. It still results in easier-to-read text than black on white would be. Ample spacing between paragraphs is also used, which adds to scanability and breaks up long blocks of text.

The basic styles for this paragraph are:

p {font-family: Georgia,"Times New Roman",Times,serif; font-size: 16px; line-height: 30px; margin-bottom: 30px;}<

The Design Cubicle

The Design Cubicle uses what looks like a smaller font than any of the other examples here, and yet maintains similar readability. The other main difference here is that they use a sans-serif typeface (and an @font-face font, rather than a web-safe font), which is arguably more readable onscreen (the reverse is usually considered true with print typography). Contrast is good, with a medium gray background and a dark gray font.

Here’s the basic code for this paragraph style:

p {margin-bottom: 1.5em; font-size: 14px; line-height: 21px; font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2",Verdana,sans-serif; font-weight: 400; color: #232D32;}

In Part 3…

We’ll talk about how to combine different typefaces, based on sound typographic design principles like weight and contrast, building on what we’ve covered here and in part 1.

Additional Resources

• The Elements of Typographic Style Applied to the Web
  A very comprehensive guide to typography, that has plenty of information about spacing, rhythm, vertical motion, and more.
• The Paragraph in Web Typography & Design
  A fantastic article on various paragraph styles from Jon Tan.
• HTML Accent Entity Codes
  A fairly comprehensive chart of entity codes for inserting special characters into HTML.
• Top Ten Web Typography Sins
  Our own article on some of the pitfalls of web typography, including plenty of information on using special characters.

In a previous article on Smashing Magazine, I described A/B testing and various resources related to it. I have also covered the basics of multivariate testing in the past, yet in this post I’ll go deeper in the technical details of multivariate testing which is similar to A/B testing but with crucial differences.

In a multivariate test, a Web page is treated as a combination of elements (including headlines, images, buttons and text) that affect the conversion rate. Essentially, you decompose a Web page into distinct units and create variations of those units. For example, if your page is composed of a headline, an image and accompanying text, then you would create variations for each of them. To illustrate the example, let’s assume you make the following variations:

• Headline: headline 1 and headline 2
• Text: text 1 and text 2
• Image: image 1 and image 2

The scenario above has three variables (headline, text and image), each with two versions. In a multivariate test, your objective is to see which combination of these versions achieves the highest conversion rate. By combinations, I mean one of the eight (2 × 2 × 2) versions of the Web page that we’ll come up with when we combine variations of the sections:

• Headline 1 + Text 1 + Image 1
• Headline 1 + Text 1 + Image 2
• Headline 1 + Text 2 + Image 1
• Headline 1 + Text 2 + Image 2
• Headline 2 + Text 1 + Image 1
• Headline 2 + Text 1 + Image 2
• Headline 2 + Text 2 + Image 1
• Headline 2 + Text 2 + Image 2

In multivariate testing, you split traffic between these eight different versions of the page and see which combination produces the highest conversion rate — just like in A/B testing, where you split traffic between two versions of a page.

Getting Started With Multivariate Testing

To create your first multivariate test, first choose a tool or framework that supports multivariate testing. You can use one of the tools listed in the section “Tools” in the end of this article. Please note that not all A/B testing tools support multivariate testing, so make sure your tool of choice allows it.

Once you’ve decided which tool to use, choose which sections to include in the test. As you know, a Web page can contain tens or hundreds of different sections (footer, headline, sidebar, log-in form, navigation buttons, etc.). You cannot include all of these sections in the test; creating variations for all of them would be an enormous task (and, as you’ll read below, the traffic requirements for the test will grow exponentially with each new section). Narrow it down to the few sections of the page that you think are most important to the conversion goal.

The following parts of a page (listed in order of importance) are typically included in a multivariate test:

• Headline and heading,
• Call-to-action buttons (color, text, size, placement),
• Text copy (content, length, size),
• Image (type, placement, size),
• Form length.

The Difference Between A/B Testing And Multivariate Testing

Conceptually, the two techniques are similar, but there are crucial differences. First and foremost, the traffic requirements are different. As I said, the number of combinations that need to be tested grows exponentially in a multivariate test. You can test three or four versions in an A/B test and tens or hundreds of versions in a multivariate test. Clearly, then, a lot of traffic — and time — is required to arrive at meaningful results.

For example, if you have three sections with three variations each, the number of combinations is 27. Add another section with three variations, and the total number of combinations jumps to 81. If you want meaningful results, you can’t keep adding sections to the test. Be selective. A good rule is to limit the total number of combinations to 25 or fewer.

Use A/B testing for large scale changes, not to refine or optimize existing designs. Image by Meet the Chumbeques

Another difference is in how these techniques are used. A/B testing is usually reserved for large radical changes (such as completely changing a landing page or displaying two different offers). Multivariate testing is used to refine and optimize an existing design. For the mathematically inclined, A/B testing is used to optimize for a global optimum, while multivariate testing is used to optimize for a local optimum.

One advantage of multivariate testing over A/B split testing is that it can tell you which part of the page is most influential on conversion goals. Say you’re testing the headline, text and image on your landing page. How do you know which part has the most impact? Most multivariate testing tools will give you a metric, called the “impact factor,� in their reports that tells you which sections influence the conversion rate and which don’t. You don’t get this information from A/B testing because all sections are lumped into one variation.

Types Of Multivariate Tests

Based on how you distribute traffic to your combinations, there are several types of multivariate tests (MVT):

Full factorial testing
This is the kind people generally refer to when they talk about multivariate testing. By this method, one distributes website traffic equally among all combinations. If there are 16 combinations, each one will receive one-sixteenth of all the website traffic. Because each combination gets the same amount of traffic, this method provides all of the data needed to determine which particular combination and section performed best. You might discover that a certain image had no effect on the conversion rate, while the headline was most influential. Because the full factorial method makes no assumptions with regard to statistics or the mathematics of testing, I recommend it for multivariate testing.

Record and compare the resulting traffic for each tested version. Image by ItoWorld

Partial or fractional factorial testing
As the name suggests, in this method only a fraction of all combinations are exposed to website traffic. The conversion rate for unexposed combinations is inferred from the ones that were included in the test. For example, if there are 16 combinations, then traffic is split among only eight of those. For the remaining eight, we get no conversion data, and hence we need to resort to fancy mathematics (with a few assumptions) for insight. For obvious reasons, I don’t recommend this method: even though there are fewer traffic requirements for partial factorial testing, the method forces too many assumptions. No matter how advanced the mathematics are, hard data is always better than inference.

Taguchi testing
This is the most esoteric method of all. A quick Google search reveals a lot of tools claiming to cut your testing time and traffic requirements drastically with Taguchi testing. Some might disagree, but I believe the Taguchi method is bit of a sham; it’s a set of heuristics, not a theoretically sound method. It was originally used in the manufacturing industry, where specific assumptions were made in order to decrease the number of combinations needing to be tested for QA and other experiments. These assumptions are not applicable to online testing, so you shouldn’t need to do any Taguchi testing. Stick to the other methods.

Do’s And Don’ts

I have observed hundreds of multivariate tests, and I have seen many people make the same mistakes. Here is some practical advice, direct from my experience.

Don’ts

• Don’t include a lot of sections in the test.
  Every section you add effectively doubles the number of combinations to test. For example, if you’re testing a headline and image, then there are a total of four combinations (2 × 2). If you add a button to the test, there are suddenly eight combinations to test (2 × 2 × 2). The more combinations, the more traffic you’ll need to get significant results.

Do’s

• Do preview all combinations.
  In multivariate testing, variations of a section (image, headline, button, etc.) are combined to create page variations. One of the combinations might be odd-looking or, worse, illogical or incompatible. For example, one combination might put together a headline that says “$15 off� and a button that says “Free subscription.� Those two messages are incompatible. Detect and remove incompatibilities at the preview stage.
• Do decide which sections are most worthy of inclusion in the test.
  In a multivariate test, not all sections will have an equal impact on the conversion rate. For example, if you include a headline, a call-to-action button and a footer, you might come to realize that footer variations have little impact, and that headline and call-to-action variations produce winning combinations. You get a powerful section-specific report. Below is a sample report from Visual Website Optimizer. Notice how the button has more impact (91%) than the headline (65%):

  

• Do estimate the traffic needed for significant results.
  Before testing, get a clear idea of how much traffic you’ll need in order to get statistically significant results. I’ve seen people add tens of sections to a page that gets just 100 visitors per day. Significant results from such a test would take months to accumulate. I suggest using a calculator, such as this A/B split and multivariate testing duration calculator, to estimate how much traffic your test will require. If it’s more than what’s acceptable, reduce some sections.

Case Studies

A lot of A/B testing case studies are on the Web, but unfortunately, finding multivariate test case studies is still difficult. So, I scoured the Internet and compiled relevant ones.

Software Download Case Study: downloads increased by 60%
This is one multivariate test I did to compare different versions of headlines and links. In the end, one of the variations resulted in a more than 60% increase in downloads.

Microsoft Multivariate Testing Case Study
This presentation details the variations that were tested for this website and the ultimate winner.

SiteSpect Case Studies
This page presents a dozen of multivariate testing case studies of large companies using multivariate testing and behavioral targeting to optimize their sites.

Maxymiser Case Studies
Another set of multivariate testing case studies.

Look Inside a 1,024-Recipe Multivariate Experiment
YouTube did a gigantic multivariate test in 2009. It can afford to do tests with a thousand-plus combinations because it has sufficient traffic.

Multivariate testing of an email newsletter
An agency tested color and text on the call-to-action button of its email newsletter. The best button had the highest CTR: 60%.

Multivariate Testing Tools And Resources

Tools

Google Website Optimizer
A free basic multivariate testing tool by Google. It’s great if you want to test the waters before investing money in multivariate testing. The downside? You’ll need to tag different sections of the Web page with JavaScript, which can be cumbersome. It’s also prone to error and forces you to rely on others (like the technology department) for implementation.

Visual Website Optimizer (Disclaimer: I am the developer of this tool)
The main advantage of this paid tool is that you can create a multivariate test visually in a WYSIWYG editor by choosing different sections of the page. You can then run the test without having to tag sections individually (although a snippet of code is required in the header). The tool includes heat map and click map reports.

WhichMVT
A website that publishes user reviews of all of the multivariate testing tools available on the market. If you are planning to adopt a multivariate testing tool for your organization, do your research on this website.

Enterprise testing tools
Omniture’s Test&Target, Autonomy’s Optimost, Vertster, Webtrends’ Optimize, and SiteSpect.

Resources

Expert Guide to Multivariate Testing Success, by Jonathan Mendez
A series of blog posts detailing different aspects of multivariate testing.

Fail Faster With Multivariate Testing (PDF)
An excellent free mini-guide to multivariate testing.

Online Testing Vendor Landscape
A commercial report by Forrester that compares the various testing vendors out there.

Lessons Learned from 21 Case Studies in Conversion Rate Optimization
This article discusses ideas for conversion rate optimization detailed through different case studies.

Related posts

You may be interested in the following related articles:

• Ultimate Guide to A/B Testing
• Getting Started With E-Commerce: Your Options When Selling Online
• Improve Your E-Commerce Design With Brilliant Product Photos
• Our 3-part-series “Optimizing Conversion Ratesâ€�.

(al)

© Paras Chopra for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: multivariate, testing