...

View Full Version : Zoomable Tree (a quicker way to navigate a tree)



jerols
05-09-2007, 12:21 AM
Recently I had an idea about a way to navigate through a tree that is quicker than the typical outliner. So over the past few days I did a javascript/prototype/scriptaculous implementation of the idea. Personally, I like the result, but before I spend more time on perfecting it and making it work on Internet Explorer, I would like to get opinions.

View an example here (http://jerols123.googlepages.com/ZoomableTree.html) .
It doesn't work in Internet Explorer at the moment.

Is it a good/bad idea? I wrote the code pretty quick so there are probably some bugs and room for improvement in the implementation. If you see any obvious things, you can mention them here.

Spudhead
05-09-2007, 05:04 PM
It's not a bad idea - reminds me of the Mac applications thingy that wobbles out as you mouseover it. Nice effect, anyhow. My two issues with it would be:

1. Nav systems generally have to fit within specific page real estate. It's difficult to see how this wouldn't encroach onto content. Having said that, someone else might not look at it and think "nav system" and hey presto, a use is born.
Actually, it's not a bad way of presenting an article in a "skim-readable" format. Although that brings me to:

2. Text gets way, way too small (on my FF2/WinXP). When you expand a sub-sub-submenu item, the main items are like the tiny spiders of obfuscation, dancing their mysterious dance across my browser. With fewer legs.

jerols
05-09-2007, 08:51 PM
It's not a bad idea - reminds me of the Mac applications thingy that wobbles out as you mouseover it. Nice effect, anyhow. My two issues with it would be:

1. Nav systems generally have to fit within specific page real estate. It's difficult to see how this wouldn't encroach onto content. Having said that, someone else might not look at it and think "nav system" and hey presto, a use is born.
Actually, it's not a bad way of presenting an article in a "skim-readable" format. Although that brings me to:

About encroaching on content: even in the example the text just flows within a div that is based on the browser width. You can see what happens when less space is given to it by resizing the browser window.

Another thought: If I use this in my web app it would be the primary interface for accessing a users information (wether it be notes, images, URLs, etc.). So in my app it wouldn't simply be a way to navigate to info but it would contain the info itself. One of the major reasons I've been experimenting with this interface is because I need an interface that can handle a tree of lots and lots of information quickly and simply.



2. Text gets way, way too small (on my FF2/WinXP). When you expand a sub-sub-submenu item, the main items are like the tiny spiders of obfuscation, dancing their mysterious dance across my browser. With fewer legs.
Yeah, it is at 2pt right now. That may change but the reason for that is that I need the zoomed out text to be small enough that a lot of it doesn't take space from the levels that the user is trying to focus on. At this point the text is only visible to let people know that it is there (not so that they can read it). Would it help if the small text would be enlarged to a readable size on mouseover?

Thanks for all the input.

TheShaner
05-09-2007, 10:11 PM
I really like the idea and it looks pretty nice! Congrats! But now comes the obvious flaw that I see.

As it stands, the main categories are large and each subcategory gets smaller and smaller. Great! I can see the main topics and start to get an idea where I can find what info and where, and use the cool zoom feature to narrow in on my search. But once zoomed on some minute subcategory, I've lost my main categories and must randomly click elsewhere to escape tiny word land, haha. Sure, the indenting helps to find the main topics, but it'd really be nice to read them.

Currently, I've clicked the sentence "Short side is n". I know the parent category is "30-60", but other than that, I have no idea where to go without clicking a main topic again so that I can view the other main topics. It would be nice to possibly still keep the main topics readable so that I can always find my way back and or embark on another search.

Good job though and hope to see more of this!

-Shane

jerols
05-09-2007, 10:14 PM
I really like the idea and it looks pretty nice! Congrats! But now comes the obvious flaw that I see.

As it stands, the main categories are large and each subcategory gets smaller and smaller. Great! I can see the main topics and start to get an idea where I can find what info and where, and use the cool zoom feature to narrow in on my search. But once zoomed on some minute subcategory, I've lost my main categories and must randomly click elsewhere to escape tiny word land, haha. Sure, the indenting helps to find the main topics, but it'd really be nice to read them.

Currently, I've clicked the sentence "Short side is n". I know the parent category is "30-60", but other than that, I have no idea where to go without clicking a main topic again so that I can view the other main topics. It would be nice to possibly still keep the main topics readable so that I can always find my way back and or embark on another search.

Good job though and hope to see more of this!

-Shane
Thanks for the encouraging input. I'll try to find a solution for the problem you described. If anybody has any ideas, let me know.

TheShaner
05-09-2007, 10:19 PM
If we could get this topic moved to the JavaScript forum, you would probably have the JS gurus jumping in to help you, but unfortunately, under this category, you won't find much coding help, hehe. I know enough JS to get by, but not enough to offer you any help on this subject. Sorry! Good luck!

-Shane

jerols
05-09-2007, 10:39 PM
I think I can figure out the javascript okay. What I'm looking for are ideas of how to solve the problem from the users perspective (not the coding perspective). So if you have any ideas, I'd like to hear em.

jkd
05-10-2007, 09:32 AM
It would be cool to also allow the traditional tree collapse/expand. When there is a bunch of tiny tiny text, I just want to collapse it and get rid of it entirely.

But maybe that is just me. :)

