One of the most common questions in visual design is: “Should the button be on the left or the right?” It depends on where you have created visual “edges”.

The Axis of Interaction

The Axis of Interaction is the imaginary “edge” your eye follows naturally. The closer something is to the Axis, the more visible it is to the user. While we’re focusing on one chunk of content, the other chunks of content effectively become invisible.

Find the Edges: In every design, you will use the visual principles you learned in this list. When you step back and look at your layout, you will notice that you have created “lines” or “edges” or “blocks” everywhere.

They might be the aligned edge of the text, or your images, or groups of things in a row.

Each of those edges is an Axis of Interaction. Your eyes will follow an Axis until it is interrupted, or until it ends.

Your user’s attention is almost always focused on an Axis of Interaction, and when it stops focusing there, it will hop to the next Axis of Interaction. Therefore, if you want people to click something, put it on (or near) an Axis of Interaction. If you don’t want them to click it, put it somewhere else.

The farther an element is from the Axis, the less people will see it, and if you don’t see something, you can’t click it.

Primary and Secondary Buttons

The example below shows two button examples (don’t click them). As a general guideline you will only need two button styles, because most user actions fall into one of two categories:

1. Primary Actions that are helpful to our goals.
2. Secondary Actions that are not.

Primary Buttons:

Some actions that are available to the user are productive, like registering, buying, submitting content, saving, sending, sharing, and so on. Those are primary actions, or things that we want the user to do as often as possible.

Buttons that execute primary actions — primary buttons — should be as visible as possible. We can do this by using either, or both of:

1. Primary Style: High contrast compared to the background. (Very different color or shade).
2. Position in Layout: On or near the Axis of Interaction so users notice them first, by reflex.

Secondary Buttons:

Some actions that are available to the user are counter-productive, like canceling, skipping, resetting, declining an offer, and so on. They remove or stop the creation of new things. Those are secondary actions, or things we don’t want the user to do, but we provide the option for the sake of usability.

Therefore, buttons that execute secondary options — secondary buttons — should be less visible, to prevent accidental or “reflexive” clicks. We can do this by using either, or both of:

1. Secondary Style: Low contrast compared to the background (a similar color or shade).
2. Position in Layout: away from the Axis of Interaction so users only notice them when they are looking for them.

Importance is a big exception:

Sometimes counter-productive actions are important, like deleting your account.

Those actions should get a primary style but secondary position in the layout. The reason is that we want the user to find it, but we want them to think about their action before doing it.

It is also a good idea to give this button a color that indicates the importance of the action (red, orange, yellow, etc.).

Special Buttons:

In some cases, you will have one type of action that is unique to your site or app, which requires special focus. Design a special button for this, so it stands out in your design (pattern breaking).

Amazon’s “Buy now with 1-click” buttons, Pinterest’s “Pin it” button, and Facebook’s old thumbs-up “Like” button all got this treatment (more or less).