A common piece of advice in the website optimization space is to test headlines and copy to find the optimal messaging. But there are endless possibilities and it’s not feasible to test them all, so how do you focus your tests on only the content that’s most likely to have an impact? Having a good hypothesis of why a change will be effective is key, and one such theory is framing.
Framing is the simple idea that different ways of presenting the same information will evoke different emotional responses, and thus influence a person’s decision. A simple example is the statement, “the odds of survival one month after surgery are 90%” is more reassuring than the equivalent statement of, “mortality within one month of surgery is 10%.” Although these statements present the same information, they bring drastically different associations to mind. With the former it’s easy to envision an outcome of survival (and thus be willing to go through with the surgery), whereas the latter evokes death (and will be less likely to take the perceived risk).
The subtleties of framing a message are well known to marketers. For example, CityCliq saw an 89% conversion increase by changing their headline from, “Businesses grow faster online!” to, “Create a webpage for your business.” (They have since further optimized their homepage to have a different headline). The original headline is abstract and framed passively, whereas the winning variation is framed in an action-oriented way.
This idea can be used more widely than for just selling products — any organization that’s trying to spur people to action can make use of it as well. Convincing people to volunteer for a cause, sign a petition, donate money, etc., can all be greatly influenced by the way the message is framed. For example, Banks, et al., studied how this phenomenon affects behavior by showing two groups of women videos on breast cancer and mammography in order to convince them to get screened. The first group’s video was gain-framed, espousing the benefits of having a mammogram, whereas the second group’s video was loss-framed and emphasized the risks of not having one. Only 51.5% of those who saw the gain-framed video got a mammography, compared to 61.2% of the latter group (an 18% increase). The information presented was equivalent, but receiving it in a loss-framed context forced people to imagine the scenario of having breast cancer, which spurred them to action.
So how do you know which way to frame your message? There are no one-size-fits-all rules — it’s still important to test variations. But now instead of arbitrarily changing words (which could go on ad infinitum) you have a narrower and more focused approach to crafting messages. What you want to avoid is testing essentially equivalent phrases that are unlikely to have any significant impact on your goals. For example, the phrases, “the odds of survival one month after surgery are 90%” and, “there is a 90% chance you will be alive a month after surgery” contain the same information and are framed equivalently, and thus aren’t likely to change your visitors’ behavior. Instead, you should think about strikingly different ways you can frame your value proposition and test each of them. Try asking yourself:
Is this positive or negative (e.g. the odds of survival example)?
Is this loss-framed or gain-framed (e.g. the mammography study)?
Is this action-oriented or passive (e.g. the CityCliq create a web page example)?
More generally, what associations are brought to mind? For example, deli meats that advertise “95% fat free” sounds healthy, whereas “Only 5% fat” sounds unhealthy. This is tricky to ascertain a priori, but you can read messages to people around you (co-workers, friends, family) and ask what first comes to mind when they hear it.
Your message may not have a clear answer for all of these, but for the pertinent questions you should test messages with the opposite framing. More likely than not, one of them will resonate better with your audience.
Recently at Optimizely, I needed to create ribbons as part of the design of our Summertime Christmas campaign (see image below). The easy way would have been to throw a repeating background image on some divs, but then I remembered CSS3 gradients can be used to create some pretty interesting patterns (for example, see Lea Verou’s CSS3 patterns gallery). Besides being a novel use of gradients, it also makes my markup more semantic (no empty container divs required), and makes the design more flexible (everything is generated programmatically, and thus easily changeable, unlike images).
The ribbons of Summertime Christmas
The Technique
The basic technique is to make the color stops end and start at the same place, thus creating hard lines between colors. Then, set the background-size so the ribbon occupies a specific width instead of spreading across the entire element.
Here’s the code for the vertical ribbon (vendor-specific properties left out deliberately):
Using percentages for the color stops (instead of hard-coded pixel values) allowed me to adjust the width of the ribbon by changing just one number — the first parameter of the background-size. (One thing to be careful of is that the ribbon can render imprecisely in certain browsers when the width gets small, so you may need to use pixel values in these situations.)
To add the horizontal ribbon, it’s a simple matter of layering multiple background-images on top of each other (by providing a comma-separated list of values, the first of which is on top), and switching the vertical and horizontal values of the background-size.
You’ve probably noticed there are a lot of repeated values within each linear-gradient. You also probably noticed that the vertical and horizontal ribbons use the same linear-gradient, except for the direction they’re rendered (the first parameter). As I was developing this, it quickly became cumbersome to fiddle with the ribbon’s sizing and color, so I leveraged SCSS to help me out. I’m not going to explain everything that’s going on here, but am providing this code for anyone who finds it useful (and for my own future reference).
Ah, so much cleaner and compact! And it puts every value in one place, making it easy to tweak any aspect of the ribbon.
One More Example
I also recently used this technique on the Optimizely styleguide to create the light blue stripe in our navigation, instead of creating a background image or using multiple elements.
Optimizely’s styleguide navigation
Conclusion
This technique is handy for avoiding image creation, which improves page performance (by avoiding HTTP requests and reducing bandwidth usage), and makes the design easier to modify (no need to fire up Photoshop to make changes!). This example is just scratching the surface of novel ways gradients can be used to draw images in the browser.
One of the simplest and most robust findings from behavioral economics is that when people are faced with a choice they tend to stick with the default option. This sounds like something that shouldn’t have any effect on people. Common sense leads us to believe we’ll always choose whichever option benefits us the most, regardless of the default. Although this intuitively makes sense, numerous studies show that’s not the case. For example, most countries have an option for people to donate their organs upon their death. In America, the default choice is to not donate organs, meaning they must specifically check a box on a form (an “opt-in” system). As a result, the consent rate is only about 28%. In contrast, Belgium’s default option is to donate organs (an “opt-out” system), in which about 98% of the population consent to donation (read the fully study here [pdf]).
There are many explanations for this behavior. One reason is that making a choice takes effort (even if it’s only checking a box), whereas sticking with the default is effortless. Another reason is when decisions have unclear costs and benefits that are difficult to evaluate (such as organ donation), defaults can imply the “recommended” option, thus saving people the time of thinking through the choice themselves. It also sends the signal that this is the option most people choose and is a safe bet (which reinforces the idea of social proof).
Applications to Web Design
Applying this insight to web pages is fairly straightforward: when presenting people with a choice, provide a default option. The simplest method is to pre-populate form fields with the most common choice. For example, the checkout form of an ecommerce store whose customers are mainly American should have “United States” already chosen as the default country. Obviously, there may be customers from other countries, but they would have to select an option were it left blank anyway. This decreases friction when completing a form, decreases errors, and increases usability.
The previous scenario is useful, but unlikely to increase conversions significantly. Defaults really shine when people are faced with a less clear-cut choice. For example, if you have multiple service plans, highlighting one will guide people to that option. Deciding which option to make the default is something you should A/B test, but a good approach is to use existing customer data to preselect the most popular option. For example, if you have multiple pricing tiers, you could highlight the most common one.
No recommended plan
The most popular “Plus” plan is highlighted
Another strategy is to select the option you want your potential customers to select (such as the one that earns you the most profit). This will subtly nudge potential customers towards this option. For example, Optimizely ran an experiment recommending their Gold plan and saw a 20% increase in signups to that option.
Recommending pricing plans is just one way that default options can be applied to web design. Consider experimenting with your forms, account settings, preferences, or anywhere else people face a choice. By providing a default option to fall back on, you’re doing a favor for your customers and yourself.
Further Reading
Read Eric Johnson and Daniel Goldstein’s full study on defaults, titled “Do defaults save lives?” (2003).
In my previous post, I explained how to use image sprites semantically. But as with all image spriting, setting each sprite’s size and position is a pain. Compass can automate this, but it’s designed with the assumption that all your sprites will be background images of elements. Even so, Compass provides a number of under-documented functions that can help automate my technique.
Refresher
First, a quick summary of my previous post. The standard way to sprite images is to set the sprite sheet as the background-image of an element, and set its background-position to the coordinates of the image you want to display. But if your image is part of the content, then semantically it should be in the markup as an img tag. To accomplish this, set the img tag’s src to the sprite sheet, and use a container element as a “window” to let one sprite show through at a time. For the specifics of how to do this, read my post.
Automate this with Compass
As I mentioned, the most difficult part of spriting is setting the image size and position for each sprite. Luckily, Compass can help us, but their spriting documentation is geared towards the standard technique, and thus doesn’t provide much help to accomplish my method. But fear not! Compass can still help us.
Create the sprite sheet
The first step to doing any spriting in Compass is to @import a folder of images. Compass will generate a sprite sheet image, and create a number of variables that we can use to get the size and position of each sprite.
@import"sprites/*.png";
Sprite Dimensions
Next, we need to get the dimensions of each sprite, and set the container element to that size. Compass provides a sprite-dimensions function, which takes 2 parameters: the sprite map Compass generated, and the name of the sprite (i.e. the filename, sans extension). Then it outputs the width and height of the sprite. If you have no idea what you’re supposed to pass as the sprite map parameter, you’re not alone. After some digging, I discovered Compass assigns the sprite map to a variable named $<folder>-sprites. In this example, that makes the variable the awkwardly named $sprites-sprites.
The next step is to set the top and left properties of the image tag. Once again, Compass provides us a helper function: the aptly named sprite-position. Like sprite-dimensions, it also takes the sprite map and sprite name as parameters. But unlike sprite-dimensions, it provides us the left and top properties concatenated in a string, e.g. “20px 120px”. This seems weird and inconsistent at first, until you realize it’s designed to be used as the value of the background-position property. To help us access each value individually, SASS has a function named nth, which returns the value at the position you pass it (starting from 1). And don’t worry about converting that string to an array — SASS will automatically convert strings to arrays, splitting the string on spaces. So that gives us:
So now we have all the pieces in place to position each individual sprite, and all we need is the name of each image. For example:
@import"sprites/*.png";.sprite-container{display:block;// or inline-block
overflow:hidden;position:relative;&.my-sprite{@includesprite-dimensions($sprites-sprites,"my-sprite");img{$position:sprite-position($sprites-sprites,"my-sprite");position:absolute;left:nth($position,1);top:nth($position,2);}}// ...etc. for each sprite
}
The obvious flaw here is that you need to write code for each sprite in the sprite sheet. Luckily for us, Compass has one more trick up its sleeve to help automate this: the sprite_names function. Pass it a sprite map, and it outputs a list of sprite names. Then we can use @each to loop through the list, and generate the size and position of each. Bringing it all together, our code looks like this:
@import"sprites/*.png";$sprite-names:sprite_names($sprites-sprites);.sprite-container{display:block;// or inline-block
overflow:hidden;position:relative;@each$spritein$sprite-names{&.sprite-#{$sprite}{@includesprite-dimensions($sprites-sprites,$sprite);img{$position:sprite-position($sprites-sprites,$sprite);position:absolute;left:nth($position,1);top:nth($position,2);}}}// @each
}// .sprite-container
Conclusion
Whew, that was a whirlwind of Compass code. But once you get it all set up, it works quite well. You can add and remove sprites as you please, without needing to update a single line of SCSS. Happy spriting!
Update (9/1/2013): Read my follow up on how to automate this with Compass.
Spriting images is a well-known, well-documented way to speed up page load times. The standard technique is to set a sprite sheet image as the background-image of an element, and position it so the proper sprite shows through. This works great for icons and other images that aren’t part of the actual content, but not so great for images that belong in the page content.
The problem
Images that are part of the content should be in img tags. This is correct semantically, good for accessibility, and good for interoperability. With the typical approach to spriting images, you would need empty container elements that have a background-image property. Those empty elements have no semantic meaning, and are worthless to screenreaders and other crawlers that may access your page. This is the situation I found myself in on Optimizely’s homepage when I sprited the customer logos and benefits graphics.
The solution
Solving this problem is actually fairly simple. First, you’ll need markup similar to the following:
<divclass="sprite-container sprite-track"><imgsrc="sprites.png"alt="Graphic of tracking elements on a web page"></div>
The .sprite-container element acts as a window that only lets one sprite show through. It has the same width and height as the sprite, and has overflow: hidden to prevent the other sprites from showing through.
Then the image needs to be positioned so the sprite we want shown is at the top left corner of the window, which is accomplished by setting position: absolute and the top and left properties correctly. SCSS:
.sprite-container{display:inline-block;// or block
height:275px;// size of the image we want to show
width:400px;overflow:hidden;// prevent the other sprites from showing
position:relative;// so the image can be positioned absolutely
img{position:absolute;}&.sprite-trackimg{left:0;top:-210px;}// other sprites
}
Generating this CSS can be a pain, but I will discuss how to accomplish this with Compass in my next blog post.
Closing Thoughts
This method lets us use sprites in img tags, which is more semantic than empty divs or spans (depending on the use case). However, it has a couple of drawbacks. First, it requires a container element around your image. This could add unneccessary bloat to your markup (in my case the image already had a parent element). Second, and greatest of all, the image src attribute now references an entire sprite sheet, when technically it should only reference the actual image that it’s showing. Screenreaders won’t care at all, but some services may use this image for other purposes. For example, Facebook grabs a representative image of your page when a link is shared, and it could grab a sprite sheet instead of the actual image. That’s no good.
Ultimately it’s a tradeoff between having a container element and actual img tag in your markup versus an empty element whose background image is a sprite. Overall, I think the pros (semantic HTML; better accessibility) outweigh the cons (container element; src attribute is a sprite sheet). If you want to use sprites with actual img tags, this is a solid technique. If anyone has any thoughts on how to overcome the drawbacks, hit me up @jlzych.
Update (9/1/2013): Read my follow up on how to automate this with Compass.
