15
votes
Accepted
How to indicate that a button is locked?
Consistency (WCAG 3.2.4) and labeling (WCAG 4.1.2) and are two important points in accessibility that apply to your situation.
In your first two button examples, the "quick scan" has an icon ...
- 3,245
7
votes
Button on clickable banner
To have a clear call to action on the banner is helpful. It makes it very clear that there is an action and even what action is on the banner. Some users will click the button and not the banner but ...
- 3,415
7
votes
Accepted
How can "down arrow" mean "increase"?
It's very nearly the same as this:
Natural "reading order" for most cultures is from top to bottom, so when you place sequential things (whether it's a sequence of numbers, or the sequence ...
- 186
6
votes
How can "down arrow" mean "increase"?
My guess is that it's referring to the position of the next month in a calendar, which is either to the right or to the bottom of the current month. The calendar itself is just following the ordinary ...
- 3,310
6
votes
How to indicate that a button is locked?
There are different patterns to approach this but the main goal is to allow discoverability & learnability for the user on premium features.
I would suggest your research well on what works well ...
- 4,518
6
votes
How to indicate that a button is locked?
I'll take inspiration from both excellent answers so far and suggest the following: Place both icons on either the right or the left side, whichever you prefer, but ensure consistency.
Now, the issue ...
- 37.3k
6
votes
Accepted
What are some cases, if any, where a button element should act as a link?
Since you tagged this with accessibility, I'm answering from that perspective.
No
A link is for navigation and implies the browser's "back" button will take you back to the previous page.
A ...
- 3,245
5
votes
Button on clickable banner
Yes, it is a VERY GOOD idea. Keep in mind otherwise some people won't realize the banner is clickable.
As for this part
The button acts as a decoration
I think here's the reason of your doubt. A ...
- 37.3k
5
votes
Button position in equal height containers
According to the Gestalt Law of Proximity, option B is the correct one.
The Law of Proximity is the gestalt grouping law that states elements that are close together tend to be perceived as a unified ...
- 37.3k
4
votes
Show and hide button after generating
I think it depends if it's possible to generate a receipt twice. If the user would like to generate a receipt more than once, I'd make the button have a "loading" animation to the right and ...
- 1,136
4
votes
How to indicate that a button is locked?
IMHO, if you want to transport the paywall message, please use a paywall icon. Not a disabled or locked icon. If there's a locked icon, I'd ask my IT support department why it is locked and how to ...
- 1,115
4
votes
Would the placement of the Save Button be better in the top right or under content?
As per the structure of the page that is shown in the image, the heriarchy of button placed at the top right is actually giving out the meaning of saving an entire data with a catch in the button ...
- 1,114
4
votes
What type of design pattern to use to toggle list actions?
I would consider making "Add to watchlist" and "Add to send list" a togglable button:
Add to watchlist => Remove from watchlist
Add to send list => Remove from send list
...
- 196
3
votes
I add you and I pay AND You can join if you want, but you pay
I think you'll want to split this into two workflows - adding collaborators, and making them into paid accounts.
A lot of services will allow a file owner to add collaborators for free. The ...
- 12k
3
votes
Accepted
Multiple choice submit button(s) alternatives?
Try using a split button, and have the most common choice as the default action.
Split buttons can help when you have multiple choices, but don't want to overwhelm the user.
Get some data from your ...
- 24.6k
3
votes
How can "down arrow" mean "increase"?
The arrow corresponds to direction of the eyes opposed date value:
The date values increase as the eyes look in the downward direction.
The date values decease as the eyes look in the upward ...
- 31
3
votes
Accepted
Making a dropdown more apparent
First of all, I see an important problem that can interfere with the immediate interpretation by a user not used to this type of interface: the disparity in the sizes of the icons, where the smallest ...
- 18.3k
3
votes
Button position in equal height containers
When you decide a place where to place a series of buttons, you are proposing an interaction zone in the layout of the page, in other words, it is not about buttons, but an area of activity.
Taken to ...
- 18.3k
3
votes
Accepted
Do we still need an active/pressed state for a button?
A button is active as long as it is pressed. Even when most click/tap actions are fast, some can be slow. This can be because of a hesitation or poor motor skills. Hesitation happens out of ...
- 11.4k
3
votes
What type of design pattern to use to toggle list actions?
Instead of a Button, you can give the Add to Watchlist and Add to Send list as Checkboxes so that they don't have to use a separate button for removing, just unchecking the options will remove it from ...
- 56
3
votes
Cancel button to go back after Saving
As I understand you want to keep your logic as it is - keep form open even after submitting. To solve your problem, I'd highly recommend you to change the word "cancel" to "close", ...
- 373
3
votes
Accepted
Button or link to slide content to be visible?
You are correct, buttons and links are both CTA's, but they communicate 2 different things. A rule of thumb for this question: link takes user to a new location, a button changes the state of the ...
- 373
2
votes
Accepted
How to position a "add to list" button?
Given that your list is in reverse chronological order, it makes sense to put the input (ie what will become the latest entry once you press OK) right at the top.
In this case, the FAB and the dialog ...
- 1,682
2
votes
Reset Button in Filter Popup
[Reset] [Filter] [Cancel]
Reset: restore last saved filter to the list, don't change table, don't close popup.
Filter: apply to table and save changes, close popup.
Cancel: don't apply to ...
- 2,615
2
votes
Accepted
I add you and I pay AND You can join if you want, but you pay
Create a single button for adding a collaborator.
Then on the form where the data of the collaborator is entered, use a radio button to choose between:
$10 fee paid by me when I click "Submit&...
- 1,225
2
votes
2 buttons with the same action
I would avoid having the same action twice on the page until research shows that it’s necessary (which is almost never).
In your case it’s because you have sidebar which seems to duplicate the content ...
- 717
2
votes
Accepted
Multiple button display on a message approval screen
I think you have at least two problems: a UI issue that causes high cognitive load and an information architecture issue with a mix of related and unrelated actions.
From what I can see, the UI has ...
- 37.3k
2
votes
Accessibility of Button States
This example taken from the W3C Web Accessibility Initiative (WAI) shows that's there is no intention in the accessibility standards to make a visual distinction between hover and focus. As long as ...
- 11.4k
2
votes
What are some cases, if any, where a button element should act as a link?
Yes, but it depends on how you've set up your buttons.
TL;DR: since most buttons in CSS libraries are actually button elements and a good number of new single page applications use ReactJS and ...
- 1,674
2
votes
What are some cases, if any, where a button element should act as a link?
Appearance of button can change from case to case. Based on your situation you can take decision using Secondary action buttons as link.
For example, Back button. Also attaching one sample widget I ...
Only top scored, non community-wiki answers of a minimum length are eligible