Here is a summary of the responses I got about hierarchical tree design for
Web apps.

======================================================
My original posting
======================================================
I’m working on the UI design for a web app that will include at least one
page having a tree hierarchy in the left nav panel and an information
display area in the main content area.  In “View” mode, when a user clicks
on a node in the tree hierarchy in the left nav panel, detailed information
about that node appears in the main content area.  I’m looking for
suggestions about how to design this without frames, since using frames is
definitely not intuitive to users.

The environment constraints my product team has:
1) Windows platforms only
2) IE for sure; Firefox, if I can convince the team to support both.
3) Javascript OK
4) No client-side Java; server-side Java is OK.
5) No .net
6) No .asp

Comments/suggestions/visuals?  Send them my way.

Claudia Case ([log in to unmask])


======================================================
Hierarchical Tree Designs - Products and Examples
======================================================

TwinHelix Design’s CheckTree-  http://www.twinhelix.com/dhtml/checktree/
Destroydrop’s dTree - http://www.destroydrop.com/javascripts/tree/
SoftComplex’s Tigra Tree Menu -
http://www.softcomplex.com/products/tigra_tree_menu/
Example of code using CSS without Javascript - http://tinyurl.com/96u3m
A List Apart - http://www.alistapart.com/

======================================================
Responses from CHI-Consultants and CHI-Web 
======================================================

I've been using dTree -- http://www.destroydrop.com/javascripts/tree
-- for something much like what you want to do.  It's free, and works quite
well.  It works fine with Windows and Mac, and IE, Firefox, and Safari.

I've built my pages with frames, where the tree view is in a narrow frame on
the left-hand side of the page and the document being viewed (it's HTML,
with the clicks in the tree view jumping the document from one anchor to
another) in a larger frame on the right.  I share your general hesitancy
about frames, but in this case I think it's ok
-- despite the frames, the page conceptually represents a single document,
and users move into and out of this "document viewer" as a unit.

Regards,
Jim Miller ([log in to unmask])

======================================================

You can do that using only CSS and Javascript. I did that recently, using a
tree menu that unfolds without opening a new page.  I think the user will
expect the tree to behave like it does on Windows platforms (using the + and
- signs to tell the user that the folder is open/closed).  I can send you a
working example if you like because I did something like this last month.

Ivo Gomes ([log in to unmask])

======================================================

You might want to take a look at CheckTree:  
http://www.twinhelix.com/dhtml/checktree/ and see if it does what you need.
There's a online demo at:   http://www.twinhelix.com/dhtml/checktree/demo/

Mitchell Gass ([log in to unmask])

======================================================
I think the standard way to approach this now is to use nested <UL> lists,
and style them into menus with CSS.

http://tinyurl.com/96u3m

Google "CSS navigation" and you should turn up lots of resources.

Try A List Apart too: http://www.alistapart.com/

Josh Seiden

======================================================

You might want to check the "Tigra menu" product. Notice that they call it
"menu" but, as it has levels, con also be termed "tree".
There is a tree example at:
http://www.softcomplex.com/products/tigra_tree_menu/
It works with "all" browsers.
The advantage I see is that it can be configured to look and feel much like
a regular desktop Windows tree gizmo.
There is a complementary online menu building service.
Good luck!
--
Juan Lanus ([log in to unmask])

======================================================
 
Claudia Alden Case
Usability Specialist

Alden Case Enterprise, Inc.
phone: (650) 592-4675 
email:  [log in to unmask]
web:    http://aldencase.com

    --------------------------------------------------------------
    Tip of the Day: Quote only what you need from earlier postings
     CHI-WEB: www.sigchi.org/web POSTINGS: mailto:[log in to unmask]
              MODERATORS: mailto:[log in to unmask]
       SUBSCRIPTION CHANGES & FAQ:  www.sigchi.org/web/faq.html
    --------------------------------------------------------------