Re-ordering rows in a table.

25 Feb 2004 - 6:18pm
10 years ago
10 replies
944 reads
sandeepblues
2003

Context: let's say that a webpage has a set of panels
for individual news sources...like my.yahoo.

Problem: How to allow the user to edit the sequential
order the panels? Assume that the user successfully
navigates to the edit page.

There are 2 ways that I have seen of doing this:

(a) Provide a selection list with up and down arrows.
- my.yahoo and my.msn does this.

(b) Provide a text box next to each row, with an order
number: 10, 20, 30. To move row 30 between 10 and 20,
the user would have to change the number to 15.
Netflix does this for re-ordering a list of DVDs.

Option (a) has the WSYWIG advantage, but requires lots
of clicking in the worst case scenario.

Option (b) has fast interaction advantage, but it is
not WSYWIG.

How should I decide which one to pick?

Sandeep

Comments

26 Feb 2004 - 2:54am
sandeepblues
2003

Thanks for the response.

The interaction of that particular example is awful.
I can't imagine anyone preferring that to editing a
select list. If it isn't obvious, the fact that I
have to move my mouse from row to row, and then, click
to move the table row is terrible.

Didn't know drag-drop is supported on browsers.

Your example brought up another alternative which is
to use checkboxes as radio-buttons (given how HTML
works) next to each row, and use up/down buttons, and
use DHTML to achieve WSYWIG affect. Basically, user
selects one row by checking the checkbox, and then,
uses the up/down buttons to dynamically move the
selected row.

Still, I am curious to find out what people think
about (a) or (b)...

Sandeep

> I'd like to propose a 3rd alternative: use DHTML to
> allow users to
> re-order rows.
>
> Developed for Uzilla.net, I've open sourced a small
> library for enabling
> this functionality:
> http://surfmind.com/lab/table_reorder.cfm
>
> It doesn't yet support drag and drop but is robust,
> working in IE,
> Mozilla -- and probably Safari and Opera (feedback
> welcome). I'm not
> exceptionally happy with the interaction design --
> the targets in the
> demo are too small for one thing. However, it
> offers the potential for
> an improved look and feel over form widgets and more
> varied content
> within the individual rows.
>
> Drag and drop could solve the click count issue and
> wouldn't be very
> hard to implement given the existing code.
> Collaborators are welcome.
>
> hth, AE
>
> -=-=-
> ... Uzilla, LLC: "Tools for a Usable Web",
> http://uzilla.net
> Human Factors MS: http://people.clemson.edu/~kedmond
>

26 Feb 2004 - 4:19am
Andrei Herasimchuk
2004

On Feb 25, 2004, at 11:54 PM, Sandeep Jain wrote:

> Your example brought up another alternative which is
> to use checkboxes as radio-buttons (given how HTML
> works) next to each row

Why on earth would you use checkboxes for radio buttons? (IOW, why not
use radio buttons.)

Andrei Herasimchuk
andrei at adobe.com

work: http://www.adobe.com
personal: http://www.designbyfire.com

26 Feb 2004 - 6:26am
Marcin Wichary
2004

: (a) Provide a selection list with up and down arrows.
: - my.yahoo and my.msn does this.
:
: (b) Provide a text box next to each row, with an order
: number: 10, 20, 30. To move row 30 between 10 and 20,
: the user would have to change the number to 15.
: Netflix does this for re-ordering a list of DVDs.

What about
(c) Some sort of handle (icon) on each row and support of
drag and drop...?

(Probably the most difficult to program, though.)

Marcin Wichary
e:\> mwichary at aci.com.pl
w:\> www.aci.com.pl/mwichary >> Attached
w:\> www.aci.com.pl/mwichary/GUIdebook >> Graphical User Interface gallery
w:\> www.10yearsofbeingboring.com >> 10 years of Being Boring

26 Feb 2004 - 6:59am
Marcin Wichary
2004

: Didn't know drag-drop is supported on browsers.

It is, at least in Internet Explorer. It's far from
easy and natural to implement, but it is possible.
With necessary amount of dedication you could also
support continuous and non-continuous selections
(using the familiar Ctrl+click and Shift+click methods),
and then dragging with visual feedback during the drag.
It's all possible, but you would have to do it all
yourself (or find someone who already did it).

If I had to choose from (a) and (b), I would go for
(a) with short lists, and (b) with long lists -- but
being a computer scientist, I am perhaps slightly
biased when it comes to (b).

Of course, there's also a possibility of (a+b)?

Marcin Wichary
e:\> mwichary at aci.com.pl
w:\> www.aci.com.pl/mwichary >> Attached
w:\> www.aci.com.pl/mwichary/GUIdebook >> Graphical User Interface gallery
w:\> www.10yearsofbeingboring.com >> 10 years of Being Boring

25 Feb 2004 - 10:11pm
Andy Edmonds
2004

Sandeep Jain wrote:

>Context: let's say that a webpage has a set of panels
>for individual news sources...like my.yahoo.
>
>Problem: How to allow the user to edit the sequential
>order the panels? Assume that the user successfully
>navigates to the edit page.
>
>
>
I'd like to propose a 3rd alternative: use DHTML to allow users to
re-order rows.

Developed for Uzilla.net, I've open sourced a small library for enabling
this functionality:
http://surfmind.com/lab/table_reorder.cfm

It doesn't yet support drag and drop but is robust, working in IE,
Mozilla -- and probably Safari and Opera (feedback welcome). I'm not
exceptionally happy with the interaction design -- the targets in the
demo are too small for one thing. However, it offers the potential for
an improved look and feel over form widgets and more varied content
within the individual rows.

Drag and drop could solve the click count issue and wouldn't be very
hard to implement given the existing code. Collaborators are welcome.

hth, AE

-=-=-
... Uzilla, LLC: "Tools for a Usable Web", http://uzilla.net
Human Factors MS: http://people.clemson.edu/~kedmond

26 Feb 2004 - 7:15am
Dave Malouf
2005

My suggestion as well would be a d-and-d suggestion, so long as your
elements have obvious grabbers, and possibly a menu item on the portlet bar
called "move" ... This can "pop loose" the portlet making it more visibly
obvious that the user can grab it and drag it. There should also be an
indication of when the user released where the portlet would go.

Yes, you can do intra-browser d-n-d in both IE and Netscape ... Even in
Netscape 4 ... But the code is very different for the Netscape 4. IE 5+ and
Netscape 7 you could probably do in a single code line.

-- dave

26 Feb 2004 - 12:48pm
Chick Foxgrover
2003

I think d and d would be best, but there is an alternative to A and B
in case that's too hard to implement, where you choose and entry in a
list and then outside the list box are UP and DOWN buttons. By
clicking the UP button for instance you move that entry one position
for each click. You have the advantage of not having to move your
mouse or look to see where it is as the entry moves but still seeing
the resulting position. You can watch it's position move with out
thinking about where you're clicking in other words. Anyway I've
found that to be personally better than A or B.

At 7:15 -0500 2/26/04, David Heller wrote:
>My suggestion as well would be a d-and-d suggestion, so long as your
>elements have obvious grabbers, and possibly a menu item on the portlet bar
>called "move" ... This can "pop loose" the portlet making it more visibly
>obvious that the user can grab it and drag it. There should also be an
>indication of when the user released where the portlet would go.
>
>Yes, you can do intra-browser d-n-d in both IE and Netscape ... Even in
>Netscape 4 ... But the code is very different for the Netscape 4. IE 5+ and
>Netscape 7 you could probably do in a single code line.
>
>-- dave

26 Feb 2004 - 4:11pm
sandeepblues
2003

I don't understand how this is different from option
(a), in my original email.

Note that your solution is not useful, if in a list of
20 items, I have to move item 20 to item 1, or 19 to 2
etc.

Drag-n-drop seems like a huge pain to implement. There
are some JS libraries available, but they seem to move
images, not table rows...

Sandeep

--- Chick Foxgrover <cflists at foxpath.com> wrote:
> I think d and d would be best, but there is an
> alternative to A and B
> in case that's too hard to implement, where you
> choose and entry in a
> list and then outside the list box are UP and DOWN
> buttons. By
> clicking the UP button for instance you move that
> entry one position
> for each click. You have the advantage of not having
> to move your
> mouse or look to see where it is as the entry moves
> but still seeing
> the resulting position. You can watch it's position
> move with out
> thinking about where you're clicking in other words.
> Anyway I've
> found that to be personally better than A or B.
>
> At 7:15 -0500 2/26/04, David Heller wrote:
> >My suggestion as well would be a d-and-d
> suggestion, so long as your
> >elements have obvious grabbers, and possibly a menu
> item on the portlet bar
> >called "move" ... This can "pop loose" the portlet
> making it more visibly
> >obvious that the user can grab it and drag it.
> There should also be an
> >indication of when the user released where the
> portlet would go.
> >
> >Yes, you can do intra-browser d-n-d in both IE and
> Netscape ... Even in
> >Netscape 4 ... But the code is very different for
> the Netscape 4. IE 5+ and
> >Netscape 7 you could probably do in a single code
> line.
> >
> >-- dave
> _______________________________________________
> 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/

26 Feb 2004 - 4:31pm
sandeepblues
2003

That was based on an incorrect assumption about how
HTML radiobuttons work. I thought I had to group them
like HTML combo-boxes, and that would have been
difficult across rows of a table.

So, not a good reason on this earth for using
checkboxes as radiobuttons. :)

Sandeep

--- Andrei Herasimchuk <andrei at adobe.com> wrote:
> On Feb 25, 2004, at 11:54 PM, Sandeep Jain wrote:
>
> > Your example brought up another alternative which
> is
> > to use checkboxes as radio-buttons (given how HTML
> > works) next to each row
>
> Why on earth would you use checkboxes for radio
> buttons? (IOW, why not
> use radio buttons.)
>
> Andrei Herasimchuk
> andrei at adobe.com
>
> work: http://www.adobe.com
> personal: http://www.designbyfire.com
>
> _______________________________________________
> 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/

27 Feb 2004 - 4:43pm
Christian Simon
2003

After reading more posts I think I see the level of complexity you are
experiencing. Take a look at FileMaker's solution to sorting a list order.
see: http://www.neonbikini.com/list_order/
It is effective because 1, it is flexible for ordering a short list and a
long list. 2, the move function allows the user to choose the most important
items first, a more accurate activity (like a shopping basket) then
increasing the value of one item at a time (like a shopping list-ever try to
buy items in your shopping list in the order you write them?)

Good luck,
x

_________________________________________________________________
Christian Simon | www.christiansimon.com | San Francisco Bay Area
_________________________________________________________________

Syndicate content Get the feed