billiedemott / spoutlets.com

Wireframes for various projects
0 stars 0 forks source link

Select color of mood (D6, UI/UX idea #3) #171

Open billiedemott opened 12 years ago

billiedemott commented 12 years ago

Idea: Select color of the mood, use standard color coded visual marks, use range of colors/shades from lighter/brighter to darker/greyscale to enforce a more objective perception of colorcoding the moods. See more info in the note

Additional comment:

  1. The range should be a horizontal picker to show perceived extremes - very light/positive colors on one end and dark/associated with negativity colors on the other end
  2. Color coded visual marks for posts - one idea is to use ribbons for posts, so when a user picks a mood color we ask him something like “Pick your current mood color for your ribbon” Ribbons might look like this:

http://vandelaypremier.com/images/resource-images/0411/ribbons-detail-6.jpg

http://tutspress.com/wp-content/uploads/psd-web-ribbon-sale-label.jpg

http://www.oneter.com/wp-content/uploads/2010/2/2/web20_ribbon_psd_layered_image_material.jpg

One thing to consider here when choosing color marks style is to make sure they are gender neutral/just elegant vs. being more female oriented cute ones, we don’t want to discourage males from color coding their moods.

billiedemott commented 12 years ago

For our reference, we should know that a lot of discussion about the above is covered in the "Color Thoughts" email we've been exchanging.

  1. We have to figure out the appropriate range of choices & what to do regarding how to impart to users what color means what. I think we both understand that knowing what color represents what kind of emotion is not really that intuitive. Discussion being held in color thoughts email. (I think perhaps we should move it over to Git to centralize.)
  2. (this is a copy & paste from color thoughts email). "I saw that idea of the ribbon & I like it. Bookmarking your mood (moodmarking). I think one of the reasons I was thinking about a frame is b/c your mood metaphorically acts as a frame to your world & what you see. For ex., when you are happy, that happy mood frames the way you perceive & experience the world. When you're happy, even annoying things might not annoy you. Corollary to that is if you are unhappy, little things that wouldn't bother you, bother you. Your "frame of mind" affects your image of the world. Thoughts?

(On this note, I was also thinking about the photo filter concept in terms of indicating the shades of your mood & mood movement. I don't know if you've ever heard the expression of "seeing the world through rose-colored glasses" or even seeing the world through a dark cloud. But I wonder if shading is something to consider. I'll flesh out this notion a little more in the spreadsheet. Very quick, prelim thoughts?)"

  1. Re gender neutrality, I totally agree. We'll have to figure out how to strike a fine balance.
billiedemott commented 12 years ago

Was this color entry idea in lieu of the image & verbal entry or an addition to it? Or were you considering both scenarios?

theoxygenated commented 12 years ago

I'll bring the discussion here. Couple of thoughts:

Moodmarking - sounds cool :) Frame - thats a very nice angle to look from! Shading the entire image might be a bit intrusive because the system kind of interferes with user's image and intentions behind that image and imposes it's own "rules" on top. Also, this probably won't work well for certain images and can make them even ugly just because of bad color combinations.

I think that the users will benefit from being able to create entries that don't have anything besides color and an emoticon. Since this would require only one action this would serve as a super quick entry - e.g. I just got a compliment about my skills and my mood went up so I can just quickly drop into Spoutlets, choose color with emoticon and click Post, thats it.

This actually makes me think in terms of UI if we should have a super quick entry options available right on the feed page. The use case would be the situation above. So I have a quick update --> I login --> I make one selection on the main feed page --> I click Post --> I'm gone = journal entry done! If I have more to say or want to add more details I login --> I see quick entry but since I don't want quick entry I click a link something like "Full entry" (needs more fun name :)) --> I'm taken to separate page where I can spend my time writing as much as I want, choosing picture, etc.

This option to be able to do super quick entry I think could serve well for encouraging users to keep doing entries and to do them regularly since this doesn't require much effort to do. And option to do longer version will always be available for when user needs it. That's pretty much the same strategy Facebook uses by having input field right at the top of the screen, similar strategy is Pinterest's plugin and Usabilla Discover's plugin (http://discover.usabilla.com/) that sit in your browser toolbar and allow posting to these sites super quickly and easy.

theoxygenated commented 12 years ago

Here is additional discussion from email:

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: 1. Yes, yes. Moods are ephemeral, so you have to capture them at the moment. So in your vision, would a user post their image, description & then be asked to indicate the color of their mood? Or, would they chose their mood color, pick image & write description all in the same step & then post?

My thinking is that having to choose all 3 of those things in one step before you post might be overwhelming & could deter people from posting? But we could do something similar to Instagram with its filters.

As you probably know, in Instagram, you can take a picture in one filter & then you can chose a different filter. Or, you can chose a filter before you take a picture & see what your picture will look like. Perhaps we can have a similar option where you can chose a mood color as you post with the image & description, or you can chose it directly after you post for some small amount of time. I think some people might want to express their feeling/mood with color during their post as an additional form of expression. And others might want to see what they posted & then chose the color, so then they feel like they can pick the right color shade to impart the emotional tone of their entry.

I know that when you actually post your Instagram pic to other networks, it can't be changed, but I'm equating the act of taking a picture with the act of creating an annotated image. Though subtle, I think there is a difference between having someone choose their color as part of their entry versus right after they write their entry. I think offering both options would increase the experience. But please share your thoughts.

  1. Re entry color of mood indicator, I wonder if it makes sense that the indicator always return to a neutral color. For example, say in my previous entry I was super upset, so I chose purple to color my entry. Then, I make another entry, but this time I'm super happy. However, I forget to change the color. My really happy entry is then colored with a shade that signifies an unhappy mood. I think returning the color to neutral controls for this situation. Even though neutral might not be accurate for that happy post, it would be a lot less inaccurate.

I saw that idea of the ribbon & like it. Bookmarking your mood (moodmarking). I think one of the reasons I was thinking about a frame is b/c your mood metaphorically acts as a frame to your world & what you see. For ex., when you are happy, that happy mood frames the way you perceive & experience the world. When you're happy, even annoying things might not annoy you. Corollary to that is if you are unhappy, little things that wouldn't bother you, bother you. It's your "frame of mind."

On this note, I was also thinking about the photo filter concept in terms of indicating the shades of your mood & mood movement. I don't know if you've ever heard the expression of "seeing the world through rose-colored glasses" or even seeing the world through a dark cloud. But I wonder if shading is something to consider. I'll flesh out this notion a little more in the spreadsheet.

theoxygenated commented 12 years ago

Couple of points re: the above:

a) Have quick entry possibility and have longer entry possibility. Here I was assuming that exactly the color among all other entry attributes can convey the message in the fastest way and in most expressive way, so I was proposing in one of the comments above that Color + emoticon is used for quick entry and all the rest of attributes are used for longer entry.

b) Having color picker that allows preview of the entry - how will it look with my selected color like in Instagram

c) Be able to add color before image and text and sort of create the content in this mood, and be able to create content first and then shade it with what it feels like

d) After entry is posted the next entry should not have previous color selected by default - it should start from no color.

We should think what attributes are absolute minimum for posting and entry. If that's the mood color + emoticon (which I'm leaning toward to) then it directly affects how we envision the UI for the c) point above, because if the user has an opportunity not to add anything but the color+emoticon Instagram-like UI for applying filters won't work since there would be nothing/no content to frame in this case.

theoxygenated commented 12 years ago

Question: How many color choices do you anticipate before it becomes too much to remember?

M: best practice would be around 7. 7 items is average mental burden people are willing/able to carry.