Navigation for large numbers of children

mscahill's picture

They have: 13 posts

Joined: Mar 2009

What sort of navigation do you generally use when you have large numbers of child elements? Normally, I would find some sort of grouping, and do some sort of drop-down menu. The problem is this: there are 200+ children, many of which fall in multiple categories, and which not all users have access to. Any ideas?

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

navigating children

Welcome to TWF Laugh

can you be a little more specific?

mscahill's picture

They have: 13 posts

Joined: Mar 2009

Nice.

I have a reporting application. There are 200+ reports, each of which belong to one or more report groups. What would be an efficient way to navigate them. Right now I have one huge drop-down box. It makes it rather difficult to find a particular report.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

is it an online app? what is the programming language? can the reports be sorted by groups/categories by URL or otherwise? what about search? is there a database? what is the file system structure?

In Drupal I would use webforms/webform reports and faceted search... but you have already built it...

mscahill's picture

They have: 13 posts

Joined: Mar 2009

PHP/MySQL built on CodeIngniter. URL scheme is report/ID. There is no search currently. Filesystem is irrelevant.

What would those look like? Can you describe the basic concept?

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

How are the categories retrieved? I assume SQL data.

I never used CodeIgniter, it looks like a good lightweight framework but you are not doing lightweight work...

In Drupal you can create "virtual" URLs like report/categoryname/ID which would be a lot more helpful for you. Using taxonomy and pathauto.

http://drupal.org/project/webform
http://drupal.org/project/webform_report
http://drupal.org/project/faceted_search
http://drupal.org/project/pathauto
http://drupal.org/handbook/modules/taxonomy
http://drupal.org/handbook/config/contribmodules
I am happy using Drupal for about 80% of my projects - it is the
"Swiss Army Knife for Community Plumbing"

mscahill's picture

They have: 13 posts

Joined: Mar 2009

I'm less concerned about url structure, and more concerned with how users navigate the site. I'm looking for a better method of navigation.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

navigation is usually tied to urls

it all begins with the LOGIC

figure out, schematically or whatever works for you, the functions you need and how you want the UI to look & feel

build them from there

I would probably create the urls including the categories, either as virtual directories or at least as GET variables.

so, can you post a link? it helps to see what you're talking about

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Do all of these have to be on a navigation menu? Why can't you use a simple page of links, structured in organized lists? If I had that many links I would avoid having them all on one navigation structure. You could then use a Javascript quick filter to let users easily find the links they need (like I have on this page)

One way to decide if something needs to be on a navigation menu is to think about whether it needs to be always accessible or not. If it doesn't, then a link on a page or some other mechanism should be fine. In your case, do users commonly flip between different reports? Or do they just go in to look at one of them at a time? Or maybe read one, go back and read another?

Another option would be to do something with Javascript and/or Ajax where you could hide/show or dynamically load links based on user selections.

If reports are in multiple groups you could use a tagging type concept rather than manually listing each report multiple times.

Just some ideas - it's hard to be more specific without seeing the actual content and understanding how people will be using the site.

They have: 121 posts

Joined: Dec 2008

How about a JavaScript 'Tree Menu', e.g.:

http://www.treeview.net/treemenu/3fr_largetree.html

Cheers,
Shaggy.

mscahill's picture

They have: 13 posts

Joined: Mar 2009

Just to clarify, I'm asking for UI advice. That's the problem at hand.

Different sets of reports show up for each user. This is probably the hardest part of either a categorized list or a tree menu. I don't want to add unnecessary complexity.

@Megan Yes, users often pull 5-10 reports each morning, depending on their needs. Fast report switching is a must. An AJAX search might be a nice secondary navigation method, but I need a simple and concise way to display the navigation for users who already know what they want.

He has: 629 posts

Joined: May 2007

I'm a bit late to this party, but my recommendation would be to use a site map page with all your links on. Useful as a "404 Not Found" page as well.

I'd avoid trying to link everywhere from everywhere. In my opinion, this type of navigation indicates a design failure, where the structure of the site has not been completely thought through. Take a look at Amazon.com-- nary a drop-down nor flyout "tree menu" to be seen.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Yes, I was thinking about eCommerce sites as well. They need to present a large number of options. Usually they have the user progressively narrow down the options until they get to the narrowest category.

