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 ...
slugolicious's user avatar
  • 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. ...
Saravanan Kasi's user avatar
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 ...
exp's user avatar
  • 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 ...
Chris's user avatar
  • 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 ...
Devin's user avatar
  • 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 ...
Chris's user avatar
  • 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 ...
Thomas Weller's user avatar
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 ...
Devin's user avatar
  • 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 ...
Mike M's user avatar
  • 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 ...
Alex Marcevoi's user avatar
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 ...
Leo Wattenberg's user avatar
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 ...
Danielillo's user avatar
  • 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 ...
AndriiD's user avatar
  • 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
Danielillo's user avatar
  • 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 ...
Sarath raj G's user avatar
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
Carlos Alloatti's user avatar
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 ...
Devin's user avatar
  • 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 ...
Gene Lee's user avatar
  • 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 ...
Andrey Zhilin's user avatar
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
Fasih's user avatar
  • 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.
Leo Wattenberg's user avatar
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 ...
Devin's user avatar
  • 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 ...
jazZRo's user avatar
  • 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 ...
Devin's user avatar
  • 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 ...
Geoffrey C.'s user avatar
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 ...
sandstack's user avatar
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 ...
Garik's user avatar
  • 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 ...
Chloe's user avatar
  • 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, ...
Danielillo's user avatar
  • 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 ...
Gerold Broser's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible