A Story of UX/Web & Mobile Buttons

Here we go again.

Alright, so when I first googled the word ‘button’ I didn’t exactly get what I wanted or expected. No, I didn’t want to learn more about this:

I wanted to learn more about the buttons we click on, interact, and see on our interfaces (web and phone screens). Exactly that. Buttons you can ‘submit’, ‘cancel’, ‘save’, and ‘download’ with. Gosh, they truly do A LOT of service.

So, I will now talk some about what I’ve learned in respect of designing such a User Experience and Interface button.

“Button UX Design: Best Practices, Types and States” article by Nick Babich talks quite extensively about different buttons and their design.

“Buttons are a vital element in creating a smooth conversational flow in web and apps.”

Make Buttons Look Like Buttons

“This about how the design communicates affordance. How do users understand the element as a button? Use shape and color to make the element look like a button.”

“Mind the order and position of buttons. The order that buttons go in, especially if there are corresponding pairs (such as ‘previous’ and ‘next’) is important. Ensure the design puts emphasis on the primary or most important action.”

Delete button should be more prominent than cancel button because of the ‘delete’ function being much more impactful and permanent.

Labels.

“Label buttons with what they do. Add a clear message of what happens after the click.

Call to Action (CTA).

“Make the most important button (especially if you use them for calls to action) look like it’s the most important one.

Button Shapes.

“You’ll want to make buttons square or square with rounded corners. Some research suggests that rounded corners enhance information processing and draw our eyes to the center of the element.”

“Maintain consistency throughout your interface controls.”

Button Types and Behavior

1. RAISED BUTTON.

“Typically rectangular button that lifts (the shading indicates that it is possible to click). Raised buttons add dimension to mostly flat layouts.”

“Raised buttons lift and fill with color on press.”

“Raised buttons stand out more than flat buttons.”

2. FLAT BUTTON.

“Flat buttons do not lift, but fill with color on press. The major benefits of flat buttons is pretty simple — they minimize distraction from content.”

3. TOGGLE BUTTON.

“A toggle button allows the user to change a setting between two (or more) states.”

“Most common toggle button is used as On/Off button in preferences. Toggle buttons can be used to group related options. But your layout should be arranged in a way to convey that certain toggle buttons are part of a group.”

“Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star or an item.”

“It’s very important to choose the right icon for your button.”

4. GHOST BUTTONS.

“Ghost buttons are those transparent and empty buttons that have a basic shape form, such as a rectangular. They are generally bordered by a very thin line, while the internal section consists of plain text.

Using ghost buttons as a primary CTA is usually not such a good idea.”

A Ghost button is a secondary button. CTA is the primary button where you want the user to take an action.

“Positive action has much higher contrasts and user sees a clear action.”

5. FLOATING ACTION BUTTON.

“It’s a circular material button that lifts and displays an ink reaction on press. Floating action buttons are used for a promoted action.

They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.”

Choosing Button Type

Choosing a button style depends on the primacy of the button, the number of containers on screen, and the screen layout.

Function: Is button important and ubiquitous enough to be a floating action button?

Dimension: Chose button type depending on the container it will be in and how many z-space layers you have on screen.

Layout: Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function.

Button States

“This point is not so much about how the initial button looks like for the user, but it’s about hovering a button and finding that nothing changes.”

Is it a button, or not. Now I have to click to find out if that thing that looks like a button is actually a button. Well…

“Button isn’t a one-state object. It’s multi-state. Providing a visual feedback to the users to indicate current button state should be a top priority task.”

Normal State: Button should look like a button in a normal state.

Focused State: Offering a good visual feedback to users that they’re hovering over a button is good practice. The user instantly knows their action was accepted and they want to be delighted by visual rewards.

Basically every action requires a reaction. Whenever someone hovers over a button maybe the color should become darker or some small sound ring, whatever, to let the user know they can click there.

Pressed State: By animating different elements of your design you can add a bit of excitement and delight your users with creative and helpful motion.

Inactive State: There are two possibilities — either hide a button or show it in disabled state.

Arguments for hiding the button:

• Clarity. Only showing what is needed for the task at hand.
• Save estate. It allows you to change the controls, using the same space for different means. This is handy when there is a lot going on.

Arguments for using a disabled state:

• Show the action possibility. Even if button isn’t in use, the user has a chance to learn that the action is possible.
• Control location. the user can learn where controls and buttons live within the interface.

