movement in webpage lists

19 Jul 2004 - 9:30am
10 years ago
10 replies
356 reads
Florian Weber
2004

hi!

im having a list in a webpage like this:

- item 1
- item 2
- item 3
- sub-item 1
- item 4
- sub-item 1
- sub-item 2
-sub-sub-item 1

the user should be able to move any item in the list to any other
position. for example make 'sub-sub-item 1' be a a sub-item of 'item 1'

what would be a good solution to do this in html?

the only two things i can think of is:

make arrows next to each item which allow the user to move a item up or
down..

make a pulldown next to each item where the user can select what should
be
the new parent-item for the current one..

both solutions only work well for one situation. the first one for
really short
movements, the last one for longer ones.

can you guys think of any solution which works well for both cases?

thanks a lot for any tipp!

ciao!
florian

Comments

19 Jul 2004 - 10:06am
Dave Collins
2004

>im having a list in a webpage like this:
- item 1
- item 2
- item 3
- sub-item 1
- item 4
- sub-item 1
- sub-item 2
-sub-sub-item 1
>the user should be able to move any item in the list to any other
>position. for example make 'sub-sub-item 1' be a a sub-item of 'item 1'

One option: You could go with the '..act *directly* on the data..'
philosophy, and use DHTML to allow them to pick up and drop it on the
correct one.

Of course there are problems with this.
1] using DHTML that might not be supported,
2] instructing the user (this method has no affordance).

19 Jul 2004 - 10:08am
Andrei Sedelnikov
2004

Florian,

the best solution for your problem very much depends on, who your
users are and what kind of task they are performing by moving the
items. The solution for moving pages in CMS would be quite likely
different from the solution for, say, constructing a scientific
taxonomy tree. As long as you provide more detailed information, more
reasonable decisions can be made.

In the meantime, I can simply blindly propose two other solutions:

a) Drag&Drop, although it is usually cumbersome implemented in Web

b) Make it possbily to select one item - then you can place movement
controls outside of tree

andrei sedelnikov
http://usabilist.de/en/

On Mon, 19 Jul 2004 16:30:49 +0200, Florian Weber
<csshsh at structbench.com> wrote:
>
> hi!
>
> im having a list in a webpage like this:
>
> - item 1
> - item 2
> - item 3
> - sub-item 1
> - item 4
> - sub-item 1
> - sub-item 2
> -sub-sub-item 1
>
> the user should be able to move any item in the list to any other
> position. for example make 'sub-sub-item 1' be a a sub-item of 'item 1'
>
> what would be a good solution to do this in html?
>
> the only two things i can think of is:
>
> make arrows next to each item which allow the user to move a item up or
> down..
>
> make a pulldown next to each item where the user can select what should
> be
> the new parent-item for the current one..
>
> both solutions only work well for one situation. the first one for
> really short
> movements, the last one for longer ones.
>
> can you guys think of any solution which works well for both cases?
>
> thanks a lot for any tipp!
>
> ciao!
> florian
>
> _______________________________________________
> 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/
>

19 Jul 2004 - 10:21am
Ben Hunt
2004

As far as the mechanics of drag-and-drop go, Photoshop has a reasonable model in its layer sets:

- Dragging an object over another object highlights the entire object, drop makes it a child of the target object

- Dragging an object between two other objects brings up a highlighted bar between the two; dropping would make the dragged object either a child of the higher target (if higher is parent of lower), or a sibling of both (if higher and lower are peers).

Ben

Original Message:
>From: Andrei Sedelnikov <usabilist at gmail.com>
>To: Florian Weber <csshsh at structbench.com>
>Subject: Re: [ID Discuss] movement in webpage lists
>Date: Mon, 19 Jul 2004 17:08:41 +0200

>Florian,
>
>the best solution for your problem very much depends on, who your
>users are and what kind of task they are performing by moving the
>items. The solution for moving pages in CMS would be quite likely
>different from the solution for, say, constructing a scientific
>taxonomy tree. As long as you provide more detailed information, more
>reasonable decisions can be made.
>
>In the meantime, I can simply blindly propose two other solutions:
>
>a) Drag&Drop, although it is usually cumbersome implemented in Web
>
>b) Make it possbily to select one item - then you can place movement
>controls outside of tree
>
>andrei sedelnikov
>http://usabilist.de/en/
>
>
>
>On Mon, 19 Jul 2004 16:30:49 +0200, Florian Weber
><csshsh at structbench.com> wrote:
>>
>> hi!
>>
>> im having a list in a webpage like this:
>>
>> - item 1
>> - item 2
>> - item 3
>> - sub-item 1
>> - item 4
>> - sub-item 1
>> - sub-item 2
>> -sub-sub-item 1
>>
>> the user should be able to move any item in the list to any other
>> position. for example make 'sub-sub-item 1' be a a sub-item of 'item 1'
>>
>> what would be a good solution to do this in html?
>>
>> the only two things i can think of is:
>>
>> make arrows next to each item which allow the user to move a item up or
>> down..
>>
>> make a pulldown next to each item where the user can select what should
>> be
>> the new parent-item for the current one..
>>
>> both solutions only work well for one situation. the first one for
>> really short
>> movements, the last one for longer ones.
>>
>> can you guys think of any solution which works well for both cases?
>>
>> thanks a lot for any tipp!
>>
>> ciao!
>> florian
>>
>> _______________________________________________
>> 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/
>>
>_______________________________________________
>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/
>
>

19 Jul 2004 - 10:53am
Florian Weber
2004

> the best solution for your problem very much depends on, who your
> users are and what kind of task they are performing by moving the
> items. The solution for moving pages in CMS would be quite likely
> different from the solution for, say, constructing a scientific
> taxonomy tree. As long as you provide more detailed information, more
> reasonable decisions can be made.
>
> In the meantime, I can simply blindly propose two other solutions:
>
> a) Drag&Drop, although it is usually cumbersome implemented in Web
>
> b) Make it possbily to select one item - then you can place movement
> controls outside of tree

basically its exactly that. the list ist a list of pages for a cms.

drag and drop would be for sure the best solution. after all thats
what you use in 'normal' apps..

but do implement such a drag and drop solution for webpage is
very very complicated. i guess rather impossible to do well. most
of the things i saw in that area just didnt work properly, so at the
end you just didnt use them at all..

19 Jul 2004 - 9:47pm
Susan Mercer
2004

Depending on the technology that you are using, I'd suggest looking into
third-party or freeware/shareware controls.

We ran into a similar situation in the web-based application that I just
finished working on. The technology was .NET based, and we were able to
find a third-party tree control to implement with very limited additional
work.

We mimicked the Windows explorer look and feel, and all of the behaviors.
In usability testing during design, and the initial customer feedback
sessions, our users loved it because it was a familiar paradigm. They were
able to use it very quickly because they didn't need to relearn behaviors.

Do a quick Google search on tree controls, or DHTML drag and drop, and you
should be able to find things that you can re-use quickly.

Another option would be to include your items in a list box, and then let
the user move the items up and down. Keep track of the positioning on the
client-side, so you don't need to constantly page-refresh (this slows down
the process and makes it annoying). If the user gets the feedback quickly,
this design can work if you have small numbers of items (e.g. 10s, not
100s).

Even though the list box doesn't have any hierarchy built into it, you can
add it through data. Depending on the context of your data, one of the
following may work well:

a) item 1
item 2
item 3
-- sub item 1
Item 4
-- sub item 2

b) item 1
item 2
item 3
item 3 > sub item 1
item 4
item 4 > sub item 2

Just remember to size the width of the list box so that the maximum length
data string will not be cut off horizontally. Even if it scrolls, you don't
want users scrolling both horizontally and vertically.

If your constraints don't allow you to do direct drag and drop or tree
controls, then I'd recommend the option that several others have discussed -
selecting the item, then choosing where to put it. I would opt for a design
that lets the user directly choose where it should go - e.g. before the 3rd
item in the list.

Beware: if you use a design where users can move items only one position at
a time, make sure that the time between selecting the move and seeing the
visual feedback is very quick. We had that in earlier versions of our app
(with a page refresh between every movement), but users complained VERY
loudly about that. It was quite cumbersome to use, particularly because our
lists could get large (e.g. 50-200 items).

Good luck,
Susan Mercer

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.
com] On Behalf Of Florian Weber
Sent: Monday, July 19, 2004 10:53 AM
To: discuss-interactiondesigners.com at lists.interactiondesigners.com
Subject: Re: [ID Discuss] movement in webpage lists

> the best solution for your problem very much depends on, who your
> users are and what kind of task they are performing by moving the
> items. The solution for moving pages in CMS would be quite likely
> different from the solution for, say, constructing a scientific
> taxonomy tree. As long as you provide more detailed information, more
> reasonable decisions can be made.
>
> In the meantime, I can simply blindly propose two other solutions:
>
> a) Drag&Drop, although it is usually cumbersome implemented in Web
>
> b) Make it possbily to select one item - then you can place movement
> controls outside of tree

basically its exactly that. the list ist a list of pages for a cms.

drag and drop would be for sure the best solution. after all thats
what you use in 'normal' apps..

but do implement such a drag and drop solution for webpage is
very very complicated. i guess rather impossible to do well. most
of the things i saw in that area just didnt work properly, so at the
end you just didnt use them at all..

_______________________________________________
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/

28 Jul 2004 - 2:34pm
Svoboda, Eric
2004

Florian,

Is DHTML an option? MS Outlook Web Access, for one, lets you drag-n-drop
folders to reorder them. I've entertained trying to code something
similar - just haven't had the time to experiment. I'm sure someone has
done this already.

Flash or JVM would be an option, albeit not an 'HTML' option.

Eric

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
ers.com] On Behalf Of Florian Weber
Sent: Monday, July 19, 2004 9:31 AM
To: discuss-interactiondesigners.com at lists.interactiondesigners.com
Subject: [ID Discuss] movement in webpage lists

hi!

im having a list in a webpage like this:

- item 1
- item 2
- item 3
- sub-item 1
- item 4
- sub-item 1
- sub-item 2
-sub-sub-item 1

the user should be able to move any item in the list to any other
position. for example make 'sub-sub-item 1' be a a sub-item of 'item 1'

what would be a good solution to do this in html?

the only two things i can think of is:

make arrows next to each item which allow the user to move a item up or
down..

make a pulldown next to each item where the user can select what should
be the new parent-item for the current one..

both solutions only work well for one situation. the first one for
really short movements, the last one for longer ones.

can you guys think of any solution which works well for both cases?

thanks a lot for any tipp!

ciao!
florian

_______________________________________________
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/

Confidentiality Warning: This e-mail contains information intended only for the use of the individual or entity named above. If the reader of this e-mail is not the intended recipient or the employee or agent responsible for delivering it to the intended recipient, any dissemination, publication or copying of this e-mail is strictly prohibited. The sender does not accept any responsibility for any loss, disruption or damage to your data or computer system that may occur while using data contained in, or transmitted with, this e-mail. If you have received this e-mail in error, please immediately notify us by return e-mail. Thank you.

29 Jul 2004 - 4:02pm
Florian Weber
2004

> Is DHTML an option? MS Outlook Web Access, for one, lets you
> drag-n-drop
> folders to reorder them. I've entertained trying to code something
> similar - just haven't had the time to experiment. I'm sure someone has
> done this already.

dhtml is definatelly an option. the problem is though that i didnt find
any way to make it work on the common browsers (mozilla & ie). i guess
that ms outlook web access thing also only works with ie.

i tried to look for some flash components which allow such things,
but didnt find anything even close..

so basically im wondering if it wouldnt work to do this:

have a checkbox at the end of each row in the list. a pulldown at
the bottom where you can choose what you wanna do with those
rows (delete, move, etc) and a button next to it to execute the
action. if you choose move another pulldown will appear next
to the one with the actions. that pulldown will have all the possible
moving targets (other rows in the list). so you can pick one and
then click the 'move' button next to it.

what do you guys think about that?

for sure i would love to do it the natural way where you can just
drag rows around. but i think also the fact that it should allow to
drag more than one row might almost make a good working implementation
impossible..

thanks for any feedback!

ciao!
florian

29 Jul 2004 - 6:53pm
Dave Malouf
2005

Florian,

If Flash is an option, you can definitely do what you need to do.
You will have to build your own components (which is actually recommended by
almost everyone I have heard speak about working in Flash MX 2004) though.

As for a DHTML option that works in both IE and Mozilla, you should be able
to create a drag and drop system that works in both. My current site has one
tha tworks for both IE and Safari (I realize that is not Mozilla) but it is
not IE either. These browsers have the appropriate DOM to do what you need
to do.

Otherwise, I think you can go w/ your idea as a base, but then have arrow
buttons on the left or write. BTW, can I move multiple rows?

