Quick summary: User experience problems tend to be cumulative. Enough small problems can have the same effect as a few large ones – namely, causing users frustration and sometimes causing them to give up on your application or website. Crafting a good user experience requires finding and eliminating major usability issues, but less severe problems deserve attention too.

It’s usually the case that for each “big” usability problem with an application or website there are many smaller and less severe issues. Naturally the big problems get the most attention (“What do you mean customers can’t figure out how to enter their credit card number?”). What’s sometimes overlooked is that smaller problems, taken as a whole, can be similarly harmful to user experience.

It’s easy to dismiss the importance of small usability problems. After all, the fact that it takes a customer a few extra tries to complete a form, or a few moments longer than needed to locate a button doesn’t seem like much of an issue.

Yet these and similar small usability problems matter more than many companies realize.

The lay of the land

To understand why, let’s consider a couple of points about the environment in which your website or software is used.

1. The bar to switching is lower online.

Online it’s much easier for customers to give up and go elsewhere than it is “in the real world”.

• If you should find yourself in Shamrock, Texas (population 2,000) in need of some devonshire cream, there’s probably just the one grocery store to visit. If it’s not there you’re out of luck. (It’s not there, I looked).
• On the other hand if you’re shopping online and having trouble buying a pair of headphones from the Circuit City website, there are plenty of other companies (Amazon, Best Buy, NewEgg and countless others) who will be glad to help you. And they’re just a mouse click away.

2. Some dimensions of customer service can’t be provided online.

• A customer at a bricks-and-mortar store with a complaint or problem can usually find a human being with whom they can communicate. The retail experience is designed to provide personal, face to face attention for customers who desire or need it.
• Online, however, your customers have no face-to-face interaction with you. In essence your application or website – and by extension its user experience – is the company representative.

User experience problems online and customer experience problems offline are both cumulative, but online you’re at a disadvantage when you need to address them.

The offline user experience: your hotel stay

Allow me to illustrate the point about how offline customer experience is cumulative. Let’s go on a quick virtual vacation (sorry, real vacations are expensive).

Now that you’re on vacation imagine you’ve just checked into your hotel. You’ve never been to this hotel before so everything here is a new experience.

You notice a few things while you’re settling into your room:

• There’s dust on the fixtures.
• There are a few stains on the carpet.
• The bathroom faucett is dripping.
• There aren’t enough towels in the bathroom.
• Your room is located next to a noisy ice machine.

None of these problems are enough to send you screaming from the hotel, but on the whole you find them annoying. They detract from your vacation experience. So you call the front desk to discuss the problems.

You call. And wait. And wait some more.

When you finally reach someone at the front desk they’re not apologetic about the wait or the condition of your room. They tell you that the maid has left for the day. They don’t offer to put you in another room.

You return home from vacation a few days later, feeling dissatisfied with the hotel and vowing to find a better place to stay next time.

The online user experience: your website or software

The way customers react to software and websites is similar.

A single small problem (navigation that’s hard to find, a display that’s difficult to read, instructions that aren’t clear) might not send a customer running from the room but it certainly detracts from the  experience. A confluence of small usability problems can result in abandonment (“death from 1,000 cuts”). And this is to say nothing of the larger usability issues that can stop your customer in their tracks (see my related article, “5 Shopping Cart Showstoppers“).

As with our fictional hotel stay, if you come away from a task having had a bad experience you’ll tend to avoid repeating it. A bad experience anywhere – in a hotel or on a website – is likely to leave a long lasting negative impression. In fact studies have shown that users who’ve had a bad experience with a product or service are very likely to tell friends and colleagues of their dissatisfaction.

The cost of small usability problems

So what do these small problems cost you and your company?

Customers who struggle with your software or website might be able to complete their transaction or task.  However, they’re much more likely to:

• Call for (expensive) customer service that could have been avoided.
• Give up before they complete a purchase or conversion and go straight to a competitor.
• Make a purchase or conversion but never come back because they were unhappy with the experience.

You can’t be there in person when a customer visits your website*. So ensuring that customers can find and do what they want – without great difficulty – means addressing both large and small usability problems.

The bottom line: prioritizing bigger usability problems is sensible, but don’t forget to “sweat the details” too.

Photo by zzzack. Creative Commons licensed.

Related posts:

1. Store locator usability: problems and best practices, part 3
2. Why require registration? Part 1
3. Store locator usability: problems and best practices

Quick summary: Improving type readability doesn’t have to be difficult. Attention to a few basic rules can ensure that users can easily notice and read important text on your website or in your application.