“Button is meant to direct users into taking the action you want them to take.

Button UX design is always about recognition and clarity.”

And the following learning insights/info is from another article, also by Nick Babich about buttons, called “7 Basic Rules for Button Design.”

Buttons are an essential element of interaction design. They have a primary role in the conversation between a user and the system.

1. Make buttons look like buttons.

“When it comes to interacting with user interface, users need to know instantly what’s clickable and what’s not. Every item in a design requires effort by the user to decode.”

Generally, the more time needed for users to decode the UI the less usable it becomes for them.

“That’s why it’s so important to use visual signifiers (such as size, shape, color, shadow, etc.) to make the elements look like a button. Visual signifiers hold an essential information value — they help to create affordances in the interface.”

Some things that I learned over the study of buttons, and HOW to make something look clickable, is the feature of ‘hover’. So, when someone hovers over an item, and if it changes in color, or moves, etc., then I have an understanding that I can click on it.

Another way to make something look clickable, is simply by sticking with the industry’s standards. Every average user has an idea of what a normal UX/web button looks like. Usually they’re somewhat square in shape, elongated. Some are rounder, and others are a complete circle. However, all buttons have boarders around them, and possibly some word inside letting me know what it will do. Other buttons are icons, a plus sign, or an image of something. A good UX experience will also include something like a description before the button explaining the action that it will take you to, such as ‘would you like to delete the album?’ with two buttons following the directive of ‘cancel’ or ‘delete’. The way you label buttons is also super important. If you said ‘ok’ and ‘delete’ next to each other, or something else as confusing, you’d create a pretty bad user experience.

Some other principles from the article on this point:

• Don’t assume that something in your UI is obvious for your users.
• Use familiar designs for your buttons.
• Don’t forget about the white space

“The amount of whitespace near the button makes it easier (or harder) for users to understand whether it’s an interactive element or not.”

2. Put buttons where users expect to find them.

“Don’t make users hunt for buttons. If users can’t find a button, they won’t know that it exists.”

• Use traditional layouts and standard UI patterns as much as possible.

“Tip: Test your design on discoverability. When users first navigate to a page that contains some actions that you want them to take, it should be easy to spot an appropriate button for the user.”

3. Label buttons with what they do.

“Write button labels that clearly explain what each button does. Users should clearly understand what happens when they click on a button.”

Never designed a dialog box or form that consisted solely of the two buttons ‘OK’ and ‘Cancel’.

“It’s better to use ‘Remove’. Also, ‘Delete’ is a potentially dangerous operation, you can use red color to state this fact.”

4. Properly size your buttons.

“Make the most important button look like it’s the most important one. Always try to make the primary action button more prominent. Use a contrasting color to capture user attention.

“Make buttons finger-friendly for mobile users. In many mobile apps, buttons are too small. This often leads to the situation when users mistype.”

The best size is 10mm X 10mm for mobile buttons.

5. Mind the order.

User interface is a conversation with your users.

“It’s logical that button that moves you forward should be on the right, and a button which moves you backward should be on the left.”

6. Avoid using too many buttons.

“When you provide too many options, your users end up doing nothing. When designing pages in your app or website, think about the most important actions you want your users to take.”

7. Provide visual or audio feedback on interaction.

I think that this one is SUPER important, and I talked about it earlier. This is also how you make people know that they can click on something. Also, if I do click on something and it gives me some visual or audio response, it’s rather rewarding (depending on how it’s displayed), and I might want to keep moving forward.

There’s also this saying, which says that every action needs a reaction. I might have talked about it at some point earlier. A reaction to your action gives you comfort, safety, an assurance of acknowledgement, that you’ve been heard and can move forward.

“When users don’t have any feedback, they might consider that the system didn’t receive their command and will repeat the action. Such behavior often causes multiple unnecessary operations.”

And lastly:

“For some operations, such as downloading, it’s worth not only acknowledging user input but also show a current state of the process.”

I SO MUCH agree with this. I think it’s not only true with downloading, but also things like exercise, or like a checkout process (seeing some visual bar of where you are in your checkout process), or if you’re filling out a work application, and it’s long, it really helps to see what percentage has been completed. Same thing goes for watching a movie, listening to a song, etc. It’s that question of ‘how much more of my time investment is it going to take, and is it worth it?’ A visual representation might very well help to get the user to continue with their process.