UX Movement » Buttons http://uxmovement.com User Experience Movement Sun, 14 Jan 2018 02:59:05 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.18 Stop Misusing Ghost Buttonshttp://uxmovement.com/buttons/stop-misusing-ghost-buttons/ http://uxmovement.com/buttons/stop-misusing-ghost-buttons/#comments Tue, 19 Dec 2017 18:45:10 +0000 http://uxmovement.com/?p=10559

A ghost button is a button that has an outline but no solid fill. They’re a popular trend across the web, but many designers are misusing them.


Lower Click Through Rate

Ghost buttons are popular among designers because they exude a modern, minimalist look and feel. It’s not loud, dominant and doesn’t call out to the user. But that’s exactly the problem when you use them as a call to action.


A call to action button needs a strong visual cue that attracts the user’s attention and calls them to click it. A ghost button’s minimal appearance lacks a strong visual cue, which results in a lower click through rate.

A low click through rate means most users are overlooking ghost buttons, which leaves them less engaged with a site. Several different studies have found that users recognize solid buttons a lot quicker and easier than ghost buttons. This was concluded in an A/B test, click test, and visual attention test.

The click through rate difference between a solid and ghost button is significant. One company’s study shows how much their email newsletter click through rate increased by switching to solid buttons. For every email opened, the solid button outperformed the ghost button by 7%.

It’s foolish for designers to sacrifice their click through rate to follow a stylish trend. Users will get more utility from a site with clear visual cues than one without. And designers will get more user engagement that can lead to conversions.

When to Use Ghost Buttons

Ghost buttons are only a problem when they’re used in the wrong contexts. When used in the right context, they can clarify the priority of an action and increase task efficiency.

When users see two buttons together, they need to think about which button to click. They’ll read the text labels to decide, but putting visual cues on the buttons can help them decide quicker. A solid button for your main action and a ghost button for your secondary action will accelerate the user’s decision-making.


In the “bad” example above, you can see how the outline of a ghost button gets lost with the lines of text when it’s by itself. If you were scanning the page, you could easily miss the button.

In the “good” example, the solid button carries so much visual weight that it’s hard to miss it. Your attention is drawn to the main action even though its surrounded by text and another button. The secondary action is still visible by its close proximity, but it does not take attention away from the main action.


Visual Cues Shouldn’t Disappear

Designers are misusing ghost buttons without realizing the consequences it has on their users. They assume the outline around a ghost button is a strong enough cue for a call to action. They assume it’s okay to use ghost buttons for its style because other sites do the same. But studies show this is not the right approach to using them.

Visual cues are disappearing from buttons and users don’t appreciate that. Designers may like the minimalist style of a ghost button, but the function of a button is for action, not aesthetics. The context in which you use a ghost button matters. Use it in the wrong context and your button’s visual cue will disappear like a ghost.


Please visit our monthly sponsor

http://uxmovement.com/buttons/stop-misusing-ghost-buttons/feed/ 5
When to Use a Switch or Checkboxhttp://uxmovement.com/buttons/when-to-use-a-switch-or-checkbox/ http://uxmovement.com/buttons/when-to-use-a-switch-or-checkbox/#comments Wed, 03 Aug 2016 16:17:05 +0000 http://uxmovement.com/?p=9622

It isn’t easy to figure out when to use a salad fork or dinner fork just by looking at them. This is because they’re similar in form and function. Both have prongs for spearing food, but each is designed for a different food course.


Similar Functions but for Different Contexts

Forks confuse people in the same way that switches and checkboxes confuse designers. Many designers think it doesn’t matter when you use one or the other. But the arbitrary use of them can cause unexpectedness and confusion. Like forks, these user interface controls are meant for different contexts.

Switches and checkboxes are both used to activate settings. But the immediacy of when users expect those settings to activate are different.

Using these controls in the right context will make your user interface intuitive to use. But using them in the wrong context can cause users to wonder what went wrong.

Switches Are for Instantaneous Actions

Switches always indicate whether a setting is on or off. When users turn a switch to “on”, they expect an instantaneous action as soon as the label appears. This is what “on” implies, not just for UI switches but real-world switches too.

When you flip a light switch on you expect the bulb to light up in an instant. Any delayed effect or need for further action makes you think something is wrong.


Switches should never require users to press a button to apply their settings. This is because a switch is already a toggle button. When you require users to press a submit button, you confuse them because it’s not what they expect.

