Displaying chart with meaning and readability for users

Question

I'm working on an app and one flow will be showing a chart for a users mood. Two things the chart will include is the time and feeling of the user from 1-5. I was wondering if you think the way this image is displaying the mood feeling is too cluttered and could potentially confuse a user? I am trying to let the user know that 5 means the best feeling and 1 is the worst feeling. Should I even include the text or assume most people already know 1-5? Or maybe a small description just above instead? Also do you think the numbers on the time side is too close to each other?

Answer 1

What you have on the y-axis is clear.

The x-axis is not clear because there are no units. The dropdown at the top says 'Day, Month', yet it looks like x-axis is showing hours of the day.

A few suggestions:

1. I would challenge you to consider the value of assigning specific numeric values to mood. Does each number have real meaning? Assuming the answer is no, I suggest you collect input in an open slider that has no numbers:

2. Roll up the time values on the y-axis to unclutter it.

The underlying question is: Is there value in associating exact numeric values to exact times – or – is it more meaningful to collect and present the a relative picture of mood over time. If it's the latter, then your chart of results becomes much simpler.

Answer 2

Checkout the Rating Scales references at the Usability Body of Knowledge website. One of those, Tullis and Dumas (2009) offers some advice for situations like yours:

• use word labels for at least the end points of your scale
• avoid the trap of a bipolar scale (an example is given comparing a bipolar scale from easy to difficult to a scale from "very easy" to "not easy at all")

Based on the above heuristics, the word labels on the "mood" axis are important! Consider trying a design without the numeric labels, instead using unlabeled marks or a solid axis with an arrow pointing upward and a single label, "improving mood". It might also be possible to use an icon or emoji to represent the end points of the scale.

In addition to the "mood" scale, consider the UX of your time scale. What do the numbers on the time axis represent? If those are days, consider labeling the axis "Day" instead of "Time" and consider how to indicate the month. It may be appropriate to use a chart tile "Mood in January" for example. Or, maybe relabel the drop down menu that says "Day, Month" to "Mood in January".

Caution: my answer assumes that it is correct to show mood as a scalar value, ranging from bad to amazing. A quick look at the Wikipedia article for mood raises the possibility that a 5-point scale may not accurately represent psychological mood. For example, what number is "irritable" compared to "anxious"? It may be that mood is more effectively represented as positive or negative.