Fog Creek Software
Discussion Board




Design this GUI

I need to design a GUI for a particular task.

I will try to describe it in abstract terms...

Imagine a list of items:
A
B
C
D
E

Each of these items can have different numbers of subitems.  How many subitems are allowable depends on the type of the item. e.g. item "A" might always have 1 subitem.  "B" might allow between 1 and 499 subitems, "C" might allow 0 to 26 subitems, D might allow 1-5 subitems etc.

e.g. so at a particular point in time you might have
A (item): A1
B (item): B1, B2, B3, B4
C (item): C1, C2, C3
D (item): D1, D2, D3

The GUI needs to allow the following operations on *subitems*:
- insert a new subitem anywhere in the list for that item
- delete a subitem (if the rules allow it)
- reorder subitems under a particular item (but not between items)

My mental block is two fold

1. It's not quite a tree

2. I have considered a two list approach. List #1 showing the items. List #2 showing the subitems for the selected item.

- I don't think this is very intuitive, e.g. you can't see all the subitems and items in one go

- I suppose there could be buttons to insert/delete subitems in list 2. They would gray out if an option was not allowable (e.g. you are showing item A's subitems in list 2, but as A must exactly one subitem, delete/insert gray automatically). Anyway my concern here is the rules are not intuitive or apparent from the lists.

- I can't figure out how reordering items should work. Suppose you have

B (item): B1, B2, B3, B4 ...etc... B100, B101 ...etc...

and you want to change it to

B (item): B1, B100, B2, B3, B4 ...etc... B101 etc...


Thoughts? Anyone?

S. Tanna
Tuesday, July 20, 2004

Is your name Sanjeev?


Wednesday, July 21, 2004

I've seen this as multiple lists next to each other, as you mention.

I also think of a favorites list where subitems are indented and you can drag new items into a spot and it shows a little line between the items where you're dropping it.

I think the 2nd one is the way to go.

Dennis Atkins
Wednesday, July 21, 2004

Often, it will depend on what tools you have.

Some times, just placing the two lists side by side (with your favorite listbox, or grid control) will do the trick.

Here is what I mean:

http://www.attcanada.net/~kallal.msn/Articles/Grid.htm

I mean, you could simply move the cursor to what row, and then whack insert (or, whatever means your control has to make room).


Albert D. Kallal
Edmonton, Alberta Canada
kallal@msn.com
http://www.attcanada.net/~kallal.msn

Albert D. Kallal
Wednesday, July 21, 2004

Depending on the specific application and use, could you use an Outlook-style sidebar on the left to display items A, B, C, D, etc., and in the body of the form use a grid/listview with add/edit/remove buttons below?

JWA
Wednesday, July 21, 2004

Use a tree, distinguish between item types with suitable icons. Refuse copy/paste/drag-drop operations between different item classes.

Mr Jack
Wednesday, July 21, 2004

Why not use ordered-node tree?  Isn't that completely obvious?

Explain to me why this is not a tree.  So it only has depth of 1 (depending on how you want to measure depth).  It's still a tree.

sir_flexalot
Wednesday, July 21, 2004

Sorry to double post, but any tree would let you see all the "items and subitems in one go". In your example, you show "all the items and subitems in one go" just by doing this:
A:A1,A2,A3
B:B1, B2
C:C3,C1,C2
so just display them like that!  What's the prob here?  You already showed us a perfectly fine interface.

sir_flexalot
Wednesday, July 21, 2004

Assuming a MS Windows target...

Mr Jack is pretty much correct. There are some subtleties, but basically it is a tree control/view. You have to code in some restrictions, that's all.

>- I can't figure out how reordering items
>should work. Suppose you have
>
>B (item): B1, B2, B3, B4 ...etc... B100,
>B101 ...etc...
>
>and you want to change it to
>
>B (item): B1, B100, B2, B3, B4 ...etc... B101
>etc

Drag and drop solves this (same restrictions will apply as for copy/paste). The closest thing I can think of as an example is the bookmark handling in Mozilla, which allows this ordering of bookmarks. There are articles on codeguru and codeplanet which explain how to implement drag and drop for a tree control.


Wednesday, July 21, 2004

Are you trying to make a boring task more complex than it needs to be ? If so, the dark side is tempting you. I think this is a known problem, use a standard solution. Your users will thank you in the long run.

Oh but I can't resist it, dammit ! I think the problem is to suggest to the user that there are free subitem slots & subitem list ordering.

In which case, represent them as empty items. So if A has five subitems allowed, do this

A
....subitem 1
....subitem 2
...<free>
...<free>
...<free>

If B has 200 subitems allowed, do this.

A
....subitem 1
....subitem 2
...<198 free>

I would represent this as a graphical treeview.


In order to re-order between nodes you must have extra attributes in each subitem, possibly different sets for each group of subitem. If you list these as subnodes, it will look a bit rubbish expecially if you can order by different attributes. I would have a list of those attributes past each subnode with the option to show/hide/display as subnodes.  Within that list of attributes for each subitem, I would allow the user to slide an attribute to a differnt position and thereby alter the sort-order.

Like this


A
... Subitem A  <| V <ZIP> <DOB> <ACCOUNTNO> <HATSIZE>

each attribute can slide <> to change the sort order.

mode 2

A
... Subitem A  |> V

mode 3

A
... Subitem A  <| |>
....... <ZIP>
....... <DOB>
....... <ACCOUNTNO>
....... <HATSIZE>

A right-click menu would give the same options. I would also allow cut and paste, multi-select and all the usual suspects, yada yada.


Go on, tell me how crap it is, I can hardly wait . . .

WoodenTongue
Wednesday, July 21, 2004

sorry, of course that should be

A
... Subitem A  <|^|>
....... <ZIP>
....... <DOB>
....... <ACCOUNTNO>
....... <HATSIZE>


;-)