Another more basic solution might be to do ordering separate to viewing the
information. This is common for most portal setups I have seen. The actual
ordering is done using a listbox w/ arrow buttons.

-- dave

30 Jul 2004 - 4:23am
Florian Weber
2004

> If Flash is an option, you can definitely do what you need to do.
> You will have to build your own components (which is actually
> recommended by
> almost everyone I have heard speak about working in Flash MX 2004)
> though.

oh jeh, those flash mx 2004 people ; ) i have to admit i dont really
enjoying working
with flash much. i've been working with it for about 5 years now, but
only when
i'm absolutely forced to. its just so buggy. so i admit: i try to avoid
it..

> As for a DHTML option that works in both IE and Mozilla, you should be
> able
> to create a drag and drop system that works in both. My current site
> has one
> tha tworks for both IE and Safari (I realize that is not Mozilla) but
> it is
> not IE either. These browsers have the appropriate DOM to do what you
> need
> to do.

hm. i looked around for a bit and tried to find things like that. i
guess drag and
drop works. the problem is though how to select multiple rows for
dragging. i
didnt find any way to do that yet.. which kinda kills the idea : /

whats the url of your site, btw?

> Otherwise, I think you can go w/ your idea as a base, but then have
> arrow
> buttons on the left or write. BTW, can I move multiple rows?

you just check the checkboxes in the rows you wanna move, choose
'move' from the pulldown below the list, a new pulldown with possible
targets
will apear, you choose one of those and click another button next to it
to
move them.

right now i also have arrow buttons for one up, one down movement in
one list. i just wonder if i will keep those or not. i guess they are
usefull for
very small movements of just one row. but then again they might also
lead to confusion about how you move rows in general..

30 Jul 2004 - 1:11pm
Svoboda, Eric
2004

Florian,

Regarding dragging-and-dropping multiple items - it would just be an
extension of a single item drag scheme. You could, theoretically, script
to allow multiple select with a control key (Ctrl would be the standard
I suppose). Each ctrl-select would add an item to the 'dragged' object.

I don't have a personal site at the moment. I work for
www.martiztravel.com. Disclaimer: not my design!

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
ers.com] On Behalf Of Florian Weber
Sent: Friday, July 30, 2004 4:24 AM
To: 'Interaction Discussion'
Subject: Re: [ID Discuss] movement in webpage lists

> If Flash is an option, you can definitely do what you need to do.
> You will have to build your own components (which is actually
> recommended by almost everyone I have heard speak about working in
> Flash MX 2004) though.

oh jeh, those flash mx 2004 people ; ) i have to admit i dont really
enjoying working with flash much. i've been working with it for about 5
years now, but only when i'm absolutely forced to. its just so buggy. so
i admit: i try to avoid it..

> As for a DHTML option that works in both IE and Mozilla, you should be

> able to create a drag and drop system that works in both. My current
> site has one tha tworks usfor both IE and Safari (I realize that is
not
> Mozilla) but it is not IE either. These browsers have the appropriate
> DOM to do what you need to do.

hm. i looked around for a bit and tried to find things like that. i
guess drag and drop works. the problem is though how to select multiple
rows for dragging. i didnt find any way to do that yet.. which kinda
kills the idea : /

whats the url of your site, btw?

> Otherwise, I think you can go w/ your idea as a base, but then have
> arrow buttons on the left or write. BTW, can I move multiple rows?

you just check the checkboxes in the rows you wanna move, choose 'move'
from the pulldown below the list, a new pulldown with possible targets
will apear, you choose one of those and click another button next to it
to move them.

right now i also have arrow buttons for one up, one down movement in one
list. i just wonder if i will keep those or not. i guess they are
usefull for very small movements of just one row. but then again they
might also lead to confusion about how you move rows in general..

_______________________________________________
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/

Confidentiality Warning: This e-mail contains information intended only for the use of the individual or entity named above. If the reader of this e-mail is not the intended recipient or the employee or agent responsible for delivering it to the intended recipient, any dissemination, publication or copying of this e-mail is strictly prohibited. The sender does not accept any responsibility for any loss, disruption or damage to your data or computer system that may occur while using data contained in, or transmitted with, this e-mail. If you have received this e-mail in error, please immediately notify us by return e-mail. Thank you.

Syndicate content Get the feed