In this article we’ll examine the ways in which type readability affects usability and user experience and we’ll cover some best practices for avoiding common pitfalls.

In part 1 we looked at common problems with the way websites and software display type. We also covered some reasons why they can lead to more serious problems like abandonment and unnecessary calls to customer support/help lines. Now let’s get in to solving the problems.

Applying a relatively simple set of rules can avoid most of the situations noted above and some otherwise significant usability problems.

1. Pay attention to formatting.  In most cases it pays to employ relatively narrow margins, because they’re simply easier to read. Consider these two examples:

Narrow margins are easier to read and generally more usable.

Very wide margins require more work to read. They can cause usability and display problems.

For blocks of text more than a paragraph it’s helpful to use breaks and section headers to separate the information. This makes it easier for users to scan the content and find what they want.

Breaking text into smaller blocks makes type easier to read and more usable.

Dense blocks of text are hard to read. Users often skip right over them.

For shorter blocks of copy such as single phrases or sentences it’s often wise to employ bold type and/or underlining to highlight key words and phrases. For example:

Your order will not be complete until you click this button

…or in the case of a typical error message

Sorry, we need your email address

2. Avoid small type. This may seem an obvious suggestion but as noted previously it’s a surprisingly common problem. When you consider the number of people with imperfect vision and the tendency to overlook anything that appears to be “the fine print” it becomes clear that text should always be a size that’s easy to read, especially when it’s important to successful completion of a process.

It's important to keep type large enough to be easily readable.

3. Use larger type to emphasize important information. A corollary of the previous statement is that it helps to use larger type when displaying text that’s especially important. For example a confirmation screen that includes an invoice or order number should display the number larger than other type on the page since it’s likely to be a key piece of information. For more on confirmation page best practices, see this article.

4. Combine colors carefully; lean towards higher contrast. You should always strive to avoid low-contrast color combinations like light gray against white or the use of colored text and backgrounds that are in the same basic color and hue range. It also makes sense to test your color choices on multiple monitors since LCD screens tend to be more sensitive to contrast choices than traditional CRT monitors.

5. Avoid scroll boxes/text areas. There are numerous better ways to present large amounts of text than standard HTML “text area” scroll boxes. One alternative is to present a summary of the information along with a link to see the full text in a separate page or pop-up. Consider this example:

This simple interface presents links to policies without forcing users to read from a small scrolling text box.

Here the user is presented with links to see the various policies, but they’re not burdened with having to scroll down a long text box to read them on this page. Contrast this with:

Reading these terms requires a great deal of scrolling and reading from a small, wide text box. It's not a good user experience.

Well, at least they do provide links to a printable version. That’s more than some websites offer. Still, the first approach is more logical from a user experience standpoint. Besides being easier to read it also enables a lower “clutter factor” than scrolling text boxes.

A side note: in some cases it may be necessary for legal/business rule purposes to display an entire block of information on a given screen rather than present a summary then link to the full version. For example a company may wish to have the liability protection of being able to say “our complete terms and conditions can be seen right from the purchase page”. I personally disagree that small scroll boxes present information in a clear and usable manner. I won’t be surprised if some day this practice becomes a legal liability.

I’d be remiss if I neglected to also mention the problems with placing key information below the fold, but that’s a larger topic for another article.

Paying attention to the way you’re displaying text on your website or application will pay off in numerous ways. It’ll help ensure that users can see and read the information and links they need with a minimum of fuss and difficulty. That in turn will enable users to use your site or application in a confident and efficient manner. And yes, that usually means more conversions, greater customer satisfaction, and fewer support calls.

Image based on a photo by phunkstarr. Creative Commons licensed.

Related posts:

1. Readable type = usable type, part 1
2. 5 shopping cart showstoppers
3. Reduce costs and improve usability with visual standards, part 2

Quick summary: The visibility and readability of website type is important to nearly every online process. Yet many websites still miss the boat. Type is often too small, low contrast, displayed in dense blocks, or displayed where users may not see it.

It’s easy to find examples of type treatments that detract from usability. Instructions, product descriptions, policies and procedures, and important warnings or reminders often suffer from this most basic of usability problems. In this two-part article we’ll examine the ways in which type readability affects user experience and we’ll cover some best practices for avoiding common pitfalls.

In the process of user testing and heuristic evaluation I encounter many problems with text displays. Some issues are quite minor and are more annoying than unusable. But others can create serious issues and wreak havoc on the user experience. Most often I observe:

