Devil In The Details: When The User Gets Confused By The Legend

Even the smallest thing can make the central message of our website incomprehensible. Here is an example of how the legend of a graph misled the user and how we resolved the problem while the site not only remained aesthetic but also became understandable.

The problem: a minor detail that drives buyers away

We were working on the new landing page of Hibridlevél. The part listing the prices had to get special emphasis, as this part was responsible for explaining to companies the difference between the costs of printing and addressing the envelope in-house and the costs of doing the same.

The following illustration was our first design for this:

What makes users confused

The user’s comment during the user testing:

“In case of traditional posting, a major part of the costs is printing and wages; moreover, paper, envelope and posting also bear costs.”

So, the user mixed up postage with the cost of printing.

When I asked her to show me exactly which section indicates which cost:

“Here the colors show: wages are the darkest, then printing is a little lighter grey… or not?... or the postage is the darker one?? Yes… if so, I made a mistake: postage is the biggest cost.”

What this meant for us

So, it was the colors that made it hard for the user to differentiate between the sections.

Moreover, basically (in Excel and in many graphic libraries as well) legends define the sections clockwise, which in this case is also confusing. When the user looked at it, what they saw didn't come logically.

Maybe with other graphs, the exact identification of the sections is not that important, but on this landing page, it was.

Our explicit goal was to make it clear for the visiting marketing professional or manager what it costs (in detail) to prepare her marketing (or other kinds of) letters in-house.

How could we solve this?

One of the solutions could have been to replace the 4 shades of greys with more distinguishable colors.

However, we did not wish to change this color code, seeing that the greyness captured the essence of traditional and outdated posting, compared to the preferable, fresh, way better Hibridlevél.

Therefore, our solution was to connect written labels to each section.

This worked. Colors and comments collaborate. The website communicates instinctively and rationally at the same time.

What's next?

With this example, we were aiming to shed light on the fact that details do count for users. One confused user — likely one buyer less for you. Those details can cost you dearly if not found out or remedied on time.

If you want to read more case studies on UX problems and how we fixed them, let me recommend a few:

• A New Way To Delegate And Split Expenses - a case study on how we redesigned a payment plugin for a fintech startup Payment Courier.
• How We Designed A Bilingual Lifestyle Magazine - the story of designing a major online lifestyle magazine from scratch, in Arabic and English.
• How We Built An MVP For Wattler - Katica's tale of creating a complicated mobile app.
• Business Website Design: How To Make It Awesome? - how we redesigned a huge corporate website for quality assurance giant TRIGO Group.
• E-Commerce UX Case Study - our designer Zsolti's account of designing Société Store, an online fashion retailer.

We hope you will enjoy reading these case studies. If you woulr like to learn even more about our methods, we wrote a Product Design Book. In this hardcover book, we introduce the basics of UX and our product design process.