The Evolution of Buttons in UX Design

Buttons are a crucial part of designing interfaces. Getting this element right will go a long way toward good UX and elegant design. At their most basic, buttons are specially styled links that we want to draw attention to. Buttons can link us to other pages, complete an action like submitting a form or making a purchase. They are often used for the primary calls to action (CTA) we want our users to complete.

A brief history of buttons in UX

With the advent of graphical user interfaces (GUIs) came button elements. Let’s pick up in the early 90s, when we start to see what resemble buttons on web 1.0 sites and on interfaces such as Windows 3.11 and later Windows 95.

button 1

Some examples of Web 1.0 button styles

Buttons in the early days of the web were often GIF buttons or graphics. These buttons contained blinking graphics and textures. At this time, much web content was user generated and best practices in terms of usability and affordances had not developed.

Operating system buttons relied on the appearance of relief and shadow to distinguish them from their surrounding context, as they were often the same color as the dialog box or interface element they were placed in.

button 2

Early OS buttons were often the same color as the surrounding dialogue boxes. Image source.

This type of skeuomorphic button which relied on looking raised and 3D to imply it was a clickable element spilled over into the web. There are still examples of the legacy of this type of button to be found online today, particularly when legacy backend systems are in play. Gradients, outlines and shadows are all examples of this.

button 3

Some button styles online show legacy design traits.

Modern button trends

We have come a long way since the early days of button design. One of the major shifts that has happened in UI terms is the trend away from skeuomorphic elements towards more flat ones, stripped of 3D effects. Rather than relying on buttons looking raised and ‘buttony’, lots of modern web design aims for a clean, minimal aesthetic. The challenge here is keeping affordances – if everything is flat, how do users know which pieces are buttons?

button 4

An example of a material design button by Mauro Marini on Behance

Material design comes in here, reintroducing some elements of layers, hierarchy and animation to provide the user with cues. These buttons are layered over the top of the interface. A further evolution is the floating action button (FAB) – which ‘float’ above the UI and draw attention to promoted or primary actions. FABs have drawn some criticisms for potentially impeding the user experience. They are an overlapping element and could potentially get in the way. Users may be becoming familiar with them as Google introduces them across Android and web interfaces, however, as always, use with caution and be sure to test your design decisions!

Another button style that has become quite popular of late is the ‘ghost button’. This is a transparent button, with an outline a few pixels thick and button text matching the outline colour. These buttons are driven by aesthetics, as they are an elegant way to create a cohesive feeling. To ensure that the CTA is noticed, these buttons are often centered with lots of padding around them. The buttons also usually have very strong, inverse hover/mouse over states, to ensure the affordances are sufficient.

button 5

Ghost buttons blend nicely with the background of the design. Example from exposure.co

button 6

button 7

Strong hover states for ghost buttons provide better affordances. Examples from hyperisland.com

A final trend that is gaining traction is the oval button. This an alternative to traditional rectangular or rounded rectangular buttons, and adds visual interest. These are usually solid fill styled buttons, again supported by strong hover and tap states to ensure users can identify them as buttons.

button 8

button 9

Oval buttons are becoming increasingly popular. Examples from bmo.com and exposure.co.

Button best practices

While trends and visual direction are important to be aware of, the button is primarily a functional element. It is crucial that users can identify them quickly and easily as buttons. Let’s explore some best practices to keep in mind when designing buttons.

1. Make it look like a button

button 10

Groupon.ca sign in uses a subtle gradient to create button affordance for the primary ‘sign in’ CTA. Notice how secondary actions are not styled as buttons, for example ‘Not a member yet?’. This keeps the focus on the primary action.

Think about how the design communicates affordance. How do users understand the element as a button? Size, shape and placement all come into play here. Classic button shapes include the rounded rectangle. Some research suggests that rounded corners enhance information processing and draw our eyes to the centre of element. As mentioned above, one current trend is to use oval buttons. If you choose to deviate from traditional button shapes, make sure you usability test your designs to ensure that people can easily identify the buttons.

Make sure you also consider the hover/tap states and active states of the button. Bear in mind that these states should provide enough contrast for people to clearly identify them as different from the default state.

2. Pay attention to sizing

communications concept: girl using a digital generated smart phone. All screen graphics are made up.

Think carefully about touch target size and padding when designing.

The size of buttons also play a key role in helping users to identify these elements. With the rise of responsive web, thinking about how the button will resize and percentage widths of buttons has become more important. As web visits from mobile devices continues to rise, we need to ensure that the buttons we design are large enough for people to interact with. This means considering the size of button elements as well as the padding between clickable elements. Various platforms provide guidelines on minimum touch targets. Results of an MIT Touch Lab study found that averages for finger pads are between 10-14mm and fingertips are 8-10mm. The best way to test out your design is to look at them at scale on devices, and get users to interact with them. There is also a great Touch Target Template that can guide you.

3. Order of buttons

button 12

Vee for video – notice how the primary action is stronger in colour and contrast, and is on the right hand side of the modal. Image credit: pttrns.com

The order that buttons go in, especially if there are corresponding pairs (such as ‘previous’ and ‘next’) is important. A few rules of thumb can help here. Ensure the design puts emphasis on the primary or most important action. This should be the visually dominant button. This can be done using color or size. Be sure to follow platform conventions for modals, as users will be used to seeing a certain button order and placement. You can find these guidelines online for all of the major platforms.

button 13

The iOS interface guidelines show examples of button order and styling within modals.

What’s next?

We have come a long way from those early grey OS buttons and the flashing, animated early web buttons. Continued evolution is driven by ever visually slicker mobile and web design, as well as the big players like Google introducing design languages such as material design.

Be sure to consider button best practices in your work. By paying careful attention to button styling, sizing and order, you can ensure smooth UX that outlasts the trends.

Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!
  • As lead UX for mobile apps at H&R Block a few years ago, we had an interesting challenge. We had 4 large buttons on the dashboard (if you will) and 2 card style buttons. As per my wireframes. When the visual designer started playing around with square buttons with icons in the middle, the Product Owner thought we were going a bit block crazy. We were dong some user testing anyway, so I had him come up with a few options, and made him do a round button.

    Strangely enough, all the users preferred the round button. Their explanation? They felt the square buttons weren’t actually buttons, and they thought they’d have to click the icon in the middle. The round buttons, they felt the entire area was a button.

    When in doubt, design the familiar. Know your user. You can do anything, but if it isn’t what your persona or behavior from research is expecting, you’ve failed.

    Title was a bit off, only because it was more about UI design then UX, but I’ll take it. Thanks for adding in the research part to make the title ok. 😉

  • The article has omitted the very first required question. Is it a button?
    Far too often, a button is used when the feature is a link.

  • Greg hoffman says:

    “Modern” buttons look suspiciously like windows 1 or 2.. flat and oval. So much for modern….

Share your thoughts

Your email address will not be published. Required fields are marked *

*