Hot answers tagged drag-n-drop
19
37signals' Basecamp does a great job with this:
When hovering over an item, controls appear to the left of the item. One of the controls is an up/down arrow. When hovering over that control, the mouse cursor changes into a move cursor. Holding down the mouse button moves the position of the grabbed item on the vertical axis corresponding with the position ...
15
I saw a presentation by Sean Kane from Netflix a few years ago, in which he described how the DVD queue works. You should study it if you can (if you have an account or know someone who does).
A couple of points to note:
He said the default move cursor didn't test very well, so they switched to a grab cursor, as suggested by GoodEnough.
The drag-and-drop ...
13
There's no reason not to implement multiple solutions for best results.
Anna Rouben's animation intro is a great idea. Though I wouldn't use it by itself.
I would combine it with a 4-way arrow icon (used commonly for moving objects) with possibly a tooltip.
For uncommon practices such as dragging input fields, I would make this as obvious as possible.
...
9
Not really, I think.
The main irritating thing is that you can't drag an item from the front page (the link you gave). If you try to drag the image or the name of the set there, it doesn't work. And, that is a bit strange as the shopping cart is visible, and explaining you to drag items into it. It remains unclear what 'an item' is.
You have to get to the ...
9
A lot depends on how many items and groups you expect there to be, as well as how many you expect someone to be actively working with at a time.
If working with large numbers of groups and items, the first option would become unusable. Although, I would tend away from it even if the numbers were small.
The second option may not look fancy, but is both ...
9
It's more of a question weather you need to see the entire mapping or not.
If you don't have to see the whole mapping at once there is another possibility.
download bmml source – Wireframes created with Balsamiq Mockups
If the entire mapping information is essential then you best way is to use a matrix that will allow people to view the entire ...
8
Dragging and dropping is quite hard to communicate.
You can provide a 'grabbing hand' or 'four way arrow' cursor on hover (but this only works if you can get users to hover in the first place, and besides, my experience from user tests is that cursors don't make much impact anyway)
Give draggable items a hover state, or make them 'come off' the page by ...
7
If you're confident in the quality of the touch-screen, your design is a good one.
Some points to note:
Some touch panels, particularly bigger ones, have quite a lot of noise and can have "dead spots" where the touch is not (as easily) registered. You may want to delay snapping back the item once you notice the touch event finishing if you can.
It's not ...
7
Your primary consideration should be whether the UI behaves the way the user expects. If it's intuitive, drag and drop away. You can use hallway testing to check if your UI is intuitive. In that situation, dragging and dropping appears to be the most sensible as well as the easiest course of action, so there are few (if any) reasons you shouldn't use drag ...
7
A common approach is to turn the cursor into a "can't drop" cursor when you're over everything else.
The logic would be:
Start Drag.
Turn cursor into "can't drop".
While dragging check if over something that can accept the drop then turn cursor into "can drop".
Drop & reset cursor.
NOTE: I'm not necessarily advocating this, but it does show the user ...
6
A box with a dotted line could be a nice indication that files can be dragged to upload. The "drag files here" as you mentioned is probably very useful as well. Box.net does something like that for bulk upload and you may want to have a look at the jquery plugin pluload: http://www.plupload.com/example_queuewidget.php
6
If you are talking about thousands of users in a hierarchical structure, then it's quite likely that drag and drop is not the best interface. Drag and drop works best when most of your choices can fit on the screen at one time.
Specifically, if your interaction goes like this, drag and drop is working well: Drag, drop, drag, drop, drag, drop, drag, drop.
...
6
Why not combine the two? Use the initial display of the second, and allow users to select checkboxes. (Selecting checkboxes is far faster and easier than dragging and dropping, which makes this superior to Option 1.) So that the user can easily tell what items are in a given group by glancing down the column, have each checkbox turn into a button as soon ...
5
It's bad UX to not have drag and drop in an iPad app. Tablets are all about direct manipulation. The D&D is so native to the apps that you don't even notice it when you say that there's no D&D in iPad apps - basically most of your interaction with the device is pure D&D. For most of the actions that you'll provide, users will expect there to be a ...
5
I suggest you use the little gripping hand (open when hovering, closed while dragging). Have some sort of gripping icon (a handle) that looks like something that can be grabbed (in Gmail it's a pair of dot columns (4 dots per column).
I would also suggest that you add a little animation showing the behavior to new users (or existing users if it's a new ...
5
You can slightly highlight the drop-locations as soon as the user is dragging an item. This way you can draw the attention to the drop-locations.
The prerequisite for this is of course that you show what's draggable in the first place. There this questions with answer for that.
4
Indicate possible drop targets
Show a live preview of the results
Show what's being dragged in real-time
If you can't drop something somewhere, explain why to the users in a popup near the cursor:
Keep your drop targets big! Drag and drop is already an egregious violation of Fritz's law; no need to make it worse.
4
First, I noticed the "shopping cart" area on the right and the advice: "Drag item here to shop".
I tried dragging one of the large, inviting images from the home page right into the cart, but that didn't work.
I then noticed that each image actually represented different sets coming at different prices. I tried dragging the set link on the bar. However, ...
4
An indicator of some failure adjacent or at the point where the object failed would be a good start, and then you might lean on whatever position you have reserved for messaging, either in a temporary message flash wherever is typical of the web app (top or middle), or corners (growl style).
A slight indication at the location of the error can be as simple ...
4
Drag and drop can be a very useful method for managing groups of users/items. The main advantage that I always find when using an application that has a drag and drop UI is that I actually feel like I am managing the groups, and not just telling something to move them for me.
I can't see anything wrong with using a drag and drop UI in this case. The only ...
4
I think there are several reasons for it.
First and foremost, it is tricky to do if you already have scrolling implemented. It is possible to do, but it would require solutions like lists where you can scroll in one direction (say, vertical), and then use the other direction to 'detach' the item from the list, after which you can drag it in any direction. ...
4
I think that both paradigms make sense but not when presented at once.
As a follow-up question: Do you need to accomplish this activity on a single page? (e.g., is it part of a form?)
If this task is part of an item management experience that is core to the product I would reccomend a two page approach as is used in iTunes for playlist and Google+ for ...
4
Drag and drop is an expert shortcut
I commend you on including drag and drop for this. It’s an underused design element. The problem with drag and drop is it’s discoverabilty, as you’ve surmised. It’s also physically awkward for some users, and had accessibility challenges. You are, of course, aware of these issues, which is why you want a menu item to add ...
3
From you description this is what you got today:
download bmml source – Wireframes created with Balsamiq Mockups
This is perfect to drag and drop, and it has a nice direct feeling of control to the user. A 150 products is hard to organize in one category, and I think you need to categorize the products. Having the categories as filters, the ...
3
It's like one of those fancy UIs we see in movies that we don't in real life, not because they're hard to implement, but because they're hard to use.
For someone with difficulty in motor skills, this can be quite hard to use. Dragging and dropping using a trackpad isn't often as responsive as doing it with a mouse. (Some trackpads just happen not to be very ...
3
Yes
I don't see a huge problem with it. As well as drag-and-drop, the icon set pages (that can be reached by clicking on them) have add to cart buttons. I also like the fact that, unlike many other online stores, you don't have to visit another page to see the contents of your shopping cart.
However, one big problem is that it doesn't work without ...
3
Sometimes the drop target is within a set of linearly arranged objects. After the item is dropped, objects following the drop target will move to make space for the new object. In that case, the insertion point is typically indicated by a thin line between the two objects that will separate to make space.
For example, in almost any GUI that uses a mouse, ...
3
The way you have it right now is exactly how iBooks behaves on the iPad.
An additional solution that I might recommend is to place more emphasis on where the book will be after drop, so provide the user with an idea of where the book will end up when they drop. See the below for an idea:
download bmml source – Wireframes created with Balsamiq ...
3
The key problem here is that the desire to conserve horizontal space clashes with our perception of how the language is written.
It's a relatively common pattern to collapse columns & panes into thin "toolbars" on the side of the screen, as seen in Outlook 2007:
Thus, the most obvious solution for the problem with Kanban board would be to minimize ...
3
I would go with option E - most people read from left to right. They examine things from the left and then slowly move to the right, if you have played games in the heydays of 8-bit you would see that most games have you start on the left and moving towards the right.
So it is easier to notice you could drag the items if the icon is on the left. However, I ...
Only top voted, non community-wiki answers of a minimum length are eligible
