Left-align or right-align a Call to Action button?

Question

We are creating online presentation, and most of the text on the pages is centred, on the last page we have CTA, the button leads to a different website, that is aligned to the left. I was asked to align it to the right, as some believe that CTA's belong on the right hand side and while being centred it seems to be getting lost (it's a big green button).

I have read Lukew's article about "Primary & Secondary Actions in Web Forms" But this is seen as a great example of buttons on the web form, is there some study that looks at the eye flow from centred text and images to a button, does the western eye prefers. Looking at the diagram with arrows I would thing that right align button would actually be preferable as it takes for an eye to get to the button faster.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

Best practice

You'll find a lot of info out there about CTA tests and theories. But you're not going to find a whole lot that tells you what to do with horizontal alignment. The reason is, it depends on your design.

The norm

If your colleagues want to talk about what is more common, then you should align right, as you suggest. This is used more often than left because it denotes moving forward in a sequence (at least for us left-to-righters). Conversely, you'll find a lot of "< Back to something" CTAs aligned left.

Fitting the context

In your case, the site content is mostly centered, which trains the user to move along the central vertical axis. It also creates an aesthetic environment that favors symmetry. In that context, I would center align the button. For the visually minded, here's a quick wireframe of following the dominant axis of alignment.

Finding the problem

If you're having trouble with users missing a centered button, you have to ask yourself if you've given it proper scale, spacing, and differentiation from the surrounding view. As I'm sure you know, alignment is not the only factor in play.

More importantly, do you know for certain that it's being missed? Sometimes a lack of clicks is not for lack of visibility. Do users know what to expect when they click? Have you given them adequate motivation?

Not that it means much, but here's confirmation that centered can work from Smashing Mag.

Locating a call to action button in the middle of a web layout with no (or significantly smaller and deemphasized) flanking elements can be an effective way of drawing attention and enticing an action.

Answer 2

Let's start with why....

• Your content is center-aligned today. So as users navigate down the page, they expect the next piece of content to be center-aligned.
• Today you have a big green, center-aligned button. It's not getting noticed enough.
• Why isn't it being noticed? Hard to tell exactly without looking at the exact content, but it's likely that:
  • The button is competing for attention with the graphics, color palette, and volume of content above it.
  • The user is perceiving the button as part of the content. In other words, you are doing too good a job of harmonizing the layout because you are guiding the user to read center-aligned content, so the user continues to perceive the center-aligned button as part of the content flow rather than as an interactive element.

Why might left/right alignment help?

• By taking the button out of the center-aligned flow, you are creating intentional cognitive dissonance. This gives the user an intentional cognitive pause from the flow of content, which prompts her to evaluate the alignment-breaking element more carefully. She can then more easily perceive the CTA button as an interactive component.

---

Why does this matter?

• By understanding the cognitive process, you can create better design.
• Using the framework above, we know that the real approach here is to create a cognitive break for the user to allow her to perceive the CTA button more clearly.
• While alignment is one way to do this, there are several others (click image to expand):

• The illustration shows that there may be other ways to achieve better CTA emphasis without the need to break your layout (if that's important to you/client stylistically).

This framework also helps you make a decision on left vs right alignment if you do decide to go with alignment dissonance. Left alignment is a more natural choice as it's enough to break the center-alignment while still conforming to the user's expectation of left-to-right reading. That's why it is more commonly seen on websites.

Right-alignment may stimulate more cognitive dissonance (user expects to go down-and-left to read the next piece of content, but instead just goes down or down-and-right), but comes at the cost of some potential disorientation as a result.

Answer 3

What will the CTA be doing? Depending on what pressing the button will do will likely lead to a different placement. Such as, if it's leading to another page it can be meaningful to place on the right for a desktop design as most desktop OSs use next/ok buttons on the bottom right.

One could argue a neutral centre position can work in most cases.

Answer 4

According to Fitt's law:

the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target.

You can also consider the Gutenberg's Diagram, but according to research study by Nielsen, this terminal zone concept isn't really that useful, although in my personal experience it works as long as the elements are short.

Now, there's a highly researched and tracked trend of placing buttons to the left... as long as the whole container is on the top right. I have tested this a lot myself (CTAs are my bread and butter), and found it very interesting. Top right container with left aligned buttons usually beats top right container with right aligned buttons for more than 50%.

However, if you place your form on the middle, then button should be centered or right aligned (and here's where Fitt Law's is useful, hence why I mentioned it, do the maths and you'll see). Remember it will also depend on your form's width. Personally, I tend to do smaller forms (no more than 400px width) and use really bulk buttons, usually taking the whole width of the form. I did a lot of research on this, and it works, but of course, you have to do your own testing.

Finally: besides placement, remember to use copy, spacing (leave room for the button!), size and color.