Set the Mood
My UX experiment to better understand the power of color.
This experiment and article are in combination with my other article,
Get Sprinting, detailing the processes of the five-day sprint in which I developed my experiment idea, prototype, design, and results.
“Designers need to be aware of how color effects a users mind, to create a more impactful app experience.”
I want to see if and how different colors effect the impact an app has on a user. Specifically for mood setting, or mood based apps that are trying to get the users to achieve a specific goal.
A workout app, or a sleeping app fit this criteria. You wouldn’t want an app that was supposed to promote action and excitement to use colors that naturally calm the mind. Just like you wouldn’t want an app that was supposed to promote calmness, and relaxation to use colors that naturally excite and activate your mind.
Experiment Objectives
1. Find if colors really do change or impact mood, and experience in general
2. Figure out which colors create the most specific moods, ie: does purple make you feel angry? Does blue make you feel more calm. Basically I want to make statements like this:
Blank color makes people feel blank emotion.
3. Once I have figured out what colors promote what emotions (if they promote a specific emotion at all) I want to impliment those colors into different apps, to see if they enhance the users experience, or the overall impact the app had on them.
Ultimate goal: Gain a better knowledge of color theory, and determine if different color schemes can effect the impact an app has on a user.
How I’m Going to Do It
I want to test polar opposite apps, to really get a feel for the differences colors have on the user experience. To do this I will create one basic app template, for a workout type app — from there I will fill in the app template with the three different color schemes I have come up with, one that will promote an energetic (workout) mood, and one that will promote a calming/sleepy (sleep) mood, and a constant greyscale color scheme to compare against.
I will have participants work through task screens, with one asking them to preform some physical exercise. Once they finish one day(color) I will ask them to rate their experience on 1–5 and have them write about how their experience was. I will possibly come up with a question and short answer sheet for them to fill out to pinpoint and target their experience, and how the colors impacted their interactions with the app overall.
What I’m Going to Need
1. I plan on using some in depth color theory articles, and diagrams to come up with the intitial color schemes, and ideas for what colors promote specific moods. I want to create some diagrams to show what colors promote specific moods, so that I have it for future reference, and for others to use.
2. From there find some relatively easy templates to create, and the assets that fit with a workout based and sleep based app to insert into the templates. Also leaving grey or uncolored parts to fill in with the specific colors schemes.
3. I will need to create a question and answer document that pinpoints users expereiences with the colors on the app test, so that I get good data that goes along with what the experiments goals are.
4. I will need prototypes built in invision and illustrator or sketch.
Principles of Focus
I want to focus on color as one of my main design principles. To see how different colors, and colors schemes can effect the impact an app has on it’s user. Color can drastically change the impact a piece of art/work/design has on it’s viewer, I want to see if we can harness those powers of color to create a better environment for the user of an app.
Some secondary principles I would like to experiement with are, hierarchy, and usability with correclation to color.
So does a color hierarchy help users interpret information, or create a better user experience.
Going along the same lines with usability, do different colors and color schemes make an app seem more or less accessable and easier to use.
I do not want to focus directly on these secondary principles, but I do want to touch on them with respect to color, because it will help when creating better user experiences, and create a more impactful app.
My Research
I read through a multitude of different articles. All relating back to color and how to implement them into a user interface. Each article is linked below, but the article that made the biggest impact on my experiment research is
Natural Selections: Colors found in nature and interface design
This article explains that people are naturally drawn to colors that are found in nature, by using a color pallet found in nature you will stand out from the crowd and grab users attention.
“Perhaps no other design element has as much influence on how we feel in a space (a website, a home, etc.) as color.”
DISTINGUISH yourself and make your website stand out.
GUIDE users by allowing them to focus on interactions.
ENGAGE by making page layouts that feel comfortable and inviting.
INSPIRE by offering new and different color selection ideas.
The other articles:
THINK MORE ABOUT COLOR & Color Tool Link
COLOR THEORY KEYWORDS
MIXING COLOR FOR THE WEB WITH SASS
INFLUENCING DIGITAL USERS WITH COLOR
Over all I discovered that colors do change moods, people have been using these color setting tricks for decades. Most people are only implementing them in buildings and rooms, but I say we can use them in user interfaces as well. It will have the same impact to create a certain setting that can encourage users to feel a type of way.
My Prototype
I began with sketches of my design to get my ideas out on paper, and to come up with a good foundation to implement different color schemes onto. I figured I wanted to use as much room as possible for the colors and avoid any photos because they would distract from the colors themselves.
I decided to go with a minimalistic approach and incorporate little text, and some visual icons and designs to balance it out. I also created four different screens to work through so that it seemed like a legitimate prototype.
The user will start with the warm up, then once they have completed that it will move on to the strength section, and so on. But for the experiment purposes (and rapid prototyping purposes) I kept it to only the warm up section of the workout.
I then applied the two other color schemes to the template. One is bright red and vibrant to grab users attention and encourage energy, while the other is faded blue to encourage serenity.
My Testing
I began testing by first conducting interviews with people who could represent my potential user pool. These interviews were supposed to be personal, to get an accurate representation on what people actually think, and if this concept has any traction.
Most of my interviewees conveyed that they usually worked out harder when they were at the gym, because of the setting around them. I am lead to believe the colors found at the gym plays into that setting. Most also agreed that the color of an app does matter but they weren’t able to pinpoint exactly why it mattered and how it mattered to them. I believe color is so intrinsic that we do not always notice it, and understand how it impacts us. When I asked them each what colors they thought would emote energetic feelings, they all said bright vibrant colors, but not one specific color was mentioned or a specific color temperature.
My prototype is linked here
About a week later I asked each of the interviewees to complete the tasks on the prototype. I watched them complete the tasks, then I would ask them questions about each color scheme after they completed that days warm-up, giving them a break in between.
I continued this with all of the three different color schemes, then once all of them were completed I asked if they noticed a difference in their energy levels across the different color schemes. I also asked if they thought the different colors made them feel any kind of different way or if they were particularly invigorated by any color scheme.
My Results
I found that all of my test users preformed better while on the second color template, which is the red/yellow one which was designed to make users feel more energetic.
Some users felt the colors had a greater impact on them than others, the more athletic ones who consistently went to the gym or used workout apps felt like the color impacted their energy levels more. The test user that didn’t workout regularly said they were tired through the whole thing, and was just trying to get through it. But they said the red color seemed more consistent with a gym and made more sense for the app. The blue color did not fit what so ever and made them feel slightly off just because it was so jarring for the app setting it was in.
All of this being said, I was only able to get the users qualitative feelings and results. If I could go back, I would create the prototype so that I could also take quantitative results. But overall I think that the test results do accurately represent the color scheme mood differences.
Bright, vibrant colors create a more energetic mood. Knowing this, we can use these types of colors in apps that are meant to provoke energy to make the app more impactful on its users. Now if these colors can evoke feelings of energy, I think we can assume that other colors can do the opposite effect. Which in turn can be used in different types of apps.
Color can effect mood, and we should use this to our advantage when creating new apps and giving users a more impactful experience when using our designs.
Check out my other articles and publications here: https://medium.com/brittanykeller/codecs-the-knowledge-everyone-needs-but-no-one-wants-to-learn-4cf81ae320e2
And here: https://medium.com/brittany-keller-photography
Give me some love if you like my articles!