Poor formatting. Typical problems include margins too wide to be easily readable and text that’s displayed in large blocks without  breaks. This tends to cause users to skip right over the text, sometimes resulting in serious issues (more about this later). Another common formatting problem is placing important text in places where users don’t always look, such as in the margins of a page or “below the fold”.

Small type. Ever seen a TV commercial for cars or loans that includes a huge amount of “fine print” that’s so small it’s unreadable? A similar phenomenon occurs on the web with great frequency. Some websites display links and other important information   using type that’s much smaller than necessary. This makes it difficult for users to notice and/or read it. Small type is especially problematic for those with imperfect vision and/or small screens, or those who run their monitors at high resolution. Also, with the increasing popularity of laptops screen sizes have shrunk while resolutions have increased. This compounds the problem.

Poor use of color and/or contrast. I could (and will) write an entire separate article on the use of color and contrast because it’s a substantial topic by itself. For now let’s just say that there are many colors and color combinations that make type very difficult to read. For example “pure” colors such as pure red (FF,00,00) and pure green (00,FF,00) tend to be irritating to the eyes and hard to read. Low contrast color combinations are just as bad and even more common, for example light gray type against a dark gray background. Many websites have taken to “softening” the appearance of type by using shades of gray instead of black. This can be attractive but sometimes it goes too far. It’s important to find a balance between pleasant design and usability.

Reliance upon scrolling text boxes. Admittedly this is rarely a showstopper problem but frankly it’s a pet peeve of mine. Many websites and applications present large blocks of text (e.g. – user agreements, legal terms) within small scrolling text boxes. In HTML parlance they’re called “text areas”. To read the text users must scroll through the small box. The more text that’s placed in the box the more awkward scrolling that’s required to read it. There are good alternatives to this and in my opinion it’s an unnecessary usability barrier.

Now that we’ve seen some of the most common problems let’s take a moment to consider why these can detract from the user experience.

It’s critical to understand that most users have a strong tendency to skip over text.

In particular users tend to skip over anything that’s difficult to read or that they don’t immediately deem to be important. Users tend to direct their attention towards the information and links they deem as critical to the task at hand. This is natural since most are driven by a desire to “get on with it” as quickly as possible.

In other words, users often ignore things that seem like noise or clutter. So:

• If your type is difficult to notice users often won’t see it at all.

• If it’s difficult to read there’s a good chance they’ll skim it or skip over it.

• If it fails to get to the point quickly they’ll probably deem it unimportant and direct their attention elsewhere.

These problems can lead to users that:

• Don’t have the information and/or instructions they need

• Can’t determine how to move forward or complete a process

And this in turn often causes them to:

• Make mistakes because they didn’t notice instructions or warnings

• Call for support when it might otherwise be unnecessary

• Abandon a process out of frustration

• Complete a process but lack confidence about important issues such as next steps and policies

Poor use of type can cause some serious messes, and serious usability barriers.

The good news is that problems with type are among the easiest usability issues to solve.

In part 2 we’ll cover some simple ways to avoid these problems and present type in ways that users will find easy to notice and read.

Image based on a photo by phunkstarr. Creative Commons licensed.

Related posts:

1. Readable type = usable type, part 2
2. 5 shopping cart showstoppers
3. Store locator usability: problems and best practices

Quick summary: In parts 1 and 2 of this article we examined the ways in which registration affects usability and conversion. In this final part I’ll suggest some things to consider as you define your registration strategy.

Naturally there’s no single approach to registration that works best for every situation. However, there is one overriding concept that should guide your decisions.

The best approach is the one that enables the most direct path between the user’s arrival at your website and completion of their conversion/purchase. This is the essence of a positive user experience, and it’s what makes users happy, keeps them coming back and causes them to recommend your website or application to others.

In deciding how to accomplish this, it’s often helpful to:

Acknowledge competing goals; strive for consensus. Many companies struggle with competing goals from technical, marketing and product management interests.

•    Marketing teams often want to collect as much user information as possible.
•    Technical teams often want to make passwords and user IDs strong (not necessarily a bad thing but there are limits).
•    Product management is often more user-centric and concerned with the user experience – though not always.

For these groups to reach consensus it’s important they all understand the tradeoffs between registration and conversion.

As I mentioned in part 1 and part 2 of this article, less or no registration often facilitates more conversion and increased sales. That doesn’t mean you should simply forego a registered user database. But it does mean that a smart approach is to enable at least some functionality for unregistered users. Then encourage them to register. In the case of an e-commerce website this means offering a guest checkout path or minimal upfront registration.

