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 ...
user avatar
  • 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, ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 (...
user avatar
  • 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'...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
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 ...
user avatar
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 ...
user avatar
  • 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....
user avatar
  • 7,283

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