150
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 early as Windows 98 (see the bottom right corner of window).
Edit: This is not unique to guns, but more of an industrial design technique. See here the battery ...
105
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, the battery cover, and plenty of other everyday items are primarily to provide extra friction/grip for your fingers, while also pointing out the best place to ...
28
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 other than position. For example:
Rearranging shapes on a canvas
Rearranging items in a list
The grab cursor is usually used for drag and drop operations ...
25
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 scrollbar? You would drag the window down and you might need to reverse this action.
Why is it uncommon that windows can be moved by clicking anyway in the ...
24
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 about which one users use.
Even better, you have the option to track which one is most popular in your specific case, which may differ from an existing more ...
22
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 objects to suggest they can be gripped or pushed by a finger, and this has been adopted as a skeuomorphism in computer UIs.
Here's a screen-shot of Java Swing's "...
21
If you want to drag a sign perhaps you can add another sort of indication that the object moves, i.e.
However I do think it might feel unnatural to the user to drag a sign around. Clicking on object and make the sign move on to the new object would be a more natural behaviour for the user.
Users always assume that the objects are the ones that are ...
16
For issues like this I find it best to look at how other interfaces handle it. That way part of the user training has already been done — you don't need to reinvent the wheel.
In this instance the first thing that came to mind is Pegman for Google Maps Streetview.
Google handle this issue by placing the draggable indicator in a separate toolbar 'off ...
14
There are a number of options that can ease this, as the onus should not be on the user to feel they have to go and drop it in its original position - assuming they can even remember where that might have been.
Undo/Redo
One is to provide an undo redo capability. This puts users much more at ease in that they know even if they do drop something somewhere ...
13
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 elements by using two rows of stacked dots on hover (desktop)
13
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 established and common convention. It originated in the early WIMP UIs, the Smalltalk systems from the 70s and 80s.
If you study the way the above windows were ...
12
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 style has window decoration visually merged with window contents. Thus, to make feel match look, the theme also by default allows to drag windows from all empty ...
12
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 Drop
Apple's HIG specifically mentions the ‘rising’ action:
Touching and holding selected content makes it appear to rise and adhere to the user's finger.
10
You could try to expand responsive zones of small draggable areas. Moving close toward those zones is clear indicator of user intentions. It brings smart behavior to your app and provide better usability, as target is increased and moving distance is decreased (Fitts's law in action).
To indicate small zones more clearly, you could also use more brighter ...
10
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 the perspective of the Windows OS, the title bar is the user's API for these operations. Everything else in the window is "content" that is under the control of ...
9
The SELECTED object looks like tooltip or label. I think a pointer should be more like an object, as it used as a control. I think pointer could be used without excessive SELECTED notion. Still you could use tooltip.
To show the interaction abilities ("liveness") of the pointer you could use unobtrusive animation with rather long "steady" state, see image ...
8
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 Menu is a symbol that represents a list of menu items
these two icons have accidentally fallen upon the same symbol. The fact that they look the same is ...
8
Even if you convey the draggability of the selection, users will still likely be confused and think that it drags the item selected rather than the selection. For example, they will think it drags the plate to the couch instead of it selecting the couch.
I know you currently have another tap function, but unless selection of items is extremely low priority ...
8
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 (1991, but I vaguely recall the UI style being widely previewed before then) as the originator of this convention... you see the ridging in active scroll bar ...
8
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'll likely make some laptop users happier. This also applies for touchscreens, where dragging might be confused with an attempt at scrolling. Modern touch-...
7
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 within the canvas.
6
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 want to upload, how they are named and in what folder they are located.
Navigating to them in an explorer window and drag/dropping them will need ...
6
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 surface of the button itself stippled or embossed - and so making it more connected to the whole button rather than being a separate function or action.
Here'...
6
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 calculator is there to assist with the form, so you may want to consider removing the "two windows" part of the problem altogether. Just have the calculator slide ...
6
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 present a number of challenges when it comes to mouse drag and drop.
You can add ARIA attributes to your HTML to add keyboard interaction for drag and drop, but this ...
6
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 three lines looks like a hamburger menu.
The standard for dragging is the dotted line, and in this case the number of lines or direction is not relevant.
5
What you're implementing there is an unnecessarily unconventional user interface paradigm.
Just do it like nearly every well designed GUI application has since the 1984 Macintosh.
To select stuff, have the user pick a selection tool from a toolbar (if necessary: perhaps it is not: simple programs don't need toolbars. If every action needs something to be ...
5
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 do it this way.
Yes, drag-and-drop is not a new concept. It's been part of our systems GUIs for 4 decades. But note that the process of uploading a file via ...
5
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 this approach is going to be that specificity: "I want this put into that bucket." When that is the logical outcome of my effort, a click to add makes perfect ...
5
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 files in a file manager from directory to another), I would follow the approach from the DHTML Style Guide Working Group. The script in your web application will ...
Only top voted, non community-wiki answers of a minimum length are eligible