You should only use switches on settings that need to take effect instantaneously. If a setting requires a button press before it can take effect, you should use a checkbox instead.

Checkboxes Require a Button Press

A checkbox does not apply a setting at an instant like a switch. Instead, it’s accompanied by a submit button and takes effect after the user presses it. Requiring a button press allows users to review their settings before they commit. This helps prevent accidental activation errors.


The visual cue of a checkbox is different than a switch. While “on” implies instance, a checkmark only implies selection. This means users expect a more immediate change with switches than checkboxes.

Checkboxes are useful for applying a batch of settings. With switches, users have to wait for the system to apply a setting one by one. Checkboxes allow the system to handle multiple setting changes at one time.

If the user will change a batch of settings often, checkboxes save more time. But if the user will change only a few settings often, switches work better.

Deciding Between Switch or Checkbox

When deciding between a switch or checkbox, focus on context, not function. Ask yourself whether a setting should take immediate effect or not. Ask yourself whether users need to check their settings before they apply them.

There are many real-world objects that have similar functions. But similarity doesn’t mean they’re a fit for any occasion. There are subtle differences that come into play for a specific context. These differences are details that designers should never ignore.

http://uxmovement.com/buttons/when-to-use-a-switch-or-checkbox/feed/ 7
Add to Cart vs. Add to Bag: Which Button Label to Usehttp://uxmovement.com/buttons/add-to-cart-vs-add-to-bag-which-button-label-to-use/ http://uxmovement.com/buttons/add-to-cart-vs-add-to-bag-which-button-label-to-use/#comments Tue, 26 Apr 2016 21:45:50 +0000 http://uxmovement.com/?p=9355

There’s one thing all ecommerce sites have in common. You have to click a button to select the items you want to purchase. But the text labels on the buttons aren’t always the same.

Some sites offer users an ‘Add to Cart’ button while other sites offer an ‘Add to Bag’ button. Does this difference in button label terminology affect user purchasing behavior?

Conversion rate testing results have found that ‘Add to Cart’ buttons perform far better. The button label significantly improved the rate of products added and purchases completed. The results prove that users perceive the two labels differently.

Shopping Cart Convention

Since the advent of ecommerce, the shopping cart concept has been a familiar convention on most sites. Users have no trouble understanding what the ‘Cart’ means.


Designers confuse users when they start to take the interface metaphor in a literal way. Their store may not use any shopping carts. So it doesn’t make sense to use ‘Add to Cart’ in their eyes. But users don’t see it the way that designers do. They follow naming conventions to understand what an action means.

‘Add to Bag’ Causes Confusion

Users can read the ‘Add to Bag’ label and interpret it in many ways. If they’re shopping for handbags, they could interpret that as adding another handbag to their purchase. They can interpret the bag as an extra shopping accessory they don’t want. Or they can interpret it as a feature that’s separate from the checkout process.


The attitude that users have towards bags and carts are also different. A bag is an object where you place your items after you have made a purchase. Bags give users the impression that they already bought an item and can’t change their minds.

A cart is an object you use to collect items. It gives users the impression that they are free to put in and take out items if they don’t want them. There’s less pressure on the user when they add items to their cart. But when they add an item to their bag, it makes them question whether it’s final or not.


Imagine if designers changed the labels of other naming conventions users are familiar with. What if the label for site searches became ‘Find’ instead of ‘Search’? Or if the label for home page became ‘Main’ for main page instead of ‘Home’? Designers should use labels that have the highest familiarity with users.

The alternative labels are confusing because users aren’t as familiar with them. This creates confusion and stops users from complete their task. If users are uncertain, they won’t feel comfortable completing a transaction. This is not what you want when users are shopping on your site.

Cart vs. Bag Icon

Users aren’t just used to the word ‘Cart’, they’re used to recognizing the icon too. The shopping cart icon is distinct and unmistakable. A cart has a strong connection to shopping because it’s a common object used in stores. But the bag icon is easy to misinterpret. It’s not an icon that has a distinct shape or meaning. This makes users uncertain when they look at it.


Location Appropriate Term for Cart

In the U.S., ‘cart’ is the term that describes the physical shopping cart in stores. But in other countries, such as the U.K., they use the term ‘basket’. The button label for U.K. users should say “Add to Basket” instead to avoid confusion. Call the shopping cart whatever is appropriate for the location of your target users.

Final Thoughts

Changing your button label from ‘Cart’ to ‘Bag’ isn’t helpful if the former is what users are more familiar with. Designers think ‘Bag’ is more technically correct if their store doesn’t use carts. But being legalistic doesn’t get you the high conversion rate. Speaking the user’s language does.

