Care2.calm

Introduction

Once upon a time I designed for a little portal called Care2.com, an online community whose members generally “Care2 make a difference” (Care2’s byline). I still receive email newsletters and click through occasionally to see what’s new.

On my visits, I’ve come to expect fairly regular changes in the visual design - but this time, WOW! - the “ahh factor” just swept over me. Despite my long day at the computer, I was rejuvenated and stuck around to explore the site more than usual. The new Care2 just oozed calmness, and profoundly affected my psyche (so much that even the pesky interstitials seemed acceptable). I found myself exploring more, and clicking to support my favorite causes (“free clicks” to save animals for instance).

Simply put – this new interface just made me feel good. New colors and shapes, and even the gentle words, gave me a sense of well-being, informing a place where I wanted to sit for a while… there was “breathing” room, finally, in not presenting every single link and navigational menu possible - navigation was folded up, and very logically I must say, in a way that allowed me to easily pick and choose where I wanted to go, giving me a sense of control. I immediately knew that this was great fodder for a contextual investigation into the value of calmness.

As Friedman put it, designing for calmness helps the “user to stay, maintain calm and control, and access information as needed.” [1]. in conjunction with new colors, shapes and a cleaner, simpler landscape, the new site seemed not only calming, but easier to use. Friedman identifies four “pair-wise” aspects of balance between designing for ethics and designing for usability – it struck me that Care2 had done both.

Calmness as a value: Reducing the noise in an increasingly noisy technological world

Supporting ethically a calm state of mind at Care2 addressed a growing concern about the ubiquitous nature of computing. Wieser and Brown as quoted in Friedman [1] say that if computers are everywhere, they had better "stay out of the way.” Friedman says the value of calmness should be applied in applications/sites where there is “strong potential for information overload" - which was certainly true for Care 2.

Contents
This conceptual review provides some background on Care2, its stakeholders, definitions of calmness, especially as it relates to a healthy state and well-being, how calmness is designed into the look and feel and intrinsically part of designing contextually, how it supports both users and business goals, how emotional and persuasive design fit in, and an example of a page on Care2. Included at the end are some future considerations about how ethnographic research on the various vertical subgroups of members might improve Care2 even more.

Care2 content, membership and stakeholders

Now at 16 million members strong, Care2 provides many activities of special interest. There are ways to take action to save species, children and ecosystems, to name a few, and the portal includes typical functionality like email, social networking, eCards, petitions, photo sharing.

Care2 is supported by a combination of angel investors, and nonprofit member organization and retailers interested in capturing the hearts and minds of the Care2 member. Both direct and indirect stakeholders have a vested interest in making the site easy on the psyche and easy to use, whether in shopping for organic bedding or clicking ‘free’ to save species, or opting into newsletters from nonprofit organizations to support important causes.

Stakeholders
Direct Stakeholders are:
1) Site members or visitors - typically interested in environmental sustainability, animals, healthy living and progressive social politics, members range from medium- to-hard-core activists who want to support the planet and also find sustainable goods and news and information.
2) Business owner(s) – same as above, but interested in a profit model that also supports the interests of its members
3) Designers and staffers – a motivated, tight-knit group who are generally members themselves and behind the brand from both an ethical and financial perspective, dedicated personally and professionally.

