In her Care to Compare talk at An Event Apart in Atlanta, GA 2013 Colleen Jones shared a number of tips for designing effective comparisons on the Web. Here are my notes from his talk:
- People go to Websites to make decisions. We can design effective ways of making these choices.
- Mobile Website users who booked hotels viewed more than double the number of hotels compared to people who did not book a hotel. Instead of following a structured path to booking hotels, people blazed their own trail: they looked at a number of hotels and ultimately only a low percentage of people booked. So comparisons are important.
- There’s four steps to consider when to making comparisons effective.
Chose the right kind of comparison
- Self-comparison: show the differences between your products or services using text, images, videos, and animations.
- Competitive-comparison: show differences between your solutions and those from competitors. This can prevent people from going to other sites and show you’re not afraid of what competitors are offering. You can be explicit or focus on what makes your offering unique.
- Tracking-comparison: compare usage or performance over time. Illustrate changes in usage or progress towards goals.
Appeal to Reason & Emotion
- Get the rational facts worth comparing such as: features, specifications, and price; claims and proof points; data or progress being tracked.
- Don’t just dump all your data into a table. Make sure you focus on the facts that highlight key differences between the items being compared.
- Giving your content emotion requires a distinct, consistent style.
- Consider the labels you use to make comparisons. Think about your audience and use labels that appeal to them. Use their language and terms to tap into emotional values.
- For example, a comparison that appeals to entrepreneurs: Ramp, Grow, Max.
Relate to User’s Goals
- Use your labels and comparisons as cues or shortcuts to guide people toward the goals they have when picking between options.
- Use goals to make comparisons between different options relevant to people.
Emphasize with design
- Too much information can turn people away. Use visual design basics to make comparisons easier to understand: simplify, use visual hierarchy, contrast, and more.
- Show the story at a glance using design. Use design to communicate at the macro level (the big picture) without requiring people to dive into the micro level (details).