Hierarchical gui and multiselection

10 Aug 2004 - 4:50pm
10 years ago
13 replies
1132 reads
sandeepblues
2003

What would be a reasonable web-based design for the
problem below, that doesn't assume Flash?

(1)Suppose that there is an N-level hierarchical set
of items, and you want the user to navigate through
the hierarchy till there are a set of children items
that the user wants.

(2)At this point, the user would like to multi-select
items at that level.

(3)However, the domain is such that the user should
not be allowed to select items from multiple parents.

(4) It's probably not very useful to have many
roundtrips to the server, each time a parent item is
opened.

I came up with a Javascript design which is
conventional in Windows, but unconventional in HTML,
as follows.

The design is essentially an icon-less, Windows
Explorer, without any treeview on the left, and the
itemview would be in list view.

Details -> There would be a combo-box listing the
parents going up to the root of the tree, and a
selection box, below it, which shows the children for
the current parent. The combo-box will always display
the current parent. Any item in the selection box
which is also a parent would have an ellipsis (...)
next to its name. Also, to the right of the combo box
would be 2 buttons with an "Up" icon and text, and to
the right of the selection box, there would be a
"Down" icon and text to step through the hierarchy.

Bad design? Is there something more conventional that
could be used?

If I were to remove constraint (4), would your design
change? Would you design be different if N(levels)=5?

Sandeep

Comments

10 Aug 2004 - 11:18pm
Amit Deshpande
2004

Hi Sandeep,

(2)At this point, the user would like to multi-select
items at that level.

You could use layers.

(3)However, the domain is such that the user should
not be allowed to select items from multiple parents.

You can use a tabbed interface, something like Yahoo! maybe?
When one clicks on Web, or Images, the previous data is still there,
and there is further scope for manipulation. Look to the left and right
of the search field to see what I want to put across.

(4) It's probably not very useful to have many
roundtrips to the server, each time a parent item is
opened.

This way you can load all the stuff at the same time. If you have a
gmail.com account you would know well. It does a good job at that.

Cheers,

Amit Deshpande
http://www.amitdeshpande.com

11 Aug 2004 - 4:13am
Martyn Jones BSc
2004

A possible solution (that would require multiple requests to the server),
would be to arrange a series of drop-downs, each representing a level in the
information hierarchy.

By default, only the first drop-down is populated. After a selection is
made, the next drop-down in the series is populated with the relevant items.

The penultimate selection could result in a grouping of checkboxes being
displayed.

Obvious downsides to this approach: takes up quite a chunk of screen space +
you'd have to allocate the total screen space (i.e. for checkboxes etc)
right at the beginning of the users search. Also, it's probably not good if
it is likely that the user will be jumping up and down through the
hierarchies.

I think the main thing to implement would be something visually different
for the final multi-selection, i.e. to indicate that a slightly different
form of selection is required.

Martyn

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.
com] On Behalf Of Sandeep Jain
Sent: 10 August 2004 22:51
To: id-discuss
Subject: [ID Discuss] Hierarchical gui and multiselection

What would be a reasonable web-based design for the
problem below, that doesn't assume Flash?

(1)Suppose that there is an N-level hierarchical set
of items, and you want the user to navigate through
the hierarchy till there are a set of children items
that the user wants.

(2)At this point, the user would like to multi-select
items at that level.

(3)However, the domain is such that the user should
not be allowed to select items from multiple parents.

(4) It's probably not very useful to have many
roundtrips to the server, each time a parent item is
opened.

I came up with a Javascript design which is
conventional in Windows, but unconventional in HTML,
as follows.

The design is essentially an icon-less, Windows
Explorer, without any treeview on the left, and the
itemview would be in list view.

Details -> There would be a combo-box listing the
parents going up to the root of the tree, and a
selection box, below it, which shows the children for
the current parent. The combo-box will always display
the current parent. Any item in the selection box
which is also a parent would have an ellipsis (...)
next to its name. Also, to the right of the combo box
would be 2 buttons with an "Up" icon and text, and to
the right of the selection box, there would be a
"Down" icon and text to step through the hierarchy.

Bad design? Is there something more conventional that
could be used?

If I were to remove constraint (4), would your design
change? Would you design be different if N(levels)=5?

Sandeep
_______________________________________________
Interaction Design Discussion List
discuss at ixdg.org
--
to change your options (unsubscribe or set digest): http://discuss.ixdg.org/
--
Questions: lists at ixdg.org
--
Announcement Online List (discussion list members get announcements already)
http://subscribe-announce.ixdg.org/
--
http://ixdg.org/

11 Aug 2004 - 5:21am
Jerry John
2004

don't you think that this task will too cumbersome and intern well loose
focus...

what about a model where in a single dropdown; you can drill down into the
second and third lever; some thing like what Microsoft does
Program>Macromedia>Deamweaver - any think more than this; well again the
audience looses focus ...if you have information that needs to go down
another level! then this calls for a revisiting IA ...

