151
votes
Accepted
What do the 3 close horizontal bars (not hamburger menu) represent and what is the origin of the design?
It is a skeumorphic depiction of notching, indicating that the area can be pulled/dragged. Similar to the notching on the end of the gun slide (providing extra grip to the fingers).
This appeared as ...
- 1,645
106
votes
What do the 3 close horizontal bars (not hamburger menu) represent and what is the origin of the design?
While Bowen's gun example is decent, an even better example would be the back of your TV remote control (or many other devices that store batteries under a slide cover):
The notching on the pistol, ...
- 984
28
votes
Accepted
When to use grab vs move cursor?
Move objects to rearrange them, grab objects to perform operations on them
The move cursor should be used when objects are just being rearranged (translated) without any alteration to their properties ...
- 40.7k
24
votes
Accepted
Is 'click to add' or 'drag and drop to add' preferred by the user?
As I've learnt – the more options you provide for the same actions – the better the application is. So the advice would be to implement both drag-n-drop and click-to-add, and you don’t have to worry ...
- 54.7k
22
votes
What do the 3 close horizontal bars (not hamburger menu) represent and what is the origin of the design?
To add to the existing excellent answers.
This type of design feature is known as an affordance (see https://en.wikipedia.org/wiki/Affordance).
Notched or textured surfaces are used in real life ...
- 321
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 ...
- 541
8
votes
What do the 3 close horizontal bars (not hamburger menu) represent and what is the origin of the design?
Other answers have adequately addressed the skeuomorphic inspiration for this convention, but since the question also asked about history, let's look at that a bit.
I'd nominate Macintosh System 7.0 (...
- 181
8
votes
Is 'click to add' or 'drag and drop to add' preferred by the user?
Do users prefer to drag and drop or click to add?
One thing to consider is that drag-and-drop can be difficult with a laptop touchpad. If click-to-add can be used without an additional drag step, you'...
- 323
7
votes
When to use grab vs move cursor?
In many drawing programs, grab is used to move the drawing surface (canvas) around, i.e., to show a different part of it. This is called panning.
Move is used to move the selected object around ...
- 348
6
votes
Accepted
What is the best icon to show that something can be dragged and reordered?
I typically use a grippy looking dotted area like this, that's also roughly the size/shape of a fingertip.
...or 3 bars indicating a similarly grippable area:
The idea being to make it look like the ...
- 70.8k
6
votes
Accepted
Drag affordance for modal calculator within a modal window
A lot of the challenge you're dealing with stems from the complexity of communicating and managing the relationship between the two windows (form and calculator).
Ultimately, it looks like the ...
- 40.7k
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,874
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 ...
- 16.5k
5
votes
Is 'click to add' or 'drag and drop to add' preferred by the user?
It depends, click to add and drag and drop will have the same outcomes with slightly different processes.
If I click to add, then the expectation is that I've chosen something specific. The pro of ...
5
votes
What are the most common modifier keys for dragging objects with a mouse?
Here's a list of some common ones (including the one you listed)
Ctrl + Drag — Copy file
Shift + Drag — Move file ("in situations where copy is the default—like when you're dragging a file between ...
- 994
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 ...
- 749
4
votes
Accepted
User experience issue and technical limitation in drag and drop functionality
I would abandon the drag-and-drop interaction for assigning people to multiple tickets. The problem is that it will be difficult for users to remember the details of multiple tickets while performing ...
- 306
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 ...
- 8,521
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 ...
- 385
3
votes
Accepted
Make click, drag and drop and link between both tables more obvious to user
Immediately looking at your design there are no visual clues on draggable elements. The first thing I would do is add some sort of visual aid to these elements to guide the user
You could even take ...
- 393
3
votes
Best place on screen to put drag and drop
Items on the Left / Groups on the Right
Users scan from left to right so interactions should follow suit. Especially in your case where the target groups take up most of the screen putting the list ...
- 15.8k
3
votes
When to use grab vs move cursor?
From my experience, the grab and grabbing cursor behaviour works when you need an explicit hover and click & hold behaviour for movable UI elements, which makes sense for desktop applications ...
- 25.8k
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
Accepted
Auto-collapse subitems when using drag and drop for large hierarchical lists?
The drag-and-drop method certainly has negative aspects, particularly when the list is long enough to overflow the page, but it may still be your best option.
I don’t think it’s beneficial to ...
- 2,581
3
votes
What are the most common modifier keys for dragging objects with a mouse?
There are not strong standards of drag&drop use since it's not that popular and widely used.
Add to that fact that modifiers are basically hidden, so users will find them just by mistake or ...
- 10.4k
3
votes
How to handle drag-and-drop when the user can't see the target
Would something like permanent drag targets of "Next week" or "Previous week" in the footer (or header) of your scrolling calendar area work?
I'm imagining a user starts dragging, doesn't see their ...
- 31
3
votes
How to make user realise the Drag Drop functionality
For a desktop application, I would change the mouse pointer to the move icon (CSS is cursor: move), and when the item has been grabbed for dragging, change its background-color to indicate that it has ...
- 2,092
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 ...
- 2,463
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....
- 14k
Only top scored, non community-wiki answers of a minimum length are eligible