Every website or mobile application contains buttons. Buttons play a crucial role in facilitating a user’s interaction with a page, screen or system. In many instances they are components used to start or complete tasks that the user wants to get done. As such, the way buttons are designed, their shape, their color, size and position on a screen have a huge influence on how satisfied a user is with his or her experience, and it impacts the likelihood of whether they’ll return to use the service again in the future. For businesses and organizations that rely on people using their websites and mobile apps frequently in order to be successful (think ecommerce retailers and banks as just two examples), buttons have a key role to play in success or failure. Katarzyna Suwała, a UX Designer at ITMAGINATION, walks us through 7 fundamental rules of designing buttons for websites and mobile apps that every UX and UI Designer needs to know.
A well-designed system is a system that helps users complete the task that they want to complete in a way that is clear, intuitive and logical. Interactive elements (i.e. those things that a user can click on, tap on or hover over) should be clearly distinguishable from the other visual elements that make up the interface. Put simply, if a system is well designed, then it should be difficult for a user to confuse interactive elements with non-interactive elements.
When designing buttons and other interactive elements, the notion of affordances can be incredibly useful. According to Don Norman, co-founder of the Nielsen Norman Group and Director of the Design Lab at the University of California in San Diego, affordances are the perceived and real properties and characteristics of an object that indicate to us as users how they can or should be used. In practice, affordances should suggest to us what can be clicked on and what can’t. As such, the appropriate use of shapes, sizes and colors are important in influencing how the user will perceive the button and its role within the interface.
Most of us have been using computer systems and websites for 20 years or more. Over this time, our expectations with regard to what we see on screens and how we perceive them and associate them with specific actions and outcomes have accumulated and evolved. We don’t look at each button on a screen and wonder what might happen if we click or tap on it – we already have a good idea. As such, User Experience (UX) and User Interface (UI) Designers should use shapes that users have become familiar with.
Examples of the most-common types of button shapes and styles are:
But perhaps the most commonly used shape for the design of buttons is to use a solid-color filling with squared borders and a shadow effect. The shadow adds a layer of depth, which serves as a visual indicator that the object stands out from its surrounding environment and can be interacted with.
With mobile applications, where there is less screen ‘real estate’ in which to operate and perhaps a greater reliance on users’ experience and established expectations, it is more common to use buttons with rounded borders, and to replace commonly used words or phrases with icons (think ‘settings’ and the cog).
The colors that UX and UI Designers use when designing interfaces and experiences should be consistent and logical. By creating the design for a website, app or system, we are building trust. When a user learns that one color means ‘action’ and another means ‘information’, it is the responsibility of the UX and UI Designers to ensure the consistency of this understanding throughout the page.
For buttons that serve as a Call to Action (CTA), such as “Register”, “Contact us” or “Buy now”, it’s best to use a color that is in high contrast to the colors that surround it and the background. Ideally, the same color should be used for all CTA buttons on the page or within the system or mobile app. In this way, users will quickly identify the key actions within the user interface. Consider the following examples:
The internet contains many useful inspirations and references, including simple color palette generators like the one at Material Design Palette.
For buttons that are of secondary importance to key Call to Action items, it makes sense to use less colors that are less in contrast with the surrounding elements and background. Their intention should not be to rival the key CTA items (nor to cause sensory overload for users interacting with the service). ‘Ghost’ buttons (i.e. no fill and lighter borders) should be used in those actions that are less important from the perspective of the webpage or mobile app’s owner. Shades of gray are typically only used for buttons or features that are inactive or are, in the context, less desirable.
A good practice to apply with the use of colors on buttons is to indicate their state of activity. The simplest representation of such an activity is a ‘hover over’. For example, when a user moves the cursor over a button, it changes color to reflect the fact that it is being interacted with. The effect achieved by a hover over should be clear, yet comfortable and reassuring. For this reason, it typically makes sense to use a shade lighter or darker than the button in its non-hover-over state.
As important as it is to consider the colors used for buttons, it’s equally important to ensure that each colored item has the space around it to breath and to not be lost because surrounding elements (e.g. text, images) are too close to it. Negative or white space is important.
To conclude on colors, it goes without saying that any colors used on a website or mobile app should be taken from the company’s brand book, which should have been created with both on- and off-line (e.g. print) worlds in mind.
Buttons should naturally be located in positions that are visible, but it’s also important that they are positioned and ordered in a way that is in line with users’ expectations. Most of us have been interacting with websites, apps and systems for years, if not decades. Over the course of time, certain user expectations have been shaped. As such, it makes sense for UX and UI Designers to deliver in line with these expectations. Also, some things are simply common sense. For example, consider the positioning of “Back” and “Next” buttons. If positioned together, it naturally makes sense for the “Back” button to be on the left and the “Next” button to be on the right. This is common in digital computer interfaces but it’s also how we would interact with things like books (i.e. turn the right page to move forward, and the left page to go back).
Similarly, when placing two options together, let’s say when asking a user to confirm or cancel an action, it’s important to position and color the options accordingly. Let’s say we’re using a photo app and we want to delete a photo. The app’s designers might have considered the permanence of this decision and sought to give the user a second chance to confirm this choice with a pop-up window that invites the user to confirm or cancel this choice. For people in the Western world – and in line with user experiences – it makes sense for the button on the right to be the ‘confirming’ or ‘progress’ button, which in this case would be “confirm”. To place “confirm” on the left could be considered as undermining the user’s original intention. That being said, there might be instances where it is important to question a user’s original intention, particularly if the consequences are serious or irreversible (e.g. delete account). It’s important to consider such practices carefully and to try to avoid applying solutions that could be interpreted as Dark Patterns. In such instances, a well-written or slightly longer warning text could be considered as a viable alternative to a sudden deviation away from user expectations.
Useful guidelines on how to design interfaces (including recommended positions and treatments for buttons) can be found all over the internet. Apple’s iOS UI guidelines, for example, are an invaluable, freely accessible, resource for any UX or UI Designer working on mobile apps.
Using words that are clear and easy for a user to understand is crucial and this needs to apply not only to the first buttons a user sees, but also those that appear as part of pop-up or dialog boxes. Consider the examples below, which could both appear after a user has first selected the “Remove object” option from a previous level of the interface.
In the example above, one could argue that the use of “OK” is acceptable. The context is established (we want to remove an object) and “OK” is a response to “Remove Object”. However, “OK” is not as strong a response as should be expected from the user – the interface should be looking for a response that indicates 100% certainty of the user’s desire, with no space for ambiguity.
In the example above, the use of the word “Remove” (instead of “OK”) leaves the user in no doubt as to what the outcome of the next click or tap will be. To emphasize the importance of the decision or to remind the user of the consequences, colors such as red can be used for such actions.
The size of a button should be an indication of its importance within an interface. A large button should indicate that it will lead to the most-important outcome (importance might depend on user or owner perspective and could be considered to be the most-desired outcome for the page or app’s owner). If two or more buttons exist on a page, then there should be a consistent system in place to denote their priority. For example, if the most-important button is largest and in the strongest color, then a secondary button should be smaller and with a lighter color. The scale could continue down to ‘ghost’ buttons and even simple hyperlinks.
The size of clickable or ‘tap-able’ elements should also depend on the end-user device. It would be easy to simply conclude that because a cursor on a computer screen is much smaller than the fingertip that we tap with, elements on a desktop display can be much smaller. Nothing could be further from the truth. According to Fitts’s Law, the smaller the target, the further away it seems and so the more difficult it is (or effort is required) to ‘reach’ it, especially with a small mouse cursor.
Research from MIT’s Touch Lab study of d Human Fingertips to Investigate the Mechanics of Tactile Sense demonstrated that the part of the fingertip used to touch screens (such as smartphone and tablet screens) is typically 8-10 millimeters in width and height. For this reason, buttons designed for smartphone or tablet interfaces should be no smaller than 10 millimeters. Buttons that are appropriately sized reduce the likelihood of unsatisfactory outcomes and user frustration. According to Google’s Material Design Accessibility Guidelines, buttons for touch screens should be 48 dp x 48 dp (dp = Density Independent Pixel). Good practice for mobile devices should thus be to not go below 44 pt x 44 pt (pt = 1/72 of an inch, with respect to the physical screen size) and 32 pt x 32 pt for webpages.
Image source: uxmag
It’s important to ensure that you don’t have too many buttons on your interface. And, while we’ve always been taught that choice is good, there can be too much of a good thing (as explored in Barry Schwartz’s work in the Paradox of Choice). We might think that by providing more options, we are increasing the likelihood of user satisfaction. In many cases, the reverse can be true.
Too much choice can actually lead to confusion, distraction, decision paralysis, disappointment and, ultimately, failure to complete the intended action. From a more practical perspective, Hick’s Law details how the time required to take a decision increases according to the number of options we are presented with. From a UX and UI perspective, it’s important to consider what it is that we want people to focus on when arriving at a page or what it is that we believe they expect from this page and focus on making that possible. Very often, less can be more.
If, as a business or organization, you are looking to build trust and long-term relationships with your customers, it’s important to avoid the use of anything that could be perceived as Dark Patterns. In the UX and UI world, Dark Patterns are the practice of using design ‘tricks’ to get people to buy or sign up to services in a way that could be misleading and out of sync with the rest of the user experience.
Organizations should treat their websites and mobile apps in the same way that they would treat their bricks and mortar stores or banks. If a user or customer does not feel comfortable in the environment, or that they cannot trust what they see, there’s a good chance that they will leave and not return any time soon.
Buttons might seem like a trivial element of your overall User Experience. However, it’s important to remember that buttons could well be the first and last signposts that lead a user from the start to end of a successfully completed transaction. In a digital world, buttons are a key means of conversing and interacting with customers. We use them to build expectations and trust, and we use them to give people the answers we think that they are looking for. If you fail to design and use buttons correctly, you risk undermining relationships or preventing them from developing into positive business outcomes.
ITMAGINATION has extensive experience in advising on and designing user experiences (UX) and user interfaces (UI) for companies of varying sizes and sectors. We combine deep domain expertise and experience with the latest UX and UI trends to build compelling customer experiences that deliver business value.
If you want to build trust with your customers and have online interactions that lead to tangible business results, talk to ITMAGINATION.
Learn it. Know it. Done.
This article was also published on:
.jpg)
.png)
.svg){kind=small}
