Nothing can derail an online sale faster than usability problems involving money. People become (understandably) concerned if they can't determine a product's real cost, or how its components add up, or what they’re actually paying for in the end. Based on 20+ years of UX research in financial services and e-commerce, here are four basic yet powerful guidelines for presenting dollars and cents that will help shoppers feel confident enough to proceed with their purchase.
1. Show the math
Online purchases often involve add-ons such as accessories, upgrades, or taxes. Shoppers want to see each element and confirm they add up to the total before completing the sale. Supporting this behavior involves both content and layout: the costs of individual components must be included, and they must be displayed in a logical format that is easy to process visually.
For example, this rent portal clearly itemizes charges and shows a total, in standard addition layout:
Clarity is also important for discounts, as in this example where the original rate, discounts applied, and final total are easy to process:
By contrast, note how the math in the insurance claim below just doesn’t add up. While users may be pleased that they owe $0, their confidence may be shaken by the inscrutable equation displayed:
2. Compare apples to apples
Prices are complicated because they can be manipulated and displayed in so many ways. For any given product, the user might have to contend with its unit cost, sale price, bulk discount, and total cost across various scenarios. This makes it difficult to compare the actual cost of products across different brands and sizes. People can most easily compare prices when all items share the same units, sparing shoppers the mental load of doing the math in their heads.
For example, what’s the best way to buy HotHands? These four options all have different quantities and unit prices. It’s enough to give shoppers cold feet:
By contrast, it’s easier to choose which snap peas to buy because each price tag presents the same information - weight, unit price, and total price - in the same units, and in the same place:
3. Visually align corresponding values
Comparing two numbers is easier when the values are visually aligned; our brains can quickly confirm if the figures are the same and identify any differences. However, this task becomes more challenging when our eyes must move to different locations, and/or if we have to remember numbers as we scan back and forth.
For example, Intuit’s Quickbooks Online product displays two balances for each account – one from the bank and one from the transactions the user has entered into the system. In the first image below, it’s easy to confirm at a glance that the balances match (or discover that they don’t) because they are aligned vertically:
Unfortunately, in another view within the same product, Intuit presents the two balances side by side:
The horizontal layout forces users to move their eyes back and forth to compare digit by digit, or hold the full number in their memory to compare. What was once an instantaneous visual confirmation now requires thinking, which slows people down and increases the chance of error.
4. Say what you mean and mean what you say
Even the most trusting consumers may become suspicious when encountering complex language and fine print related to money. While some products are inherently complicated (hello, Medicare!), an interface can reassure shoppers by acknowledging the complexity, including in-context definitions, and offering off-ramps for more detailed learning. This website for Medicare drug plans offers multiple ways for shoppers to learn about complex coverage levels: it includes a general explanation of coverage stages at a high level, and provides links for more information at each individual level:
Show me the money!
No company wants to lose a sale in the last mile, but ambiguity about money can slow shoppers down, foster doubt, and lead to abandonment. The good news is, designers can help close the sale by showing the math, presenting options that are easy to compare, and replacing fine print with transparency.