Anyone who has ever ignored to-do lists knows that any friction between yourself and your goal leads to frustration and potentially giving up altogether. This lesson applies to real life equally as well as it does to visitors on your website.
If people sign up for something, how do you get them to actually follow through? Of course, anything that reduces friction is good for everyone involved, but there are often limitations to how much you can realistically remove. So how do you optimize these kinds of experiences? One technique is to explicitly spell out the next steps. Knowing the steps ahead of time makes the process easier to finish and overall less daunting. This theory is known as channel factors.
In 1965, psychologist Howard Levanthal studied this phenomenon [pdf] by trying to persuade college students to get a tetanus vaccination. He distributed documents describing the risks of tetanus and the value of inoculation among two groups of people. The first group received just the information sheet, whereas the second group received the information sheet along with a campus map with the infirmary circled. Follow up surveys showed the communication was effective in changing beliefs and attitudes in both groups, but the number of people who actually followed through varied drastically. Only 3% of the first group got inoculated, compared to 28% of the group that also received a map.
The key difference is that the map reduced the friction to following through. Just telling students to get vaccinated created a barrier: where do I go? Showing the students where to get the shot and urging them to pencil time on their calendar eliminated this barrier. In contrast, the group that only received the info sheet had no clear plan of how to get vaccinated. This made the task more abstract and difficult to complete, so fewer people followed through with an appointment.
The implication for a website is clear: remove barriers to success. Make the next steps explicit, and provide as much information as possible to enable people to follow through. A great example of this is Create&Barrel’s checkout funnel, which was ranked as the top e-commerce checkout user experience by the Baymard Institute. (Note: since this rating, Crate&Barrel has done more A/B testing to further improve their checkout funnel). First of all, they reduced the funnel to as few steps as possible: Shipping; Payment; and Review & Place Order. Second, they clearly spell out each of these steps from the start, telling the user what they’ll need to do to place their order. Without this, people don’t have any expectation of how long the checkout process could take, and are more likely to drop out partway through.
Crate&Barrel’s checkout funnel spells out each step for the user, which helps them complete their purchase.
This technique is especially useful for actions that take place off of the website, such as installing software. Firefox does a great job of this by listing each step with screenshots. This helps all users, technical and non-technical, successfully install their browser.
Firefox’s download page walks the user through the exact steps they must go through to install their browser, which increases the chances users will install their product.
These examples just scratch the surface of how channel factors can help you increase conversions. They key is to put yourself in the shoes of your users and ask yourself, “What additional information do I need to complete this task? What barriers are preventing me from reaching my goal?” Although they may look obvious to you, it won’t to your customers.
Do you want your users to:
Call, email, or write a politician? Provide a pre-written template that they just need to populate with their name.
Volunteer for a cause? Show them a map of the closest location and the next time they can attend.
Attend a live webcast? Provide an “Add to Calendar” button.
Use your product or service? List each of the steps users have to go through to use it.
Use a new (or even existing) feature? Figure out where in the flow of using your product this feature fits, and explicitly tell them to use it at the end of the previous step.
Any objective on your site that requires completing a series of steps can potentially benefit from applying the lessons behind channel factors. Increase the chances that a visitor follows through on what they signed up for by providing all the help you can. When in doubt, over explain and be direct — even when the directions may seem obvious to you and your team. By A/B testing, you will ultimately find an optimized design somewhere between hit-you-over-the-head-obvious and confusion.
I recently read Smashing Magazine’s article “On Creative Leadership” that talks about creating an environment in which people can be creative. This section really resonated with me because it’s something we do occasionally at Optimizely, and talk about doing more of:
Every month, my team and I enter our planning room for at least three hours. We lock the doors, opening it only for pizza and beer deliveries. Our mission is to solve one problem. In past sessions, we have redesigned the user interface that powers our systems, solved marketing problems by “remarketing,” and found new and creative ways to present information. The role of an impresario has had such a direct and positive impact on the way we do business that I am now introducing the role to every team in our 100+ person company.
Why does having an impresario work? Well, certain rules guide the team to moments of insight:
Identify a very specific problem to solve, and stay focused.
Provide the necessary tools to spark inspiration (white boards, markers, paper, etc.).
Be technology-agnostic! Don’t worry about how you will solve the problem; focus only on the why.
There are no wrong answers; some are just better than others.
Celebrate failures.
My team looks forward to their time spent locked up together because it gives us an opportunity to be creative in front of each other. Support their ideas, and help them grow. Don’t force your opinions and thoughts. If the group is moving in the wrong direction, ask them questions until they find the right path.
The design team at Optimizely has done this a few times, and it’s always been extremely rewarding and productive. For example, recently another designer and myself locked ourselves in a room all day to redesign our jobs page. By the end of the day, the page was almost fully coded.
This setting allowed us to be productive for two key reasons. First, we were insulated from distractions, which can quickly kill productivity and focus. Second, we had instant, high-bandwidth communication that enabled quick feedback and input from each other when needed. No waiting around for emails or responses via IM.
Given the success of this and other similar sessions, we intend to do more of these focused work sessions in the future to foster our creativity and productivity.
SASS has a lot of really powerful features to help you write DRY code quickly. One such feature is @extend, which I find is overlooked by many developers but can be very useful when used properly.
@-what?
First, a little background on @extend. It allows a selector to extend the styles of another selector, essentially providing a form of sub-classing. @extend works by combining selectors into a single comma-separated selector. A simple example:
The SASS docs give a fuller explanation of how it works, and its limitations.
Why it’s great
@extend can cut down duplicate styles and selectors. Modules derived from a base style can all @extend the parent, and all the sub-classes will be added to the base selector. Alternative ways to achieve this in SASS include using mixins to output the base styles (which just adds bloat to the stylesheet, since the same set of rules is output multiple places in the final CSS); duplicate the properties in each selector (violates the principle of DRY and is a maintenance nightmare); or manually add each new selector to the base selector (also violates DRY and also is a maintenance nightmare, and the exact problem @extend was designed to solve).
Placeholder selectors
Placeholder selectors make @extend even sweeter. They are selectors that aren’t output unless extended by another selector (also known as abstract classes in OOP). It doesn’t sound like much, but I often run into situations where I have some classes (or elements) that share common styles, but I don’t need the base class in the HTML or CSS. For example:
Each container selector has to be typed out twice – once for their shared styles, and again for their specific styles. Not a big deal here, but quickly becomes unweildy the more sub-containers you add. Placeholder selectors can help us here:
Now the common styles are in one place, and each class is in one place. This pays off the more selectors you have extending the placeholder.
You can also feel guilt-free about using unsemantic, descriptive names, since the placeholder itself isn’t output in the final CSS. They are purely for yourself and other developers.
Dangers of @extend
As with any SASS you write, you need to keep an eye on the final CSS it outputs. If you @extend a class that’s used in many places, the selector will be copied to every instance of that class (even if it’s nested in other selectors). This is often unnecessary, and can cause unintended side effects (I ran into a nasty styling bug because of this once).
For example, a .button class is originally defined in one place, but modified to look slightly different in a dialog. When extending it, you only wanted the original styles, but the new selector is copied into the dialog button as well. This wasn’t what you intended, isn’t necessary, and bloated your final CSS. Before extending classes, check everywhere they’re defined and make sure you want your selector to be duplicated in all of those places. (Arguably, this is bad CSS to begin with [you shouldn’t change a button style based on the dialog context in the first place], but in real world CSS it happens).
Additionally, the depth and breadth of selectors you have nested under the base selector, combined with the number of selectors extending the base, can create some very long selectors, not all of which are necessary. Once again, pay attention to the CSS that’s being compiled. And once again, this is arguably bad SASS (mind the Inception Rule), but these things happen in legacy codebases with multiple developers.
Closing Thoughts
Extending selectors can save you time and DRY out your code, when used properly. As with most SASS features, it can be abused and create some pretty hairy CSS, but as long as you keep an eye on the final CSS you’ll be fine.
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.
