The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

one-to-very-many interface in webapps


a question for the user interface gurus here: how would you build a (html) form element that allows the user to enter a relationship from one object to an unknown number of other objects.

Example: In a CD database, you might want to edit a CD, so you get a usual form where you can change the name, price whatever. You also want to change the tracks on the cd. The tracks were entered independently before (because they can be on more than one cd, think best-of-albums etc.). So you have to select those 8 tracks on this cd from a list of maybe a thousand tracks.

Currently, I have found two possibilities:

1) A popup with a normal list view where you can browse through multiple pages and select the relevant ones with checkboxes. Your selection is than passed back to the form with javascript.

2) Two select fields, one with all tracks and one with the selected ones and add->> and <<-remove buttons in between the two.

Any further suggestions are appreciated!


aesthetic mind
aesthetic mind
Thursday, January 27, 2005
Hmm, I would do it the other way around, based on the fact that most tracks are not on multiple albums.

Do the CD first, then enter the track for that CD. This is how 99% of people would expect it to work, IMHO.

It is not worth making the whole UI harder to use, just to support the occassional track that might be on more than one CD.

BTW, have you considered that some tracks appear on a CD more than once, with different mixes?
Nemesis Send private email
Thursday, January 27, 2005
uh, that CD-database was just an example. We're building a more complex application, but I wanted to use an example that isn't too complicated.

Of course, one could work around this requirement in a lot of cases.
aesthetic mind
Thursday, January 27, 2005
Easiest might be to list the parent on top.. and have people add children ..So Add Track as the first step.. and multiple add albums as the next step..

If you want to prevent typos while adding albums, you can get people to add tracks, add albums and link them through drop down list or something.. If you want to be fancy about it, you can code a drag and drop interface.. where user can choose an track and drap and drop multiple albums under it..
Vaidhy Send private email
Thursday, January 27, 2005
I prefer the pop-up child window. But then, at one past employer, that got rid of 10 copies of the same dropdown list that had about 2500 items in each drop down (users were selecting "which consultants worked on this project").
Thursday, January 27, 2005
i use 2) for a little baseball stat application. when populating the lineup for a particular game, you're given a list of all the players on the team and transfer them to that game's lineup using the <<< >>> interface.

when i've used the popup method, i'm never certain that what i'm selecting is going to get transferred back to the main page automatically. the apps never tell you, so you just have to assume and hope it works. the other way seems more explicit.
Thursday, January 27, 2005
Just me (Sir to you) Send private email
Thursday, January 27, 2005
I'd probably wimp out and admit that flat-html web apps don't work the same way "real" apps do.  If there were really thousands of "tracks", I'd probably have the user enter "associate tracks with this cd" mode, and then have a paged search interface to pick tracks to add to the cd.  Rather than have multiple selections on a single page (select one of these cds, select a bunch of these tracks to add to that cd), it would just be,"ok, I've picked this cd, now which of the tracks on this screen belong?  Can I just search for the tracks by a substring?"
Art Send private email
Thursday, January 27, 2005
For your exmaple... how about a drop down list for all CD then when user select it, go into the detail of that CD?

However, I think you should take a look of the existing website, then think about how can you improve the UI, then implement it.
Carfield Yim Send private email
Friday, January 28, 2005
I think the way Basecamp/Tada does this with its todo lists is the simplest and most intuitive I've seen.

Quite simply, they just a number of empty fields to fill in.

Fill in as many as you need and then move on.

The one thing basecamp is missing is a way to get more items if you need them.

It is obvious to the user and easy for the programmer.
Ged Byrne Send private email
Friday, January 28, 2005

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
Powered by FogBugz