Cool stuff though.

jerols
05-11-2007, 06:01 PM
I have developed an updated version based on input from users. You can see the updated version here (http://jerols123.googlepages.com/ZoomableTree.html).

You can see what changes I made on my blog (http://wutworks.blogspot.com/). I'll use my blog keep all who are interested informed.

What do you think of the changes?

nolvorite
05-11-2007, 06:03 PM
you can do it by css...

jerols
05-11-2007, 06:25 PM
you can do it by css...
I do most of the styling using an external stylesheet but as far as I know, you can't do the text animation that way.

If anybody has any suggestions for the code, I am definitely open to them.

TheShaner
05-11-2007, 07:14 PM
The changes are definitely a step up in terms of user interface! Much more useful now. I'm glad you made the parents, grandparents, etc. in the tree recognizable in font size now. However, I would still possibly like to see all the main topics no matter where you are in the tree without having to hover, but that's just a personal opinion and it may start to take the very effect of the zoomable tree away.

Example - If you're in Detail 2 of SubTopic 1 of Topic 1, I would like to additionally see Topic 2, even though it's not in its direct tree lineage.

Topic 1
SubTopic 1
Detail 1
Detail 2
SubTopic 2
Detail 1
SubTopic 3
Topic 2
SubTopic 1
Detail 1
Detail 2
Detail 3
Think of the collapsible tree you see on pages like MSDN. No matter where you are in that tree, you can always see the main chapters, but only the details and subtopics of the branch you're in.

Great job man and keep it up!

-Shane

jerols
05-11-2007, 07:27 PM
The changes are definitely a step up in terms of user interface! Much more useful now. I'm glad you made the parents, grandparents, etc. in the tree recognizable in font size now. However, I would still possibly like to see all the main topics no matter where you are in the tree without having to hover, but that's just a personal opinion and it may start to take the very effect of the zoomable tree away.

Example - If you're in Detail 2 of SubTopic 1 of Topic 1, I would like to additionally see Topic 2, even though it's not in its direct tree lineage.

Topic 1
SubTopic 1
Detail 1
Detail 2
SubTopic 2
Detail 1
SubTopic 3
Topic 2
SubTopic 1
Detail 1
Detail 2
Detail 3
Think of the collapsible tree you see on pages like MSDN. No matter where you are in that tree, you can always see the main chapters, but only the details and subtopics of the branch you're in.

Great job man and keep it up!

-Shane
I see what you mean. I'll experiment with the sizes of the main topics and keep you updated.

I'm going to submit the ZoomableTree story to Ajaxian (http://www.ajaxian.com/), digg (http://www.digg.com), and maybe some other websites to try to get more input on the idea.

UPDATE:
The story is up on digg. Digging it (http://digg.com/programming/ZoomableTree_A_quicker_way_to_navigate_a_tree) would be appreciated. If it can get high enough on digg, I am sure a lot of good ideas will come out.

jerols
06-02-2007, 09:17 PM
I've made an updated version. I implemented Shanes suggestion (I think it helps) and made some overall speed improvements.

See the updated version (http://jerols123.googlepages.com/learnit.html).

abduraooft
06-06-2007, 10:48 AM
I've made an updated version. I implemented Shanes suggestion (I think it helps) and made some overall speed improvements.

See the updated version (http://jerols123.googlepages.com/learnit.html).

How would it feel if you change like
1)Zoom in on first click on any item
2)Zoom out on the second click.

I think the navigation would be more simplified as it reduce the requirement for scrolling considerably.

regards,
art



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum