Gmail drag and drop

24 Jul 2009 - 9:59am
5 years ago
13 replies
652 reads
Hugh Griffith
2007

Not too long ago Google added the ability to move your emails into labels
via drag and drop functionality. As a result, they added two rows of dots to
the left side of each email.

Does anyone know if that is in fact the ideal pattern for that kind of tool?
Or has anyone done any testing on it?

Thanks for your input,

Hugh Griffith
User Interface Designer

Comments

24 Jul 2009 - 10:35am
William Hudson
2009

Hi, Hugh.

It's called a 'drag handle' and lots of things have them (toolbars in
Windows for example).

You need somewhere to click in order to drag something, and since in
many cases clicking on the text does something else (opening the email
in gmail) a drag handle is handy (as it were<g>), although not
essential. However, it does have the added benefit of providing a visual
cue. Changing the cursor to a drag hand is the coup de grace (but that
could be done without the handle if other aspects of the design allowed
for it).

Regards,

William Hudson
Syntagm Ltd
Design for Usability
UK 01235-522859
World +44-1235-522859
US Toll Free 1-866-SYNTAGM
mailto:william.hudson at syntagm.co.uk
http://www.syntagm.co.uk
skype:williamhudsonskype

Syntagm is a limited company registered in England and Wales (1985).
Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon
OX14 2DS.

Confused about dates in interaction design? See our new study (free):
http://www.syntagm.co.uk/design/datesstudy.htm

12 UK mobile phone e-commerce sites compared! Buy the report:
http://www.syntagm.co.uk/design/uxbench.shtml

Courses in card sorting and Ajax interaction design. London, Las Vegas
and Berlin:
http://www.syntagm.co.uk/design/csadvances.shtml
http://www.syntagm.co.uk/design/ajaxdesign.shtml

> -----Original Message-----
> From: new-bounces at ixda.org [mailto:new-bounces at ixda.org] On Behalf Of
> Hugh Griffith
> Sent: 24 July 2009 08:59
> To: discuss at ixda.org
> Subject: [IxDA Discuss] Gmail drag and drop
>
...

24 Jul 2009 - 11:03am
Christine Boese
2006

If your machine is at all RAM-challenged, the cumulative crap that's being
loaded into web pages and web app interfaces is causing curses and crashes
for Firefox. I don't even want to think about IE or Safari, because I'm way
too dependent on my Firefox functional plug-ins (mainly Delicious bookmarks,
but also feedly), but I literally have 1-2 Firefox crashes a night when
working at home.

Of course, it would help if I upgraded my RAM on my home machine, but I'm
too cheap these days, and what does it say about us, if we are loading up
web pages with too much CUMULATIVE animations and swooshes and drag and
drops etc. and like such as?

It's not whether a SINGLE page with an app is doing this to me. It's the
fact that I've got multiple tabs and windows open, and if I've got GMAIL
open, plus have opened feedly once (so its little widget shows up as I
continue surfing), and somebody sends me a YouTube of Vimeo video to look at
quick (or say if I open Rachel Maddow's home page on MSNBC, with it's
big-ass video player), I am instantly headed for a Firefox crash.

I have to say, it is really getting on my last nerve, and if for me, imagine
what it is doing to regular, non-designer surfer people!

Chris

On Fri, Jul 24, 2009 at 11:35 AM, William Hudson <
william.hudson at syntagm.co.uk> wrote:

> Hi, Hugh.
>
> It's called a 'drag handle' and lots of things have them (toolbars in
> Windows for example).
>
> You need somewhere to click in order to drag something, and since in
> many cases clicking on the text does something else (opening the email
> in gmail) a drag handle is handy (as it were<g>), although not
> essential. However, it does have the added benefit of providing a visual
> cue. Changing the cursor to a drag hand is the coup de grace (but that
> could be done without the handle if other aspects of the design allowed
> for it).
>
> Regards,
>
> William Hudson
> Syntagm Ltd
> Design for Usability
> UK 01235-522859
> World +44-1235-522859
> US Toll Free 1-866-SYNTAGM
> mailto:william.hudson at syntagm.co.uk
> http://www.syntagm.co.uk
> skype:williamhudsonskype
>
> Syntagm is a limited company registered in England and Wales (1985).
> Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon
> OX14 2DS.
>
> Confused about dates in interaction design? See our new study (free):
> http://www.syntagm.co.uk/design/datesstudy.htm
>
> 12 UK mobile phone e-commerce sites compared! Buy the report:
> http://www.syntagm.co.uk/design/uxbench.shtml
>
> Courses in card sorting and Ajax interaction design. London, Las Vegas
> and Berlin:
> http://www.syntagm.co.uk/design/csadvances.shtml
> http://www.syntagm.co.uk/design/ajaxdesign.shtml
>
> > -----Original Message-----
> > From: new-bounces at ixda.org [mailto:new-bounces at ixda.org] On Behalf Of
> > Hugh Griffith
> > Sent: 24 July 2009 08:59
> > To: discuss at ixda.org
> > Subject: [IxDA Discuss] Gmail drag and drop
> >
> ...
> ________________________________________________________________
> 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
>

24 Jul 2009 - 11:04am
Mark Canlas
2003

Personally, I like it. It has a very tactile, invitational sort of
presentation. "Feel here" where feel is actually hovering with the mouse.
And, like William stated, the changing of the mouse cursor really brings the
concept home.

On Fri, Jul 24, 2009 at 10:59 AM, Hugh Griffith <hgriffith at vfs.com> wrote:

> Not too long ago Google added the ability to move your emails into labels
> via drag and drop functionality. As a result, they added two rows of dots
> to
> the left side of each email.
>
> Does anyone know if that is in fact the ideal pattern for that kind of
> tool?
> Or has anyone done any testing on it?
>
> Thanks for your input,
>
> Hugh Griffith
> User Interface Designer
> ________________________________________________________________
> 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
>

24 Jul 2009 - 12:10pm
William Hudson
2009

Christine -

I know people are attached to their browsers, but maybe you should try
Google Chrome? Pages are going to get more complex (not that I think
that is a good idea in itself) and I personally believe the trend is
going to be more towards Ajax/JavaScript and away from other RIA
platforms like Flash and MS Silverlight. Chrome is reckoned to be about
20 times faster than Internet Explorer at executing JavaScript (Google's
figures!).

And, oh - I hate to say this - all of my IE crashes went away when I
removed the Google Toolbar. It may not have been the toolbar's fault,
but of course all of these plug-ins can interact with each other.

Regards,

William

From: Christine Boese [mailto:christine.boese at gmail.com]
Sent: 24 July 2009 17:04
To: William Hudson
Cc: Hugh Griffith; discuss at ixda.org
Subject: Re: [IxDA Discuss] Gmail drag and drop

If your machine is at all RAM-challenged, the cumulative crap that's
being loaded into web pages and web app interfaces is causing curses ...

24 Jul 2009 - 12:57pm
Christine Boese
2006

To be sure, Chrome would help. Don't have Chrome yet on my Mac.

Also, Chrome does not run my ESSENTIAL Firefox plugins: Delicious Bookmarks
(I've had my bookmarks, custom browser toolbars by project, and research
bibs on the Cloud for more than a year now) and feedly. And I don't know
about you, but if you regularly monitor more than 200 feeds, once you try
feedly, you don't want to go back, ever.

Which means I'm stuck with Firefox, and with designers who think testing
their Ajax apps running alone without multiple apps, windows and tabs is
sufficient...

Use Chrome on my PC at work, no problem, when I want speed. When I actually
want to get work done, however, I need my bookmarks, my custom toolbars by
project/task, my research bibs, and my feeds.

Chris

On Fri, Jul 24, 2009 at 1:10 PM, William Hudson <
william.hudson at syntagm.co.uk> wrote:

