How to cue people for drag and drop

1 Dec 2008 - 10:59pm
5 years ago
16 replies
1829 reads
DrWex
2006

I have a screen with a slightly unusual UI. There is a table of rows
that can be edited in place, but you can also drag and drop the rows,
somewhat in the style of Excel. You can also drag the rows onto
targets adjacent to the grid.

The question is - how do I give people reasonable visual cues that
drag-and-drop are acceptable actions here?

Given that there are a large number of drop targets, I can't think of
a good design pattern other than drag-drop for this but I'm open to
suggestions on that as well.

Any thoughts?
--Alan

Comments

2 Dec 2008 - 3:12am
Larry Tesler
2004

Alan,

Surprisingly, there is still no standard pattern or even a frequently
used convention for indicating what can be dragged. (Or there is one
but you and I have never heard of it, which means it isn't a very
successful standard.)

Still, some things can sometimes be dragged, e.g., an icon, a member
of a thing-bar (whether or not the things are icons), an object within
a drawing or layout, a border line, selected text, a selected group of
things, or a drag-handle and whatever the handle drags. Experienced
users probably consider the possibility that such things can be
dragged. You might be able to take advantage of that suspicion. For
example, while the pointer is hovering over a table row, or (to be
less disruptive) when a row is selected, surround it by a drop shadow
that makes it appear to float, or display a drag handle alongside it.
Either cue may tempt the user to try dragging the row or its handle,
as the case may be. Or, if row-dragging can only happen in an edit
mode (I hate modes but when a document is shared, especially on the
web, an edit mode can reduce the incidence of inadvertent corruption),
display a drag handle to the left of each row whenever it is in edit
mode.

Larry Tesler

On Dec 1, 2008, at 7:59 PM, Alan Wexelblat wrote:

> I have a screen with a slightly unusual UI. There is a table of rows
> that can be edited in place, but you can also drag and drop the rows,
> somewhat in the style of Excel. You can also drag the rows onto
> targets adjacent to the grid.
>
> The question is - how do I give people reasonable visual cues that
> drag-and-drop are acceptable actions here?
>
> Given that there are a large number of drop targets, I can't think of
> a good design pattern other than drag-drop for this but I'm open to
> suggestions on that as well.
>
> Any thoughts?
> --Alan

2 Dec 2008 - 6:54am
Danny Hope
2008

2008/12/2 Alan Wexelblat <awexelblat at gmail.com>:
> The question is - how do I give people reasonable visual cues that
> drag-and-drop are acceptable actions here?
>
> Given that there are a large number of drop targets, I can't think of
> a good design pattern other than drag-drop for this but I'm open to
> suggestions on that as well.

Some ideas:
* Add a small area to one side of the row with a rough texture.
Personally I hate having to roll over the row for this to appear.
* Add drop-shadows to rows as they become active, in other words when
the user presses.
* Change the mouse pointer to a hand when hovering over a movable part.
* Move other rows aside leaving an area where the active one can be
dropped. Shade the gap so that it's darker than the row.

OS 7 provides some inspiration in this area:
http://www.flickr.com/photos/yandle/3076451873

--
Regards,
Danny Hope
http://linkedin.com/in/dannyhope
07595 226 792

2 Dec 2008 - 7:10am
Fred Beecher
2006

On Mon, Dec 1, 2008 at 9:59 PM, Alan Wexelblat <awexelblat at gmail.com> wrote:

>
> The question is - how do I give people reasonable visual cues that
> drag-and-drop are acceptable actions here?
>

In 37signals products, when you want to edit a list you go into a special
edit mode. In this mode, each list item has an icon labeled DRAG. You click
and drag on this icon to re-order the items. This is nice because you still
have the ability to edit the text of each item.

In your case, I might suggest that this DRAG icon appear to the left (or
right, or top, or bottom, wherever appropriate) of these rows on rollover.
That way, users will be able to edit the rows like normal.

Are the drop targets obvious (like folders, etc.)? If not, you might want to
consider highlighting them somehow upon drag.

F.

------------------------------------------------------------------------------------------
Fred Beecher
Sr. User Experience Consultant
Evantage Consulting
O: 612.230.3838 // M: 612.810.6745
IM: fbeecher at gmail.com (google/msn) // fredevc (aim/yahoo)
T: http://twitter.com/fred_beecher

