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
Question based solution suggestions - Design strategy
This is called Conversational UX. The product asks a few questions to understand what the user is looking for.
For example, you can check and hotel booking app, Initially they ask where and how many. ...
- 196
6
votes
What is the rationale for using a triangular tail on a component?
I think it comes from comics, as a speech bubble (which turns out to be pretty ancient) analogy, as a kind of an affordance. Speech bubbles are commonly used in comics to indicate when a character is ...
- 2,233
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
5
votes
Non linear item quantity selection (1,2,5,10,20,30... items)
Usually, such "size" ( I will explain later why I use size and not quantity ) selections are provided because of the way the products are being packaged. So as a UX pattern you usually have ...
- 4,518
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
Accepted
When to display a modal popup over a card flip on mobile or desktop?
As long as you're clearly stating that the card will flip and there's a clear button to go back to the previous state, I think flipping is marginally better than a modal since the element retains its ...
- 37.3k
4
votes
Accepted
Proper way to align list with colon separated values
You can do either. But test if you can to validate.
A very common (and fairly safe) pattern is a left algned bold Label, and a left aligned value in a regular weight.
You can do right aligned, but ...
- 24.6k
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
Accepted
Displaying caller ID verification data to landline users: what's the best way to show it?
Your solution follows the same trajectory as HTTPS in browsers. Initially, they too had the idea of Extended Validation which would show the trustworthiness of a website:
But between non-EV SSLs also ...
- 1,672
3
votes
How to keep consistency between 2 cards when one of the items are optional?
I understand your concern about layout consistency with respect to usage, but I think before checking for functionality issues you should create a firm base framework to support it. At the moment, at ...
- 18.3k
3
votes
Modal or Non Modal functionality on UX Stack exchange portal - Behaviour Confusion
The short answer is, it's a bug. Since the interaction works according to the principles of a non-modal window, and the design is made according to the modal.
In a nutshell, if we cover the background ...
- 614
3
votes
Accepted
How can i demonstrate that a file has been uploaded from the selected element on a table in a dashboard
Dropbox uses icons to show the sync status of its files:
Available
In progress
- 18.3k
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 ...
- 52
2
votes
Non linear item quantity selection (1,2,5,10,20,30... items)
You should sell two different products then:
Product 1: 5 Lollies Strip, price $10
Product 2: Lolly, price $4
The rest as normal, client inputs quantity as any other product
2
votes
Accepted
Terminology: Press and Hold -or- Hold?
While it ultimately depends on the context and the specific element being referred to, in my opinion, using "Hold" alone may not be sufficient to provide clear instructions. Although it may ...
- 37.3k
2
votes
Keeping the text handle visible at all times when in text editing mode on mobile devices, any accessibility issues?
I think that this is mainly an issue with typed text vs readable text. For example, on my desktop, I can click the text within your question and nothing happens because I can't edit that text. I would ...
- 1,136
2
votes
Keeping the text handle visible at all times when in text editing mode on mobile devices, any accessibility issues?
Ok, there's quite a lot to unpack here.
First thigs first, this solution will not pass any kind of WCAG test, its transparency kills the main reason it is there: to be easily discoverable.
Offset ...
1
vote
Terminology: Press and Hold -or- Hold?
Instructions should be clear on what action a customer is exactly supported to take.
For desktop: Click and Hold or Press and Hold the for 3 seconds
For mobile users: Tap and Hold the for 3 seconds
- 854
1
vote
How do I explicity tell the user that wi-fi is required for a feature to work?
Greying out options is usually the best way to show that an item is unavailable, with the reason why shown right next to it.
- 1,672
1
vote
When should users add a name to newly created items? Or is automatic naming sufficient?
You can guide the user to perform required steps, including naming the new element. Otherwise, you end up with things like Adobe or Google apps (between many others) where you have "Untitled Doc ...
- 37.3k
1
vote
Accepted
How to indicate disabled list items in a list with alternating backgrounds?
Let's assume that alternating row backgrounds (also known as zebra striping) is what you need to make this table more usable and readable. There's not much you can do except keeping it consistent ...
- 11.2k
1
vote
How to indicate disabled list items in a list with alternating backgrounds?
The problem with this is that you have to keep the lines, otherwise you'd just get rid of them and the CSS would automatically adapt to the new lines.
With that in mind, here's what I'd try: Instead ...
- 37.3k
1
vote
What is the minimum size for a profile picture when used somewhere other than the profile page?
From my experience, it really depends on this context questions:
does it need to be interactive (touchable, clickable)?
does the visibility of the face photo is important in that context?
do you have ...
- 546
1
vote
Accepted
Calendar displaying 2 months but user has to select only 1 day
It depends. They way you've designed it does not appear confusing at all; it is very clear which date is selected, and because of the visual continuity between the two months, it looks clear that this ...
- 86
1
vote
Calendar displaying 2 months but user has to select only 1 day
Actually it is a good user experience, it will show 30 to 60 days on one screen, if it was a one month calendar, 60% of time users would have to navigate to next month to choose the date. In case of ...
- 1,994
1
vote
Calendar displaying 2 months but user has to select only 1 day
My first instinct is that it wouldn't be confusing to users, however there must be a reason OpenTable and Yelp, arguably the two most popular restaurant reservation platforms, both have single-month ...
- 553
1
vote
Calendar displaying 2 months but user has to select only 1 day
Calendars with the option to select a range of days usually have the days free of frames to emphasize the user can define a linear sequence (click and drag). By breaking down this very clean layout, ...
- 18.3k
1
vote
Accepted
How to keep consistency between 2 cards when one of the items are optional?
I'd prefer always right-aligning the category (under the yellow disk as in the task above), also if no time is specified/selected:
Personally, for the sake of "look (exactly) there (always) and ...
- 569
Only top scored, non community-wiki answers of a minimum length are eligible