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.3k
25
votes
Accepted
Why is the drag area usually limited to the "title bar"?
I would say that this often leads to an unwanted drag and drop action. What if this window for example has a small scrollbar, you want to scroll to the bottom of the page and you accidentally miss the ...
- 2,582
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.6k
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
13
votes
What is a good visual cue for drag and drop? (for reordering a list of items)
Came across this post today and wanted to provide a response based on some developments in the past couple of years (since 2012).
Google offers a good solution signaling its Gmail users of sortable ...
- 383
13
votes
Why is the drag area usually limited to the "title bar"?
The title bar isn't always the only spot to that can be used to drag the window, (these days some windows can be dragged by parts of their background, but it's rare) but it's the oldest and most ...
- 11.5k
12
votes
Why is the drag area usually limited to the "title bar"?
This is actually not always true. In some cases the default behavior of most apps would be to allow to drag windows by empty space. An example is KDE. See the screenshot:
KDE's default Oxygen widget ...
- 238
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
10
votes
Why is the drag area usually limited to the "title bar"?
The Windows OS provides the (optional) title bar and control box, as well as a mechanism for OS users to organize their application windows (re-positioning, minimizing, maximizing, closing).
From ...
- 12.4k
8
votes
The Hamburger Icon - menu or drag affordance?
I'd observe that the kernel of the issue is that simply these are two semantically different icons, namely
Grab handle is a symbol that replicates has friction area for a thumb or finger
Hamburger ...
- 5,269
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 usability benefit of "drag files/images here"?
The overall usefulness here all depends on what files you want to upload, how your workflow is and how you organize them.
Scenario 1 : You know where your stuff is
You know exactly which files you ...
- 226
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.7k
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.3k
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,823
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 ...
- 13.8k
5
votes
What is the usability benefit of "drag files/images here"?
I'm going to be the wet blanket and suggest that there may not be a big benefit.
The fact that these are being used more often is more about changes in technology. We can do it this way now, so let's ...
- 41.6k
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
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 ...
- 739
4
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 ...
- 974
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,481
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 ...
- 365
3
votes
Accepted
How to handle map borders in 2D-map with drag and zoom out?
The obvious answer is to render the elephants standing on the turtle's back, but there are other options.
Having the map snap back to fit to the edge on zoom out could be confusing, as the user will ...
- 12.4k
3
votes
What is the usability benefit of "drag files/images here"?
Drag drop can be useful in various cases e.g.
If folder with file is already open - saves you time of browsing to the correct location from the open file dialog.
You can drag multiple files in one go....
- 7,283
Only top scored, non community-wiki answers of a minimum length are eligible