Jerry

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
ers.com]On Behalf Of Martyn Jones BSc
Sent: Wednesday, August 11, 2004 2:43 PM
To: 'Sandeep Jain'; 'id-discuss'
Subject: RE: [ID Discuss] Hierarchical gui and multiselection

A possible solution (that would require multiple requests to the server),
would be to arrange a series of drop-downs, each representing a level in the
information hierarchy.

By default, only the first drop-down is populated. After a selection is
made, the next drop-down in the series is populated with the relevant items.

The penultimate selection could result in a grouping of checkboxes being
displayed.

Obvious downsides to this approach: takes up quite a chunk of screen space +
you'd have to allocate the total screen space (i.e. for checkboxes etc)
right at the beginning of the users search. Also, it's probably not good if
it is likely that the user will be jumping up and down through the
hierarchies.

I think the main thing to implement would be something visually different
for the final multi-selection, i.e. to indicate that a slightly different
form of selection is required.

Martyn

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.
com] On Behalf Of Sandeep Jain
Sent: 10 August 2004 22:51
To: id-discuss
Subject: [ID Discuss] Hierarchical gui and multiselection

What would be a reasonable web-based design for the
problem below, that doesn't assume Flash?

(1)Suppose that there is an N-level hierarchical set
of items, and you want the user to navigate through
the hierarchy till there are a set of children items
that the user wants.

(2)At this point, the user would like to multi-select
items at that level.

(3)However, the domain is such that the user should
not be allowed to select items from multiple parents.

(4) It's probably not very useful to have many
roundtrips to the server, each time a parent item is
opened.

I came up with a Javascript design which is
conventional in Windows, but unconventional in HTML,
as follows.

The design is essentially an icon-less, Windows
Explorer, without any treeview on the left, and the
itemview would be in list view.

Details -> There would be a combo-box listing the
parents going up to the root of the tree, and a
selection box, below it, which shows the children for
the current parent. The combo-box will always display
the current parent. Any item in the selection box
which is also a parent would have an ellipsis (...)
next to its name. Also, to the right of the combo box
would be 2 buttons with an "Up" icon and text, and to
the right of the selection box, there would be a
"Down" icon and text to step through the hierarchy.

Bad design? Is there something more conventional that
could be used?

If I were to remove constraint (4), would your design
change? Would you design be different if N(levels)=5?

Sandeep
_______________________________________________
Interaction Design Discussion List
discuss at ixdg.org
--
to change your options (unsubscribe or set digest): http://discuss.ixdg.org/
--
Questions: lists at ixdg.org
--
Announcement Online List (discussion list members get announcements already)
http://subscribe-announce.ixdg.org/
--
http://ixdg.org/

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

11 Aug 2004 - 2:14am
Harry Brignull
2004

Hi Everyone

I've often used PHP TreeMenu by Bjorge Dijkstra. It's not a great
solution because
windows explorer isn't the most usable thing in the world (I've seen
non-experts struggle with it). Also, links elsewhere in the page can
mess up this particular script. Still, it does what you're talking
about, and avoids all the compatibility problems of javascript, so you
can rely on it... here's a little example:

www.dynamo-interactive.com

I take Amit's point about avoiding round trips to the server like in
gmail - but in a way gmail is a special case. I for one had to download
a new browser for it to work properly (firefox instead of my usual
safari), but obviously I was highly motivated since a free gig of space
is not to be sniffed at. If it was an ecommerce site (etc) I would have
just gone somewhere else...

anyway, cheers, this looks like an interesting group

- Harry
www.harrybrignull.com

On Tuesday, August 10, 2004, at 10:50 PM, Sandeep Jain wrote:

> What would be a reasonable web-based design for the
> problem below, that doesn't assume Flash?
>
> (1)Suppose that there is an N-level hierarchical set
> of items, and you want the user to navigate through
> the hierarchy till there are a set of children items
> that the user wants.
>
> (2)At this point, the user would like to multi-select
> items at that level.
>
> (3)However, the domain is such that the user should
> not be allowed to select items from multiple parents.
>
> (4) It's probably not very useful to have many
> roundtrips to the server, each time a parent item is
> opened.
>
> I came up with a Javascript design which is
> conventional in Windows, but unconventional in HTML,
> as follows.
>
> The design is essentially an icon-less, Windows
> Explorer, without any treeview on the left, and the
> itemview would be in list view.
>
> Details -> There would be a combo-box listing the
> parents going up to the root of the tree, and a
> selection box, below it, which shows the children for
> the current parent. The combo-box will always display
> the current parent. Any item in the selection box
> which is also a parent would have an ellipsis (...)
> next to its name. Also, to the right of the combo box
> would be 2 buttons with an "Up" icon and text, and to
> the right of the selection box, there would be a
> "Down" icon and text to step through the hierarchy.
>
> Bad design? Is there something more conventional that
> could be used?
>
> If I were to remove constraint (4), would your design
> change? Would you design be different if N(levels)=5?
>
> Sandeep
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest):
> http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members get announcements
> already)
> http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/

11 Aug 2004 - 1:10pm
Mark Canlas
2003

