Eliminating a long select list

[rogerd]

I'm working with a site that has an ASP generated drop-down select list at the top of the page. It's for locating categories of merchandise, of which there are dozens and dozens.

The owner really likes this select box, although I think the list is kind of long for easy user scrolling. Nevertheless, it must stay. Repositioning it to a different location, like below the main page content, isn't an option.

So, I'm looking for a way to keep the select box displayed where it is, but to get it off the HTML page. Would an external javascript file be the best way to go? It's a bit messy because the pages are part of a complex shopping cart system and the list itself is generated by a call to an external function in another ASP file. Any other clever ideas?

[papabaer]

Sounds like it may be getting a bit complex. Could you use multiple drop-downs? You could categorize and manage the content much easier and only occupy a small amount of additional space.

[mack]

What about using a JS drop down where it only offers so many options then moves to the side to offer more options

silly example :)

work
play
shop>> cloathing
sleep Books
home websites
crash windows xp
format

Hope that makes sence. :)

[Nick_W]

I don't understand why people like drop-downs so much (clients i mean)

I was on a site the other day and I was getting really upset because I couldn't work out how to get to the rest of the content. Then I saw this dumb dropdown! Think about it: I'm a very experienced user, I design websites for gods sake, and I got confused and almost left!

Nick

[rewboss]

Drop-down menus are actually pretty nifty if you have dozens and dozens of links but not much room to put them all in. But they also suffer from some major drawbacks, such as requiring JavaScript to be enabled.

I think they might make sense if used in addition to a more traditional navigation system, as a "Quick Jump To..." style thingy. So you might use the traditional system to drill down through the site (e.g. North America > USA > New York State > Albany), but also have a drop-down list of, say, the 50 most popular cities as a short-cut. That kind of thing. It gives people a choice as to how they browse the site, and as long as they have clear instructions and labels (being careful, for example, to make sure they can distinguish easily between Washington State and Washington DC), and it doesn't clutter your pages up too much... why not do it?

I guess if you did some nifty server-side programming and juggling with cookies you could have a kind of a Most Recently Used list as a drop-down. I've never seen this being done, I only just got the idea typing this. It intrigues me, I might see if I can implement it in some way.

One possibility for the future -- maybe -- is <optgroup>. You can group <option>s together like this:

<select>
<optgroup label="Wines">
<option>Cabernet sauvignon</option>
<option>Pinot noir</option>
<option>Chardonnay</option>
</optgroup>
<optgroup label="Non-alcoholic">
<option>Coca-cola</option>
<option>7-Up</option>
</optgroup>
</select>

This is new in HTML 4.0, I believe. Those browsers that currently support it render the labels as labels, so this appears something like this:

Wines
Cabernet Sauvignon
Pinot Noir
Chardonnay
Non-alcoholic
Coca-Cola
7-Up

It's possible that some future browsers may choose to render these as cascading menus, which would be an intersting solution to the problem we were originally discussing here. You can't nest <optgroup>s, however... which may be a blessing.

[ergophobe]

I'm not sure I agree with this (I usually like drop downs), but if you want to make one last try at dissuading your client, you might quote [run for cover] Jakob Nielsen at him:

"American Airlines' approach reduces the vast majority of site features to a set of pull-down menus that are difficult to navigate: Users can never see the full set of features ... becuase they can pop up only a single menu item at a time. And many of the menus are so long that they require scrolling, menaing that users can't even view the entire list of options in a menu at a single glance. Thus, American Airlines' approach works only if the two highlighted features, in fact, account for almost all use of the site."

J.N., Designing Web Usability, p. 171.

Tom

[moonbiter]

So, I'm looking for a way to keep the select box displayed where it is, but to get it off the HTML page. Would an external javascript file be the best way to go? It's a bit messy because the pages are part of a complex shopping cart system and the list itself is generated by a call to an external function in another ASP file. Any other clever ideas?

Mmm, well, I'm not sure exactly what your goal is here. Why do you want to move the select element off of the asp/html? Is it because you are having dozens and dozens of option tags in the mark up? Or when you say "get it [the select box] off the HTML page" are you talking moving the displayed select element off of the page (and into another window/frame or something)?

In some of the intranet apps that I'm currently working on what we do is put a blank select element with an id in the page where the list is supposed to go and then generate the options on the list dynamically with javascript. So, for instance, with a select element with an id="listSelect" we can loop through some imported XML data and populate a list of names with unique IDs like so:

for(var i = 0; i < objNodeList.length; i++){
objNode = objNodeList.item(i);
objSub = objNode.selectSingleNode("name");
if(objSub)strName = objSub.text;
objSub = objNode.selectSingleNode("id");
if(objSub)strID = objSub.text;
opt = new Option(strName,strID);
document.getElementById('listSelect').options[i]=opt;
}

We have also done similar things with XSLT for XML data, and it seems to work well.

But my comments are probably useless because I'm not sure what the real goal is here.

[buckworks]

I have used external .js files for drop-down menus on a number of sites now and I'm pleased with how it works. The menu that appears on dozens of pages can be quickly updated in one place. Another benefit is that caching combined with reduced code clutter makes it a bit faster for visitors to move around the site. Each page has the drop menu, plus a bread-crumb trail for non-javascript navigation. I have good Google ranks for some reasonably competitive terms, so it doesn't seem to hurt anything SEO-wise.

[rogerd]

Sorry if I wasn't clear about the objective. I'm assuming that the drop-down box and its general location are a given, although this is probably one of the few times I'd agree with Jakob Nielsen! (Thanks for the quote, ergo, it's right on the money!)

Here's the problem: If I look at the HTML (as a spider would), I've got big pile of options that appear above my main text. I.e., if my page is about "Blue Widgets", I've got my title "Buy Blue Widgets Cheap", my metas, etc., but before I get to my text that describes our Blue Widget product line, a spider encounters a long list of "Plastic Widgets", "Fuzzy Gizmos", etc., I'm thinking instead about inserting it via an external javascript file that robots would ignore. This would lighten up the page size and get rid of the distracting and lengthy list at the same time. At least, that's my current thought... I haven't sorted out how the js will interact with the dynamically generated option list yet. I suppose another way to handle it would be to set the generated content up as js in the page inself - that wouldn't lighten the page, but the spiders might be more inclined to ignore it. Conventional wisdom says, though, that a bunch of js at the beginning of the page is a bad thing...

[moonbiter]

Okay, that makes sense. Something like the example I gave above is one way of doing it, I think, because the only thing that appears in your html would be the empty select element and the included js.

Of course, a spider won't have any links at all to follow through your site if you generate all of your links dynamically like this ...

[Rhys]

My current practice is to position things on the page with DIV tags using the position absolute qualifier.
This means then that I can put a nice juicy spider feast of words at the top of the BODY code but it will actually appear somewhere further down on the screen.
Using this system , you can position all your drop down SCRIPT code at the bottom of the page if you want, but still have menus appear at the top.
Another method is to just put the SCRIPT in a separate page and call it with a
<SCRIPT LANGUAGE="JavaScript" src="bloated_script.js"> </SCRIPT> call.

[rogerd]

Yeah, that low-tech approach was kind of what I had in mind, Rhys, but I haven't actually tested it. Some of the others look like a good way to deal with the dynamic content.

I don't think the Option Group approach would work for this particular site (it's mostly a long alphabetical list with no easy way to categorize the items), but that is an intriguing idea - what do older browsers do, newboss, ignore the optgroup tag?

Thanks for the suggestions, everyone.

[lorax]

You could also write the page with PHP (or someother script language) and use browser detection in combination with a file include. The detection code would look for SEs and wouldn't run the include statement if it were visited by an SE. But this may not be as elegant a solution as the others that have been offered. ;)

[rewboss]

what do older browsers do, newboss, ignore the optgroup tag?

Browsers are required to ignore any tag they don't understand; that ensures at least some measure of backwards compatibility. (It also makes some typos pretty hard to find, which is one reason we need validators.) Older browsers will give you a standard list of options without the groupings and without inserting any extra labels etc.

<optgroup> may be one of the most underused tags in HTML. People still use ordinary <option>s to divide drop-down lists into categories with extra JavaScript widgets to make sure they don't get submitted when <optgroup> labels do the job so much better.

P.S. I think this is the 7th bulletin board I've joined where people call me "newboss". Why is this?

[rogerd]

I think this is the 7th bulletin board I've joined where people call me "newboss".

Chalk it up to reading too fast and proofreader's disease (where the brain automatically corrects what it actually sees to what it expects to see). Sorry about that, rewboss! :)