Define boundaries between required and desired user information. Part of choosing the right strategy is to consider carefully what information you really must collect, understanding that the amount of personal information required is usually inversely proportional to users’ tendency to give it. If you require some type of upfront registration it’s usually most effective to require only information that’s technically necessary to process a transaction.  Then ask for other details later – or not at all. For example, requesting users’ birthdates is often justified as a way to create a “personal touch” by automating emailed birthday greetings. But this marketing device is common and fairly tired in 2009. There’s a good chance that customers already receive and ignore many similar communications. So it’s better to skip this request.

Determine when to ask for information. Once you’ve decided what to collect, give careful thought to the best time to collect it. In most cases this should be after the user has been exposed to information or products on your website and has some stake in wishing to complete a transaction.

This is a key point: value first, registration later is often the best model. Partial value (e.g. – The forum example from part 2) is often a good strategy for giving users an incentive to register.

Part 2 of this article also includes an example of integrating a registration option into a form that users must complete anyway to make a purchase. This type of “inline” approach works well for e-commerce websites.

Keep registration simple; use appropriate security. As I mentioned before technical teams sometimes get carried away with requirements for user IDs and passwords. A very common theme I’ve noticed in user testing is the desire to avoid creating “yet another complicated ID and password”. For applications like online banking this may be unavoidable for security reasons. But if your website doesn’t truly need strong authentication, it’s best to keep it simple.  For example, email address for a user name and a relatively simple password.

Define the value proposition; ensure it’s stated clearly. I covered this in part 1 and part 2 of the article, but to reiterate: requiring registration without stating the value proposition is counterproductive and can lead to abandonment. When asking users to create an account state exactly what they stand to gain, and be sure it’s a compelling proposition.

Define privacy and security terms; state them clearly. It’s also important to clearly state how personal details will be used – and not used. Few things kill users’ interest in a website or product faster than the expectation that their personal data may be unsafe or might be sold to unrelated third parties. “I don’t want this to add to my junk mail” is a statement I’ve heard more times in user testing than I care to count.

Consider incentives.  An effective strategy for building a database of registered users is to require minimal information upfront, then create incentives for users to provide more details later. For web services or information-based websites this could mean offering greater access to information, or discounts of some type. For e-commerce sites it could be discounts offered only to fully registered users or other such promotions.

Building a well-crafted and realistic registration process can have a big impact on the quality of your user database and your user experience. It can also improve your bottom line and conversion rates. It’s worth the trouble and the time to get this right.

Image based on a photo by scragz. Creative Commons licensed.

Related posts:

1. Why require registration? Part 1
2. Why require registration? Part 2
3. 5 shopping cart showstoppers

Quick summary: An increase in conversion is often better than an increase in user registrations, and the two can be at odds with each other. In the second part of this 3-part article we examine this idea and provide some suggestions for improving usability by simplifying registration.

In part 1 of this article we examined the problems that forced registration can cause. We also touched upon some of the reasons users shy away from websites that force them to register before accessing information or making a purchase.

Here we examine more usable alternatives. We’ll also look at the reasons reduced registration requirements can result in a better user experience, more conversions and more revenues.

We’ve looked at ways registration can be counterproductive to achieving conversion or sales goals. So what’s a better model? What’s the right balance between providing a simpler experience versus collecting useful information via registration?

There are a few approaches that seem to work well, but let’s start with one that usually doesn’t. Here’s an example of the type of barrier you don’t want to place between your users and completion of an e-commerce purchase:

Users have only two primary options here: they’ve already got an account or they’re forced to create one.

This limited set of choices slows new users down. On many websites registration forms take them away from the purchase process. Depending on how well the registration form is executed and how it handles errors the diversion may cause problems or even abandonment. This isn’t just speculation; I’ve seen it happen in countless user testing sessions.

Also note that in the example above there’s no messaging on the page that addresses why a user might wish to register – what tangible benefit it provides – and how the information will be used and safeguarded. As I mentioned in the first part of this article those are important issues to users. A lack of clear information at this point in a purchase process can cause unnecessary calls to customer service or result in abandonment. Here’s an example of a simple registration form that addresses benefits:

Let’s also consider the experience a consumer has when purchasing an item at a bricks-and-mortar retail store “in the real world”. They shop, take their purchases to the checkout, then pay. End of story. They’re generally not required to open a store account or divulge personal information. Even stores that ask for zip codes or telephone numbers will gladly complete the purchase if you decline to give it. Why should the online experience be substantially different from what your customers are already used to?

