How to cue people for drag and drop
1 Dec 2008 - 10:59pm
16 replies
1150 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
Get the feed
Comments
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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