It just sounds like a regular file-browsing type operation. Maybe you should
try looking at the Open/Save dialog used in Mac OS X (or Windows maybe?). I
think it uses a combination of breadcrumb trails and columns to browse
through multiple folders (levels), leaving the user only able to select from
the children of the current parent.

By the way, as for making round trips to the server, you could always store
the entire tree in a portable format and generate the menu on the fly, using
DHTML or whatever rendering engine. So, for a web interface, the time to
display the menu would be as fast as the client's computer (unlike a
PHP-based solution, which to me seems a bit too kludgy).

Mark Canlas
http://www.htmlism.com/mark/
-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.
com] On Behalf Of Sandeep Jain
Sent: Tuesday, August 10, 2004 5:51 PM
To: id-discuss
Subject: [ID Discuss] Hierarchical gui and multiselection

What would be a reasonable web-based design for the
problem below, that doesn't assume Flash?

(1)Suppose that there is an N-level hierarchical set
of items, and you want the user to navigate through
the hierarchy till there are a set of children items
that the user wants.

(2)At this point, the user would like to multi-select
items at that level.

(3)However, the domain is such that the user should
not be allowed to select items from multiple parents.

(4) It's probably not very useful to have many
roundtrips to the server, each time a parent item is
opened.

I came up with a Javascript design which is
conventional in Windows, but unconventional in HTML,
as follows.

The design is essentially an icon-less, Windows
Explorer, without any treeview on the left, and the
itemview would be in list view.

Details -> There would be a combo-box listing the
parents going up to the root of the tree, and a
selection box, below it, which shows the children for
the current parent. The combo-box will always display
the current parent. Any item in the selection box
which is also a parent would have an ellipsis (...)
next to its name. Also, to the right of the combo box
would be 2 buttons with an "Up" icon and text, and to
the right of the selection box, there would be a
"Down" icon and text to step through the hierarchy.

Bad design? Is there something more conventional that
could be used?

If I were to remove constraint (4), would your design
change? Would you design be different if N(levels)=5?

Sandeep
_______________________________________________
Interaction Design Discussion List
discuss at ixdg.org
--
to change your options (unsubscribe or set digest): http://discuss.ixdg.org/
--
Questions: lists at ixdg.org
--
Announcement Online List (discussion list members get announcements already)
http://subscribe-announce.ixdg.org/
--
http://ixdg.org/

12 Aug 2004 - 12:49pm
sandeepblues
2003

Precisely. This is a file-browsing style operation.
However, I have not seen that style of operation
represented in HTML design. My proposed solution is
the the Open dialog design, but inside a webpage.

My question is whether I am stepping on or ignoring
alternate web conventions by doing so. Instead of
icons for the folders, I was thinking of adding a
"..." to the end of items that a folders..since the
selectbox doesn't allow images.

Every time I come up with a novel idea, I get burnt by
marketing for not following conventions. This isn't a
"novel" idea, except in the context of web design for
this style of operation, I have not seen reasonable
alternatives.

Sandeep

--- Mark Canlas <mark at htmlism.com> wrote:

> It just sounds like a regular file-browsing type
> operation. Maybe you should
> try looking at the Open/Save dialog used in Mac OS X
> (or Windows maybe?). I
> think it uses a combination of breadcrumb trails and
> columns to browse
> through multiple folders (levels), leaving the user
> only able to select from
> the children of the current parent.
>
> By the way, as for making round trips to the server,
> you could always store
> the entire tree in a portable format and generate
> the menu on the fly, using
> DHTML or whatever rendering engine. So, for a web
> interface, the time to
> display the menu would be as fast as the client's
> computer (unlike a
> PHP-based solution, which to me seems a bit too
> kludgy).
>
> Mark Canlas
> http://www.htmlism.com/mark/
> -----Original Message-----
> From:
>
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
>
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.
> com] On Behalf Of Sandeep Jain
> Sent: Tuesday, August 10, 2004 5:51 PM
> To: id-discuss
> Subject: [ID Discuss] Hierarchical gui and
> multiselection
>
> What would be a reasonable web-based design for the
> problem below, that doesn't assume Flash?
>
> (1)Suppose that there is an N-level hierarchical set
> of items, and you want the user to navigate through
> the hierarchy till there are a set of children items
> that the user wants.
>
> (2)At this point, the user would like to
> multi-select
> items at that level.
>
> (3)However, the domain is such that the user should
> not be allowed to select items from multiple
> parents.
>
> (4) It's probably not very useful to have many
> roundtrips to the server, each time a parent item is
> opened.
>
> I came up with a Javascript design which is
> conventional in Windows, but unconventional in HTML,
> as follows.
>
> The design is essentially an icon-less, Windows
> Explorer, without any treeview on the left, and the
> itemview would be in list view.
>
> Details -> There would be a combo-box listing the
> parents going up to the root of the tree, and a
> selection box, below it, which shows the children
> for
> the current parent. The combo-box will always
> display
> the current parent. Any item in the selection box
> which is also a parent would have an ellipsis (...)
> next to its name. Also, to the right of the combo
> box
> would be 2 buttons with an "Up" icon and text, and
> to
> the right of the selection box, there would be a
> "Down" icon and text to step through the hierarchy.
>
> Bad design? Is there something more conventional
> that
> could be used?
>
> If I were to remove constraint (4), would your
> design
> change? Would you design be different if
> N(levels)=5?
>
> Sandeep
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest):
> http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members
> get announcements already)
> http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/
>
>

