Buttons perform an action or activity in a software solution. Use this tag for questions about how buttons should be placed, styled, aligned or used to express their purpose and facilitate their operation.

learn more… | top users | synonyms (1)

13
votes
7answers
2k views

Should the cross (or 'X' ) button do something other than close (e.g. minimize or hide)?

It's common for the user to use the cross button to exit an application. But sometimes software is tricky and the cross minimizes the windows instead of closing it. Does this kind of behavior should ...
4
votes
5answers
318 views

How to avoid big banks of buttons?

What are some alternatives to having repetitive rows buttons that create large banks like the one shown below. I think it's too visually dominant and distracting, not least because there's one of ...
1
vote
0answers
71 views

Any lesson learned or best practices on the UX of a 'Download' button?

My company provides a free edition of a desktop application we developed. Currently I have 'Download' button only on website, and I consider to replace it with one of the following three suggested ...
2
votes
4answers
111 views

How to prevent users from submitting a form with no changes made

I would like to prevent users from being able to submit a form where the selection hasn't been changed from its original state. Example: In the wireframe above, when the user sees this form, the ...
0
votes
1answer
28 views

Creating account when clicking the TOS link [closed]

There is a slight difference of opinion at my company between 2 approaches and we're looking for some expert advice on this. We have a form in which we're asking for various info from the user, ...
0
votes
0answers
20 views

Button Labels : Contextual Names or Generic Names [duplicate]

When we label the buttons should we use contextual names or generic names. For example, I have a form to add a new employee.Here the button is named as "Save", which is more generic. How about ...
0
votes
1answer
71 views

the presentation of a selected button of a page

It's often the case that there are two kinds of presentations of a selected page, like the following: 1.the selected button become dark and invalid, while others page-buttons are up-light and valid ...
0
votes
1answer
65 views

Usage of animated buttons and effects on user experience

I see more and more animated buttons in service oriented web applications, especially in registration and completing an action. In the literature of persuasive psychology, moving objects are used for ...
1
vote
2answers
95 views

Vertical position of icons in buttons

Software interface design: What is the correct vertical position of an icon in a button? Either at the bottom line to the text or centered with the text?
0
votes
4answers
250 views

Why does everybody use Yes/No/Cancel buttons?

Is there any reason with respect to Interface Design or Usability that someone (I guess Microsoft in the early days of windows?) started using this 3 buttons twenty years ago? Has anybody any sources ...
1
vote
1answer
100 views

Can we use ghost button as drop down button?

Do we have any standard for using ghost buttons? I know basic details on when to use ghost buttons but more detailed explanation will help Can we use ghost button as well as solid button on same page? ...
5
votes
5answers
172 views

Users confused about status indicators vs. action buttons

Recently we did some user testing on our current method of displaying data. We had a list of items in a table (yeah, I know. Our software currently uses tables heavily), with icons on one side that ...
0
votes
3answers
132 views

If a record is cancelled, what word to use for the action of un-cancelling it?

I have a web app that allows users to cancel records. Once cancelled, they are displayed under a tab called cancelled items. The users are also able to un-cancel these records, so that they become ...
6
votes
4answers
155 views

Should a delete action's “undo” be underneath the “delete”?

Take for example this button: _________ / \ | Trash | \_________/ Which when clicked, becomes this: _________ ...
1
vote
2answers
55 views

How should multiple buttons wrap on different responsive breakpoints?

We are currently developing a Wordpress site that has a Shortcode button feature that allows the client to alter the text, URL link and colour of a button, also to add new buttons. The client is ...
4
votes
2answers
73 views

Matching Navigation Names to Page Titles?

Upon reading the "Navigation" chapter of Don't Make Me Think, I saw the point 'The name needs to match what I clicked.' Obviously, this is a book of guidelines and is not law, but I'm confused about ...
11
votes
4answers
1k views

Position of negative/positive buttons [duplicate]

