Buttons in UI Design: Best Practices for Button Design | AGENTE

How do you describe a UI button design in three words? We picked these: “action upon touch.” Indeed, the main goal of putting buttons on a website is to enable users to take action and complete one or more tasks: register, buy, subscribe, like, follow, etc. That’s why it’s vital for great button design to make these actions visible and unambiguous, thus empowering user flow and navigation.

Sounds unimportant? How about this fact: The Guardian called Netflix’s “skip intro” button “the greatest invention of this century”! 

Source: thenextweb.com

Placement and size

Color and contrast

When talking about button colors, first you need to determine the types of action buttons perform:

• Positive – OK, Approve, Confirm

Positive buttons need to have the highest contrast, and the best combination is cold hues(blue or green) + white text.

• Neutral – See more, Cancel, No change

Neutral actions are best used in black-and-white scheme or with a transparent body. The traditional color for the actions like Cancel or Disable is grey.

• Negative – Delete, Block, Reject

For negative buttons, red is the best fit. Use a lower contrast when placing it with neutral and positive actions. However, if you have only neutral vs. negative buttons side by side, put the higher contrast with the red fill color on the more negative one.

Source: uxmovement.com

Source: winhelponline.com 

To avoid this, put the clear labels on each of the buttons and choose wording that doesn’t confuse users:

Source: help.overdrive.com 

Style

The next consideration is the appearance of your buttons. In user-centered design examples, styles are often dictated by current trends and their relevance.

• Skeuomorphic design

The texture, size, shadows and highlights of a skeuomorphic virtual button should take after real ones, and make people feel like they are pushing a real button.

The rise of flat design has rolled back the trend of “real-life” buttons, however, fashion is cyclical, so we suggest bearing this style in mind for the future.

Source: pinterest.com 

• Flat design

The flat button design has become a recent trend as a response to the skeuomorphic design. It represents digital buttons in flat mode, without heavy visual effects. They look minimalistic and don’t remind users of real-life buttons, which simplifies overall UI design.

Source: uxplanet.org

• Almost flat design

After the cycle of trials and errors and in the light of never-ending debates over skeuomorphic vs. ultra flat design, there appeared a compromise which is called the almost flat design. It is flat in nature but adds more relief to the UI by adding subtle shadows, layers, and highlights. Google’s floating action button is a good example of almost flat design in mobile apps.

Source: stories.uplabs.com 

• Ghost buttons

The ghost button is the new black in the UX/UI design world. It’s a transparent element activated upon hovering over it. However, they are not so progressive as they may seem: placing the pointer over an image or video with no proper contrast can make it unclear that a button is there. As a result, it may impact the conversions expected by clicking these web buttons. Therefore, we suggest presenting ghost buttons as secondary CTAs, not primary ones.

Source: pinterest.com 

Consistency

When arranging all the buttons on the web, and on mobile pages, it’s critical for website designers to ensure that both the graphic elements, their placement, colors and styles are consistent across the platforms. Following the principle of least surprise will do your users a big favor by meeting their expectations, no matter where they access your website or app, helping them to successfully complete of their tasks and, as a result, increase your conversions.

And finally, here come some examples for your inspiration:

Source: cornerstoneplatform.com

Cornerstone platform from Agente features a nice example of ghost button usage. A well-elaborated contrast and color scheme make such UI buttons visible and reasonable.

Source: dribbble.com

An interactive menu with round animated buttons is a good fit for a game menu, as well as for any other entertainment mobile app.

Source: dribbble.com

Flat ghost buttons are highlighted when being pointed at; their “ghost” nature is balanced by a bright yellow contour on the black background.

Source: dribbble.com

This button interface follows the new design trend: drop-downs are slowly being replaced by toggles, or segmented menus. This is especially relevant for mobile UX, where placement matters much.

Source: dribbble.com

Nothing special from the UX standpoint, but the solution for the ‘Play’ button is sooo cool and nostalgic that we couldn’t but add this to our list.

The bottom line:

As you can see, UI buttons mean more than just pretty little design elements: they direct users into completing the tasks you want them to perform. A fast and meaningful user-interface interaction is ensured by combination of correct colors, shapes, styles and behaviors. Which of them is best for you? Contact Agente for expert UX and UI consultancy, and start creating a better experience for your customers.