A Tale of 2 Buttons

TedBlog
By Ted Krueger
11.15.18

Navigation is a critical aspect of your site’s design. It needs to not only look good, but be functional and make sense to your user. Keeping things consistent is key — consistency throughout your site, like the look and feel of repeated modules or actions, as well as industry consistencies like using a “Hamburger” menu icon for mobile navigation. Both examples play a role in keeping your site consistent and creating an awesome user experience.

A pretty popular example of an action you might find on just about every site you visit is a button. Buttons create a different look and feel when compared to text links. They have other benefits as well, like being easier to touch or tap on a mobile device. We also see examples of buttons being used to guide users toward a specific goal. Let me explain.

If you’re building out an Ecommerce site, a good UI rule of thumb is to use your buttons as a road map to placing an order. It would most likely cause confusion for a customer if they saw a yellow button that says, “Add to Cart” and another yellow button on the same page that says something like, “Reviews.” It’s ok to use buttons for actions, but when differentiating between a primary action, like “Add to Cart,” and a secondary action, like “Reviews,” there needs to be some obvious separation. Your primary actions keep the ball rolling toward the ultimate goal of placing an order, whereas secondary actions offer other forms of assistance. Let’s take a look at some examples.

Amazon 1 

One of the first things you may see when going to Amazon is a sign-in action. This is what their primary buttons look like sitewide. If you’re not signed in, this is the first step to placing an order. You may have noticed the “Start Here” link. Notice that it’s not a primary action. Amazon is giving you 2 options within this field, one more obvious than the other.

Now that I’m signed in, it’s time to do some shopping and I quickly find myself on a product page. Here is where I see my first example of Primary and Secondary buttons together.

amazon add to cart

 

Both of these buttons help the customer. In different ways, yes, but they offer assistance nonetheless. The text on the button is pretty obvious as to what the outcome of the action will be, but we see the consistency between the two. 

amazon checkout v2

After adding the product to your cart we see another example of the Primary and Secondary comparison. This is a great representation of the road map analogy. Here, a customer could select the Primary action, taking them into the checkout flow where they will see primary actions every step of the way until they hit the final ultimate primary action of placing an order. Or, they could choose to go to their cart and add more products, or remove products — whatever. What’s obvious is the direction that these two buttons will allow the customer to take.

The point is when thinking of your site’s navigation, it’s important to think about how your users will get to see the information that they need to see. Whether it’s differentiating primary and secondary actions, be sure to have enough of a separation making it obvious to your user as to what will happen even before they click. Keep this separation consistent throughout the navigation of your site, and build for your users the road map they need to get to their desired destination.

Share this
Ted is a front-end developer who creates user-friendly, modular, and responsive websites starting from the ground, or in his case, mobile up. Mobile-first is barely a concept to him anymore as everything he builds starts there. When he’s not building websites, good luck finding him, because he’s most likely on a mountain, floating a river, or hunting.