Friday, May 6, 2011

A Call To Action!

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.

2 comments:

  1. This is a very insightful article regarding a critical aspect to every eCommerce site. I see so many instances where the owners or stakeholders to a business feel they have an attractive website with good traffic, but they aren't seeing the sales/conversions they believe they should be getting.

    For example, a while back I was brought in to do a site re-design for an international tea company. This project included an audit of their eCommerce platform. The company realized they had some graphical design issues that may have turned people away, but what they didn't realize was the extent of the site's user experience and shopping process that was lacking or in very poor condition.

    The first thing I dove into was the site's analytics. I wanted to see what was going on when a user hit the site (as well as learn how they were entering the site). I found three red flags: 1) High Bounce Rate, 2) Many Occurrences of Shopping Cart Abandonment, 3) Some deep browsing, but no goal attainment.

    I then turned to the site itself to take a walk-thru of the shopping section (I would analyze other potential landing pages, such as the homepage and other non-shopping pages, later). In my experience, a site exhibiting significant shopping cart abandonment may have some structural flaws that when fixed could provide a nice, quick bump in conversions and sales (thereby making the client very happy with some immediate satisfaction). I put myself in the shoes of the causual online shopper visiting the online store for the first time. I couldn't believe what I found....

    When I placed an item in the shopping cart, the subsequent page presented me with options to either "continue shopping" or "checkout". If I selected the former, I was taken back to the previous product page. I could then jump to another product page and select an additional item for purchase. After browsing a few more product pages, I decided that I wanted to finalize my order with what I had in the cart. I started looking for either a "checkout" button or a "view cart" button. Neither was to be found! I thought to myself, "This can't be right. There has to be a way to get back to the checkout pages from here." Nope. A customer had no way of making a purchase unless they pulled up their browser history to find the checkout page they had been on. And even then, they were presented with a confusing browser notification to resend data (which would duplicate the item in the cart if "yes" were selected).

    After finishing my assessment, I learned that their site not only lacked proper calls to action (and properly designed calls to action) as discussed in this article, but they lacked ANY calls to action. Hamill talks about removing friction that could slow a user's progress... well, this site didn't just present friction, it contained many washed out roads and other hazards impeding a user's journey to completing an order. On the bright side, many of the identified site issues have been fixed and they are experiencing a 400% increase in sales over last year.

    ReplyDelete
  2. Josh, what a great real world example. It is amazing what even a small amount of user testing can do for a site's usability and accessibility. It is far to easy to sit back and expect users to learn your navigation, layout, tools, etc. It's just as easy for the user to hit the back button and find the next best thing!

    Thanks for the response!

    ReplyDelete