2 Dec 2008 - 11:51am
Patrick Lajeunesse
2008

We have a very similar scenario on Sixent. Users can create multiple
profiles, and we wanted it to be easy to move bits of information
from one profile to another. So there's basically a grid with each
profile as a column, and the data in rows. Users can drag data from
one column to another within the same row.

We originally tried to do this with an indicator on every field, but
it was just too much clutter with all the other information there.
So, we instead have a very clear and obvious indicator that only
appears when you mouse over the field. It even has a brief note
("Drag to copy") to make it clear what you can do with it.

This is pretty successful - first-timers figure it out very quickly,
and everyone else gets the benefit without an overly-cluttered
interface.

Patrick Lajeunesse
Ramius Corporation
http://patrick.sixent.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=36090

2 Dec 2008 - 4:55pm
Jeff Howard
2004

Hi Alex,

Another route to consider is omitting all visual drag cues and then
launching a nationwide television campaign demonstrating how to
interact with your interface. Of course, this approach might only
work if you're Apple. :-)

// jeff

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=36090

3 Dec 2008 - 9:08am
Julie Strothman
2008

Yahoo's ypatterns includes a list of 'intersting moments' related
to drag-and-drop, the idea being that you choose which are relevant
for your implementation and identify how to address each:
http://developer.yahoo.com/ypatterns/parent.php?pattern=dragdrop

The Fluid Project (based in Toronto, with a mission of improving ux
of community source software) has done a great deal of user testing
of drag-and-drop and offers a design pattern addressing ypatterns'
interesting moments: http://wiki.fluidproject.org/display/fluid/Drag
and Drop Design Pattern
as well as accessibility.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=36090

2 Dec 2008 - 8:00pm
jaketrimble
2008

Dragging and dropping can be tricky. Users screen size and res can
have a huge impact. Also, you don't know how many times I have heard
people say, "Sorry, I'm not used to mouse pads".

Anyway, my suggestion would be to create a drop-down column that
would allow users to add a row to a target. You could also add this
feature in concert with drag and drop and see which one gets used
more.

For a solution to your drag and drop...From your description I would
suggest that your css invokes an "arrowed cross-hair" cursor and
when it scrolls over an editable area it changes back. Make sure the
cells have enough padding to allow the user to notice the change in
cursor.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=36090

4 Dec 2008 - 9:28am
Benjamin Ho
2007

Alan,

I would think your goal is to make it very explicit once the
cells/rows have been selected. There are many ways to do this.

Perhaps look up "affordances" to guide you.

Ben

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=36090

4 Dec 2008 - 6:41pm
Ed Caggiani
2008

Sometimes the simplest solutions are best. Would it not be possible to add a
simple message at the top that says something like "Darg & drop rows to
reorder them, or drop rows onto [TARGET NAME HERE]"?

I also like the idea of extending the row a bit to give a good place to
grab, and on mouseover display "drag to move" or something like that in that
space.

-Ed

4 Dec 2008 - 4:54am
Sean Phelan
2008

This is a really interesting area for me as I work in a government
statistical office. We are constantly struggling with what can be
done with large tables on-line and there seems a very small amount of
guidance, apart from "display a small table". This is not a option
for us we have to output enormous tables and we try to make them
usable and statistically valid (not easy if you know any
statisticians).

So if you want to see how other governments have handled this...you
may wish to hold your breath.

Good luck I would be interested in your opinions

Links
Norway
http://statbank.ssb.no/statistikkbanken/?PLanguage=1

Netherlands
http://www.cbs.nl/en-GB/menu/cijfers/statline/zelf-tabellen-maken/default.htm

Australia
http://www.abs.gov.au/CDATAOnline

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=36090

4 Dec 2008 - 11:55pm
Christian Crumlish
2006

Alan, have you looked at Bill Scott's rich interaction patterns at
http://developer.yahoo.com/ypatterns or in his recent O'Reilly book?
He puts a lot of thought into patterns like "Hover Invitation" and he also
shares the idea of an interesting moments storyboard grid (which, for YUI,
translates into event handlers), as a tool for thinking through all of the
junctions at which various affordances (YUI calls them actors) on the screen
have the opportunity to change state or behavior to indicate permitted and
nonpermitted actions.

