There is no doubt about it: a professional looking website helps increase the visitor’s confidence when moving through their buying process. A lot of people seem to understand this, and thus seek out professional designers to build a website for them. A couple of years ago, I even wrote a blog post about the importance of featuring the perfect balance of copy and images in a professional website layout/design. But buyer beware: it is often the case that designers working alone (ie, without the input of other marketing experts) don’t create the most user-friendly interface/layout to move visitors forward in their buying process. Sometimes “pretty” is the enemy of “functionality”
Now, before I get a bunch of comments from pissed off designers, I want to state that the best results I experience with clients are unquestionably under circumstances in which I am given the opportunity to work with a creative designer who is willing to work as a team. The sum is bigger and better than its parts. I completely believe in this approach.
Asking your designer to be a jack of all trades is asking too much of them. Don’t forget how that saying ends: “Jack of all trades…. master of none.” (Same thing goes for your CRO expert, or any other marketing expert, by the way.) The most successful designers are those who are willing to admit that they aren’t experts on visitor behavior, or conversion rate optimization. Great designers are those who are:
I get the best client results from our system to make websites better when I am able to present the challenge I encounter on a website to designers who are open to having the benefit of my direction and guidance for finding a solution. A strong designer takes my constructive criticism and uses it to create something even better than the mocked up solution I create for direction.
Let’s consider an example of a User Interface Designer who likely had free reign over designing and laying out a user experience without input from other experts. I was helping my in laws create a custom holiday card on shutterfly this week. Shutterfly’s interface may be pretty, but from the customer perspective it presents an incredibly challenging and frustrating experience. There were three of us huddled around a computer, trying to figure out how to upload photos into a card design. Take a closer look at the experience through our eyes to gain insight into how your pretty designs may not be moving visitors forward in their buying process.
In order to get images into a holiday card design with Shutterfly, they require you to sign up for an account in advance. They are making the visitor go through an extra, inconvenient and somewhat complex step before even getting started. Giving visitors the opportunity to upload photos and see how they look in various card designs prior to asking them to sign up may just provide the extra impetus needed to drive more people through the sign up process!
Once you successfully upload pictures into your folders, you can go back and start creating your card. Check out this screen shot of the first step of the process, selecting the layout for the card. The major problem on this page is that the call to action “get pictures (to use in your card)” doesn’t stand out for several reasons:
We finally discovered this “get pictures” button and arrived on the following page, where we were expected to choose images from our existing folders. This is where we ran into the biggest roadblocks. Between us, we had three college degrees, a Phd from Yale, and more than 10 years of experience in online marketing, yet we couldn’t figure out how to get these pictures into our selected card! When, after 15 minutes of persistent trying, I actually figured it out, I laughed at the simplicity of the design elements involved, and how they played off one another to create a big mess. It’s amazing to me that such simple design elements and their placement, when overlooked by an interface designer, will result in many lost orders.
Take a look at the screenshot to the right to see how this happened. Notice that the main call to action that allows the visitor to load selected images into their card is called “Add to Card”. Of course this looks very familiar: we’re programmed to look for this same language whenever we want to add an item to our “Cart”. Given the capacity of the human brain to overlook small spelling errors and read what we expect or are trained to see, it’s no surprise we didn’t notice the one letter difference in this call to action. A second issue with this call to action is that it isn’t larger than the action “Return to Card”. This, combined with the physical proximity of these two elements, means the visitor has to exert extra effort to establish which action is a higher priority. Finally, visitors are used to moving forward by clicking below the options they’ve chosen, and here we see the calls to action located above the options, not below. Ideally, they would be below the image options on the right hand side.
Another item on this page also stands out for its lack of clarity: the “Upload” call to action. This language doesn’t clearly tell us what we’re going to upload. Are we going to upload the selected pictures to our card if we click this button, or are we going to upload additional images from our computers?
So here’s what we learned about designing Calls to Action from this experience:
1. The language used in a Call to Action is critically important. Use language the visitor would use to describe the action they are looking to take. Be as clear as possible: if there is room for confusion, clarify. Don’t be coy (or just dim) by selecting language that closely resembles wording people expect to see in another context, or as we have seen here, they are likely to overlook it.
2. The location of a Call to Action should be carefully selected. Remember that visitors are doing something on this page (even if it’s reading) and then they are looking to move forward from there. Don’t move them away from their natural eye movement by placing the call to action out of their natural reading flow. And don’t overlook how proximity to other calls to action can impact the way a call to action is perceived.
3. Size matters (and so do other features). Give your visitors visual cues to help them easily determine which action is the highest priority. Draw more attention to the most important call to action on a page by making it bigger and more prominent and/or active looking with other features such as color, shape and shadowing.
Do you have other examples of marketing expert isolation gone overboard? Are you a designer with a fantastic collaboration story to share? We’d love to hear about it, so tell us now.