Questions tagged [buttons]

Buttons allow users to directly trigger an action or activity in a software solution, and is a concept borrowed from its physical counterpart in its digital design. Use this tag for questions about how buttons should be placed, styled, aligned or used to express their purpose and facilitate their operation.

Filter by
Sorted by
Tagged with
2 votes
2 answers
848 views

When displaying an "OK/Cancel" button group that is right-aligned should the main action be on the right?

I am designing an "OK/Cancel" button group on a modal hence this button group is right-aligned. Since this is the case I have placed the main action button "OK" on the right, and ...
MACC's user avatar
  • 195
4 votes
2 answers
1k views

How to group multiple buttons on mobile

I'm working on a game website for desktop and mobile and one of the pages has 5 action buttons: Edit (no text, just pencil icon) Share (no text, just standard share icon) Play (just text) Compare ...
Sarah Bierman's user avatar
2 votes
5 answers
725 views

"Save" vs "Add": What button should I use for my app?

I'm working on an app to book appointments and need to decide what text to use in the button for the last step of the booking process: "Save Appointment" or "Add Appointment"
Ronald Valdivia's user avatar
0 votes
2 answers
683 views

SSO Login, can we remove the Linkedin color in the button? [duplicate]

I've been working on a login flow where we are allowing users to sign up or login with Linkedin. The devs in my team told me that we need to keep the Linkedin button with the colors : However, we ...
Tpaz0's user avatar
  • 9
10 votes
3 answers
4k views

Colour rule for multiple buttons in a complex platform

I'm currently designing a CRM which includes a lot of forms and modules. I have been struggling to decide the colour rule for the buttons especially having to incorporate branding colour into the ...
intnnn's user avatar
  • 653
1 vote
2 answers
70 views

Which button is better when you want to load results from a filter?

I am redesigning an application and, one of our tasks is to redesign the UI and clarify/connect UI with the action intended. I noticed we are using different buttons for the same target action which ...
Estela Gaspar's user avatar
0 votes
1 answer
579 views

Where is the best place to put the export/upload function for a data table function?

There's two Scenarios: V1 Export appears above the top right but only shows to a specific tab, it is hidden if it is not available in other tabs. V2 Export appears under the tab where it is only ...
Edwin Bryan Rosete's user avatar
1 vote
4 answers
2k views

What is better: disable next button if the form is not filled or enable it and outline the inputs?

Hei, was thinking: what is better from user perspective: The form which if not filled with all mandatory fields the "next" button is disabled or The form with "next" button ...
Joules's user avatar
  • 11
0 votes
1 answer
99 views

What is the purpose of a swap button in an airline booking app?

I am new to the community so I appreciate all replies :) First, what is the official terminology for this type of button? Second, what purpose does it serve in booking a flight?
Steven Souter's user avatar
1 vote
1 answer
143 views

Navigating through a menu with only 2 buttons

I have a physical device with a screen and 2 buttons. This device needs to be able to enter a "settings" menu, which shows different options which can be turned on/off or have a "...
Daniel Jour's user avatar
0 votes
1 answer
90 views

Best placement for action buttons on product comparison page

I'm trying to decide the best place to display action buttons for the user. The user’s main goal is to monitor products in their current and track for better options. The user is comparing products on ...
Eric Carr's user avatar
1 vote
1 answer
898 views

How a "disable animations" button should look like?

As it I've been asked to add a button to disable animation on my website, according to the WCAG animation criterion (https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html). The ...
enguerranws's user avatar
1 vote
1 answer
2k views

Position and style of back button in web [duplicate]

After studying about the 'Back' button, I still can't decide on which best suited my case. I am designing an internal portal where the content varies in width. Button position: A.1 Right side seems ...
intnnn's user avatar
  • 653
2 votes
2 answers
321 views

CTA repetition - Is having CTA in nav, hero, and footer overkill?

This is a pretty common design. Theres a CTA in the hero and nav with the same CTA and when you scroll to the bottom theres also another CTA that says the same thing. It feels a bit repetitive to me, ...
Bearsaur's user avatar
  • 2,151
0 votes
1 answer
79 views

Which button placement is more usable for touch

I'm designing an order listing UI for a delivery person to fulfill their orders. I need to add a cancel button for ad-hoc cancellation in certain situations. between the 2 options below I'd like your ...
Blue Ocean's user avatar
  • 10.7k
3 votes
1 answer
201 views

One button with Multiple States that Change Label and Functionality

I am redesigning a site right now and have the following question. Currently the user is presented with a list of Workstations. They have the option of: Adding additional workstation(s) to the list ...
pxmose's user avatar
  • 31
3 votes
2 answers
1k views

Should I use multiple icon for two states of toggle button