A few more ideas:

  • Use checkboxes on the navigation page to allow the user to choose the 5-10 reports they want to see today. These would then appear in the navigation menu, or navigate using a next/previous menu.
  • Have the application remember the user's most frequently accessed reports. Put these on the navigation menu.
  • Use an ajax powered search that brings up the options as the user types. Then they could just start typing the title of the report and related options would come up.
decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

Megan wrote:
  • Use checkboxes on the navigation page to allow the user to choose the 5-10 reports they want to see today. These would then appear in the navigation menu, or navigate using a next/previous menu.
  • Have the application remember the user's most frequently accessed reports. Put these on the navigation menu.
  • Use an ajax powered search that brings up the options as the user types. Then they could just start typing the title of the report and related options would come up.

all these are features of Drupal faceted search, plus autocomplete on the search form (there are a couple of modules that do that)

I use faceted search on a Lead Tracker site for an ad agency to track multiple online promo comapaigns. Faceted search exposes only the webform submission reports for a specific campaign to the user assigned to that campaign with a particular user role (account manager). A different user role (accounts rep) can see all the reports sorted by campaigns.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Um, decibel, we're not talking about Drupal right now, k?

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

We are talking about building navigation. OP is using Code Igniter, a "lightweight" framework and struggling with some categorical sorting of the reports.

I suggested Drupal as a solution in a previous post, and I just wanted to point out that the things Megan was talking about are available in Drupal using plug-in modules without any custom programming.

Perhaps OP is stuck with Code Igniter, but 75% of the success of a project is choosing the appropriate framework/platform.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

No, we're talking about designing navigation. It's not about the development framework.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

I disagree

If your development framework does not handle your navigation needs, then it is a poor choice - see?

We are talking very little about the design - it's all backend crap which depends on what is in the backend to begin with

otherwise, you are forced to add a timely/costly custom solution when selection of the proper framework/backend from the start would have been better

I just billed 7 hours for updating a website built with static asp files and one include for the nav menu. To change the header, I had to change the code in every page because the original code hard-coded the headers with all different images.

