{"id":1202,"date":"2015-09-21T08:00:43","date_gmt":"2015-09-21T07:00:43","guid":{"rendered":"https:\/\/uxstudioteam.com\/website\/?p=1202"},"modified":"2023-03-10T13:47:43","modified_gmt":"2023-03-10T12:47:43","slug":"when-the-user-gets-confused-by-the-legend","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/when-the-user-gets-confused-by-the-legend\/","title":{"rendered":"Devil In The Details: When The User Gets Confused By The Legend"},"content":{"rendered":"

\"when<\/p>\n

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.
\n<\/p>\n

The problem: a minor detail that drives buyers away<\/h2>\n

We were working on the new landing page of Hibridlev\u00e9l<\/a>. 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.<\/p>\n

The following illustration was our first design for this:
\n\"when<\/p>\n

What makes users confused<\/h2>\n

The user\u2019s comment during the user testing:<\/p>\n

\u201cIn case of traditional posting, a major part of the costs is printing and wages; moreover, paper, envelope and posting also bear costs.\u201d <\/em><\/p>\n

So, the user mixed up postage with the cost of printing.<\/p>\n

When I asked her to show me exactly which section indicates which cost:<\/p>\n

\u201cHere the colors show: wages are the darkest, then printing is a little lighter grey\u2026 or not?… or the postage is the darker one?? Yes\u2026 if so, I made a mistake: postage is the biggest cost.\u201d<\/em><\/p>\n

What this meant for us<\/h2>\n

So, it was the colors that made it hard for the user to differentiate between the sections.<\/p>\n

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.<\/p>\n

Maybe with other graphs, the exact identification of the sections is not that important, but on this landing page, it was.<\/p>\n

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.<\/p>\n

How could we solve this?<\/h2>\n

One of the solutions could have been to replace the 4 shades of greys with more distinguishable colors.<\/p>\n

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\u00e9l<\/em>.<\/p>\n

Therefore, our solution was to connect written labels to each section.<\/p>\n

\"when<\/p>\n

This worked. Colors and comments collaborate. The website communicates instinctively and rationally at the same time.<\/p>\n

What’s next?<\/h2>\n

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

If you want to read more case studies on UX problems and how we fixed them, let me recommend a few:<\/p>\n