Tuesday, March 29, 2005

New Usability Trick :: Click and Drag Links for Data Entry

Doing cross frame copy and paste in mozilla is nigh on nasty. You don't have access to the clipboard, which I had counted on to one-click copy information from a search pane to my results. (unless you sign your javascript application or mess with settings, more often than not beyond my means).

I did something that I never knew I could in firefox. I clicked on a link, held down the mouse, and dropped it into form input.
Sure, I knew about doing that, I'd done it by mistake every now and then. However, up to this point it wasn't in my mind as a kick ass data entry method.

Example:

<p><a href="text">Link</a></p>

<form><p><input /></p></form>

Try it:

Link
Drop Here:

Oh, whoopie - it's got http://clockwerx.blogspot.com/text though! That's useless to us.

To be effective, we need to be a bit clever. The urn: prefix on a string will tell mozilla that we are talking about a Uniquely Named Resource. In my case that fits my use of it so completely it's dumbfounding - product data entry.

Example:

<p><a href="urn:isbn:0765304368">Down and Out In The Magic Kingdom</a></p>

<form><p><input /></p></form>

Try it:

Down and Out In The Magic Kingdom
Drop Here:


Now, my users will only ever have to type in one search and transfer the results with a flick of the wrist, across frames, windows and all other barriers. That's cool!

Of course, you cry, there's still the urn:isbn: prefix. Well, fear not. That's a functioning actual link, even if your browser doesn't support it - there's an IETF RFC on the use of urn:isbn: to identify books.
And if your problem is with the text itself rather than the un-semantic idea of it, you can either set all of your input fields to trim off "urn:isbn" onmouseout, or you can let your server side script deal with it.

Ok, ok, there's flaws if you don't deal with books, but surely urn:applicationname:product:barcodehere is a great URN!

Selecting Text


I ran into this problem while fooling about over the last few days, and it took me a while to find the right solution for firefox. It's -moz-user-select, custom CSS that lets you either set it to normal or none. The cool thing, compared to all other hack solutions? Links are still draggable.


What do you all think?

1 comment:

Weave said...

Had no idea about the Moz-specific CSS...shit...now I'll be on the computer for hours trying them all out!

Great tips. Thanks, dude.