[yeah, I could have added some fancy innerHTML script - but now that all the pages reference the same image file, it's better than adding some obscure JavaScript]

On the other hand, if I built the same site, I may use a CMS with a theme and content nodes, or at the very least, I would code the headers of static pages as an include so they could be changed quickly and easily.

It all depends on the planning.

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

I disagree with your disagreement. You haven't used CI, and you don't know what this application is or does, beyond the several available reports OP talked about. Sounds like something highly custom to me, and (*gasp*) something not for Drupal.

If your development framework does not handle your navigation needs, then it is a poor choice - see?

False. Just because it doesn't hand it to you on a silver platter doesn't make it a poor choice.

I just billed 7 hours for updating a website built with static asp files and one include for the nav menu. To change the header, I had to change the code in every page because the original code hard-coded the headers with all different images.

So because a site isn't made with Drupal, then it means that it can't use a common header of other means of including templates, etc? Another false assumption.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

@pr0gr4mm3r

I wish you would read what I write before dismissing it... Sad

I suggested that Drupal with faceted search would be how I would implement the necessary filtering for the reports in multiple categories - you could use whatever you want. Faceted search can be set to produce results without submitting a search first, so it is not a regular "search" function.

I did suggest a standard include for headers - you must have missed that in your rush to attack me... Sad

I admit that I am a "Drupalist" - I was recently contacted by Acquia about joining the team - but I also use other packages, phpMotion, Wordpress, osCommerce, even - gulp - Joomla! and a good deal of my work is custom backend on sites built in DreamWeaver with no CMS.

I still maintain that it is important to make the proper selection of platform and framework when beginning a project or you can get stuck in a dead end with no exit except a custom-coded one.

Do you really disagree with that?

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

Alright, let's try this again after my evening meds (I haz a cold).

I did suggest a standard include for headers - you must have missed that in your rush to attack me...

The only reference I see in your posts is that innerHTML method. There are better ones before migrating the site to Drupal.

Bottom line is that the original question wasn't about which framework to use. We are getting off topic. So yes, I still disagree with your post.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

@pr0gr4mm3r

I'll give you the benefit of the doubt because you are "medicated"

decibel.places wrote:
On the other hand, if I built the same site, I may use a CMS with a theme and content nodes, or at the very least, I would code the headers of static pages as an include so they could be changed quickly and easily.

check it

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

Ok, one point for you. Still irrelevant to the topic though.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

pr0gr4mm3r wrote:
one point for you

naw, I don't care about "points" and winning

I care about being heard and understood

Navigation must be driven by some kind of logical classification of content - otherwise you end up with a flat list of links without any apparent organization

mscahill wrote:
Right now I have one huge drop-down box

Sounds like OP has precisely that problem...

Generally I determine the classification of content, decide the best backend way to sort it, then the best frontend UI to expose the sorted content

That is what I am talking about

and I am concerned that OP's choice of Code Igniter has led to a "dead end" because it lacks categories like more robust frameworks.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

decibel.places wrote:
If your development framework does not handle your navigation needs, then it is a poor choice - see?

But we don't know that it's not handling the needs, do we? He's just asking about how it should be designed, then he can see if it works with the framework or not.

Criticizing someone's choice of framework when he asked about a design problem is quite rude, actually.

mscahill - sorry this discussion has evolved in this direction. I hope you get some suitable answers to your original question and continue to post in other areas of the forum!

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

How are you selecting the report list? Are they hard-coded, or are they in a database table? Also, how are the permissions that determine the user access stored?

Since you are using a PHP framework, I am assuming that you have some PHP skills, correct?

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

pr0gr4mm3r wrote:
How are you selecting the report list? Are they hard-coded, or are they in a database table? Also, how are the permissions that determine the user access stored?

way, way up there mscahill said:

mscahill wrote:
PHP/MySQL built on CodeIngniter. URL scheme is report/ID. There is no search currently. Filesystem is irrelevant.

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

That's not what I'm looking for. I'm curious how the available reports are retrieved. Is it in an array like...

$reporte = array(1 => 'report1', 2 => 'report2');

Or selected from a database?

Depending on how the reports are retrieved, we can filter out the restricted report pages depending on the user's permissions. I can provide some PHP sample code once I know how this data is stored and retrieved.

mscahill's picture

They have: 13 posts

Joined: Mar 2009

Wow. Started a firestorm here.

First of all, building a reporting application on a CMS would be suicide. I have a lot more flexibility and speed with a custom solution. The reports can be developed through the web, via API, or via XML files (for desktop applications). I'm able to use SQL to display reports online, or provide CSV or XLS downloads with hotlinked drilldowns. That's really irrelevant to the conversation at hand. Reports are not pages, and so do not fit into the CMS model.

As far as reports, they are stored in the database. There is already authentication in place. Reports and users are assigned to groups. Users see only the reports that belong to the groups that they also belong to. This is already working, and doesn't need to change just to develop a better method of navigation.

The issue at hand is a conceptual one. Dividing reports into groups would be somewhat inefficient because reports belong to different groups. I'm really asking how to present a large number of links in a manner in which it is easy to find one particular report.

As far as selecting reports that users run most, this is already in place. The main reports page has two lists: the reports run most by the logged-in user in the past month, and the newest reports developed for the user base.

Tagging seems like an interesting proposition, although I think that it might be hard to find tags for reports. How do I differentiate the Geographic report from the ZIP code retrieval? Very similar language, but very different reports. Only the report name differentiates the two enough to know which one to pull.

I will say that tree navigation is the worst part of our existing ERP. Users don't know what category the report they are looking for would fall in, but they usually have a good idea of the name, and know exactly what it does. Having an AJAX search for report criteria might be the best bet. I was just looking for alternative methods of quick selecting a report.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

mscahill wrote:
Wow. Started a firestorm here.

np, we enjoy a lively debate here

mscahill wrote:
First of all, building a reporting application on a CMS would be suicide.

nope

consider this example of Drupal faceted search for an ad agency Lead Tracker web site. When a user with the "Buyer" role logs in, links to all the campaigns are displayed:

Another role, AccountExecutive, can only view the reports for the campaign(s) that s/he is running

This is the list of submissions for the Direct Buy webform. The results can be sorted by each column, ascending or descending

And this is a "table" view of the results, with each field's entry (this form has only one field: Location Near You, which is generated by matching the user-entered zipcode with a database of locations)

the webform reports can also be downloaded as csv or xls (Excel)

mscahill wrote:
I have a lot more flexibility and speed with a custom solution. The reports can be developed through the web, via API, or via XML files (for desktop applications).

you could build a car from parts too - but few people do

mscahill wrote:
I'm able to use SQL to display reports online, or provide CSV or XLS downloads with hotlinked drilldowns. That's really irrelevant to the conversation at hand. Reports are not pages, and so do not fit into the CMS model.

as shown, csv and xls download is provided for Drupal webforms. It sounds like your drilldown for the download could serve as a model for the navigation of page views?

mscahill wrote:
The issue at hand is a conceptual one. Dividing reports into groups would be somewhat inefficient because reports belong to different groups. I'm really asking how to present a large number of links in a manner in which it is easy to find one particular report.

in Drupal items can be assigned to multiple categories

mscahill wrote:
Tagging seems like an interesting proposition, although I think that it might be hard to find tags for reports. How do I differentiate the Geographic report from the ZIP code retrieval? Very similar language, but very different reports. Only the report name differentiates the two enough to know which one to pull.

free tagging allows for users to add tags that are meaningful to them

mscahill wrote:
Having an AJAX search for report criteria might be the best bet. I was just looking for alternative methods of quick selecting a report.

yes, this sounds good

have you looked at Google CSE?

I use it on my personal site:

mscahill's picture

They have: 13 posts

Joined: Mar 2009

I've used custom search on other web sites. This one happens to be an intranet page, however. As such it wouldn't be indexed unless we bought a search appliance. Probably a bit beyond the scope of this project.

It seems that search would be a good supplement to efficient navigation, but should I require a search for people to be able to use the site? What if they know exactly which report they are looking for, by name? In this case, how would you present the navigation? Funneling would only be viable if it were live, and responded organically. Perhaps I could use something like this:

http://www.jqueryui.com/demos/accordion/

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

an accordion or multi-level dhtml menu would be excellent

the example you linked presumably requires the entire jquery library

Dynamic Drive has some other menus that are more lightweight

At least I hope I made clear why I was talking about using Drupal -- maybe next time for you!

So it's an intranet... next you will tell us it's running on Windows 3.1 Sticking out tongue

mscahill's picture

They have: 13 posts

Joined: Mar 2009

No, thank God. CentoS on Dual Xeon box. Smiling

...and you've made it abundantly clear that you're a Drupal fanboy.

greg's picture

He has: 1,581 posts

Joined: Nov 2005

mscahill wrote:
...and you've made it abundantly clear that you're a Drupal fanboy.
And not just in this thread Sticking out tongue

Gimme a..

D
CHEER
R
CHEER
U
CHEER
P
CHEER
A
CHEER
L
CHEER

Waddya got? - DRUPAL wooot

Snigger

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

greg wrote:
mscahill wrote:
...and you've made it abundantly clear that you're a Drupal fanboy.
And not just in this thread :tongue:

I prefer Drupalist

What's wrong with a CMS that would have solved mscahill's situation without much configuration? Drupal is well suited for intranets too.

I use Drupal for about 85% of my projects, from ecommerce to video ratings to job boards, the ad agency Lead Tracker I posted above, as well as a Section 508 equipment procurement portal for the University of California that creates Word docs on the fly from webform submissions, and attaches them to emails - etc etc etc - what's wrong with using what works?

However, I am not exclusively a Drupalist - I mentioned some of the other apps I also use, as well as straight PHP and DHTML. Sometimes even ASP and once - only once - Lasso.

In my experience, the people who knock Drupal are the ones who are unable to make it sing. Wink

For anyone who thinks that Drupal has a certain "look" or limited function, check out these case studies - sure, anyone can put up a default installation with the Garland theme, but a true Drupal developer can mold the site to the functional specs as well as theme to any design. Here is a satellite page from the Lead Tracker backend I posted earlier, which is built in Drupal - without any Drupal front-end except for the embedded webform.

Besides, I do not need to remind you that TWF is Drupal... wait until I tell Jeeves, you're in trouble... Laugh

greg's picture

He has: 1,581 posts

Joined: Nov 2005

decibel.places wrote:
What's wrong with a CMS that would have solved mscahill's situation without much configuration? Drupal is well suited for intranets too.
As he currently doesn't use Drupal, how can you state it wont be too much configuration? To use Drupal, he would be changing the entire site code and structure to adapt it with a totally new CMS.
Styling, installation, new database and old one integrated, probably some new modules...

It's a bit like moving house 500 miles away just because you don't like the curtains in your current one.
All he wants is a navigation structure in his current site.

I know you love Drupal, and I have nothing against it myself, but it is a large learning curve and a good deal of time spent installing and configuring it.
It really isn't suitable for ALL situations, in fact, I'd go so far as saying it isn't the best choice for MOST situations.
(Start a new thread if you want to debate this, as this one has been hijacked enough now. I'll happily contribute to the debate)

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

I think I made it clear that I am not urging mscahill to "switch" to Drupal.

OP asked "What sort of navigation do you generally use when you have large numbers of child elements?" and I responded.

Other posters (including mods) attacked me and Drupal for no apparent reason and I felt it necessary to demonstrate the capabilities of Drupal in this area.

If I were asked to develop this site/app I might consider Drupal. I might use something else. I do not think I would choose Code Igniter, but that is a fait-accompli.

Comprenez-vous?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Nobody here is attacking you personally or Drupal. That's nice if you think it would be helpful for this user's problem. That doesn't mean you have to go on about it for 15 posts. One small suggestion would be fine, then leave it alone and let us focus on the problem at hand.

mscahill's picture

They have: 13 posts

Joined: Mar 2009

I'm all for what works for a specific application. Drupal ain't it for this application.

It looks like my best bet for this UI problem is some sort of Javascript UI library. This isn't the only use for such a library. I also have ordered lists, tabs, and other such hacks. I've been looking at the jQuery UI library, but like decibel said, it's quite heavy.

Any recommendations?

He has: 629 posts

Joined: May 2007

Nothing specific as to which library to use. I have used jQuery and the YUI library both. From that experience, I suggest deploying with a minimized version and making sure the files are sent gzipped. In my case I concatenated all the scripts, minimized the lot, and the gZipped result was pretty darn' fast.

Hope this helps.

http://developer.yahoo.com/yui/compressor/

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

mscahill's picture

They have: 13 posts

Joined: Mar 2009

I have mod_deflate, but not gzip. Should be similar results, correct?

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

If you can't group the reports together, then really the fastest way that I can think of would be an Ajax search, as long as the user knows the title of the report they want. If not, they can scan the list, and remember that title the next time they need it. Since jQuery was mentioned, check out this demo, which is powered by this script.

mscahill's picture

They have: 13 posts

Joined: Mar 2009

That looks like a good direction to head in. I'd only be able to do this on the main reports page, though. That page serves as kind of a portal for the rest of the application. Each report has the report drop-down list embedded in the top of it, though. There's got to be a better alternative than that. An accordion might take up too much space. I've attached an example.

mscahill's picture

They have: 13 posts

Joined: Mar 2009

Anyone know of a good tutorial for creating a jQuery-powered livesearch?

mscahill's picture

They have: 13 posts

Joined: Mar 2009

Wow. A month and a half later and much has changed. I've implemented live search functionality, which allows the user to search live for all sorts of stuff.

However, I'm still interested in primary navigation. The report groups could certainly by broken into smaller groups so that some sort of accordion or tree navigation could be made. My concern is still that users won't know what category a report falls under. So, I really need a better way to present the reports. Not exactly back to square one, but close. Smiling

They have: 10 posts

Joined: Sep 2009

I really like these nice information. I am excited about navigation of children.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.