Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

Do drop-down menus suck like a remora?

There’s no way around it, drop down menus are hard, especially when supporting cross-browser compatibility. I’m not the only one who thinks this, “Mr. Cool” from the Usability “A-List” writes:

“Now, me, I hate drop-down menus. I hate them as a user. Too many choices. It’s like those big laminated menus you get at a New York diner. Spaghetti, diet plate, French Toast, broiled filet of sole, pizza, ice cream sundae, Atkins menu, veggie burger…. The eyes blur. You slam the menu shut and order coffee.

As a designer, wherever possible, I avoid drop-down menus. For they almost always create an inferior user experience versus drilling down through clearly labeled, intelligently organized categories.” – Jeffrey Zeldman, 29 Jun 04

While I don’t agree 100% with Zeldman (don’t think I don’t I hear some of you gasping in horror), he’s got a point. I’ve seen more than one not-so-youngster get hung-up either kissing the screen to determine the choices or mousing furiously in a vain attempt navigate the timing of sublinks.

I’ve also seen some pretty hefty chucks of Javascript that require a busload of bandwidth and can be murder on those of us who use any variety of web publishing tools to generate our navigational links. For example, I’ve still got on my to-do list an upgrade the automagically generated Milonic Menu I use on RedlandBaptist.org so my Safari users don’t feel left out.

So why bother? I dunno, let’s talk about it … in the form of a comment below. In the meantime, let me turn you onto a slightly easier-to-implement CSS-based drop-down menu that is not as compatible to as to be all-things to all-OLDER-browsers but is far easier to maintain:

Based on the original IE-only suckerfish drowpdown detailed at A List Apart, this new puppy, available at HTMLDog, is more accessible and only 12 lines of Javascript fat. This son-of-a-female dog also works in Opera and Safari without a hack in sight and supports multiple-levels.

Of course, this means you’re going to have to figure out a way of supporting sub-page navigation for the three ‘youngsters’ in your church visiting your sermons page with Netscape 4.7 … but that’s another sermon for another day.