Indirect stakeholders are:
1) Retailers – those who advertise products and services that fall into the interests of this population
2) Non profits – groups that want to maintain a presence and way to tap into this natural population to opt in for membership in their organizations and to receive newsletters (these groups pay for members' “free clicks” to provide a path to that end)

Direct stakeholders have a vested interest in providing a calm experience. They want a place to explore, relax and browse. Feeling calm and good about where they are is extremely important. For the business owners and investors, this state is desirable because it keeps the site "sticky" as members participate in the activities, supporting the business model and Care2’s growth.

Indirect stakeholders have a vested interest for the same reasons as investors, to keep visitors there and actively participating. However, there could be potential conflict in constancy of calm, because at times it conflicts with a desire to call attention to a product or opportunity to join an organization. This balance is a very real issue and one that the designers and owners grapple with as personal values sometimes conflict with profit goals of the site.

Calmness: Definitions and associations

Lexis.us defines calmness as “steadiness of mind under stress” [4]. Merriam-Webster associates calmness with a state peacefulness and serenity [5]. Wikpedia defines calmness as the mental state of being free from agitation, excitement, or disturbance [6].

Well-being is associated with calmness and is commonly believed that calming the thoughts, through various practices, results in a higher state of well-being. The Mayo Clinic discusses the connection of the practice of meditation to help clear away “the information overload that builds up everyday ...” [7]. The practice of mindfulness includes visualizations to reduce the noise of our thoughts on a daily basis. By extension, other practices and visual stimuli are said to reduce stress and induce calm; Friedman suggests that psychological literature shows that “direct experiences with nature have beneficial effects on people’s physical, cognitive and emotional well-being” [1]. It has been shown that the use of color can also contribute to various moods [8]. Familiar human-like shapes can make us feel more comfortable.

Calmness explicated in the Look and Feel

Calmness in natural (or abstracted) views of nature
Studies have shown that even “minimal connection with nature” can reduce recovery time, by lowering stress levels, calm patients before surgery, etc. [1]. One can see the notion of calmness and well-being explicated in natural scenes in its general look and feel, and in ads from retailers and environmental nonprofits which typically depict animals, flowers, or other natural objects into their brands. However, nature scenes have their limits, which are many times noisy collages and conflicted with each other. Too much of a good thing makes one not notice or take in the effect.

Today’s version shows an evolution and a shift in the representations from:

- Heaviness to lightness
- Darker to lighter
- Clustered collages and busy images to one image
- From bright primary colors to subtler muted colors

Care2 has taken the design for calmness and well-being a step further by combining a minimalist approach, also associated with stress reduction, with abstractions of nature through the use of color, shape and appropriate white space. (An interesting study topic might be how abstractions may even work better than nature itself, due to some more primal reactions that enhancements in color and light are able to make in digital manipulation.)

Calmness in colors and shapes
Colors have a great affect on mood [8]. While blues and greens are typically associated with nature and calming effects, they have to be used carefully as these calming colors can also have the effect of depression or negative moods, so use of them in conjunction with warmer colors can work as well, as long as the warmer colors are more muted. Care2 achieved this – while green is still central, there isn’t as much blue in the greens and definitely not as many primary blues. The green has a slight yellow tint, and the calls to action are a muted orange, a light-inducing color which may counteract the potential negativity of cold blues or greens. The orange is a little more energizing to invoke attention to call actions to attention, in a complimentary contrast with the other colors.

Shapes are rounded and more 3D the way humans expect in the world. This more human-oriented aspect was introduced by Apple, who understood the connections that needed to be made between computers and humans, and a staple of their look and feel.

White space, or the creation of the 'negative' space that allows the objects to ‘breathe’ is balanced as a framework for accentuating the colors and shapes, while also reducing the load created by stuffing any possible object into any space with ‘nothing’ – an undesirable place to be in graphic design anyway.

Additionally, abstractions of natural states are favored over photorealism, which as discussed is sometimes noisier to the eye. This results in a look and feel that supports calmness because it is less complex to the eye.

Care2 has found a nice balance between the calming effects of real and abstract representations of the natural world.

Calmness through use of the periphery – (pros and cons)
The ‘periphery’ is our vision is outside the main focal area of vision. Wieser and Brown put forth that you can design for calmness by putting less relevant information in the periphery until it is needed (I define periphery as top, bottom, right, left – areas that are just outside the central focal vision).

This works in some cases but not all. Care2 reduced their top level of navigation to just 4-5 tabs which reduces the load, and when you click on a tab, you get the subnav underneath; and you also have the common technique of opening the main tab and the left nav appears with sub-categories.

But there are cases where the periphery is overloaded, which Friedman acknowledges as a danger. Further, it depends on what is in the periphery. Cognitive studies show that people notice and become more attentive (and hence more distracted) to the larger images, especially animated ones, in their periphery [10]. (This is why banner ads and ads with large images often found in the right column are so distracting and reduce calmness). As Reeves & Nash put it, “the processing of motion shuts down other thinking; … it is even more distracting when it occurs in peripheral vision; try to keep characters and icons still on the boundaries of attention.”

Peripheral distraction may conflict with the desire for retailers to have their ads noticed, but this also sacrifices the experience of the user and the potential for staying on the site longer.

Ads could be limited and balanced with more studies; at the very least animated objects on the left and right could be reduced on pages where content is very important. Further ethnographic research as suggested later in this review, could point out, too, which subgroups would tolerate better certain types and placements of these ads.

Calmness by proxy – living within contextual design principles
Designing for calmness is actually at the core of designing in context – which is creating interactions that allow users perform tasks that are within the same context as a larger task. This is simply because the approach reduces the load on the memory that occurs when users are taken out of context and have to remember the next step, or how to get back to where they were. The point is, good designers at some level understand that designing for context is all about staying ‘in control’ and ‘having access’ as Friedman mentions, and by inference, they ARE designing to support a calmer, more enjoyable experience.

Calm and gentle words - positivity
Words and labels can affect calmness as well. When I was designing the interstitials for Care2, I wanted users to feel like they were not being pressured by high-powered verbiage in taking actions, often the opposite of what generally we are told about calls to action. It was my evaluation as a user myself that I would prefer to be presented with an opportunity to make a difference, as opposed to being hit over the head to take some action on a cause or petition. So I created the moniker “Quick Click Opportunity” as a feel-better approach, with the intent to induce control and more calm when taking actions.

Design example: Petition creation form on Care2

Forms are particularly tedious in general. At one time, the process of creating a petition involves steps that used to be multi-paged and long. Here is the current rendition: http://www.thepetitionsite.com/create-online-petition, which is lighter and provides an example of Care2 has incorporated calmness into the site.

Here we see a form where “less is more” - text is sparse, white space ample. The page is very simple, fonts are large, and interestingly, you see instructions inside where you type, not hanging outside of the text boxes adding to clutter and noise. While this observation might seem somewhat sophomoric, most do not recognize the subtlety. The form doesn’t ‘feel’ like a form so it doesn’t automatically conjure up the learned dread of the form object; rather than an increase in stress, there is more of an ahhhhh factor. The design allows you to focus your attention on the important details to complete the task. Also, the system prefills out forms for you and if a member, does not present a certain amount of metadata already gathered – so in some states, no form fields are shown at all. In other words, the system only displays what’s needed.

Further, if you’re not logged in and you click to do so, one cool example of good contextual design is that rather than being taken to a separate page, you conveniently get a small login box in the upper left of your screen, that allows you to retain focus and not lose context, again reducing overload and tasks.

A word about emotional and persuasive design: Supporting business and ethics
Designing for the ethical value of calmness assumes a more user-oriented focus, providing a more “moral” experience for users. It should be noted that there are differences in the use of a value in emotional and persuasive design, but there are also interesting relationships (and perhaps a fine line) between emotional and/or persuasive design, when alongside Value Sensitive Design (VSD).
Emotional and persuasive design however, are typically applied to a business perspective, but in some cases, do not necessarily detract and may reinforce, the more moral value we are designing for. (In other words, business and user goals and values do not have to always be at odds).

1) As applied to emotional design, Bolchini says that any value, such as calmness, pleasure and trust, can be used to emotionally “create value for the user” [2] which is a fancy way of using the mapping of product to emotions a great marketing tool. I actually think, though that in the case of Care2, emotional design may reinforce both supporting members and business goals, because the message even in ads, if not too “in your face”, remains constant and reinforced – keep me calm.

