Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Zoomable Tree (a quicker way to navigate a tree)

    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.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Spudhead View Post
    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.

  • #4
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by TheShaner View Post
    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.

  • #6
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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

  • #7
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have developed an updated version based on input from users. You can see the updated version here.

    You can see what changes I made on my blog. I'll use my blog keep all who are interested informed.

    What do you think of the changes?

  • #10
    Regular Coder nolvorite's Avatar
    Join Date
    Dec 2006
    Posts
    176
    Thanks
    7
    Thanked 0 Times in 0 Posts
    you can do it by css...

  • #11
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nolvorite View Post
    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.

  • #12
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    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.
    Code:
    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

  • #13
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by TheShaner View Post
    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.
    Code:
    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, 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.
    Last edited by jerols; 05-11-2007 at 06:59 PM.

  • #14
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've made an updated version. I implemented Shanes suggestion (I think it helps) and made some overall speed improvements.

    See the updated version.

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by jerols View Post
    I've made an updated version. I implemented Shanes suggestion (I think it helps) and made some overall speed improvements.

    See the updated version.
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •