share
User ExperienceHow to represent an X/Y mood data to a user within a very small space (32x32)?
[+19] [6] Alex Stone
[2012-10-17 02:36:10]
[ info-visualisation graphics history ]
[ https://ux.stackexchange.com/questions/27892/how-to-represent-an-x-y-mood-data-to-a-user-within-a-very-small-space-32x32 ]

I'm building a mood tracker app for iPhone and am running into a user experience issue - I would like users to be able to track their moods, along with other events in a vertical "history".

The mood that I'm recording are reported on an X-Y scale with X being Pleasantness and Y being excitement (The scale is available from here as CC project without commercial user Pictorial Mood Reporting instrument [1]) :

enter image description here

With a typical 1-10 mood scale, I can use smileys to convey the intensity of the mood, but not so with a 2-dimensional scale.

When I store a record of the mood, I present it on a history view later, hour by hour, with data displayed in little circles. Due to the small size of the iPhone screen, I can only show relatively small circles (32x32).

I'm wandering how to best convey the X-Y information from the graphic above to a user using a small 32x32 circle? I'm currently experimenting with a hue/saturation/lightness of the circle, which results in circles of different colors standing for different X,Y combinations, but I'm not sure many colors would be very intuitive to the end user - what's the difference between a mustard circle and a cyan circle and a green circle? It may be learned by playing with the app, but I'm interested if there are better ways of conveying such X,Y information visually to the user?

enter image description here

I was thinking of drawing an arrow within a circle, that would point from the middle of the circle to the X-Y position on the grid. This would give some reference to the user as to what mood was experienced. Maybe there are better ways? A combination of color and an arrow?

enter image description here

Here are the arrows and colors combined. The direction of the arrow indicates the direction of the touch from the center of the screen, and the size of the arrow indicates the distance (bigger arrow for farther away). Do you think it is possible to convey this information to the user?

data visualization with polar coordinates and colors

Update: Here's my attempt at varying the hue/saturation/brightness to make each distinct region unique. As the user moves the finger on the screen, the color of the circle and the direction of the arrow changes, as illustrated below. The top left corner is irritability and tension, and it seems that red fits the bill. The bottom right is calmness and relaxation, which is blue. The rest is a mix of red, blue and green with a typical "pure" green being absolute center.

//for x and y ranging from 0 to 1
    hue = 0.33 +(x*1.3)*0.33 - (y*1.3)*0.33;
    saturation = 0.50+ 0.4*(sqrt(x*x+y*y));
    light = 0.1+0.6*(sqrt(0.5*x*x+y*y));

Moods map with color

+1 Cool project! On the top of my head I think the colour/circle combination looks very straight forward. Let's see if you get any wild answers. - AndroidHustle
+1 Very interesting question indeed. I don't have an answer straight away, I'm going to think about this for a while to see if I can get any inspiration... - Bart Gijssens
(3) Colour would be best to represent moods, do you remember mood rings? Have you considered using mood icons/faces? - Igor-G
(1) I second Igor-G, why not trying mood face icons? They could also look fun and push for engagement! - Alexis Brion
I really like the arrows idea (assuming the user input the values on something like your diagram above, and that they're generally going to do so roughly daily). The colours are a good secondary/at-a-glance display of the information although I'd probably have used yellow and blue for positive and negative respectively and adjusted saturation from very pale to very bright to reflect arousal level, but perhaps that's just me. I think your solution is quite neat overall. - Kit Grose
(1) One alternative UI would be to plot the data as a chart with its y-coordinate representing positivity, x-axis representing time and line thickness indicating intensity. That would probably be a more immediately familiar way to present the same information. - Kit Grose
(1) Interestingly, a smiley face with eyebrows (and open/closed lips) is almost sufficient to differentiate each face in your image, but each pair of corner faces has a similar pair of eyebrow and lips. - Brian
I like the idea of mood rings, these are cool! Thank you for the idea of eyes and eyebrows. These may push my animation ability to the limit ;). I will include an X-Y view where all reported moods would be plotted on the graph to act as an overview! - Alex Stone
check your new colours with asada.tukusi.ne.jp/cvsconv . Its too much green in there - almost 9% of males can't see a difference - FrankL
[+10] [2012-10-18 00:04:19] Jeremy T

I think you have too quickly ruled out the most intuitive option.

Humans are especially good at recognizing faces, and I think you might be surprised how well you can represent the nine different states with 32x32 smileys.

For example, take a look at this group of smileys:

http://gas13.ru/v3/pixelart/smilies_by_gas13.png

or very simply:

http://rookery.s3.amazonaws.com/3390000/3390174_dee6_625x1000.jpg

Your ideas are solid, but they are all suboptimal because there is no intuitive connection between shape, arrow length, direction and moods. A bit more so for color, but does blue represent sad or calm, and what color represents happy?

The vertical line/size/displacement option is also very creative, but it's not intuitive. You would have to train your users, which is the exact opposite of the "quick reference" ability that you're going for.


I have to agree with this answer. Would it not be possible for a good graphics designer to represent those different moods into a simple, minimalistic smiley-graphic? - Bart Gijssens
This answer reminds me of Chernoff Faces: a way to display multi-dimensional information in a two-dimensional grid. - Peter K.
@PeterK I see why you would think so, but I think there's one big difference here. I'm not advocating using human features to represent nonhuman variables; I'm advocating using human faces to represent human emotions, which just so happens to be one of their primary functions. - Jeremy T
@JeremyTunnell: Understood. I just happen to think that human multivariables are just as reliably represented as non-human variables --- there is just a direct interpretation available in the case of human variables. YMMV. :-) - Peter K.
1
[+4] [2012-10-17 08:41:58] FrankL