http://uxmovement.com/buttons/add-to-cart-vs-add-to-bag-which-button-label-to-use/feed/ 13
Why Your Links Need a Hover Effecthttp://uxmovement.com/buttons/why-your-links-need-a-hover-effect/ http://uxmovement.com/buttons/why-your-links-need-a-hover-effect/#comments Wed, 07 Oct 2015 21:15:00 +0000 http://uxmovement.com/?p=8590

Links contain text, but they should never look like text. When users read a web page, they need to be able to distinguish what’s clickable. If your links don’t have enough contrast, users could miss them.

Color is Not Enough for the Colorblind

Most sites make their links a different color from their text. But that’s not enough contrast for colorblind users. The difference in color is hard for them to see. Colorblind users have to rely on their cursor change (arrow to hand) as feedback.


A hover effect can give them a clear signal to see what’s clickable. When users move their cursor over a link, they’ll notice a change in color or shape that tells them to click. This prevents them from missing links.

Decreasing Mouse Cursor Focus

A lack of a hover effect not only affects colorblind users, but also normal users. Normal users will be able to see links better, but they still have to make an effort to target them.


When users see a link, they’ll move their mouse towards it. But they have to check if their cursor is on top of the link before they can click. Otherwise, they’ll end up misclicking the link.

With a hover effect, users can move their mouse towards the link and click as soon as they see the hover effect. This allows them to target and click links quicker without focusing on their cursor. Instead, their focus remains on the page content.

The Perfect Hover Effect

A low contrast hover effect is not as effective as a high contrast one because it’s not as noticeable. But there are things you can do to get the perfect hover effect. The perfect one will display a high level of color and shape contrast.

To add high color contrast color to your hover effect, you should vary the hue from a cooler to warmer color. For high shape contrast, you should underline or block highlight your links.


Hover Effects on Mobile

Hover effects won’t work on mobile devices because there’s no mouse cursor. This means that your mobile links need to have high color and shape contrast on them before the user taps.

You should style your mobile links as if the hover effect is already triggered. Use arrow affordances, underlines and block highlights to make them accessible to all users.


Final Thoughts

Whether your users are colorblind or not, everyone should be able to spot and target links with ease. Adding a hover effect to your links is a simple and effective way to meet their needs. Links and text shouldn’t just look different. For the best user experience, they should also behave different.

http://uxmovement.com/buttons/why-your-links-need-a-hover-effect/feed/ 12
Making Selected Button States Clear for Color Blind Usershttp://uxmovement.com/buttons/making-selected-button-states-clear-for-color-blind-users/ http://uxmovement.com/buttons/making-selected-button-states-clear-for-color-blind-users/#comments Tue, 01 Sep 2015 18:37:05 +0000 http://uxmovement.com/?p=8496

Color communicates a lot on user interfaces. But not as much for color blind users. They often have trouble distinguishing between different colored objects.

If you only use color as a visual cue for your buttons, it’ll make it hard to tell what the selected state is. Instead of only using color, you should also use shapes on your buttons.

Navigation Bars

There are many buttons on a navigation bar, but it’s not easy to tell which is the selected one if you only use color. Many sites will add a contrasting color to the button label. This is hard for color blind users to notice.

Instead of only using color, add an underline to the button label. Colorblind users won’t struggle to guess the selected button. They’ll notice it at a glance.


Segmented Buttons

Another place where color blind users need more of a visual cue are segmented buttons. Many only use color fills to distinguish the different states. While this is clear to normal users, color blind users will have trouble telling them apart.

All they will see is a light color fill versus a dark color fill. It’s easy to wonder whether the light or dark color fill signals highlighting. Clear up the confusion by adding a checkmark icon next to the selected state button label.


Toggle Switches

Toggle switches also face a visual cue problem for color blind users. When you only use color for on and off, it’s hard to tell the selected state.

To make the states more clear, you can add an “on” and “off” label to the switches. Or, you can add a checkmark to the “on” state.


Color is Not Enough

Color blindness affects a large percentage of the population. If you want to reach every user, communicating with color is not enough. Consider using checkmarks, underlines and labels as extra visual cues for clearer button states.

Color blind users already have it harder than the rest of us. You can make their lives a little easier by doing a little more.

http://uxmovement.com/buttons/making-selected-button-states-clear-for-color-blind-users/feed/ 2