Tag Info

Hot answers tagged

21

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 ...


20

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 ...


18

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 ...


17

Common patterns to indicate draggability: Drag handles This goes towards affordance. Users need to be able to recognize something can be dragged just by looking at it. A "grippy surface" is a common metaphor for this. Cursor A grab-hand makes sense as well as the arrows (move) cursor. Currently grab is Webkit-only. Also note that some devices don't have a ...


16

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. ...


15

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 ...


12

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 ...


11

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 ...


10

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 ...


10

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 ...


10

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 ...


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 ...


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

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

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 ...


8

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


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 ...


7

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

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 ...


6

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. ...


6

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 ...


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

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.


5

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

Instead of using the clenched fist cursor I would suggest using this instead. or else continue reading. Show it to the user that it's draggable. Like in real life physical Products do. For example the switch on this table lamp here. The grip is enough to tell the user that it's draggable and it can be slided since there is no other reason why to put ...


5

The context is key, and you will probably have to learn what it means for each context. Even when you know it is a menu, it is not clear what kind of menu it is. Take Chrome. In Windows, there is only the hamburger, while on Mac OS, there is the top main menu as well, as in all Mac Apps. The Hamburger does not say what kind of menu it is. The Draggable ...


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 ...



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