> Christine –
>
>
>
> I know people are attached to their browsers, but maybe you should try
> Google Chrome? Pages are going to get more complex (not that I think that is
> a good idea in itself) and I personally believe the trend is going to be
> more towards Ajax/JavaScript and away from other RIA platforms like Flash
> and MS Silverlight. Chrome is reckoned to be about 20 times faster than
> Internet Explorer at executing JavaScript (Google’s figures!).
>
>
>
> And, oh – I hate to say this – all of my IE crashes went away when I
> removed the Google Toolbar. It may not have been the toolbar’s fault, but of
> course all of these plug-ins can interact with each other.
>
>
>
> Regards,
>
>
>
> William
>
>
>
> *From:* Christine Boese [mailto:christine.boese at gmail.com]
> *Sent:* 24 July 2009 17:04
> *To:* William Hudson
> *Cc:* Hugh Griffith; discuss at ixda.org
> *Subject:* Re: [IxDA Discuss] Gmail drag and drop
>
>
>
> If your machine is at all RAM-challenged, the cumulative crap that's being
> loaded into web pages and web app interfaces is causing curses ...
>
>
>

24 Jul 2009 - 3:06pm
Anonymous

The idea behind the drag handle is to mimic ridges or dimples on
physical products (e.g. battery covers or VCR panels). Gmail's drag
handles weren't immediately obvious to me until I read their blog
article about them. I don't see how they are any more or less usable
than what they had before. If most users feel similarly ambivalent,
the drag handles are just clutter.

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

24 Jul 2009 - 5:59pm
billfranz
2009

When you edit bookmarks in Safari on the iPhone, there is a small icon
(three grey stripes) to the right which lets you "grab" the bookmark
and reorder your list. It's different from Gmail's icon, but still
conveys some sort of tread that you could grab onto.

It's interesting how these different icons are slowing starting to
coalesce.

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

24 Jul 2009 - 3:50pm
Tomas Kafka
2009

Christine, it's OT, but since the virtual memory was invented,
programs *never* crash as a consequence of running out of memory
(except for some special cases, like running out of address space,
but I doubt your firefox would consume 4GBs of memory).
The source of crash is elsewhere - some runaway FF extension, or
(mostly) badly written plugin - write a list of your addons and
plugins, and try disabling them one by one.

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

24 Jul 2009 - 10:45am
Anonymous

That's the pattern used to move icon bars in the microsoft
applications (with one line of dot instead of 2).
The mouse cursor appearance also changes.

I'm not sure people are using drag and drop this way in gmail.
The only person I saw using it drags the labels to the opened email
because it required less precision.

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

24 Jul 2009 - 5:26pm
Rex Kilian
2008

Back to the interaction...

You are also able to drag the label to the message when the message
is in the list or when you have the message open. I have actually
moved to using this interaction more as it allows me to "label" the
message without having the message get tagged and archived all in one
step. For those that don't know when a message is archived it is
removed from the main list of messages. Currently if you drag the
message to the label using the drag handles it will do both a
"label" and an "archive". I often want to label a message but
have it remain visible in the list, i.e tag it.