12 Aug 2004 - 1:16pm
Svoboda, Eric
2004

Sandeep-

I know you're trying to limit server trips, but is it really so
important to do so? If you could concede a little on this goal, it seems
that the easiest thing for a user to model would be the standard
drill-down menu with a breadcrumbs, with the final selection pages using
checkboxes. It's so widely used on the web that users will "get it"
instantly. I realize they'll also be getting a little latency as they
traverse this kind of menu, but it might be a good trade off to make for
keeping the experience simple.

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 Sandeep Jain
Sent: Thursday, August 12, 2004 12:49 PM
To: id-discuss
Subject: RE: [ID Discuss] Hierarchical gui and multiselection

Precisely. This is a file-browsing style operation.
However, I have not seen that style of operation represented in HTML
design. My proposed solution is the the Open dialog design, but inside
a webpage.

My question is whether I am stepping on or ignoring alternate web
conventions by doing so. Instead of icons for the folders, I was
thinking of adding a "..." to the end of items that a folders..since the
selectbox doesn't allow images.

Every time I come up with a novel idea, I get burnt by marketing for not
following conventions. This isn't a "novel" idea, except in the context
of web design for this style of operation, I have not seen reasonable
alternatives.

Sandeep

--- Mark Canlas <mark at htmlism.com> wrote:

> It just sounds like a regular file-browsing type operation. Maybe you
> should try looking at the Open/Save dialog used in Mac OS X (or
> Windows maybe?). I think it uses a combination of breadcrumb trails
> and columns to browse through multiple folders (levels), leaving the
> user only able to select from the children of the current parent.
>
> By the way, as for making round trips to the server, you could always
> store the entire tree in a portable format and generate the menu on
> the fly, using DHTML or whatever rendering engine. So, for a web
> interface, the time to display the menu would be as fast as the
> client's computer (unlike a PHP-based solution, which to me seems a
> bit too kludgy).
>
> Mark Canlas
> http://www.htmlism.com/mark/
> -----Original Message-----
> From:
>
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
>
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
ers.
> com] On Behalf Of Sandeep Jain
> Sent: Tuesday, August 10, 2004 5:51 PM
> To: id-discuss
> Subject: [ID Discuss] Hierarchical gui and multiselection
>
> What would be a reasonable web-based design for the problem below,
> that doesn't assume Flash?
>
> (1)Suppose that there is an N-level hierarchical set of items, and you

> want the user to navigate through the hierarchy till there are a set
> of children items that the user wants.
>
> (2)At this point, the user would like to multi-select items at that
> level.
>
> (3)However, the domain is such that the user should not be allowed to
> select items from multiple parents.
>
> (4) It's probably not very useful to have many roundtrips to the
> server, each time a parent item is opened.
>
> I came up with a Javascript design which is conventional in Windows,
> but unconventional in HTML, as follows.
>
> The design is essentially an icon-less, Windows Explorer, without any
> treeview on the left, and the itemview would be in list view.
>
> Details -> There would be a combo-box listing the parents going up to
> the root of the tree, and a selection box, below it, which shows the
> children for the current parent. The combo-box will always display
> the current parent. Any item in the selection box which is also a
> parent would have an ellipsis (...) next to its name. Also, to the
> right of the combo box would be 2 buttons with an "Up" icon and text,
> and to the right of the selection box, there would be a "Down" icon
> and text to step through the hierarchy.
>
> Bad design? Is there something more conventional that could be used?
>
> If I were to remove constraint (4), would your design change? Would
> you design be different if N(levels)=5?
>
> Sandeep
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest):
> http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members get announcements
> already) http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/
>
>

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

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.

12 Aug 2004 - 1:25pm
Mike Beltzner
2004

Sandeep,

One of my friends developed a content management system that had a
similar interaction requirement. A user could select a data source (from
a list of 1..n), then a category within that data source (from a list of
1..n) and then select 1..n records within that category.

He did this by using an interface that was based on Apple's new Finder
interface from OSX. In the following mockup, assume *text* is presented
as "selected" by being inverse colour on a blue background

Data Source | Category | Item |
------------------------------------------------|
source1 |*category1*****|*itemOne*******|
*source2********| category2 | itemTwo |
source3 | | itemThree |
| |*itemFour******|

He then had buttons that would enable/disable for operations like add,
edit and delete.

The entire interface was done in a cross-browser compliant fashion,
using CSS, DHTML and JavaScript.

cheers,
mike

Sandeep Jain wrote:

> Precisely. This is a file-browsing style operation.
> However, I have not seen that style of operation
> represented in HTML design. My proposed solution is
> the the Open dialog design, but inside a webpage.
>
> My question is whether I am stepping on or ignoring
> alternate web conventions by doing so. Instead of
> icons for the folders, I was thinking of adding a
> "..." to the end of items that a folders..since the
> selectbox doesn't allow images.
>
> Every time I come up with a novel idea, I get burnt by
> marketing for not following conventions. This isn't a
> "novel" idea, except in the context of web design for
> this style of operation, I have not seen reasonable
> alternatives.
>
> Sandeep
>
> --- Mark Canlas <mark at htmlism.com> wrote:
>
>
>>It just sounds like a regular file-browsing type
>>operation. Maybe you should
>>try looking at the Open/Save dialog used in Mac OS X
>>(or Windows maybe?). I
>>think it uses a combination of breadcrumb trails and
>>columns to browse
>>through multiple folders (levels), leaving the user
>>only able to select from
>>the children of the current parent.
>>
>>By the way, as for making round trips to the server,
>>you could always store
>>the entire tree in a portable format and generate
>>the menu on the fly, using
>>DHTML or whatever rendering engine. So, for a web
>>interface, the time to
>>display the menu would be as fast as the client's
>>computer (unlike a
>>PHP-based solution, which to me seems a bit too
>>kludgy).
>>
>>Mark Canlas
>>http://www.htmlism.com/mark/
>>-----Original Message-----
>>From:
>>
>
> discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
>
> [mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.
>
>>com] On Behalf Of Sandeep Jain
>>Sent: Tuesday, August 10, 2004 5:51 PM
>>To: id-discuss
>>Subject: [ID Discuss] Hierarchical gui and
>>multiselection
>>
>>What would be a reasonable web-based design for the
>>problem below, that doesn't assume Flash?
>>
>>(1)Suppose that there is an N-level hierarchical set
>>of items, and you want the user to navigate through
>>the hierarchy till there are a set of children items
>>that the user wants.
>>
>>(2)At this point, the user would like to
>>multi-select
>>items at that level.
>>
>>(3)However, the domain is such that the user should
>>not be allowed to select items from multiple
>>parents.
>>
>>(4) It's probably not very useful to have many
>>roundtrips to the server, each time a parent item is
>>opened.
>>
>>I came up with a Javascript design which is
>>conventional in Windows, but unconventional in HTML,
>>as follows.
>>
>>The design is essentially an icon-less, Windows
>>Explorer, without any treeview on the left, and the
>>itemview would be in list view.
>>
>>Details -> There would be a combo-box listing the
>>parents going up to the root of the tree, and a
>>selection box, below it, which shows the children
>>for
>>the current parent. The combo-box will always
>>display
>>the current parent. Any item in the selection box
>>which is also a parent would have an ellipsis (...)
>>next to its name. Also, to the right of the combo
>>box
>>would be 2 buttons with an "Up" icon and text, and
>>to
>>the right of the selection box, there would be a
>>"Down" icon and text to step through the hierarchy.
>>
>>Bad design? Is there something more conventional
>>that
>>could be used?
>>
>>If I were to remove constraint (4), would your
>>design
>>change? Would you design be different if
>>N(levels)=5?
>>
>>Sandeep
>>_______________________________________________
>>Interaction Design Discussion List
>>discuss at ixdg.org
>>--
>>to change your options (unsubscribe or set digest):
>>http://discuss.ixdg.org/
>>--
>>Questions: lists at ixdg.org
>>--
>>Announcement Online List (discussion list members
>>get announcements already)
>>http://subscribe-announce.ixdg.org/
>>--
>>http://ixdg.org/
>>
>>
>
>
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest): http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members get announcements already)
> http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/

12 Aug 2004 - 1:39pm
sandeepblues
2003

Thank you for your response.

Note that my initial post required N-levels of
hierarchy.

The example you describe has 3 levels. Also, this
design doesn't lend itself to a situation where the
user wants to select nodes that are parents. In other
words, the goal in your example is to specify items in
a category. But, suppose the goal is to pick a list of
categories. The presence of the items selection box
might confuse the user in that case.

Sandeep

--- Mike Beltzner <mike at beltzner.ca> wrote:

> Sandeep,
>
> One of my friends developed a content management
> system that had a
> similar interaction requirement. A user could select
> a data source (from
> a list of 1..n), then a category within that data
> source (from a list of
> 1..n) and then select 1..n records within that
> category.
>
> He did this by using an interface that was based on
> Apple's new Finder
> interface from OSX. In the following mockup, assume
> *text* is presented
> as "selected" by being inverse colour on a blue
> background
>
> Data Source | Category | Item |
> ------------------------------------------------|
> source1 |*category1*****|*itemOne*******|
> *source2********| category2 | itemTwo |
> source3 | | itemThree |
> | |*itemFour******|
>
> He then had buttons that would enable/disable for
> operations like add,
> edit and delete.
>
> The entire interface was done in a cross-browser
> compliant fashion,
> using CSS, DHTML and JavaScript.
>
> cheers,
> mike
>
> Sandeep Jain wrote:
>
> > Precisely. This is a file-browsing style
> operation.
> > However, I have not seen that style of operation
> > represented in HTML design. My proposed solution
> is
> > the the Open dialog design, but inside a webpage.
> >
> > My question is whether I am stepping on or
> ignoring
> > alternate web conventions by doing so. Instead of
> > icons for the folders, I was thinking of adding a
> > "..." to the end of items that a folders..since
> the
> > selectbox doesn't allow images.
> >
> > Every time I come up with a novel idea, I get
> burnt by
> > marketing for not following conventions. This
> isn't a
> > "novel" idea, except in the context of web design
> for
> > this style of operation, I have not seen
> reasonable
> > alternatives.
> >
> > Sandeep
> >
> > --- Mark Canlas <mark at htmlism.com> wrote:
> >
> >
> >>It just sounds like a regular file-browsing type
> >>operation. Maybe you should
> >>try looking at the Open/Save dialog used in Mac OS
> X
> >>(or Windows maybe?). I
> >>think it uses a combination of breadcrumb trails
> and
> >>columns to browse
> >>through multiple folders (levels), leaving the
> user
> >>only able to select from
> >>the children of the current parent.
> >>
> >>By the way, as for making round trips to the
> server,
> >>you could always store
> >>the entire tree in a portable format and generate
> >>the menu on the fly, using
> >>DHTML or whatever rendering engine. So, for a web
> >>interface, the time to
> >>display the menu would be as fast as the client's
> >>computer (unlike a
> >>PHP-based solution, which to me seems a bit too
> >>kludgy).
> >>
> >>Mark Canlas
> >>http://www.htmlism.com/mark/
> >>-----Original Message-----
> >>From:
> >>
> >
> >
>
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
> >
> >
>
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.
> >
> >>com] On Behalf Of Sandeep Jain
> >>Sent: Tuesday, August 10, 2004 5:51 PM
> >>To: id-discuss
> >>Subject: [ID Discuss] Hierarchical gui and
> >>multiselection
> >>
> >>What would be a reasonable web-based design for
> the
> >>problem below, that doesn't assume Flash?
> >>
> >>(1)Suppose that there is an N-level hierarchical
> set
> >>of items, and you want the user to navigate
> through
> >>the hierarchy till there are a set of children
> items
> >>that the user wants.
> >>
> >>(2)At this point, the user would like to
> >>multi-select
> >>items at that level.
> >>
> >>(3)However, the domain is such that the user
> should
> >>not be allowed to select items from multiple
> >>parents.
> >>
> >>(4) It's probably not very useful to have many
> >>roundtrips to the server, each time a parent item
> is
> >>opened.
> >>
> >>I came up with a Javascript design which is
> >>conventional in Windows, but unconventional in
> HTML,
> >>as follows.
> >>
> >>The design is essentially an icon-less, Windows
> >>Explorer, without any treeview on the left, and
> the
> >>itemview would be in list view.
> >>
> >>Details -> There would be a combo-box listing the
> >>parents going up to the root of the tree, and a
> >>selection box, below it, which shows the children
> >>for
> >>the current parent. The combo-box will always
> >>display
> >>the current parent. Any item in the selection box
> >>which is also a parent would have an ellipsis
> (...)
> >>next to its name. Also, to the right of the combo
> >>box
> >>would be 2 buttons with an "Up" icon and text, and
> >>to
> >>the right of the selection box, there would be a
> >>"Down" icon and text to step through the
> hierarchy.
> >>
> >>Bad design? Is there something more conventional
> >>that
> >>could be used?
> >>
> >>If I were to remove constraint (4), would your
> >>design
> >>change? Would you design be different if
> >>N(levels)=5?
> >>
> >>Sandeep
> >>_______________________________________________
> >>Interaction Design Discussion List
> >>discuss at ixdg.org
> >>--
> >>to change your options (unsubscribe or set
> digest):
> >>http://discuss.ixdg.org/
> >>--
> >>Questions: lists at ixdg.org
> >>--
> >>Announcement Online List (discussion list members
> >>get announcements already)
> >>http://subscribe-announce.ixdg.org/
> >>--
> >>http://ixdg.org/
> >>
> >>
> >
> >
> > _______________________________________________
> > Interaction Design Discussion List
> > discuss at ixdg.org
> > --
> > to change your options (unsubscribe or set
> digest): http://discuss.ixdg.org/
> > --
> > Questions: lists at ixdg.org
>
=== message truncated ===

12 Aug 2004 - 2:16pm
Mark Canlas
2003

Well, just how "nasty" is your hierarchy? How deep is it? Is it just
something where the number of items looks like this:

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

Or is it something really huge like a full-fledged file system on a user's
hard drive? If it's the former, then why not go for a pulldown menu
(option/select) and then have the contents of the chosen folder appear
dynamically. Otherwise, for larger trees, I don't see anything wrong with a
regular DHTML list, where clicking on item makes a new list expand beneath
it (kinda like spring loaded folders in os 9, I think).

By the way, I'm all for reducing the amount of trips to the server to zero
because it would make responsiveness to the GUI much faster.

Also, for Mike's example, the three columns could keep sliding along, not
limiting the structure to 3 levels deep. There would just have to be some
convention (breadcrumbs) to denote how deep the user is (see iTunes
breadcrumb bar).

Mark Canlas
http://www.htmlism.com/mark/

> -----Original Message-----
> From: discuss-interactiondesigners.com-
> bounces at lists.interactiondesigners.com [mailto:discuss-
> interactiondesigners.com-bounces at lists.interactiondesigners.com] On Behalf
> Of Sandeep Jain
> Sent: Thursday, August 12, 2004 2:40 PM
> To: Mike Beltzner
> Cc: id-discuss
> Subject: Re: [ID Discuss] Hierarchical gui and multiselection
>
> Thank you for your response.
>
> Note that my initial post required N-levels of
> hierarchy.
>
> The example you describe has 3 levels. Also, this
> design doesn't lend itself to a situation where the
> user wants to select nodes that are parents. In other
> words, the goal in your example is to specify items in
> a category. But, suppose the goal is to pick a list of
> categories. The presence of the items selection box
> might confuse the user in that case.
>
> Sandeep
>
>
> --- Mike Beltzner <mike at beltzner.ca> wrote:
>
> > Sandeep,
> >
> > One of my friends developed a content management
> > system that had a
> > similar interaction requirement. A user could select
> > a data source (from
> > a list of 1..n), then a category within that data
> > source (from a list of
> > 1..n) and then select 1..n records within that
> > category.
> >
> > He did this by using an interface that was based on
> > Apple's new Finder
> > interface from OSX. In the following mockup, assume
> > *text* is presented
> > as "selected" by being inverse colour on a blue
> > background
> >
> > Data Source | Category | Item |
> > ------------------------------------------------|
> > source1 |*category1*****|*itemOne*******|
> > *source2********| category2 | itemTwo |
> > source3 | | itemThree |
> > | |*itemFour******|
> >
> > He then had buttons that would enable/disable for
> > operations like add,
> > edit and delete.
> >
> > The entire interface was done in a cross-browser
> > compliant fashion,
> > using CSS, DHTML and JavaScript.
> >
> > cheers,
> > mike
> >
> > Sandeep Jain wrote:
> >
> > > Precisely. This is a file-browsing style
> > operation.
> > > However, I have not seen that style of operation
> > > represented in HTML design. My proposed solution
> > is
> > > the the Open dialog design, but inside a webpage.
> > >
> > > My question is whether I am stepping on or
> > ignoring
> > > alternate web conventions by doing so. Instead of
> > > icons for the folders, I was thinking of adding a
> > > "..." to the end of items that a folders..since
> > the
> > > selectbox doesn't allow images.
> > >
> > > Every time I come up with a novel idea, I get
> > burnt by
> > > marketing for not following conventions. This
> > isn't a
> > > "novel" idea, except in the context of web design
> > for
> > > this style of operation, I have not seen
> > reasonable
> > > alternatives.
> > >
> > > Sandeep
> > >
> > > --- Mark Canlas <mark at htmlism.com> wrote:
> > >
> > >
> > >>It just sounds like a regular file-browsing type
> > >>operation. Maybe you should
> > >>try looking at the Open/Save dialog used in Mac OS
> > X
> > >>(or Windows maybe?). I
> > >>think it uses a combination of breadcrumb trails
> > and
> > >>columns to browse
> > >>through multiple folders (levels), leaving the
> > user
> > >>only able to select from
> > >>the children of the current parent.
> > >>
> > >>By the way, as for making round trips to the
> > server,
> > >>you could always store
> > >>the entire tree in a portable format and generate
> > >>the menu on the fly, using
> > >>DHTML or whatever rendering engine. So, for a web
> > >>interface, the time to
> > >>display the menu would be as fast as the client's
> > >>computer (unlike a
> > >>PHP-based solution, which to me seems a bit too
> > >>kludgy).
> > >>
> > >>Mark Canlas
> > >>http://www.htmlism.com/mark/
> > >>-----Original Message-----
> > >>From:
> > >>
> > >
> > >
> >
> discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
> > >
> > >
> >
> [mailto:discuss-interactiondesigners.com-
> bounces at lists.interactiondesigners.
> > >
> > >>com] On Behalf Of Sandeep Jain
> > >>Sent: Tuesday, August 10, 2004 5:51 PM
> > >>To: id-discuss
> > >>Subject: [ID Discuss] Hierarchical gui and
> > >>multiselection
> > >>
> > >>What would be a reasonable web-based design for
> > the
> > >>problem below, that doesn't assume Flash?
> > >>
> > >>(1)Suppose that there is an N-level hierarchical
> > set
> > >>of items, and you want the user to navigate
> > through
> > >>the hierarchy till there are a set of children
> > items
> > >>that the user wants.
> > >>
> > >>(2)At this point, the user would like to
> > >>multi-select
> > >>items at that level.
> > >>
> > >>(3)However, the domain is such that the user
> > should
> > >>not be allowed to select items from multiple
> > >>parents.
> > >>
> > >>(4) It's probably not very useful to have many
> > >>roundtrips to the server, each time a parent item
> > is
> > >>opened.
> > >>
> > >>I came up with a Javascript design which is
> > >>conventional in Windows, but unconventional in
> > HTML,
> > >>as follows.
> > >>
> > >>The design is essentially an icon-less, Windows
> > >>Explorer, without any treeview on the left, and
> > the
> > >>itemview would be in list view.
> > >>
> > >>Details -> There would be a combo-box listing the
> > >>parents going up to the root of the tree, and a
> > >>selection box, below it, which shows the children
> > >>for
> > >>the current parent. The combo-box will always
> > >>display
> > >>the current parent. Any item in the selection box
> > >>which is also a parent would have an ellipsis
> > (...)
> > >>next to its name. Also, to the right of the combo
> > >>box
> > >>would be 2 buttons with an "Up" icon and text, and
> > >>to
> > >>the right of the selection box, there would be a
> > >>"Down" icon and text to step through the
> > hierarchy.
> > >>
> > >>Bad design? Is there something more conventional
> > >>that
> > >>could be used?
> > >>
> > >>If I were to remove constraint (4), would your
> > >>design
> > >>change? Would you design be different if
> > >>N(levels)=5?
> > >>
> > >>Sandeep
> > >>_______________________________________________
> > >>Interaction Design Discussion List
> > >>discuss at ixdg.org
> > >>--
> > >>to change your options (unsubscribe or set
> > digest):
> > >>http://discuss.ixdg.org/
> > >>--
> > >>Questions: lists at ixdg.org
> > >>--
> > >>Announcement Online List (discussion list members
> > >>get announcements already)
> > >>http://subscribe-announce.ixdg.org/
> > >>--
> > >>http://ixdg.org/
> > >>
> > >>
> > >
> > >
> > > _______________________________________________
> > > Interaction Design Discussion List
> > > discuss at ixdg.org
> > > --
> > > to change your options (unsubscribe or set
> > digest): http://discuss.ixdg.org/
> > > --
> > > Questions: lists at ixdg.org
> >
> === message truncated ===
>
> _______________________________________________
> Interaction Design Discussion List
> discuss at ixdg.org
> --
> to change your options (unsubscribe or set digest):
> http://discuss.ixdg.org/
> --
> Questions: lists at ixdg.org
> --
> Announcement Online List (discussion list members get announcements
> already)
> http://subscribe-announce.ixdg.org/
> --
> http://ixdg.org/

12 Aug 2004 - 2:18pm
Greg Petroff
2004

Being a non mac user anyone out there use the Mac OS X finder and find it
useful as a navigation tool?

Greg

Gregory Petroff
desk 212 383 4092
mobile 646 387 2841

-----------------------------------------
This message and its attachments may contain privileged and confidential information. If you are not the intended recipient(s), you are prohibited from printing, forwarding, saving or copying this email. If you have received this e-mail in error, please immediately notify the sender and delete this e-mail and its attachments from your computer.

12 Aug 2004 - 3:17pm
ldebett
2004

Greg,

For me, one of the most usable features of the Finder in OS X is the
"shortcut" bar on the left side where you can place any of your folders or
files for quick and easy access to it. Since it's on the left, it takes
advantage of the space available and can stack the names on top of each
other without taking up too much space (as opposed to writing them left to
right across the top).

99% of the time, I use it in Columns view so I can bounce around folders at
any level easily without having to navigate serially back up a breadcrumb
trail before forking down to another direction. And then if I need to
compare contents of multiple folders, I can Command Double Click on any
folder to open that folder in a new finder window.

Another nice feature is having the Search text box right in the Finder
window. It's immediate and dynamically filters through the contents of your
HD (or folder, or network) as you type.

~Lisa

-----------------------
Lisa deBettencourt
Senior User Interface Designer
Bose Corporation
508-766-6575

> ----------
>
> Being a non mac user anyone out there use the Mac OS X finder and find it
> useful as a navigation tool?
>
> Greg
>
> Gregory Petroff
> desk 212 383 4092
> mobile 646 387 2841
>
>
>

21 Aug 2004 - 11:09am
H Taylor
2004

Hi, Greg.

I'm not sure if anyone ever picked up on this.

I think the current OS X finder navigation model to be a pretty useful
solution. It had some kinks initially, but they seem to have most of
them worked out at this point.

What I like about it especially, in contrast to the "tree view", is
that the peers of your last selection remain visible, whereas in the
tree view, anything displayed below the selected item is immediately
pushed down out of the window as the current selection expands. They
may not be very clearly expressed, but if you play with a bit, you'll
see what I mean.

I also find that I use the similar horizontal, paned browsing mode in
the Eclipse IDE (Java Browsing Perspective, I believe it's called).

Does this help? Do you have specific questions?

- Hal

> Being a non mac user anyone out there use the Mac OS X finder and find
> it
> useful as a navigation tool?
>
>
>
> Greg
>
>
> Gregory Petroff
> desk 212 383 4092
> mobile 646 387 2841

Syndicate content Get the feed