17 Comments

  1. Pingback: How Now, Brownpau?

  2. I hate drop-down menus. I don’t like stuff that moves around on my screen when I’m looking for info. But then, I’m not a TV/video person; I’m a lifelong print-on-paper addict (until the Internet and high-speed access came along). But maybe people whose eyes and brains have been trained by TV and video games are more attuned to stuff flashing and jumping around.

  3. “…so my Safari users don’t feel left out.”
    Here ! Here!

    I’m not a fan of drop down menus either, but they pack a lot of info into a small space. If you have this much information, I suggest you need to edit and/or organize better.

    1) Navigaging them is just like playing a video game, that’s not why I’m there. At least not why I’m using the menu….but that’s enough confession during working hours.

    2) I can’t see where I’m going. It’s like having a telephone answering system with 200 choices none of which match what I want to do, but I have to remember the closest match and go there AFTER listening to all of them.

    Or like that matching game “Concentration” where you uncover one tile and then try to turn a match face up somewhere else. If you don’t make the match you have to turn the first tile face down again and start over.
    Matching the menu choices to what I want to find, I find myself sliding back and forth trying to decide if this choice or that choice is the closer to where I want to go, even though none of them match MY definition of the destination I seek.

    3) They are counter-intuitive, since you can’t see there are choices. Dropdown menus look just like regular menus, UNTIL you surf over them. Don’t make me think. You can hack this by making each main choice it’s own page with a matching submenu, but that is not very elegant.

    4) They are usually not very evenly organized. When I was being taught how to make an outline, I was told that each main point must have at least two or more subpoints, if not then it was not a main point.

    Dropdown menus that have one or two “main points” a mile deep and then a “main point” of “Contact Us” that does not go down at all, are unbalanced outlines.

    If they are not “dropping down” I’m left to wonder if something is broken or unfinished on the menu. Don’t make me think.

    5) Don’t even get me started on DDmenus that are broken in different browsers.

    All that to say I can’t wait to try the Son of Suckerfish DDmenu!

    Thanks for the link.

    Russ

  4. I used to be against drop down menus until there was a feature request for one, and after much discussion and prototyping, we decided to implement it. I don’t think that drop down menus are like video games, then you would have to say using Microsoft Word was like using a video game. While people at Microsoft might like playing with Word in their free time, I don’t think that the general populus thinks that it’s a fun game to play.

    Just to let you know that since the drop down menus were put in place, pleople have responded with thanks and greater page views (although this isn’t necessarily the prime indicator of success). I think the most important part is know your site and your audience. We already had main sections that changed the left navigation when you went to them, so all we did in the drop down was take the links provided there and put them in a drop down, which for some users may decrease the amount of clicks (which is very important). For novice users, they still can click on the main category link and it takes them to the main page for that section. I just don’t really see any draw backs to it other than the added amount of information to process.

    I was just reading a blog entry at Design By Fire that really got me thinking: Please make me think! Potential dangers in usability culture. Sometimes we are so concerned that the user shouldn’t have to think, that we do the thinking for them (sometimes falsely). When I’ve been in usability testing for software, one of the biggest things when they are looking at accomplishing a task is, how many clicks did it take? I like websites that give me the option to get to what I want immediately, but in an organized, clear, and concise way. But I guess that is the whole game of it all, balancing the measures.

    BTW, The son of suckerfish was featured on ALA a while ago, but they changed the title, and it’s what I used to implement the drop down navigation on the site. ALA: Horizontal Drop Down Menus

  5. FWIW – I hate ‘em. Personally anyway. I hate playing the shell-game of “where did they put that content”.

    I hate trying to remember what was in the first menu when I look at the second.

    I hate how they test my mousing skill – can I scroll horizontally in a straight line far enough to get the next layer to pop, or do I roll off and start over.

    But that’s just me — from what I can gather on the usablity side is there’s no hard answers.

    Uncle Jake disdains them of course:
    http://www.useit.com/alertbox/20001112.html

    Mr Spool seems to agree:
    http://www.uie.com/articles/users_decide_first/

    This article has a quote from “inmates are running the asylum” guy Alan Cooper:
    http://www.shorewalker.com/section4/flying_menu.html

    The quote is made more interesting by visiting Alan’s company home page:
    http://www.cooper.com/index.asp
    ;) Funny how the web can come back to biteya…tho the Cooper menu structure is notably very simple.

    Alan has an article on navigation that recommends simplifying the page structure such that all that nav isn’t needed:
    http://www.cooper.com/newsletters/2001_10/navigating_isnt_fun.htm

    And the “less clicks is better” argument fails in testing as well:
    http://www.humanfactors.com/downloads/mar022.htm
    http://www.uie.com/articles/three_click_rule/

    Other related UIE articles:
    http://www.uie.com/articles/getting_confidence/
    http://www.uie.com/articles/continue_after_categories/

    For me, I’ll continue to avoid drop-downs at all costs. I’m more taken with the notion of higher level category links that take you to an index page, with blog-like blurbs and a “read more” link. I like the notion of a clickstream that continues to add more information with each click.

    I have an uncomfortable relationship to the “true design” world – I don’t consider or pitch myself as a “designer”, I don’t expect that I’d be comfortable or well-received in a group of “designers”, and when I read things like the “Potential Dangers in Usability Culture” article linked to above I’m never sure I completely understand the mindset. I don’t think for a moment that people want to spend more than a few minutes on the sites that I create. Why would I do anything other than make it as simple as possible?

    But maybe that’s part of being self employed — I tend to be much more pragmatic/tradesman in my work, rather than “Artistic”. It works better on invoices…. ;)

  6. Not that I disagree with your comments, but the greatest, most common complaint about MSWord people tell me is that it gets in their way. One of the worst examples of usability on the planet. It’s not fun to play, but it is like a video game. It makes you work to accomplish your goals rather than help you.

    I’ll agree that, like anything else, DDmenus can be VERY useful in the right situation. I love being able to get where I want to go quickly as well and the menus do that in a few clicks. After you learn where you want to go. Initially you do a lot of learning, not good at for your first time user, but for your “members” or regular users a wonderful feature. I love the way they pack a lot of information in a small space. Bread crumbs are nice too, but you don’t really need them on sites less than two or three levels deep. Do you?…do you Really?

    So I’m really not against drop down menus in every case, but rather would like to see them implemented better and with more purpose, rather than a way to make a link to every page in the site available from the top level. Thats what a site map is for, if you need it. Organize first to the best of your ability with regard to your audience(s), then dropdown and give me twenty!

    I AM in favor of balance. Usability vs beauty vs. communication vs. etc…… the best designers in any industry need to have high marks in all the catagories of their medium to become the best.

  7. Boyink, the idea of more information in the “clickstream”, I love it. Never thought of it that way, but I like that also

  8. Pingback: How Now, Brownpau?

  9. Safari has gotten somewhat better about the old Milonic menu. Ours now displays under newer Safari versions, it just doesn’t place properly with the “placemenu” command. I’ve got an upgrade on my to-do list as well.

    I can live with dropdowns as long as they’re kept fairly small. More than about 4 items apiece and I go into overload.

  10. I’m bipolar about dropdowns. I like them if they are well done. I can get where to go faster and, if I’m new to a site, I don’t have to guess where to go to find something. (“I wonder where the directions page is. Under About Us or Worship?”) By well done, I mean the submenus snap into place (no sliding submenus, no dissolves, no animation – Flash is particularly easy to abuse) and where I don’t have to be William Tell with the mouse to navigate. If they are not well done, I hate them.

  11. I probably should have given an example of the “increasing info with each click”…

    Take a look at http://www.parentpager.com/Requirements.php. This page is the “second level”, the first being the mainn av link of “Components” (client changed some terminology after launch, the link used to match the URL…).

    What this approach does is use the blurb/read more approach in place of a typical overview page (that only usually exists as a placeholder in the nav structure).

    While the blurbs could use some editing for length and clarity, what appeals to me about this is it the content collectively functions as an overview (and probably does a better job than content “made up” to serve that purpose). Each “sub-page” also gets a link with a bit more description around it — which should give users confidence that the more detailed content is what they’re after.

    Huh…there also used to be pictures of the components on the “Read More” pages, wonder what happened to those….

  12. While I AGREE that dropdowns add a ton of code, compatability issues and make the user “mouse-around” I personally haven’t found a better way to organize and/or communicate the structure of a (church or other) website that has “a bunch” of different topic areas.

    I work for the State of California, and our Intranet has a half-dozen (non-dropdown) navagation models – and it drives me crazy. You have to give dropdowns credit for providing a consistent navigation methodology for complicated sites.

    I am open minded – if you have a few good examples of good navigation for a complicated site w/o dropdowns – please provide the URL.

    - – Greg

  13. Think Microsoft Word, Excel and PowerPoint:

    Courtesy of Alan Cooper in “About Face” I’ll inject that menus serve a DIDACTIC role… IOW, they serve as a psuedo-memory device to support a user who’s unfamiliar with the application.

    Note: If a menu changed basic structure with every application (ahem, website), they’d lose a valuable benefit… In Windows, you (can) know that Print is under the File menu, even if you’ve never used the app before.

    Where does this fit into web usability?

    -Frank Ramage

    Once a user has found and used a menu function for a week or two, he’s ready to learn of its keyboard/toolbar shortcut.

  14. The issue that I have with Suckerfish is that it doesn’t display correctly at ALL in Dreamweaver, my preferred coding environs. Once DWMX 2005 or whatever does a better job of displaying them, I’ll acquiesce.

    I have used and am very happy with Youngpup’s slide out menus:

    http://youngpup.net/2001/ypslideoutmenus

  15. I think cascading menus are the greatest thing since sliced bread. I can’t understand why some people here think they are so difficult to use. I teach basic computer skills to kids who use them all the time without giving them a second thought.

    They are a fantastic way to quickly navigate to various pages on a website without having to click, click, click, click…

    I understand the argument for accessibility, and look forward to someone creating a great web cascading menu system that can be accessed without using a mouse.

  16. I am having trouble with the display of drop down
    menus if there is a scroll bar on the page. If I scroll the page, the drop down menus get kind of duplicated so I don’t know where to click them. If I touch them with my cursor, sometimes they get fixed. I have this problem in IE and Mozilla. Can anyone help me with this problem?