Even though you can drag the labels to the messages there are no drag
handles on the labels. I'm interested to hear discussion about
certain drag-able items having drag handles and others not. And then,
if the labels had drag handles how should the interface communicate
that dragging labels will only perform a "label" steps, but
dragging a message with perform "label-AND-archive" steps? Or is
this a case where the context of what is being dragged will dictate
what steps are performed? (Personally I would disagree with the last
statement because I was surprised that it archived my message when I
drug it to a label, but maybe that's just me.)

Perhaps the reason that drag handles are not on the labels is that
the design rationale is meant to direct users to drag messages and
not labels. Perhaps the design rationale is providing a 'hidden
alternative' so people like myself aren't locked out of an inverse
interaction, inverse meaning drag 'label to message' instead of
'message to label'.

Thoughts?

Rex Kilian
Human-Computer Interaction Institute
Carnegie Mellon University

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

24 Jul 2009 - 12:03pm
missu
2009

@christine I love Firefox and use it 95% of the time, but the plug-ins
are usually the reason why the browser crashes or slows down. By the
end of the day Firefox is using 1GB of memory. Many times my Firebug
plug-in is what causes Firefox to stop noticing my tab button. I am
not able to tab to other fields and would have to quit FF and
restart.

I will agree that sometimes too much Javascript functionality on a
page does cause problems on the page or cause it to crash FF. I use
the site blip.fm and sometimes when it is switching from playing a
youtube video back to a regular song, it hangs and I have to quit or
it just crashes all together. Just like you, I usually have about 15
tabs open at the time. Times like that, makes me glad FF added the
save tabs when close feature.

The reason why all these sites have a lot and drag and drop features
and such is to make our user experience more like the desktop or just
to make the use of the application easier. Some places use a lot of
bells and whistle for no good reason, but I've found most of them
places I use haven't done that ... yet :-)

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

24 Jul 2009 - 10:37am
Anonymous

Hugh-
I haven't heard anything about testing on this specific implementation, but
I never would have guessed that functionality without the tip they provided
and now I use it all the time as it is more efficient than clicks and types
through a dropdown. In my experience drag and drop works nicely with gripper
bars, but an impementation would be too costly with space on a list.
Sometimes, I think drag and drop is about as hidden as a right-click menu.

Thoughts?
~Stacy

On Fri, Jul 24, 2009 at 9:59 AM, Hugh Griffith <hgriffith at vfs.com> wrote:

> Not too long ago Google added the ability to move your emails into labels
> via drag and drop functionality. As a result, they added two rows of dots
> to
> the left side of each email.
>
> Does anyone know if that is in fact the ideal pattern for that kind of
> tool?
> Or has anyone done any testing on it?
>
> Thanks for your input,
>
> Hugh Griffith
> User Interface Designer
> ________________________________________________________________
> 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
>

26 Jul 2009 - 1:23pm
Juan Lanus
2005

Rex Kilian <rexkilian at cmu.edu> wrote:
> Even though you can drag the labels to the messages there are no drag
> handles on the labels. I'm interested to hear discussion about
> certain drag-able items having drag handles and others not.
In the messages list all the pixels are "hot". i.e.: linked to the message
displaying, and it happens at the mouse down event which is somehow unusual.
All pixels but a few: the selection checkbox, the star.
Hence the need for a specialized area to react only to the drag & drop
action.

The lack of affordabilities in the labels is, IMO, a missing item. In fact,
I was not aware of this feature.
Not drawing a handle on the label might have been done on purpose, to avoid
visual clutter. But the label should react and publish its capability at the
mouse hover.
Notice that you can also drag "Starred" or "Trash" to a message but nothing
happens. This seems to me not fully baked yet.
--
Juan Lanus

On Fri, Jul 24, 2009 at 12:26, Rex Kilian <rexkilian at cmu.edu> wrote:

> Back to the interaction...
>
> You are also able to drag the label to the message when the message
> is in the list or when you have the message open. I have actually
> moved to using this interaction more as it allows me to "label" the
> message without having the message get tagged and archived all in one
> step. For those that don't know when a message is archived it is
> removed from the main list of messages. Currently if you drag the
> message to the label using the drag handles it will do both a
> "label" and an "archive". I often want to label a message but
> have it remain visible in the list, i.e tag it.
>
> Even though you can drag the labels to the messages there are no drag
> handles on the labels. I'm interested to hear discussion about
> certain drag-able items having drag handles and others not. And then,
> if the labels had drag handles how should the interface communicate
> that dragging labels will only perform a "label" steps, but
> dragging a message with perform "label-AND-archive" steps? Or is
> this a case where the context of what is being dragged will dictate
> what steps are performed? (Personally I would disagree with the last
> statement because I was surprised that it archived my message when I
> drug it to a label, but maybe that's just me.)
>
> Perhaps the reason that drag handles are not on the labels is that
> the design rationale is meant to direct users to drag messages and
> not labels. Perhaps the design rationale is providing a 'hidden
> alternative' so people like myself aren't locked out of an inverse
> interaction, inverse meaning drag 'label to message' instead of
> 'message to label'.
>
> Thoughts?
>
> Rex Kilian
> Human-Computer Interaction Institute
> Carnegie Mellon University
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=44073
>
>
> ________________________________________________________________
> 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
>

Syndicate content Get the feed