Skip to main content
12 votes

How to show the user has "grabbed" an element?

Add a drop shadow to the element so it appears pinned to the finger. Left: Material Design Components > Lists > Behavior Right: Apple Human Interface Guidelines > iOS > User Interaction > Drag and ...
grg's user avatar
  • 543
6 votes
Accepted

Are there any drag and drop UI development techniques that are WCAG compliant?

The answer to this question is going to be difficult if I cannot see your design. Firstly, WCAG explicitly states in 2.1 "Make all functionality available from a keyboard". This will obviously ...
SteveD's user avatar
  • 8,934
6 votes

Which one is better for drag sign

Before reading your question, I saw an image with a menu and a second image with two lines. I think that not just the number of lines influences, but also the location. But I still thinking the ...
Danielillo's user avatar
  • 19.2k
5 votes

Are there any drag and drop UI development techniques that are WCAG compliant?

How to make drag-and-drop interaction accessible depends on what that interaction tries to achieve. For example, if it is about dragging items from one panel in the screen to another (like moving ...
Tsundoku's user avatar
  • 778
4 votes
Accepted

UX for linking elements together

The proposed solution with a link symbol in your diagram may give a false impression that these items are chained together sequentially. Since a link is usually a 1 to 1 connection. To de-emphasize ...
nightning's user avatar
  • 8,571
4 votes
Accepted

Drag image here, drop image here, or drag and drop image here?

Use the least amount of wording while still giving clear instructions. Drag image here or Select Image Maximum filesize: 2mb, allowed files: .jpeg, .png, .gif. Its important to also give the user ...
Pectoralis Major's user avatar
4 votes
Accepted

What is correct user expectation regarding drag and move?

User expectation for drag and move can depend on the existing mental models and the kind of affordance provided in the UI. The correctness depends on how well the application interface solves the Use ...
Anvesh Dunna's user avatar
3 votes
Accepted

Accessibility for a Draggable, Droppable and Sortable component

The W3.org site gives an accessible drag-and-drop example that offers the following key controls: Use the Tab to move to the item you want to move. Select the item you want to move with the Spacebar....
Roux Martin's user avatar
  • 14.2k
3 votes

What is the best icon to show that something can be dragged and reordered?

In order to make it simpler you can use dotted vertical lines as in the Gmail example.
visualfeaster's user avatar
3 votes
Accepted

RWD - Drag to background

When the item is being dragged, the panel could hide itself or move out of the way. Check out these demos from Codrops for inspiration. (Your interaction would be the opposite of most of these, but ...
Nate Green's user avatar
  • 2,483
3 votes

Communicate that an object in the toolbar cannot be added to the document a second time

See each button as a stack of buttons of the same kind. When you drag an instance from the stack, the next one appears. But when it is the last one there is no next button underneath.
jazZRo's user avatar
  • 11.9k
3 votes

Should user simply be able to upload a PDF?

Sounds paradoxical, having the user fill out a form might ultimately be more user-friendly. Why? If you want to process a PDF that has been generated by the user, you can never be sure that it will ...
Johannes's user avatar
  • 176
3 votes

How do you make it obvious that the entire page is a drop zone?

You're essentially dealing with the same problem that email applications have had for years. Gmail does a good job in handling this as soon as you try to drag an attachment over a new email. A ...
JohnGB's user avatar
  • 68.4k
2 votes
Accepted

How important is visually indicating that ListBox items are drag-dropable in an application where not every List has this functionality?

I think it is very important to distinguish draggable items because not all items have the drag functionality. I agree with your suggestion to at least show some indication that items are draggable. ...
adriennetacke's user avatar
2 votes

Is it okay to change the default value of the dropdown based on the last selected action and use it as default for the next list?

I would default to the most frequent action. In the example shown, I wonder if changing a password is the most frequent action taken. Just because I changed my password yesterday doesn't mean I want ...
Eric Stoltz's user avatar
  • 1,754
2 votes

Visual feedback for restricting drag and drop in a list

When the user selects an item to drag, change the color of all valid positions to bright green, and invalid to dark red. Additionally when the item is on top of an invalid position, you may display ...
DesignerAnalyst's user avatar
2 votes
Accepted

Can I replace drag & drop reorder with "Click to reorder"

Even tho you don't prefer, drag and drop is quite standard and widely used in apps. The most common example itunes on your phone or just about any music or video player that includes playlists, ...
Blue Ocean's user avatar
  • 10.7k
2 votes

Visual feedback for restricting drag and drop in a list

Create space for the element where user can drop: Use red border with blocked icon where user can't drop
Dipak's user avatar
  • 16.2k
2 votes

Drag and drop in one axis (reorder) - which cursor?

I would use the move cursor. The cursor should tell the user how can he interact with the element. Move cursor: indicates that the element can be moved around while its siblings stay. Grab cursor: ...
Alvaro's user avatar
  • 16.8k
2 votes

Alternatives to drag and drop lists

The approach by Alvaro is correct, so I'd suggest that with only one difference: instead of checkboxes, use radio buttons since these are unique variables for each student. But more important: no ...
Devin's user avatar
  • 38.1k
2 votes

Best practice for draggable, sortable with paging records

Try allowing multiselection, drag and drop plus a contextual menu for repositioning 1 or more items. Allow Shift + select for multiple items (or single click for one item). Then, the Right click or ...
Mike M's user avatar
  • 24.7k
2 votes

Drag and drop reordering with large items

as we wouldn't be able to see the other items This wouldn't be a good UX. Give your users the big picture view. Use symbolic representation of the items: item titles, item pictures.
mentallurg's user avatar
2 votes

Which one is better for drag sign

Hamburger, used for opening/closing a site's navigational structure springs to mind first. They are identical to your example, usually seen with three lines, but now, with minimalism as important as ...
David's user avatar
  • 288
2 votes
Accepted

Editor functionality

I would say yes its ok to add them (even preferable to keep user confidence high) but they should be visually separated to keep the functionality vs business intent obvious. These type of links are ...
Bryce Howitson's user avatar
2 votes

What is the technical name for the "Tap to translate" button from GoogleTranslate app?

Material refers to this as a Floating Action Button (FAB). The transition to a menu shown in your example is considered one of the potential uses Types of transitions Upon press on Android, the FAB ...
Mike M's user avatar
  • 24.7k
2 votes
Accepted

Trello-like UI with extra actions

Perhaps you could go for an in context validation to fill up the fields. This can be achieved by modifying the card slightly as it sits in the new state. For example, you could expand the card and ...
Sooraj Ramachandran's user avatar
2 votes
Accepted

How to make this interface work when there are too many objects?

If the classes carry certain attributes, you could filter or sort a more extensive class list by attributes. Filtering reduces the information load and helps keep relevant columns in frame without ...
Andreas Mehne's user avatar
2 votes
Accepted

Horizontal slides editor - How improve its navigation?

It depends... Can user identify slides if they are smaller? Is user going to work on this slides here, or is it just to edit connections? Auto zoom out (auto fit? correct me if there is aright name ...
Ada's user avatar
  • 552
2 votes

What feedback to give to users about why drag & drop does not work here?

Maybe draw the documents different, if a filter is set. With filter, it looks like a list. It is uncommon to be able to drag and drop in a regular list. Without a filter, draw them like objects (with ...
Dany Bittel's user avatar
2 votes

Communicate that an object in the toolbar cannot be added to the document a second time

I think the technique in your Picture A, disabling the button and showing a tooltip when you can place no more, looks fine. It is very similar to how the video game Super Mario Maker 2 handles this ...
Rory O'Kane's user avatar

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