This article serves as a series of afterthoughts from a fantastic article written by, David Hamill at UXBooth.com and how it relates to the e-commerce world. http://www.uxbooth.com/blog/good-call-to-action-buttons/
When it comes to the e-commerce world, gaining (and holding) the attention of the user is an absolute must! There is a service to be offered, a product to fall in love with, or a featured ‘something’ that must be had. Through a well formed call to action strategy, the user’s experience can and will be a great one!
As a designer, it is easy to think that the experience you’ve created is a great one and that others will surely see it the same way. However, this could not be more far from the truth. It takes careful planning to ensure that even the most visually attractive designs will provide the user with a clear path as well as a lucrative one. Why would the user have to work to get your business? It most definitely should the other way around.
So, what is a ‘call to action exactly’ in the web design world? Hamill really hits the nail on the head when talking about designers prioritizing tasks: “You need to remove any friction that slows the user’s progress.” This is a perfect explanation for what a well-formed call to action strategy can do. It is all about making the user’s experience feel fluid. The call to action should be clear and should feel intuitive to the user. The more the user has to work for your products and service the more they will feel uncomfortable with the experience.
Hamill brings many points to the table when talking about prioritizing your calls to action. Wording, color, positioning, and size all play a role. Most of his examples and reasoning are dead on. Let’s take a look at a few of them and see how they react in the e-commerce world.
Wording
Hamill’s main point here emphasizes how important it is to use verbs as the first word in an action item. The task at hand should be short and sweet. This is definitely not an area to try and think outside of the box. It hits hard in the e-commerce world, especially when dealing with the checkout process. ‘Add to Shopping Cart,’ ‘Checkout,’ or ‘Create New Account’ are a few examples. The user should never have to guess what a button is going to do for them and should always have a clear path to the next step.
Positioning
Positioning is a key element of design as a whole. So, it is no surprise when it can greatly influence your call to action. One of my personal biggest pet peeves involves having to search for the checkout/purchase button when I am ready to purchase something on the web. Hamill provides a very similar example using the Virgin Mobile Money site. There is an ‘Apply Online’ button that appears at the top of the page. It is in plain sight for the user right from the get go. However, once you continue scrolling down the page it disappears. Now, this is not the end of the world by any means for the user. If they want to apply, they will simply scroll back towards the top and hit the appropriate button. However, this causes friction. It seems so simple, but small annoyances such as this will definitely add up over time! If the information needed falls below the design fold, you should always provide a simple way to back to the original call to action. It’s all about removing that friction!
Color
What a wonderful thing color truly can be! First and foremost, never underestimate the power that color can bring to design. Hamill gives one specific point about color use when regarding call to action buttons: “ It’s not always necessary to reserve a color solely for your call-to-action button.” This is one idea I strongly disagree with. A call to action item is just that, a call to action for the user. They are emphasized for a reason. Let them shine! The color being used should stand out to the user in a positive way. Don’t be afraid to use bright or vivid colors for these items. The user will be able to spot your call to action easily and will do so subconsciously in some cases. This all goes back to the idea of having a fluid user experience. Help the user’s eyes move towards action items in this way.
With that being said, I do believe that a second color choice can and should definitely be made for pages that have more than one call to action. These should be prioritized depending on the importance of each item. A subtle way of achieving this importance is with size…
Size
Hamill uses a great example from the Twitter homepage referring to a page that has more than one action item. Not all calls to action are going to carry the same priority. It can indeed be confusing with several action items that are the same size, color, etc. For this reason, size can play a huge role in guiding the user. At the same time though, it is imperative that the sizing isn’t out of control. There is nothing worse than a giant button over-shadowing the rest of the design.
Creating a well-formed design that provides a seamless user experience is a very difficult task, even for the most seasoned design professionals. However, with the proper use of call to action items, you can help guide the user through a seamless and fluid experience.
