User should also be able to filter the feed by mood range using the same mood color picker (if we use color) to for example narrow down the feed only to light/more positive moods or other range. If we use colors, there will be many variations of color available, so the range picker should not be too narrow to avoid 0 results.
Comment:
Very interesting idea. Was there a particular site that you were taking inspiration from? I know in etsy you can search by color, but that's more intuitive for physical things. I wonder if filtering the feed by mood color might be too much to think about. Perhaps it can be one interesting way you can filter, but there is another option too? I think if I was a user searching for the first few time on the site (having not posted yet), I could potentially get confused if this was my only means of search b/c I don't immediately associate a particular color with a particular mood. What do you think?
UPDATE: points from 6/6 discussion via email:
B: http://newsmap.jp/ - This is very helpful. The user eventually gains a color association to particular topics, so they can eventually scan more easily with less thought. Color coding is a super powerful tool, creates deep cognitive associations.
M: Yes!
B: http://emotionalcities.com/beta/ - I definitely think there is something to the fact that we were independently taken to this site. What if in your color conception, these colored facial expressions were used to guide users as to what color means what particular feeling? As a user, if I see that frown on the purple face, then I know I can use that color to express a sad feeling & I know that other users are using that color to express that feeling. That way I can more easily (with less thought) shade my feeling & also easily search for other entries with that feeling. I think it makes it more tangible. What are your thoughts?
M: Yes, I agree, after doing more of my own journaling, I think we should limit the colors to very specific range and then add as you say/emotional cities do some indicators of the mood (by indicator I mean anything that specifies/defines the mood - smiley faces, 9gag type memes, color, scores, rating, textual mood definition, etc. and combination of these like color and a meme for example)
B: http://www.zillow.com/visuals/negative-equity/ - I see how color gives you a snapshot view of the picture, but I definitely felt that I had to keep referring to the key to get an understanding of what each color meant. Did you find that too? That there isn’t any immediate association/meaning to a particular color? That you have to return to the reference/key to understand what it means?
M: I agree, but I think the point of this kind of visualization is to not necessary provide exact values, but allow to see overall where the color is deeper and where it's lighter, understanding the overall dynamics
B: I think it’s a great way to represent this kind of complex info, but would it work for us? Could we use the emotional cities colored smiley faces & colors as a key? (Actually think I was doing this when you originally were describing this idea to me last wk b/c I needed a guide to visualize what colors I would chose to shade my entry). If this did work, I think the colors should be changed to reflect more conventional notions (based on color theory) of what each particular means. What are your thoughts on this?
M: Yes, see above, we would need to think carefully the colors for color picker so that its easy to grasp, not too much to remeber (lessen cognitive burden on the user) and at the same time reflect general associations with colors - so that when this is viewed in analytical mode users are able to figure out immediately things like "oh, so this month I was feeling fine in the beginning, and slowly coming to the mid month my moods started dropping, I wonder why is that? what was going on in that time?" and provoke thinking and relating moods/dynamics to events (based on Interpersonal therapy method)
B: So after numerous shaded entries, you could zoom out of the entries & see the shades of your mood. You could even send this to your therapist, so they can read individual entries, see the images, etc & also zoom out to get an overview of your mood movement based on seeing the change in colors..
M: Yes, and I just found another excellent example of how the zoom in/out is used. In the tool I offered for ideas sharing there is this zoom in and out (unfortunately the screenshot is small, but if we use this tool we'll definitely get to see the big nice version of this: http://screencast.com/t/QAvoyeqw ) Since each idea/note is color coded and has a context attached to it, when you zoom out you see a big picture of patterns and trends in idea generation process (idea generation - in case of this tool, mood patterns - in case of Spoutlets)
B: If the gratification of shading your entry comes once a user has shaded many entries, how do they get that feedback that they should keep shading their mood? What kind of visual feedback do they get each time they add color to their entry? What do you think?
M: I think the color coding should happen at the same time as when the entry is made, so along with other entry attributes (image, description, etc.) color can be chosen. As far as I understood from therapy methods post factum definition of your mood doesn't really work for therapeutic purposes, it has to be done at the moment of recording it. Feedback: the icon with the selected for the entry color and any other mood indicator will stay selected until change is made, once entry is posted - there has to be a visual method of displaying this mood indicator, for color I had an idea of a ribbon, see in the spreadsheet the note for D6
B: This is one thought I had to deal with the above issue. What if a user can drag & drop one of these colored faces onto their entry & this shades their entry with a colored frame. For example, I chose the purple face b/c I feel unhappy, then I drag & drop it onto my entry & then a purple frame appears around my entry. If I zoom out on this entry, I will see a purple cube, which will function as one of the data points in my mood shade infographic.
M: Yes, dragging and dropping is a nice interactive tool, I like it. Quite frankly, I can't say at the moment whether a frame, a ribbon, an icon or anything else would work better than other methods - this part should be really visually attractive, so since I'm not a visual designer it's hard to say which one will look best, in terms of UX - colored frames would definitely serve their job of specifying the mood of the entry. Ideally a visual designer would need to do some work here to ensure that this kind of highly visual elements look great, but if there's no option to engage a visual designer - I'd prefer to come up with the feed/board concept in wireframes and only then try out how framing or ribbons or anything else would work.
Re: zoom out - zoom out should be available only after an entry is posted not during creation process, if you feel that the already during the creation of entry user needs to see how this particular entry will look in context of zoomed out feed - then we can probably thin of some kind of preview, but I think the entry/creation process should be as simple as possible + you can zoom out immediately after posting the entry, so I'm not sure I see the need to zoom out during creation of the entry.
B: Are you familiar with Canvas? http://canv.as/. On the site, you can drag & drop a smiley or a little sticker onto a post. This is the kind of motion I was envisioning.
Then, I was thinking that dropped smiley creates a colored frame - in the same kind of motion as when you click your color picker over a graphic in Photoshop. (I’ll try to find a site that imparts this color change more clearly.)
(Btw I was having trouble logging into Canvas today, I think they are doing some re-design.)
I think roadblocks ahead are really figuring out how to get users to add these visual aspects without it being cumbersome or not fun. We need to figure out when & how users can take these steps to make their journals visually appealing. What kind of userflow makes this seamless & makes them not have to think? Can we achieve that? How can this be fun & addictive?
M: I need some more time for collecting these more detailed UI ideas. Fun is definitely a huge requirement!
User should also be able to filter the feed by mood range using the same mood color picker (if we use color) to for example narrow down the feed only to light/more positive moods or other range. If we use colors, there will be many variations of color available, so the range picker should not be too narrow to avoid 0 results.
Comment:
Very interesting idea. Was there a particular site that you were taking inspiration from? I know in etsy you can search by color, but that's more intuitive for physical things. I wonder if filtering the feed by mood color might be too much to think about. Perhaps it can be one interesting way you can filter, but there is another option too? I think if I was a user searching for the first few time on the site (having not posted yet), I could potentially get confused if this was my only means of search b/c I don't immediately associate a particular color with a particular mood. What do you think?
UPDATE: points from 6/6 discussion via email:
B: http://newsmap.jp/ - This is very helpful. The user eventually gains a color association to particular topics, so they can eventually scan more easily with less thought. Color coding is a super powerful tool, creates deep cognitive associations.
M: Yes!
B: http://emotionalcities.com/beta/ - I definitely think there is something to the fact that we were independently taken to this site. What if in your color conception, these colored facial expressions were used to guide users as to what color means what particular feeling? As a user, if I see that frown on the purple face, then I know I can use that color to express a sad feeling & I know that other users are using that color to express that feeling. That way I can more easily (with less thought) shade my feeling & also easily search for other entries with that feeling. I think it makes it more tangible. What are your thoughts?
M: Yes, I agree, after doing more of my own journaling, I think we should limit the colors to very specific range and then add as you say/emotional cities do some indicators of the mood (by indicator I mean anything that specifies/defines the mood - smiley faces, 9gag type memes, color, scores, rating, textual mood definition, etc. and combination of these like color and a meme for example)
B: http://www.zillow.com/visuals/negative-equity/ - I see how color gives you a snapshot view of the picture, but I definitely felt that I had to keep referring to the key to get an understanding of what each color meant. Did you find that too? That there isn’t any immediate association/meaning to a particular color? That you have to return to the reference/key to understand what it means?
M: I agree, but I think the point of this kind of visualization is to not necessary provide exact values, but allow to see overall where the color is deeper and where it's lighter, understanding the overall dynamics
B: I think it’s a great way to represent this kind of complex info, but would it work for us? Could we use the emotional cities colored smiley faces & colors as a key? (Actually think I was doing this when you originally were describing this idea to me last wk b/c I needed a guide to visualize what colors I would chose to shade my entry). If this did work, I think the colors should be changed to reflect more conventional notions (based on color theory) of what each particular means. What are your thoughts on this?
M: Yes, see above, we would need to think carefully the colors for color picker so that its easy to grasp, not too much to remeber (lessen cognitive burden on the user) and at the same time reflect general associations with colors - so that when this is viewed in analytical mode users are able to figure out immediately things like "oh, so this month I was feeling fine in the beginning, and slowly coming to the mid month my moods started dropping, I wonder why is that? what was going on in that time?" and provoke thinking and relating moods/dynamics to events (based on Interpersonal therapy method)
B: http://awesome.good.is/transparency/web/0911/education/flash.html - very helpful
B: http://awesome.good.is/transparency/web/1101/census-data/flat.html - very helpful
B: So after numerous shaded entries, you could zoom out of the entries & see the shades of your mood. You could even send this to your therapist, so they can read individual entries, see the images, etc & also zoom out to get an overview of your mood movement based on seeing the change in colors..
M: Yes, and I just found another excellent example of how the zoom in/out is used. In the tool I offered for ideas sharing there is this zoom in and out (unfortunately the screenshot is small, but if we use this tool we'll definitely get to see the big nice version of this: http://screencast.com/t/QAvoyeqw ) Since each idea/note is color coded and has a context attached to it, when you zoom out you see a big picture of patterns and trends in idea generation process (idea generation - in case of this tool, mood patterns - in case of Spoutlets)
B: If the gratification of shading your entry comes once a user has shaded many entries, how do they get that feedback that they should keep shading their mood? What kind of visual feedback do they get each time they add color to their entry? What do you think?
M: I think the color coding should happen at the same time as when the entry is made, so along with other entry attributes (image, description, etc.) color can be chosen. As far as I understood from therapy methods post factum definition of your mood doesn't really work for therapeutic purposes, it has to be done at the moment of recording it. Feedback: the icon with the selected for the entry color and any other mood indicator will stay selected until change is made, once entry is posted - there has to be a visual method of displaying this mood indicator, for color I had an idea of a ribbon, see in the spreadsheet the note for D6
B: This is one thought I had to deal with the above issue. What if a user can drag & drop one of these colored faces onto their entry & this shades their entry with a colored frame. For example, I chose the purple face b/c I feel unhappy, then I drag & drop it onto my entry & then a purple frame appears around my entry. If I zoom out on this entry, I will see a purple cube, which will function as one of the data points in my mood shade infographic.
M: Yes, dragging and dropping is a nice interactive tool, I like it. Quite frankly, I can't say at the moment whether a frame, a ribbon, an icon or anything else would work better than other methods - this part should be really visually attractive, so since I'm not a visual designer it's hard to say which one will look best, in terms of UX - colored frames would definitely serve their job of specifying the mood of the entry. Ideally a visual designer would need to do some work here to ensure that this kind of highly visual elements look great, but if there's no option to engage a visual designer - I'd prefer to come up with the feed/board concept in wireframes and only then try out how framing or ribbons or anything else would work.
Re: zoom out - zoom out should be available only after an entry is posted not during creation process, if you feel that the already during the creation of entry user needs to see how this particular entry will look in context of zoomed out feed - then we can probably thin of some kind of preview, but I think the entry/creation process should be as simple as possible + you can zoom out immediately after posting the entry, so I'm not sure I see the need to zoom out during creation of the entry.
B: Are you familiar with Canvas? http://canv.as/. On the site, you can drag & drop a smiley or a little sticker onto a post. This is the kind of motion I was envisioning.
Then, I was thinking that dropped smiley creates a colored frame - in the same kind of motion as when you click your color picker over a graphic in Photoshop. (I’ll try to find a site that imparts this color change more clearly.) (Btw I was having trouble logging into Canvas today, I think they are doing some re-design.)
I think roadblocks ahead are really figuring out how to get users to add these visual aspects without it being cumbersome or not fun. We need to figure out when & how users can take these steps to make their journals visually appealing. What kind of userflow makes this seamless & makes them not have to think? Can we achieve that? How can this be fun & addictive?
M: I need some more time for collecting these more detailed UI ideas. Fun is definitely a huge requirement!