Think carefully whether an increase in conversion is better than an increase in user registrations, because often the two are at odds with each other. I’d argue that in most cases revenue is more important than building a database of customers who shopped but didn’t purchase, or purchased but won’t be coming back because the registration process was a nuisance.

Increasing conversion by reducing requirements

As I’ve already stated there are alternatives to requiring registration upfront. Which approach makes the most sense depends on your particular situation, but here are some starting points:

1. Integrate optional registration into checkout. For e-commerce websites an excellent approach is to integrate registration into the purchase process rather than requiring it at the start of the checkout process. In order to process a credit card and ship a physical item websites must collect a great deal of users’ personal information. Why not use this to simplify the user experience? Consider this simple wireframe example:

2. Require registration upfront but streamline it. A different approach is to require only minimal registration to enable users to get started (e.g. – just just an email address and password). While I personally advocate approach #1 above for most e-commerce websites, there are cases where this is a sensible approach. Assuming your website collects only minimal information up front, it makes sense to incentivise users to provide additional information after conversion has taken place – such as on the confirmation page or via a link an email follow-up. This approach works well for social networking sites like LinkedIn where users can create an account with relatively little information but are reminded how much of their profile remains to be completed. They’re also exposed to messaging that addresses the benefits of completing their profile.

3. Offer partial functionality with little or no upfront registration. Offering the equivalent of a free sample in return for minimal registration is another good model (e.g. – email and password only, then limited access to the product or service.) This is then followed up with messaging like, “Want full access? Just fill out this simple form.” Some special interest forums use this model, enabling users to search and read messages with no upfront registration, but requiring registration in order to access some sub-forums or view image attachments. This is a “win-win” because it means the forum is constantly showing off its wares and attracting new potential members. When users decide to register there’s a good chance they’re truly interested in the forum. This means they’ll help create a high quality member database for potential advertisers. Consider what happens if forum operators require users to complete a full registration just to access the smallest amount of content (and some do). They very likely end up with a poor quality member database, because some will have registered simply to determine whether or not the information was useful to them – and then decided it wasn’t. This can only result in the creation of accounts belonging to users who won’t be coming back. It’s not exactly the kind of targeted audience that drives advertisers to spend money supporting the forum.

In part three of this article we’ll wrap things up by examining some best practices for integrating sensible registration choices into your planning and development process.

Image based on a photo by scragz. Creative Commons licensed.

Related posts:

1. Why require registration? Part 3
2. Why require registration? Part 1
3. 5 shopping cart showstoppers

Quick summary: Many websites require new users to register before they can access information and services, or complete a transaction. But upfront registration can be counterproductive and can have a negative impact on conversion. In part 1 of this 3-part article we’ll look at why registration sometimes causes abandonment.

These days many e-commerce websites require registration as part of the purchase process, and many web applications require full registration upfront before users can demo a product or service. Does this paradigm really make sense? Or is it perhaps counterproductive?

Certainly it’s fair for companies to request at least some user information when there’s an exchange of value. And in some cases collecting personal information is necessary to delivery of the goods or service (for example you can’t offer a service based on users’ locations without requesting it).

The problem is that many companies assume they’ve done an adequate job of presenting their value proposition, and that users will register with little or no reservation. Unfortunately this often this isn’t the case; in my experience companies often fail to convince users that they should register.

It should come as no surprise that most users are extremely skeptical about registration until they:

• Clearly understand upfront what they’re getting in return
• Have reason to believe it’s of significant value to them
• Have a good sense for how their personal information will be used and/or safeguarded

Because users are skeptical and because companies often fail to present a compelling value proposition, registration can be a significant barrier to conversion. It can even cause some users to abandon a process or website entirely.

There are a few ways to address this – but first let’s understand the problem at a deeper level.

One of the issues here is that companies often don’t recognize the disconnect between the way they see the world and the way their users see it.

How companies see registration

Many companies start from the understandable but flawed viewpoint that it’s in their best interest to gather as much personal data as possible, and sometimes they also feel it should be gathered as early as possible in the customer relationship. They see their product or service as a value to users and conclude that users will see things the same way. These companies are often puzzled when they find users abandoning their website or process at the point where personal information is requested. They feel they’re providing a useful service or product, and that users have every reason to want it and to trust that they’ll use registration information in an appropriate manner.

How users see registration

Most users see registration from a very different perspective.

I covered aspects of this problem in the previous articles “5 shopping cart showstoppers” and “Your users have baggage”, but to summarize:

• Users come to your website with expectations and biases created from previous experiences.
• They’re often very skeptical about giving out personal information, especially to companies with whom they don’t already have a trusted relationship.
• Users naturally avoid situations they feel might compromise their privacy.
• Many users also avoid anything they perceive as likely to result in “yet more junk email”.
• Many users have difficulty managing the numerous ID/password combinations they already use – and they’re disinclined to create more.

In this context it’s not surprising that many users will avoid registering at a website if they can reasonably avoid it.

Here’s an example. Recently at a coffee shop I overheard the following comment from a woman sitting nearby, using her laptop:

“I hate it when they ask for your information, but they don’t quite tell you why they want your information.”

Clearly there was a disconnect between the expectations of this woman and those of the company with whom she was considering doing business. She’s not alone; her statement is a good example of what I’ve heard countless times in user testing sessions. Look at it this way: how would you feel if a total stranger asked for your home address? Your phone number? Your credit card number?

Even if users already have a trusted relationship with a company or website they may still wonder what becomes of their personal information. Will it result in a barrage of spam? Will it be sold to other companies? Is it safe from hackers?

It should surprise no one that users often find registration processes off-putting, annoying – even offensive.

So what’s the solution? Obviously for some products and services some type of personal information must be collected. And for some services it’s logical that users must have some type of account.

Still, there are cases where registration might not be necessary at all – or it may make sense to ask for only minimal information during the initial registration process, then collect more information gradually as the relationship between customer and company matures.

Here are four questions to consider when evaluating how registration should work for a given website or process:

1. Is it necessary? Determine if you really need registration for your product or service, weighing the benefits of having more users versus having more information about fewer users.
2. What information should be required and when? If you determine that registration is necessary, determine when it should best be presented – and importantly how much information you need from users. As we’ll discuss in Part 2 often “less is more”.
3. Is the value proposition clear? Ensure that by the time users are asked to register they have a very strong sense for why they should, and what they’ll stand to gain from it.
4. Is security & privacy addressed? As I mentioned above users will often walk away from a registration form or process if they’re not convinced their personal information will be handled appropriately.

In part 2 of this article we’ll get into the nitty-gritty of each of these points and we’ll look at some good and bad examples of registration processes.

Image based on a photo by scragz. Creative Commons licensed.

Related posts:

1. Why require registration? Part 2
2. Why require registration? Part 3
3. 5 shopping cart showstoppers

Quick summary: There are some good “rules of thumb” for presenting product images, but there are also some notable exceptions. Applying the right rules and approach can improve overall ease of use and conversion rates.

In part 1 of Product image best practices we looked at ways to ensure good product image quality. In part 2 of Product image best practices we looked at advantages and disadvantages to presenting images in various ways. Here in part 3 we’ll examine exceptions to the rules. We’ll also touch upon the reasons product images can have such a big impact on conversion.

Product image rules… and exceptions

In the first two parts of this article we looked at different ways to present images, and covered common-sense rules you can apply to determine which approach is best for you. The approaches I outlined probably apply to the vast majority of e-commerce websites but there are some notable exceptions.

Remember that one of the goals in presenting product images is to give users a sense that’s similar to seeing and/or touching an actual product. There are a few situations where this approach simply doesn’t make sense, or needs to be modified.

• For exceptionally large items, offer many views. Very large items like houses and cars pose a unique problem. They’re large enough that there are many views and angles that may be of interest to users. But there’s no way to know which views are most important to each individual user. So for large items usually the best approach is to err on the side of showing many different views as well as overview images that depict most or all of the object. For example online real estate listings often show multiple exterior and interior images of a property for sale, and in some cases they also show a view from the street and/or nearby landmarks. Showing many views enables prospective buyers to see not only the product (the house/property) but also its context (the neighborhood/area). Similarly, car companies have taken to offering multiple sets of photos to show off their cars – interior and exterior – and sometimes also 360-degree “virtual reality” views that enable users to spin a virtual car around and see it from almost any angle.

• For electronic goods, show realistic simulated images. Some items like software and e-books may not exist in the physical world at all. Two common examples are software that’s download-only and e-books books that aren’t published in a physical format. In order to present an “image” of such an item it becomes necessary to make one up. This example is an e-book product image (amusingly, an e-book about writing e-books):

A note of caution: One problem with creating simulated e-book product images is that they can make relatively short books appear to be quite lengthy. Customers who buy what looks like a book that’s many hundreds of pages in length and find that it’s much shorter might feel mislead by such images. Consider this example, (I’ve intentionally blurred the cover art):