I have a simple bar chart component and I'm going to add a button which help user able to switch between two view modes. Let say: First mode called "relative view" (show percentage value of ...
ShinaBR2's user avatar
  • 133
2 votes
3 answers
454 views

label arrangement of the toggle button [duplicate]

I'm working on a camera switching feature. I'm thinking about the arrangement of the label of the button. To me, we can prompt the user to slide right to enable the front camera and in order to enable ...
Farhan Rahim's user avatar
3 votes
3 answers
278 views

What is the correct placement of actions buttons

I am working on an application where user's data will be frequently added and updated. In sample 1, I have added 'add address' links in each row per category for quick addition but it is breaking the ...
UXbychoice's user avatar
  • 1,850
2 votes
2 answers
494 views

Completely rounded vs Rounded rectangle buttons

I was curious to know why at some places completely rounded buttons are used and other places of the same application there are rounded rectangle buttons? As far as I could understand, small Rounded-...
Anupam Pareek's user avatar
2 votes
1 answer
818 views

What is the best place for an Add button in an iOS table view?

I’m trying to figure out where to put the Add button on my table view (on iOS). Its purpose is to create a new row in the table view, either inline or using a modal form. There are 3 common positions ...
Steve G.'s user avatar
  • 133
2 votes
3 answers
302 views

What icon intuitively represents making comparisons? [closed]

I want to make an app which involves repeatedly giving users two options and having them select the one they like better. Is there any icon or symbol which would intuitively represent this concept, ...
Seth Schmidt-O'Hainle's user avatar
1 vote
0 answers
185 views

Why thumbs up and thumbs down buttons looks better when facing towards each other when placed next to each other? [closed]

I'm designing a rating feature for an app with thumbs and thumbs down next to each other. i'm curious why is most examples i'd seen the hands will be facing each other instead of being in the same ...
Blue Ocean's user avatar
  • 10.7k
1 vote
1 answer
830 views

Shortcut Key for OK Button on Dialog Box with Grid

In a desktop app, I have dialog boxes that contain one or more small grids, various other simple controls, as well as the usual OK/Cancel buttons. Grids pose a problem to the usual use of Enter as a ...
Paul Mansour's user avatar
3 votes
2 answers
1k views

should buttons that look like links have the exact same keyboard accessibility?

We have a few use cases where we need to show something that looks like a link, but is actually a button. For example, consider this error message: Sorry we couldn't place your order. Please click ...
gaurav5430's user avatar
0 votes
4 answers
1k views

Multiple CTA buttons (same link) in Email marketing?

Thoughts on having the same CTA appear twice in a short marketing email? One is in the main image (the whole thing is essentially clickable) and the second is after some copy on the bottom. They both ...
user137854's user avatar
0 votes
3 answers
3k views

Is it acceptable to have three call-to-action buttons?

I'm working on an application that displays a dialog box. This dialog box prompts users to switch to a new editor. That will be the main call-to-action (CTA). The 2nd CTA will be to retain their ...
J Bo's user avatar
  • 1,394
1 vote
3 answers
363 views

Should submit button colors match color scheme or be consistent across products?

We have a site that has themed colors, depending on which product you are using. The user can easily toggle between products, so the theme makes it clearer which product they are on. Should Submit ...
Joe Booth's user avatar
  • 111
0 votes
2 answers
293 views

Using call-to-action or primary buttons to show status of form completion instead of form UI element

I noticed this while using a form to submit some information that the nature place where you indicate the status of the transaction isn't being used but instead the call-to-action or primary button is ...
Michael Lai's user avatar
  • 27.1k
15 votes
3 answers
3k views

Make Optional Buttons More Clickable

I currently have a UI where I have three optional buttons. By clicking on a button, it will go to another user flow and the button is "completed". Unclicked buttons are considered "...
turtlefish12's user avatar
1 vote
2 answers
96 views

Would you understand a 3rd state for a "like" action if it's using the same icon? [closed]

We're having a usability debate: would the user understand what the 3rd state means, without text or tooltips, if all he is presented with is an icon in different color, in a different component? ...
Maktouch's user avatar
  • 111
1 vote
1 answer
74 views

Any standards for :visited styling for CTA buttons?

I have used :visited in CSS for links for a long time and understand their value. However I have not thought of using it for buttons. My "CTA buttons" are usually soft CTAs that direct to valuable ...
Spencer Buchanan's user avatar
1 vote
5 answers
404 views

Ways to Indicate Clickability AND also going to a new process/screen?

I'm currently trying to design this UI to indicate clickability. Currently, once the user unlocks a section, the lock icon changes and turns gold. Then, if the user clicks on either the symbol or text,...
turtlefish12's user avatar
1 vote
2 answers
331 views

