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) :
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?
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?
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?
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));