-x-

>
> On Dec 1, 2008, at 7:59 PM, Alan Wexelblat wrote:
>
> I have a screen with a slightly unusual UI. There is a table of rows
>> that can be edited in place, but you can also drag and drop the rows,
>> somewhat in the style of Excel. You can also drag the rows onto
>> targets adjacent to the grid.
>>
>> The question is - how do I give people reasonable visual cues that
>> drag-and-drop are acceptable actions here?
>>
>
I'd also look at how Netflix and iPhone use little handles for sliding rows
or items up and down a list. In such cases I think the mouse pointer often
changes to a two or four-way arrow to show draggability.

-xian-

--
Christian Crumlish http://xianlandia.com
Yahoo! pattern detective http://design.yahoo.com
Yahoo! Developer Network evangelist http://open.yahoo.com
IA Institute treasurer http://iainstitute.org

5 Dec 2008 - 9:45am
DrWex
2006

Thank you to everyone who took the time to respond to my request.
I've gotten several useful ideas from the examples people pointed me
to and the written suggestions.

I'm still reading and researching so if anyone else has things they'd
like to add please do.

Best regards,
--Alan

5 Dec 2008 - 9:52am
Jack L. Moffett
2005

Alan,

You are probably aware, but I think 37 Signals' applications (e.g.
Basecamp) handle this extremely well. It's probably the best
implementation I've seen on the web.

Jack

On Dec 5, 2008, at 9:45 AM, Alan Wexelblat wrote:

> Thank you to everyone who took the time to respond to my request.
> I've gotten several useful ideas from the examples people pointed me
> to and the written suggestions.
>
> I'm still reading and researching so if anyone else has things they'd
> like to add please do.
>
> Best regards,
> --Alan
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

Good designers relentlessly generate lots of ideas
and open-mindedly consider alternative solutions.
At no time are good designers frightened to entertain
a crazy, competing, or uncomfortable idea.

- Karl Ulrich

6 Dec 2008 - 6:40pm
DampeS8N
2008

There is drag and drop in basecamp? I use it every day, where is it?
:(

Don't forget adding a way for people with screen readers to interact
with your product. This can be as simple as arrow links that are
always visible, or as complicated as parts hidden off the screen
somewhere. Or you could ignore them if not being able to re-arrange
the list won't impact actual interaction. But if it is netflix and
it is the order you will get the item in, have the fall-back.

Normally we frown on this kind of stuff in IxD, but it sucks to be
blind and we've been ignoring them completely for too long. I don't
care if they aren't your target market, unless your product is
entirely visual, like a photograph gallery, add stuff for the blind,
and don't make things hard for the deaf either.

Will

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=36090

6 Dec 2008 - 7:23pm
Jack L. Moffett
2005

On Dec 6, 2008, at 10:40 AM, William Brall wrote:

> There is drag and drop in basecamp? I use it every day, where is it?
> :(

In the To-Do lists. When you hover over an item, controls are
displayed for deleting, editing, dragging, and commenting. Cursoring
over the drag icon changes the cursor to match. The entire row moves
up and down the page with your cursor, and other items move out of the
way to give you a place to drop it. Slick as a whistle.
:)

Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

I am in search of the
simple elegant seductive
maybe even obvious IDEA.
With this in my pocket
I cannot fail.

- Tibor Kalman

7 Dec 2008 - 11:30am
DampeS8N
2008

I have never noticed that, even once, and I use the to-do system for
all my work. Granted. I am given things to do, and am not giving
them. So if that matters, that might be it. But I've never had the
desire to move them around. I just do them and check them off.

Part of the reason I never noticed is I just can't stand basecamp
and I've learned to expect it to be unhelpful and disorganized.

Between not being able to link directly to a write-board, to having
to jump through about 5 exclusive modes that hide all the other
features just to get where I need to be, I just get fed up and don't
explore.

Also, things appear to be inconsistently named. Or at least
improperly named.

I will check on this drag and drop situation monday. But if it does
what you described, that's a good solution.

All too often websites get things right on the micro-level and dead
wrong on the macro level.

Tis a symptom of IxD being done last and not first. :(

Will

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=36090

Syndicate content Get the feed