Consider two buttons: - OK - Cancel Should the positive 'OK' button be placed on the right or left? Is there some rule or convention that needs to be followed in this case. Consider the following ...
2
votes
1answer
142 views

Show submit button only after the form has been validated?

I'm building a store-like site and users can publish their own ads and I was wondering if not showing the submit button until the form has been completeley validated is a good idea, for example if the ...
0
votes
2answers
38 views

Using only keyboard shortcuts (without button/menu counterparts)

I'm working on a webapp right now and the way I am designing the actions mainly utilizes keyboard and mouse combinations. Example, join two elements by [shift + click]ing them in order. Is this an ...
1
vote
1answer
50 views

Choose existing or creating new category

Our current implementation gives the user an option to select a category from a drop-down and to add new category. The problem is that this button under the drop-down does not work very well. 1) ...
-2
votes
3answers
102 views

Would you consider this button to represent that the device is currently on or off? [closed]

Would you consider this button to represent that the device is currently on or off? The opacity switches to the other button once it is tapped. I just want to make sure that the state is fairly clear. ...
3
votes
1answer
133 views

Color/Shading Guidelines for Button States

Are there any rules of thumb or formulas for the different color shades when creating non-default buttons? Default buttons have 4 states, Enabled, Focused, Pressed, and Disabled. These all tend to ...
6
votes
5answers
215 views

How should I handle buttons on larger screen mobile devices?

I am designing a responsive site that supports landscape orientation. My question is specific to button sizes. Usually on portrait mode, buttons stretch across the screen. For bigger smartphones ...
69
votes
12answers
5k views

Should form 'Continue' button be disabled if validation is incomplete?

In forms we often see the 'continue' button inactive until all the required fields are complete: download bmml source – Wireframes created with Balsamiq Mockups Is this actually a help ...
0
votes
1answer
27 views

What should be displayed when the user selects an overall category?

Background So I am working on a project for a client that has filters for different weather events. There are categories and sub categories (example below) Winter Snow Freezing Rain Sleet Slush ...
3
votes
1answer
85 views

Indicate that a button doesn't take immediate action

Using a social network as an example, say I have a button called connect that ultimately sends out a friend request to another user. Clicking on this button then opens up a modal that asks for ...
2
votes
3answers
76 views

Insurance company Call To Action “Buy online” vs “Get a free quote”

I'm currently working on the redesign of an insurance company website. So for the main call to action I use the copy "Get a free quote” With a link on the button to go to the online quote process with ...
6
votes
6answers
203 views

What are some ways you can encourage people to read the Instructions?

We make educational software. Each Lesson has instructions. Sometimes the instructions are fairly obvious (Click the picture that matches the spoken word), sometimes they are more complicated : ...
0
votes
3answers
65 views

Which side should I put the close button on a window? [duplicate]

Is there any known preference for users between putting the "Close button" on the top right or top left of a window? Does it simply matter? Mac users should be used to the top left and windows' ones ...
1
vote
1answer
34 views

How to handle both go to cart and stay on catalog when ordering on e-commerce site

I work on an e-commerce site. Products are listed. There is an add to cart button for each item. Our customers use our software to sell products to their buyers. Some customers want to offer a button ...
6
votes
2answers
556 views

Save & Continue Button

In the app I am working on the user is presented with a list of item on the left and a panel contained with input fields on the right. The user will navigate the list and edit pricing criteria for ...
5
votes
3answers
155 views

How should I place 3 equally important CTA buttons?

This is an airport transfer quotation form I've created. The user will first select the pick up, destination and number of passengers. Then, they will retrieve the type of vehicle, price and ...
3
votes
2answers
203 views

Material design - buttons raise, not depress

There is some discussion of this here but I haven't found a more comprehensive discussion of it. With Material Design, objects that wish to convey being pressed appear to rise up towards the user, ...
10
votes
3answers
891 views

Should a “view more” button move down when the pane expands?

