RE: More on re-ordering rows

28 Feb 2004 - 1:55am
10 years ago
2 replies
507 reads
Jeff Howard
2004

Hi all,

Worked through an interaction that moves toward WYSIWYG, but stops short
of drag and drop. It's more of a click-and-drop. Let me know what you think.

Here's an overview:
1. User selects a row to move. The row highlights in the table.
2. User clicks elsewhere in the table to indicate the destination.
3. Row moves directly to the new location.

I've cobbled together a rough demo that demonstrates the interaction.
Haven't exhaustively debugged it cross-browser, but if you're on
Explorer, it should be fine.

http://www.howardesign.com/exp/table/

// jeff

Comments

1 Mar 2004 - 2:39pm
sandeepblues
2003

That's pretty neat. Thanks for posting this.

One big problem is: user wants to select a row, and
selects another accidentally. The next typical
interaction would to click on the correct row to
select it. In your solution, this will actually cause
the wrongly selected row to move. Perhaps, if the
user selected the row by clicking anywhere on it, but
the drop was cell-specific, it would be an
improvement.

However, desktop interactions suggest that the user
will click on the icon to select the row, anyways.

Also, maybe, the drop target should be invisible,
unless the user has selected some row already.

I'd like to suggest some other improvements that might
make this very useful:

(a) Ability to cancel that a row selection, in case
user changes his/her mind, by clicking away from the
table, or he clicks the same row again.

(b) On drop, check whether the row was dropped in the
same table as it belongs to. This is to deal with the
common case where multiple tables exist for
reordering.

(c) Mouse change on selection might be nice.

Sandeep

--- Jeff Howard <id at howardesign.com> wrote:
> Hi all,
>
> Worked through an interaction that moves toward
> WYSIWYG, but stops short
> of drag and drop. It's more of a click-and-drop. Let
> me know what you think.
>
> Here's an overview:
> 1. User selects a row to move. The row highlights in
> the table.
> 2. User clicks elsewhere in the table to indicate
> the destination.
> 3. Row moves directly to the new location.
>
> I've cobbled together a rough demo that demonstrates
> the interaction.
> Haven't exhaustively debugged it cross-browser, but
> if you're on
> Explorer, it should be fine.
>
> http://www.howardesign.com/exp/table/
>
> // jeff

1 Mar 2004 - 2:58pm
Adlin, Tamara
2004

Neato! Love this. You know what would be even cooler? If you do an animation showing the target row 'expanding' to accommodate the new info. Also would be great to indicate the 'selected and about to move' state of the row you are moving...and maybe append 'move to...' on the cursor or something...

-----Original Message-----
From: discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com [mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com] On Behalf Of Jeff Howard
Sent: Friday, February 27, 2004 10:55 PM
To: discuss-interactiondesigners.com at lists.interactiondesigners.com
Subject: [ID Discuss] RE: More on re-ordering rows

Hi all,

Worked through an interaction that moves toward WYSIWYG, but stops short of drag and drop. It's more of a click-and-drop. Let me know what you think.

Here's an overview:
1. User selects a row to move. The row highlights in the table.
2. User clicks elsewhere in the table to indicate the destination.
3. Row moves directly to the new location.

I've cobbled together a rough demo that demonstrates the interaction. Haven't exhaustively debugged it cross-browser, but if you're on Explorer, it should be fine.

http://www.howardesign.com/exp/table/

// jeff
_______________________________________________
Interaction Design Discussion List discuss at interactiondesigners.com
--
to change your options (unsubscribe or set digest): http://discuss.interactiondesigners.com
--
Questions: lists at interactiondesigners.com
--
Announcement Online List (discussion list members get announcements already) http://interactiondesigners.com/announceList/
--
http://interactiondesigners.com/

Syndicate content Get the feed