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 ...
- 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 ...
- 8,949
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 ...
- 20.4k
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 ...
- 825
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 ...
- 10.8k
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 ...
- 405
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....
- 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.
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.
- 12.1k
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 ...
- 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 ...
- 68.6k
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 ...
- 7,773
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, ...
- 10.8k
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
- 16.3k
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: ...
- 16.9k
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 ...
- 38.3k
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 ...
- 25k
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.
- 795
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 ...
- 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 ...
- 1,375
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 ...
- 25k
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 ...
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 ...
- 989
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 ...
- 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 ...
- 111
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 ...
- 322
2
votes
Accepted
Is dragging the mouse with a button pressed not controversial at all?
Click-and-drag using a held mouse button is generally not considered to be an accessible interaction, because the action is too dexterous for some users. The accepted practice is to provide an ...
- 12.9k
2
votes
User's expected behavior when uploading files before submitting
NOTE: You don't have any visual mocks, so I'm putting in a rough sketch of a fairly common pattern. I'll update my answer as needed.
Oftentimes when a file is successfully uploaded, there's a ...
- 25k
1
vote
Drag and drop reordering with large items
The idea to collapse the dragged item and represent it somehow in a small form while dragging is good. However what about the other large items, possibly adjacent to the dragged item?
A different ...
- 29
1
vote
What's Apple's term for horizontal "swipeable bar"?
In its documentation, Apple seems to refer to these in vague words, as indicators. The bottom bar doesn't seem to have an official label. From Daring Fireball:
Apple seems to be going out of its ...
- 2,814
Only top scored, non community-wiki answers of a minimum length are eligible