A good example of calming value in an ad appears on the label for the natural supplement “Berry calm kids ™” which says: "Support mental focus, calmness of the mind, and instill emotional well-being" [3]. Clearly this ad is meant to tap into the population’s propensity for such concepts. The interesting thought here is, however, irrespective of the marketing motive, the label also reinforces the positive thoughts and feelings that members are already experiencing – so an interesting question is posed: is the gain purely a business gain, or does it support the user personally as well?

2) According to Bolchini, persuasive design actually “instills human values” such as reliance, trust and credibility,” [2] which is similar to emotional design except that it carries that purchase part a bit further. In any case, businesses use persuasive design, and can be used to persuade for any value such as calmness, which in this case of Care2, can alter the usage of the site, thus providing more potential for reaching the monetary goals of the site.

Future Considerations

Care2 is a wonderfully rich provider of cultural and socially progressive information, with opportunities to take action on one's favorite causes. The site includes products and services that support the environment and sustainable, healthy living. I recommend anyone visit and get connected. I would like to see it grow to its fullest capacity and continue to touch lives and truly “make a difference” in the world.

To that end, I would suggest further research to enhance the site’s usability even more. Ethnographic research could be done specifically on the subpopulations that visit care2, to obtain a more granular look at subgroup’s needs. Observational techniques could be used to find the “happy paths” these groups prefer. Personas could be developed. One could begin to see patterns about the reaction times, feelings, sensations that one feels in different parts of the site based on their subgroup identification. Findings might include how or where to balance the calming state of the interface with the more attention-getting calls to action on subjects that appeal to them.

Combined with surveys (now being performed), site statistics and other quantitative research, general patterns can lead to models – such as the order people do things in, or why certain pages are visited more frequently by certain groups – which could be invaluable in further informing both content and design. The next logical step would be to present or display content and the primary tasks selectively mapped to those groups.

References

[1] Friedman, B., & Kahn, P. H., Jr. (2007). Human values, ethics, and design. In Sears, A. & Jacko, J. (Eds.). The Human-Computer Interaction Handbook: Fundamentals, Evolving Technologies and Emerging Applications, 2nd Edition. (pp. 1241-1266). Lawrence Erlbaum.
[2] Bolchini, D, Grazonotto, F, Paolini, P, “Value-Driven Design for Infosuasive Web Applications,” (2008), presented at Web Applications WWW 2008, Beijing, China
[3] Product ad for “Berry Calm Kids ™” at http://www.europharmausa.com/20116.htm
[4] Lexis.us – definition of calmness - http://www.lexic.us/definition-of/calmness
[5]Merriam-Webster online – definition of calmness - http://www.merriam-webster.com/dictionary/calmness
[6] Wikipedia – definition of calmness - http://en.wikipedia.org/wiki/Calmness
[7] “Meditation: Take a stress-reduction break wherever you are,” Mayo clinic staff - http://www.mayoclinic.com/health/meditation/HQ01070
[8] “The calming effects of Stress Relief through Color Therapy” - http://www.stressreductionbasics.com/stressreliefthroughcolortherapy.html
[9] B Reeves, C Nass, “Perceptual Bandwidth,” Communications of the ACM, March 2000, Vol. 43, p. 68. No. 3 (portal.acm.org)