WoodenTongue
Wednesday, July 21, 2004

Can someone please explain why this is not a tree?

Tapiwa
Wednesday, July 21, 2004

Thanks to all so far.

No, my name isn't Sanjeev to whoever asked.

1. Re-ordering: The reason I'm not to keen on drag and drop, is because there can be a lot of subitems under each item. For example, like I said, item A might have 499 subitems under it, and I don't know how users would react to dragging say subitem 499 up, say about 20-25 pages to place subitem 499 above subitem 1.

2. Not quite a tree: When I tried to reduce to abstract terms, I somehow ommitted a vital piece of the picture (sorry) in trying to simplify it.  It's more like a sort of tree-grid, but with one additional complication:

Each of the subitems has several attributes describing it. Most of the attributes don't change in this screen. One attribute *can sometimes* be automatically generated depending on the subitem's position in the sequence under the parent item (but isn't quite just the position). The way this attribute might be automatically generated, and whether it is automatically generated, depends on the type of the item.

For example:

Let's say that for items "A" and "B" they are of such a type, the subitems have an automatically generated attribute. But for item "C" there is no automatically generated attribute.

Let's also say that for item "A", the automatically generated attribute is generated one way, but for item "B" is generated another way.

Shown as a tree, with 3 attributes per subitem, with the potential automatic attribute first (I'm greatly simplifying what the automatic attribute's values might be)

A
  A1 (subitem): Auto=A Manual=BlahBlah Manual=BlahBlah
  A2 (subitem): Auto=B Manual=BlahBlah Manual=BlahBlah
  A3 (subitem): Auto=C Manual=BlahBlah Manual=BlahBlah
B
  B1 (subitem): Auto=1 Manual=BlahBlah Manual=BlahBlah
  B2 (subitem): Auto=2 Manual=BlahBlah Manual=BlahBlah
  B3 (subitem): Auto=3 Manual=BlahBlah Manual=BlahBlah
C
  C1 (subitem): Manual=BlahBlah Manual=BlahBlah Manual=BlahBlah
  C2 (subitem): Manual=BlahBlah Manual=BlahBlah Manual=BlahBlah
  C3 (subitem): Manual=BlahBlah Manual=BlahBlah Manual=BlahBlah

Now let's say you delete B2, and drag A3 before A1, this is what you get

A
  A3 (subitem): Auto=A Manual=BlahBlah Manual=BlahBlah
  A1 (subitem): Auto=B Manual=BlahBlah Manual=BlahBlah
  A2 (subitem): Auto=C Manual=BlahBlah Manual=BlahBlah
B
  B1 (subitem): Auto=1 Manual=BlahBlah Manual=BlahBlah
  B3 (subitem): Auto=2 Manual=BlahBlah Manual=BlahBlah
C
  C1 (subitem): Manual=BlahBlah Manual=BlahBlah Manual=BlahBlah
  C2 (subitem): Manual=BlahBlah Manual=BlahBlah Manual=BlahBlah
  C3 (subitem): Manual=BlahBlah Manual=BlahBlah Manual=BlahBlah

S. Tanna
Wednesday, July 21, 2004

For one idea on how to reorder a long list (when the goal, usually, is just to move one or a few items to the top) get a trial subscription at netflix.com, add a bunch of movies to your list, then sort. Basically, you just enter the new sort number in front of each item and press a button. Not elegant for massive sorts, but very elegant just to move two movies to the top of the pile.

Harvey Motulsky
Thursday, July 22, 2004

*  Recent Topics

*  Fog Creek Home