Styles for drag-and-drop?

[Daphne Ogle]

Just getting caught up my emails after being out.  Perhaps I'm too  
late but figured I'd add my perspective, which is quite similar to  
how others have responded.  See below...

-Daphne

On Jun 21, 2007, at 2:56 PM, Richard Schwerdtfeger wrote:

> Hi Anastasia,
>
> Sorry for the slow response. I just found this in my mailbox.
>
>
> Rich Schwerdtfeger
> Distinguished Engineer, SWG Accessibility Architect/Strategist
> Chair, IBM Accessibility Architecture Review Board
> blog: http://www.ibm.com/developerworks/blogs/page/schwer
>
> fluid-work-bounces at fluidproject.org wrote on 06/20/2007 01:43:55 PM:
>
> >
> > We're currently implementing the mouse-based drag-and-drop
> > functionality in the Lightbox, and it has raised questions about  
> what
> > the interface should look like when mousing and clicking, etc.
> >
> > Questions:
> >
> > Should the appearance of a thumb change to our 'active' look when
> > moused over, or should this only happen when clicked on?
> >
> I believe this should be a click. This will be easy for alternative  
> input devices.
> If you are going to have multiple options like copy and move you might
> consider a menu to selec the option.
The appearance should only change to the "active" state when the  
image is selected (so in this case "clicked on").  The idea here is  
that we are giving the users affordance to know they can do something  
with the image so we only want to do that once they really can do  
something with it.
>
>
> > While a thumb is being dragged, should a representation of it stay
> > somehow where it was originally? If so, what should it look like?
> > (Note: If nothing stays there, the space collapses and all of the
> > subsequent images move.)
> >
> The user may escape the move or copy and so it would be easier to  
> leave
> it there while you drag. It would be good to change the mouse pointer
> during th emove.
I think the image should stay where it originally is until it is  
dropped.  We may want to visually highlight the thumbnail in its  
original location while it's being moved.

Then the moving thumbnail should be a "ghost".  As, Rich points out,  
if the user "lets go" (mouse release) of the thumbnail without  
actually dropping it in a new location then it stays where it was.   
Leaving the image in it's original location is feedback to that affect.
>
> > How should 'previewing' of the target location behave? Should a  
> ghost
> > of the thumb be placed in the target location, or should it be a
> > vertical bar, like iPhoto, or something else?
> >
>
> Not sure what you mean by 'previewing.'
I like the vertical bar like  in iPhoto.  That way, the "ghost"  
itself is sort of on top of the group of thumbnails.  Trying to show  
a visual distinction between the thumbnails and the "ghost" being  
moved while showing it in it's new location is tricky.  The vertical  
bar is distinct from the thumbnails so easy to see and I think it  
gives the user appropriate feedback about where it will be dropped.   
I also think the images around the vertical bar will need to  
"separate" a bit but just enough to see vertical bar so it can be a  
fairly subtle change that isn't distracting to users.

Good questions!  Hope this helps!

-Daphne

>
> Rich
> >
> > --
> > Anastasia Cheetham                   a.cheetham at utoronto.ca
> > Software Designer, Fluid Project
> > Adaptive Technology Resource Centre / University of Toronto
> >
> >
> > _______________________________________________
> > fluid-work mailing list
> > fluid-work at fluidproject.org
> > http://fluidproject.org/mailman/listinfo/fluid-work
>
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
> http://fluidproject.org/mailman/listinfo/fluid-work

Daphne Ogle
Senior Interaction Designer
University of California, Berkeley
Educational Technology Services
daphne at media.berkeley.edu
cell (510)847-0308



-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070628/2581f3d1/attachment.htm>