Nice graphics ;)

Your questions is interesting and hard to answer in detail. I think your way of solving the mood states by colour is good and understandable for people, because there is a direct combination of colours and their perception in terms of feelings.

I wouldn't use arrows in the circle, because this is a kind of very abstract concept. You have to have your xy-axis in mind to understand its meaning. And the direction of arrow might have a different interpretation than intended. Arrow down-right isn't to be thought of calm and relaxed. I would think its feeling bad or going to feel bad. (Or Dow Jones is going down ;)

What do you think about using shapes instead? Its easier to recognise and has meaning as well.

  • A star for excited/cheerful,
  • tensed/irritated a triangle,
  • sad/bored a square,
  • calm/relaxed a circle

.

Some further readings

  • You may have a look at these paper, which looks at Mapping emotion to color [1].
  • Johannes Itten [2] did a great job in investigating it further and did a basic combination of shape and color, as well as color and feeling.

Johannes Itten:

  • The red color of matter corresponds to the square. The severity and opacity of Red is part of the static and heavy form of the square.
  • The triangle is the symbol of thought, and in colour, the bright yellow corresponds to its weightless character.

  • The blue corresponds to the district, moving without pausing as color.

    Out of Bing translator of Media Wiki Bauhaus University [3] last paragraph Shape and Color

enter image description here

Source: Media Wiki Bauhaus University (Bing translator) [4]

  • And for sure, there are tons of other ressources, but this area is very broad. Actually its what you learn at university studing design... So its hard to find a ressource condensing it all down to a single article.
[1] http://hmi.ewi.utwente.nl/verslagen/capita-selecta/CS-Nijdam-Niels.pdf
[2] http://en.wikipedia.org/wiki/Itten
[3] http://www.microsofttranslator.com/bv.aspx?from=de&to=en&a=http://www.uni-weimar.de/medien/wiki/Farbe
[4] http://www.microsofttranslator.com/bv.aspx?from=de&to=en&a=http://www.uni-weimar.de/medien/wiki/Farbe

There still isn't any intuitive connection between the shape and the dimension the shape is supposed to measure. See @J_Rgen answer below for another (similar) approach - Jay Stevens
2
[+3] [2012-10-18 08:01:46] J_rgen

