Tag Info

Hot answers tagged

22

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


21

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


20

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


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


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


13

I've used a little "grippable" texture on stuff to show that it's draggable. Here's Gmail's texture:


13

There is a standard icon of three horizontal lines one on top of the other that implies items can be dragged and dropped. It implies "friction" or "handle" and is a bit similar to the diagonal lines in the bottom right corner of windows or text boxes that allows resizing them.


13

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


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

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


11

Drag & drop is absolutely an expected behavior to support. It's like asking "Should we support keyboard shortcuts?". While the feature may not be used by the majority of users, the ones that do use it really rely on it.


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

I have seen apps that show an outline where you can drop. This is from the wordpress widget page


9

The move cursor is commonly used with dragable items in web apps. css: cursor:move;


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


9

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


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


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


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

When the page/section loads you could show a quick animation integrated into your UI control to demonstrate the idea that an object can be dragged.


7

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


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

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



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