Two Buttons

Written by Hamilton Cline
Last updated on January 14, 2019, 5:40 am

Anti-Patterns

What is a Pattern? Generally it's a way things can be arranged, and if we consider that most people would want to arrange things into a pleasing pattern, than we can consider the word itself to have a positive connotation. Oppositely we can therefore consider an Anti-Pattern to be a pattern that people would NOT want to follow.

Solid Vertical Similar

Let's get this out of the way. Never use a vertical pattern unless you DO NOT care about hierarchy one way or the other.

The two, full, solid buttons, in a vertical orientation, with equal coloring and size. This one seems like it should be easy. The problem comes in expecting the user to understand your hierarchy. If these two buttons have equal meaning, or can be used to branch forward movement, than it's not a super bad pattern. But if these two buttons have opposite navigational direction, then expecting a user to know which one to take forward is completely dependent on grammatical context.

Solid Horizontal Similar

In some ways better, in some ways worse, this anti-pattern can be bad if you don't fully think through which of your buttons is on the left or the right. Once again, everything will come down to grammatical context, and for anyone that isn't a native speaker of the language in your app or website, this can simply add a pain point for ease of use.

Solid Red Green

A common design choice is to make a positive choice green, and a negative choice red. The thing about this pattern is that when all else is equal this can disconnect a large portion of your audience that are specifically color-blind to these two colors. Always be aware of color-blindness and how it can be affected by your choices.

Close Inline Text

Two text buttons next to each other, anywhere in an app no matter what their navigational direction, is often a really bad idea. Not only is it not clear these two things are buttons at all, but their proximity can make it unclear they are different buttons. Having two inline buttons next to each other if they have opposing navigational direction is just a bad idea anyways.

Inline Equal Buttons

Two buttons next to each other is a little more complicated. Having two buttons with equal hierarchy next to each other can often lead to immediate confusion. Their direction and position is also a complicated issue based on the design of other things around them.

UnDesigned

Get out of here. What are you even doing?

Contrast Buttons

This pattern is not inherently bad. The problem comes from not understanding the hierarchy of this pattern and how that can affect a user's initial reaction. It doesn't even matter much whether it's used horizontal or vertical. The user might decide they like solid buttons, but they might also gravitate toward the lined button since it can seem enwreathed by the lines. There's no great advice here, except to say that it should be used with similarly colored buttons.

If tabbing through buttons on a keyboard, it can be nice to have a commit button be the first button upon completing a form. But often times for click and touch, it can seem more intuitive for the final button to be the button given greater importance.

Color Contrast Complication

When considering two buttons with even color, most people would tend to put importance on the solid button. Let the change in contrast handle the button differentiation and don't over-complicate by adding a color difference.

Patterns

Vertical Button / Text

This pattern is most useful when what you want someone to do linearly is click the button, but giving them an alternative is still an option. Use this pattern when your navigation is F shaped. Put the most obvious forward navigation into the button, and put a meaningful alternative into a low hierarchical text link below.

Horizontal Text / Button

Having a major button like commit is important. Having an alternative linear movement like cancel is equally important. But you usually don't WANT people to cancel. You just have to give them the option. So make that cancel button a text link, and make the commit button take all the hierarchy.

Close Inline Buttons

If you're going to put two buttons next to each other inline, keep their movement forward, and give them contrast. Notice that I've actually switched the html order of these buttons and the previous, in order to keep their tab order in a form. But I've switched their flex order to give them visual forward momentum.

Previous Next Contrast

Next and Previous navigation are a great time to bust out the lined and solid button combination. Use the lined button for back, and the solid button to mean forward. Keeping them evenly sized will indicate that either direction is fine, but the solid button should still indicate the wanted click. Don't alternate colors, though.

Forward Backward Split Text

If you're going to make Forward and backward buttons, it's probably a good idea to make them more useful and clear. Split them apart to the opposite sides of the area, and give them some small text that includes the next section's title.

Considerations

There are other things to consider, of course.

Header Navigation

Remember that when making top level linear navigation in an app context, that left should be back, and right should be forward. This counts for general navigation and modal design.

Modal Split

When designing a modal, consider moving the cancel button to the top. A modal should probably use the text Cancel, not back. Consider using only one button as the footer, and keep your modal simple and clear.

Modal Direction

Consider moving your commit text to the right of the footer to keep the user moving in a forward direction.

Modal Interior

If you have multiple buttons, keep them inside the modal body, and don't vertically stack them if you can avoid it.

Add to Cart / Buy Now

Let's face it, sometimes you just don't have the horizontal room for your buttons, and sometimes there just isn't a clear hierarchy. The vertical button pattern should only be used if you don't care what the user chooses. But remember to at least put what you consider to be the most likely choice on the top, and give it the solid design.

Written by Hamilton Cline
Last updated on January 14, 2019, 5:40 am