On a website I have a pane that can be expanded to show additional information. The "show more" button (red square 3) turns into a "show less" button when expanding it. What results in better UX? The ...
1
vote
2answers
53 views

How to add UI elements that have a button which need a description and inform the user that steps will follow after clicking the button.

I have a button which requires a description. I currently have it as following But it looks unbalanced. Also this is not the final step of the procedure. I want the user to know that further steps ...
2
votes
1answer
106 views

Should the 'back to top' button be used when infinite scrolling is implemented?

Infinite scrolling is becoming a popular design choice for many types of websites that focuses on the browsing rather than search behaviour. Does the use of back to the top actually support that ...
23
votes
2answers
1k views

Auto-creating new Items vs. “Add New” button

I'm iterating on a mortgage CRM system, which involves the broker providing previous incomes of the future home owner. Currently, the system "invisibly" provides a mechanism for creating new ...
2
votes
1answer
87 views

How prominent should the deactivate account function be?

Our app allows users to interact with multiple accounts. When any one account has outlived it's usefulness, it can be deactivated. Although users can still navigate to deactivated accounts, most ...
1
vote
2answers
122 views

“Standard” or “best” UI element for “turn offline” and “turn online”?

We have a series of buttons in our administrative interface, for turning systems online or offline (context-sensitive). Currently these buttons are simply either blue "Online" buttons to bring a ...
2
votes
2answers
112 views

How to avoid that “Path to Completion” results in “Previous” becoming the next logical action?

Here's my current situation: download bmml source – Wireframes created with Balsamiq Mockups It's a typical wizard that follows this Path to Completion advice. However, regardless of how ...
2
votes
3answers
136 views

Where is the best way to put the buttons? Left or right?

I am creating a panel but im not sure where is the correct place to put my buttons, either in the left or right, been trying to put it on the left but seems okay to look at, but not really sure.
0
votes
2answers
113 views

Label for a button to kick work back to previous user

We have a process in which a piece of work needs to be submitted by one user, approved by a second user and finalised by a third. Either of the last two users can send the work back to the first for ...
1
vote
3answers
195 views

Is it okay to have two “primary” buttons?

I have a dialog that allows the user to enter text to be processed. Initially, there are two buttons: "Cancel" and "Assemble." The latter button is the primary action (in Bootstrap, .btn-primary). ...
2
votes
4answers
207 views

Alternatives for preventing Accidental Touch Issues

Most of the mobile devices that are based on Android OS have buttons on the bottom edge of the device. These touch buttons have terrible UX issues. They are prone to accidental touch, thus resulting ...
3
votes
3answers
167 views

When to use a tool based UX and when to use a button based UX for a spreadsheet app?

To explain what I mean by the terms: Tool based UX: select a tool from a tool bar, and use the tool on some part of the resource. Examples: Photoshop, Minecraft. Button based UX: select a resource, ...
0
votes
2answers
120 views

What kind of button should I use for toggle all state?

I have a series of small images in a scrollView and a way of controlling their opacity with a toggle switch. The toggle has two actions: Set all images to full opacity Set all images to low opacity ...
20
votes
5answers
3k views

Save buttons that don't save

Generally there are two kinds of windows I make: windows with Ok/Cancel buttons, and windows with just a Close button. The implied understanding is that Ok/Cancel windows don't save anything until you ...
1
vote
1answer
38 views

What is the best way to let the user select a distance for a layer?

So I am creating a layer list using d3 and I have a question about how best let the user select distances. To give some background, the user will be selecting a geographic layer and will then be ...
8
votes
7answers
1k views

Should a button behave differently when pressed a second time?

I display a map in my Android app, and on that map I have an icon button that's used to fetch the current device's location. The button is in the top-right corner in the image below, and the current ...
0
votes
1answer
64 views

Best way to give user information on a layer

The Idea I have a layer list that is being created like this d3 version here and I want to append some sort of information icon to the lowest level nodes. To give some background, the user will be ...