At first glance I’d say this e-book looks like it ought to be least 150-200 pages. In fact its length is around 30 pages. To be fair this particular e-book is given away for free, but I’ve also seen similar product images for e-books that weren’t free and for which there was a similar discrepancy between how the product image looked and what was actually being sold.

There’s some gray area here but I’d argue that the practice of depicting an electronic product in a way that makes it appear more (or bigger) than it will probably be seen by some users as false advertising. Instead, I suggest either showing the cover art only, or depicting the book an a form that’s roughly representative of what it would look like if it were available in a printed format.

You’ll notice that most leading e-book sellers like Amazon and ebooks.com show only the flat cover art for their e-book product images. They don’t show a “simulated book” view like the examples above. This avoids the whole problem of misrepresenting a book’s length.

Now let’s look at a more positive example. A good example of “what you see is what you get” can be seen on the product pages of music production software company Audio Damage. Most of the product images on the Audio Damage website are screen shots of the actual software interface. So even though they’re selling a downloaded product there’s still a direct correlation between what users see on the website and what they’re purchasing. No unpleasant surprises here.

How product images affect conversion

Finally let’s take a few moments to review the importance of product images in the overall conversion process.

Good product images are important to e-commerce and conversion because they:

• Bridge the gap between the physical world and online world, giving users a greater sense of connection to the products they’re evaluating.
• Help establish credibility. Of course there are many other aspects to credibility, and I’ll cover those in a separate article. But clear and easily accessible product images are important to giving users a sense that they’re dealing with a legitimate and trustworthy e-commerce business.
• Address fundamental customer questions and concerns, like “Is this the right one?”, “Does this come in the color I want?”, “What would this look like up close?” and so on.
• Provide a competitive advantage. In a crowded e-commerce landscape offering high quality images (and plenty of them) helps users evaluate products and decide to buy.

I hope you’ve found this article to be helpful and informative, and I encourage you to apply these ideas to your own website and make your product images as vivid, helpful and informative as they can be.

Photo credit: Shermeee. Creative Commons licensed.

Related posts:

1. Product image best practices, part 2
2. Product image best practices, part 1
3. Why require registration? Part 2

Quick summary: There are many ways to present product images on an e-commerce website. Choosing the right approach requires considering the nature of your products as well as your customers’ goals and needs.

In part 1 of Product image best practices we looked at ways to ensure that your product images are of suitable quality and enable  users to easily see and compare products. Here in part 2 we’ll look at the advantages and disadvantages to various ways of presenting product images.

It should go without saying that the “best” way to display product images on your website depends on several things including the nature of your products and the needs of your customers. For example a website selling clothing might provide a better user experience by displaying images of each product on a model or mannequin in addition to images of that item against a plain background. Some websites benefit greatly by displaying product close-ups while for others there’s little or no need.

With that in mind let’s examine a few approaches to displaying products under different circumstances.

For most e-commerce websites there are two types of pages on which product images are typically displayed:

• Category or search result pages - these pages usually display an overview of products within a particular category, or products that match a search term. Category or search results pages are often the second page a user sees after they click on a category link or enter a search term from the website’s home page.

• Product pages -  these pages typically display the full product details along with an option to place the product in a shopping cart.

Of course on many websites product images appear in other places too. But for now let’s concern ourselves with these two since they represent the most heavily used pages within a typical e-commerce website.

Category or search results pages

For category or search results pages it makes sense to:

1. Use images to complement text descriptions. These days it’s fairly common for e-commerce websites to associate thumbnail product images with category or search results pages. Yet some still display only text descriptions. It’s generally more compelling and helpful to also use thumbnail product images, as this makes it easier for users to locate what they’re interested in and compare it to other items on the page.

2. Be sure images are large enough for comparisons. We touched upon this point in part one of this article but bears repeating. When using thumbnail images it’s important to ensure they’re large enough that users can tell the difference between products. There’s no perfect thumbnail size that makes this possible; it depends on how much detail is needed to compare your products. For example if you’re selling sporting goods it’s probably easy for most users to tell a football from a baseball or basketball even at very small sizes:

On the other hand if you’re selling hand-painted espresso cups you’ll likely need larger thumbnails to enable users to easily distinguish one item from the next – or you’ll need to link the thumbnails to larger images as in the example shown below.

3. Display color swatches. If your product is available in multiple colors then it’s often beneficial to display the colors at the category or search page level. Consider this wireframe example:

Here small swatches communicate the available colors for each product. This is helpful because users can:

