The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

How to visually indicate that a web page component is draggable?

The title pretty much says it all.  I have some boxes that are draggable, but I'm rolling out this feature on users that have probably never dragged a component in a web page.

What would make it clear to them that they can be dragged, and also be unobtrusive all the rest of the time they're using the app?
Wednesday, May 09, 2007
I faced this problem, too.

I added dotted "grips" to the right-hand side of the draggable items. They could actually click anywhere on the item to drag it, but i chose to just put the grips on one side.

Still, people didn't get it.

So I added:

"Drag the items to the drop zone" text (I used vernacular more appropriate for my app, but that was the gist)

This helped a lot.

I learned that the text plus the grips was far easier for users than one or the other.
Shane Harter Send private email
Wednesday, May 09, 2007
How about putting a compass in an upper-corner? That would be a dead give-away to me...
Thursday, May 10, 2007
Yahoo home page uses the compass and it works well and is very intuitive. That's one example of how to do it well.
cbmc64 Send private email
Thursday, May 10, 2007
I think the notion of having a compass etc is fine, but there needs to be a heavy visual clue presented when the user first interacts with the compass button/icon. Having the area that can be moved visually change when the mouse is over that button/icon and possibly changing the representation to a more identifiable dragged entity like a desktop icon may be helpful. So to take that notion a bit closer to home, selecting the compass layers over an icon which when you move the mouse the icon follows it, much like a users desktop. If you like you can show extra verbiage when it is selected for dragging, just to get the point across.
Jeff Send private email
Thursday, May 10, 2007
An additional strategy is to mimic the Windows paradigm, as most people already know they can drag windows around the desktop by clicking in the title bar and dragging the window around.

The project I'm working on at the moment has a lot of popup dialogs, and each dialog has a clearly defined title bar. Whenever the user hovers over the title bar, the cursor changes to a compass icon, indicating that the window can be moved.

If drag and drop is critical to current functionality  (rather than just being an additional feature) then we use explanatory text somewhere.

Our user groups have said that they found the title bar mechanism intuitive and unobtrusive.
Thursday, May 10, 2007
Have a look at how does it. It is very intuitive
drag me
Thursday, May 10, 2007
I have tried to do this a lot of different ways and have discovered through usability testing that typical Internet users find "draggable" interfaces terribly confusing.  None of my users (Fortune 500 executives) have ever seen draggable elements on the web and need to be taught a completely new way to interact with the page.  Once they learn how to drag something they try to drag around everything else and are frustrated when they can't.

If your users are early adopters I think Netvibes has a great implementation. 

If you are dealing with "normal people" you might want to rethink if drag and drop is really necessary.
Thursday, May 10, 2007
Lot's of great suggestions here for making drag-and-drop discoverable by the most users. However, much as I love seeing drag-and-drop make its way to web apps, it has to be acknowledged that drag-and-drop is functionally an expert short-cut. You'll need a menu-and-dialog (or menu-and-key) means to execute the same feature, if not for your "normal" users, than for accessibility reasons.
Michael Zuschlag Send private email
Thursday, May 10, 2007
Woah, I hadn't seen netvibes before. That is good stuff!
Friday, May 11, 2007
I totally agree with Alex and Michael, although I'll proffer that event "expert users" find drag and drop tedious. In fact just the thought of a solely drag and drop UI gives me RSI. Especially with web apps, there's always that moment when you  miss the "draggable" and end up selecting all the text on the page. Lame.
Duncan Smart Send private email
Saturday, May 12, 2007

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
Powered by FogBugz