Skip to main content
4 votes
Accepted

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
4 votes
Accepted

How to Communicate a Delay in Drag-Start Interaction?

One option would be to use something like a progress indicator, to denote that something is going to happen if the user holds it. For example, for the first 100-200ms, there could be no visualisation ...
exp's user avatar
  • 2,608
3 votes
Accepted

Best way to offer a choice between 33+ items

It would be helpful to think through how your users would expect to find the information they are looking for. On top of that, condensing the options in some way would make it feel less unwieldy. One ...
ToddBFisher's user avatar
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 ...
Sacha Vijay's user avatar
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
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's user avatar
  • 1,324
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

How to Communicate a Delay in Drag-Start Interaction?

On desktop, change the cursor from pointer to move after a delay: Edit after the comment For mobiles, there are two options: Add an icon that indicates draggable Show or hint the area where it can ...
Danielillo's user avatar
  • 19.2k
2 votes

How can I emphasise the fact that these tiles are sequential?

A grid is inherently 2-dimensional. Communicating a preferred direction in a grid is difficult, communicating an explicit and repeating timeline even more so. I'd avoid grids for this purpose ...
Leo Wattenberg's user avatar
1 vote
Accepted

Complex Setup Wizard with many components

Limited Space: This shouldn't be a problem so long as your video doesn't have weird aspect ratios. But if the videos have interesting aspect ratios, then the "Click to view in fullscreen" ...
Kitanga Nday's user avatar
  • 1,762
1 vote

Why do virtual calculator UIs (especially desktop ones) have the numbers laid out when users typically use the keyboard instead

Not all users are the same or have the same possibilities for interaction Years ago I was a teacher in a two-month QuarkXPress course. An extremely difficult layout and text editing application for ...
Danielillo's user avatar
  • 19.2k
1 vote

Should a sidebar menu have a sliding animation?

The problem is not animation yes or no, the problem is the type of animation chosen depending on the content. I would recommend studying basic transition types and choosing the one that least disturbs ...
Danielillo's user avatar
  • 19.2k
1 vote

In the App I designed, there is a carousel component that can be swiped horizontally, but facing an accessibility issue, how can I solve it?

Please don't neglect accessibility, it's much more important that you'd think. There's this whole section about carousels on APG that, of course, suggests you have to add buttons for both "next&...
exp's user avatar
  • 2,608
1 vote

In the App I designed, there is a carousel component that can be swiped horizontally, but facing an accessibility issue, how can I solve it?

If it's needed for accessibility, it's better to implement either the auto scrolling animation or pointers, indicating that the carousel is scrollable. If you've decided to go with the pointers, I'd ...
fakermaker's user avatar
1 vote

What's a good metaphor for a simple state machine?

Summarizing: 3 states Infinite clockwise Maximum energy = Level 2 Charge level + = 1 → 3 After charge + The energy is awarded The machine is "depleted"
Danielillo's user avatar
  • 19.2k
1 vote

Multiple action buttons each with explanations

There are lots of things to take into consideration here, but the most important thing is that you don't leave the explanation until the user clicks on the button, because they expect this to be the ...
Michael Lai's user avatar
  • 27.3k
1 vote
Accepted

Should this be a link or a secondary button?

Here's how I approach questions like this (a quick thought experiment): Imagine digital screens don't exist, and you have to design a paper form instead. In this case, page hierarchy would probably ...
Alex Marcevoi's user avatar
1 vote

What type of design pattern to use to toggle list actions?

You can pack activities into a kebab menu You can use clickable chips to place them in a particular list. And delete using either a cross or a button
Vitaliy R's user avatar
1 vote

How to visually and interactively represent deeply nested physical objects?

Looking at these, I can't even figure out if it's a top view or a front view of the shelf so I would incline toward making it match the real aspect of the shelves rather than focusing on the nesting ...
Chris's user avatar
  • 4,558
1 vote

Best way to show accepted item that applies to multiple inputs?

It is a bit hard to determine which variation is better because it really comes down to how much data is likely to be shown to the users. In variation one, I imagine the layout becomes a bit tricky ...
Michael Lai's user avatar
  • 27.3k
1 vote

Direct voice interactions examples in use as an alternative to voice assistants

As for mainstream products that use them, YouTube has voice search on all devices, Google Search has it on mobile devices as well as embedded in Chrome's New Tab. The game One Hand Clapping uses voice ...
Leo Wattenberg's user avatar
1 vote

Combining single- and multi- select drop-down in one form. How to dismiss the drop-down?

One potential way to have a single button to confirm the selection for both single and multiple selection dropdowns is to make "All" an option in the multiple selection dropdown. You can ...
Michael Lai's user avatar
  • 27.3k
1 vote

Nice DB GUI for Lots of (ideally rich formatted) Text

There are now many software applications that help people manage and document processes and workflows based on the industry standard Business Process Model and Notation (BPMN). In fact, I remember the ...
Michael Lai's user avatar
  • 27.3k
1 vote

Entering a Distance

Tapping in the input, displaying the numeric keypad (the critical part), would make the yardage input the smoothest manual option. OCR scanning of a printed card would be another cool option... but ...
Chris Griffith's user avatar
1 vote

Best UX for Tree Input

A great way to reduce the amount of dead space when creating a tree is to use the tree itself, navigating it on the fly rather than trying to build it in an expanded state on a huge canvass. This is ...
Vitaly Mijiritsky's user avatar
1 vote

Stepper - max. item count

It depends on What you are optimising for I assume you are trying to optimise for the following: Reduce overwhelming number of options in a long form (business guy's point I assume) Give flexibility ...
Kish's user avatar
  • 2,607
1 vote

Buttons with icon. Possible problems

It depends. Without knowing more details and without testing, your client is right by default. You don't need icons for buttons, but you do need labels. However, as you say, it's true that icons can ...
Devin's user avatar
  • 38.1k
1 vote

Looking for feedback for which one will be a better navigation?

I would recommend to go with option 2 but to avoid clutter content as you mentioned you can add Overview page. So when the user clicks on the product the Overvie page will be selected following the ...
Niraj Shakya's user avatar
1 vote

Looking for feedback for which one will be a better navigation?

I've seen both implementations in portals. Option 1 works best for an occasional visitor, as it has less content on the page; Option 2 is optimal for someone who uses this portal daily as you have ...
Alex Marcevoi's user avatar
1 vote

A UX question about spatial navigation

Answer is version 2. Enabled state buttons denote a possible action, while disabled buttons communicate that the element is disabled, so nothing will happen. Therefore, since you're in Place B, an ...
Devin's user avatar
  • 38.1k

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