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 . 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.
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.
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.
Quote:
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?
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.
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.
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!
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.
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.
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.
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.
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.
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, digg, and maybe some other websites to try to get more input on the idea.
UPDATE:
The story is up on digg. Digging it would be appreciated. If it can get high enough on digg, I am sure a lot of good ideas will come out.
Before you post, read our: 
