Fixing Bad UX Designs
上QQ阅读APP看书,第一时间看更新

Using good call-to-action

Another crucial UX element for conversion is call-to-action (CTA). In addition to appropriate sizes and colors, choose the text carefully as action verbs get more results. You can find in an article by Wishpond a great list of 25 good words to use for your CTA. Design your call-to-action to be personal and communicate value and convey urgency. When it comes to the standard e-commerce funnel, three of the four steps (landing, product, checkout) should have only one primary action. 

Make it clear, unambiguous, and use white spaces to make it noticeable. Users should feel confused at no point, during any action, about what steps to take next or the best path to take. Make certain that users know/understand exactly what will happen when they perform an action. Be clear, precise, and simple; for example, use verbs such as Subscribe to our Newsletter, but don't be too obvious by saying click here (the CTA should in itself be understood as something clickable). Use urgent language when writing the copy for your CTA buttons, especially if you're making a limited time offer, as suggested by the CoSchedule blog:

To give you an idea, StubHub discovered that the CTA See details link, which was designed to take visitors to the ticket purchase page, was too ambiguous and was causing confusion to the user.

After watching visitors run into the same issue over and over again by using the platform UserTesting.com , StubHub changed See Details to Go and conversions increased 2.6%. For StubHub, a 2.6% increase in conversions is worth millions of dollars in revenue per year.

Also, it's very important to give your CTA button a prominent placement, which can be critical to drawing the eyes of visitors. Placement in prominent locations (distinguished area, top or center layout, in the angles for form's buttons) can lead to higher conversions because users will likely notice the call to action button and truly take action.

Buttons that are included in CTA elements should be different from the rest of the buttons on your website. The explanation is that CTA buttons, rather than simply serving as a functional UI element, should be designed to encourage a specific action.

Buttons should stand out. Buttons that aren't clearly buttons may experience a markedly lower click-through rate. Make sure that all buttons that perform a similar action have a similar design, being consistent. Think about the shape of the CTA buttons (rectangular buttons are better than circular ones) and consider a color pattern of feelings related to a specific action:

  • Blue, Green: Positive (CTA: save, send, download)
  • Red: Negative (CTA: delete, block, reset)
  • Black: Neutral (CTA: see more, alternatives, discover)
  • Grey: Disable

Regarding color, also mind the background color across our CTA's. An effective primary CTA should be a button in a contrasting color to your main website color scheme to help it stand out. It is also interesting to run A/B tests to learn what works better for your users. The CTA button has to be intuitively clickable. 

The Add to Cart button, for example, can determine whether or not the user will add the item to your shopping cart. Aspects to consider are the color, format, size, text, visibility, ease of clicking, and loading speed. You can use, for example, a contrasting color button with the rest of the page, drawing the customer's attention.