What is the best practise for a Search button state - should we always keep search button active or make it active after user inputs?

I have seen that in some sites they always keep " Search Button" in active / enabled state even if input fields are empty. Is it a correct way or should we make it enable only when user selects / ...
Monisha Jaswal's user avatar
0 votes
2 answers
136 views

Interface to choose how many results I want to see

Where I work we have this dialog box that comes up when you search for a certain word in the system: If the user says 'no', instead of not loading any results, the system loads either 10.000 or 1.000 ...
Amanda R.'s user avatar
5 votes
2 answers
588 views

What's a better approach to slider?

I'm currently creating a questionnaire. The questionnaire consists of two statements top and bottom. User is required to use the slider to indicate the preferred statement by dragging the handle ...
Tharindu's user avatar
1 vote
0 answers
38 views

Should there be more square and round shaped buttons than there are at the moment in the main part of webpages and apps?

References regarding optimal and minimum contact area or touch target size on mobile devices (also similar question previously on UXSE here) suggest that the contact area should fit the rough size and ...
Michael Lai's user avatar
  • 27.1k
1 vote
1 answer
98 views

Why do modern GUIs tend to have buttons on the side of message boxes?

Message boxes used to have buttons centered horizontally. E.g. here's one you'd get with MessageBoxW API function on Windows XP: But more modern systems have message boxes with the buttons on the ...
Ruslan's user avatar
  • 238
0 votes
1 answer
493 views

Is it ok for a button to open in a new tab?

We have an application that allows users to write posts/articles. Within this application, there are a couple features that require users to upgrade. I think it's reasonable for the upgrade button to ...
J Bo's user avatar
  • 1,394
4 votes
1 answer
42 views

Determining correct term for a button with options and Vue JS example [duplicate]

I am familiar with some UI terms but certainly not all. I remember smiling when I figured out what people meant by the term "snackbar" (and have now designed one myself). However, there is a button ...
Oliver Williams's user avatar
3 votes
2 answers
222 views

Showing edit mode for messages

I'm working on a desktop UI that has a notes section which allows the user to submit notes and edit them afterwards. When I go into edit mode, the "save" button shows up, and I worry that it competes ...
openbow's user avatar
  • 31
2 votes
2 answers
106 views

I have 2 sets of button, how can I arrange them for best user experience?

I have 2 sets of buttons on a pop-up box of a website. Set 1 consists of multiple options the user can choose from, i.e. option 1, option 2, etc. Another one is "Back" "Next" "Start over". What will ...
rohman hameed's user avatar
1 vote
1 answer
78 views

How to display context dependent buttons in a row

I work in an internal application for my company. I have a table displaying documents sent for digital signing, with a last column used for displaying buttons with several actions available to each ...
SJuan76's user avatar
  • 155
6 votes
2 answers
774 views

"Missile launch" button pattern name and implementation?

I am curious about a specific confirmation pattern. The best way I could describe it is the "missile launch" pattern, where the user has to "arm" the button by removing some sort of cover before ...
ppbitb's user avatar
  • 63
1 vote
1 answer
562 views

Best UI Practices to show Multi-Action Button while avoiding tabular layout

We have a screen which was given to us by a client. As per their module, when the user selects a tab, the page should show options to do certain tasks like create/edit/delete. One approach we went ...
Dave Rajan's user avatar
0 votes
1 answer
69 views

Where are these material buttons defined? [closed]

The following is said here in relation to Material Design buttons: 1. Text button (low emphasis) - Text buttons are typically used for less important actions. 2. Outlined Button (medium ...
David Callanan's user avatar
0 votes
3 answers
1k views

Multi Select Drop down, overlay with CTA buttons

Have a multi-select dropdown - which on expand is overlaying the CTA buttons on the form. I have to click elsewhere for the dropdown to close, (since it a multi-select dropdown the general behavior of ...
Vijay's user avatar
  • 1
3 votes
4 answers
576 views

What Micro Interaction to use When Hovering Over a Button?

👋 We are trying to learn/understand UX from first principals and build the most intuitive UI. We are creating buttons in an App and want to know what the ideal micro interaction is when hovering ...
nelsonic's user avatar
  • 151
1 vote
1 answer
1k views

Using Select All with button checkboxes

I like the usability enhancement that button checkboxes provide -- nice big click targets, plus we can add a little sliver of color that's used elsewhere in our application to impart a status ...
Izquierdo's user avatar
  • 12.7k
3 votes
1 answer
98 views

Need to have 2 sticky buttons - Signup and chat

I have a client requirement to have 2 sticky buttons on the home page. One is for signup and the other is for the Chatbot. I need suggestions on which placement would be better with least impact on ...
aravind's user avatar
  • 71

1 2 3
4
5
30