I would not use colors alone for displaying the moods, since a 2-d color scale would be much less intuitive than a standard 1-d scale. Also, you have to keep in mind that colors can have different meanings in different countries and cultures. See: http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm

Our congnition is very capable of distinguishing faces, so taking a look into the Chernoff faces would be my first guess. They vary from the usual smiley faces, with a more straightforward design. See: http://en.wikipedia.org/wiki/Chernoff_face

I would take the best of both worlds and combine a 1-d color scale for the x-axis (pleasant/unpleasant) with a set of faces for the y-asix (arousal). Through the strict separation of the axes you can achieve high distinguishability and it allows better locating of a single paramter (pleasant or aroused).


This probably needs an example to prove it out... but I think this is one of the cleanest ideas in terms of both intuition for the user and separation of the dimensions. - Jay Stevens
3
[+2] [2012-10-17 11:24:22] Vlad [ACCEPTED]

Since each color can be described with three variables: hue, saturation and brightness, you could try to use a pair of these to code your X/Y.

A good starting point would be to use hues (green/red) for horizontal dimension (pleasant/unpleasant) and use brightness or saturation for the vertical dimension: high = bright/saturated, low = dark/unsaturated.


(1) This is an interesting idea, but slight variations in colour (both hue and saturation) might be difficult to distinguish on a small screen that's being viewed in less than optimal conditions. - ChrisF
(5) Remember not all people perceive hue differences the same way. Communicating anything with colour alone is dangerous. - Kit Grose
I've even asked this question to biologists, here are the answeres biology.stackexchange.com/questions/3871/… - Alex Stone
@KitGrose - Excellent point! - Vlad
4
[+2] [2012-10-17 13:31:14] Roger Attrill

You could use colour, size and displacement of a circle from a mid line.

For example in the following image, I have converted the size of your arrows to the size of the circle, and the direction of the arrow to a displacement above or below the midline - as well as connecting the circle to the midline by a thin line so that it's clear which line it relates to.

I also made the grid and numbers rather fainter, added a gradient to the background and moved the rows a little further apart.

The colour is retained from your own examples, but the colour is not the only indicator of the mood as the size indicates intensity of arousal and displacement indicates the pleasantness (above the line) or unpleasantness (below the line).

So you can quickly see points of high emotion by the larger blob, and calmness by the tiny blobs. And you can see pleasantness by blobs connected above the line (as well as by the green-ness), and unpleasantness by blobs connected below the line (as well as by the blue-ness).

enter image description here


(1) I like it, but I'm afraid that the displacement is hard to judge from the thin line connecting to the faded out center line. Maybe that also has to do with the fact that the band that represents a day is not easy to distinguish from each other. Would it be an option to use a asymetric shape instead of a circle on a stick? Perhaps a drop-shape where the tip of the drop stays attached to the center line and/or to make it easier to spot what the bands are for a day? - André
Great suggestions! Adding a gradient is easy. If I may expand on your suggestion, the horizontal line through the middle may work - I can add two circles with sticks for each mood, one circle for excitement, another for pleasantness. The size of the circle would indicate overall intensity of each component. For example a mood of 0.5, 0.5 would produce two medium sized circles, while a mood of 0, 1 would produce no circle and a large circle - Alex Stone
I like this concept. Maybe a "moodline" (feeling up and down), where up will be thicker, and down thinner, to show intensity. With a dotted gray middle-line to see the difference. If there is insufficient data, the line could be gray in the middle. For actual data use colors (Red-Green, like traffic lights) - Bart Verkoeijen
5
[+1] [2012-10-17 11:07:04] JustinC

Stick with the bordered circle. The fill color being the color of the quadrant, while the border being a color corresponding to the closest axis ray. The closer to an axis the thicker the border. If nearly equally close to the center, or neutral, then, perhaps a solid neutral color; yet I hesitate to suggest white, grey, or black; perhaps a brown.


6