• Quickly determine if they product they want is available in a color they like.
• Skip over any products that aren’t available in a color they want.

A variation on this approach would be to enable users to trigger additional product images by mousing over the color swatches, as in this example:

Product pages

For product pages it makes sense to:

1. Offer detailed images and multiple views. This suggestion doesn’t apply for every type of product – for example if you’re selling staples it probably doesn’t do much good to show 3 or 4 angles and extreme close-ups. But in many cases enabling users to see items from multiple angles – and close up – can be a powerful way to impart a sense of contact with the product. This in turn can improve conversion rates by giving users a stronger sense for product specifics and details.

Remember, part of the goal is to give users an experience that’s in some ways better than what they’d get by standing at the counter of a bricks-and-mortar store. So improving the user experience by adding multiple views and details is very likely to be a good investment.

2. Enable users to see product variations. If your product is available in multiple colors then ideally users should be able to see the product in each, as this gives them more control and a stronger sense for the product. Car companies caught on to this idea some time ago, and most auto manufacturer’s websites now enable users to switch between every available color when they configure a virtual car:

On some auto manufacturer websites the virtual car image also reflects the addition of extras like roof racks, special wheels, and other options. This is an excellent convention since it gives users immediate feedback and enables them to see a very accurate rendition of the car they’re evaluating.

3. Don’t group products into the same image (unless…) Displaying numerous products in the same image can be either a good or bad practice depending on the situation.

It’s a good practice in cases where the context is critical – for example, an exploded diagram of an automotive transmission with specific parts labeled. Likewise in some cases it’s better to show a product next to other similar products to clearly illustrate the differences. Consider this Chemex coffee pot, sold by Sweet Marias:

Now let’s look at another size of the same model:

When these products are shown separately with each image maximized for size it’s difficult to tell them apart. In this case a single side-by-side image could more effectively communicate the difference in proportions between the two items:

In general though it’s preferable to photograph and display most products separately since placing more than one product in the same image can slow users down and force them to “hunt” for what they want. So take time to consider whether or not multiple-product images make sense for your products. In most cases they don’t.

4. Make it easy for users to switch between views and variations. It’s great to have 3 or 4 (or more) variations of your product image. But if it’s cumbersome for users to switch between these views then you’ll decrease the chances they’ll look. Be sure to make it convenient and quick to switch between images, as in this example from Newegg:

Zappo’s website also makes it quick to switch between various views of the same product:

One variation worth considering is to display a single product image and enable users to see a detail view by pointing their cursor to different areas of the product image. This approach is employed to good effect on the Sears website, as shown here:

An approach to avoid is to require users to open and close a pop-up window for each product view. This quickly becomes cumbersome for users and often causes them to skip looking at product details. One example of this can be seen on the Chelsey Henry website, where clicking a “View larger image” link launches a pop-up that contains only a single product view – and no convenient way to switch to other views of the same item. Users must close each pop-up and open a new one to see different views. This procedure is very likely to discourage users from looking at all the available product images.

5. Show the product in context if doing so adds value. We touched upon this in part one of this article, but in some cases it may be beneficial to show the product in context in addition to (or even instead of) by itself. An example is furniture; it’s often helpful to give users a sense for how a particular piece might fit into a room, and it may also be beneficial to give users a sense for the item’s proportions relative to other everyday objects.

In some cases a “best of both worlds” approach is to show the product both in context and by itself so that users can focus on the product details but still gain a sense for how it might look in the real world. For example IKEA finds balance by showing each piece of furniture by itself and also displaying “in context” images (such as IKEA-laden rooms) for each major category.

6. Consider your audience. Providing many different product views and options isn’t necessarily a “more is better” scenario. It’s important to ensure that your approach works well for your particular users. If you’re selling home theater equipment primarily to twenty-somethings then it’s probably helpful to offer many product views, even images of included cabling and manuals. On the other hand if you’re selling Victrola records to baby boomers (or staples to use a previous example) it’s probably wise to keep things a bit simpler and more streamlined.

As always, user needs and behaviors should play a big role in determining of where and how to best display your product images. As I’ve mentioned before getting feedback from users doesn’t need to be a difficult or lengthy process – and it’s the best way to determine what works best for your customers.

In part 3 of this article we’ll take a quick look at some exceptions to these rules – special cases where it’s necessary to take a different approach to displaying product images. We’ll also review the impact that product images can have on conversion.

Photo credit: Shermeee. Creative Commons licensed.

Related posts:

1. Product image best practices, part 3
2. Product image best practices, part 1
3. Store locator usability: problems and best practices