Book Review: Usable Web Menus

From the Publisher

Title: Usable Web Menus Authors: Andy Beaumont, Dave Gibbons, Jody Kerr, Jon Stephens ISBN: 1904151027 Publisher: glasshaus Price: US$ 13.99 at Amazon.com Page Count: 200 Publication Date: March 2002

When developing a web site, one of the most important things to consider is the navigation menu, to allow your users to find their way around it. It needs to usable, informative, and well implemented, but this can take time. This book will take all the hassle out of implementing web menus, in whatever style and technology you wish, by providing full code samples, along with walkthrough tutorials on how they work to allow easy customisation for your own needs.

This book covers the design and implementation of navigation menus using JavaScript and CSS (DHTML), and Flash on the client-side. Later chapters look at dynamically populating these menus from server-side data sources (databases and XML) using middleware (such as ASP and PHP).

Chapter 1: Rules for Good Menu Design

This first chapter is written by Dave Gibbons, and attempts to frame usability issues for web-based menus. While the book tries to avoid overly-technical, or even preachy, explanations of usability rules, this chapter glosses over some key rules of interface design. Since this topic is only afforded the space of one chapter, however, there’s not a lot of room to go into great detail.

Instead, the author presents 12 rules of menu design and goes into some detail on each, often with examples. The bad examples aren’t given enough detail to explain why they are bad, however, and the author makes some assertions that would be more valuable with supporting evidence of any kind. I’m also not sure the author understands all the factors behind building accessible sites, primarily because he implies XML/XSL(T) sites will enjoy greater accessibility, which isn’t necessarily true. He does, however, provide links to the WAI and a page on Section 508.

Overall, this chapter is good, if a bit generalized.

Chapter 2: Information Architecture for Menus

Also written by Dave Gibbons, this chapter addresses information architecture, as well determining and testing your audience. There is a good series of questions for identifying the users by their needs, goals, and available technology. Given what you’ve learned about your users, it further addresses how best to present the information to those users so it makes sense and speeds their access to the information they want. User testing is only allotted one page, but it is at least addressed in here.

And this is where the handy introduction to usability and information architecture abruptly ends.

Chapter 3: Basic JavaScript Menus

Authored by John Stephens, this is the one chapter that I would actually like to see removed from the book. It starts off simply enough, but starts to quickly gather momentum as it tumbles away from all the usability and accessibility suggestions presented up until now.

Starting off with a brief introduction to CSS and JavaScript, simple image rollovers are presented, followed by the use of the :hover pseudo-class. This is even a JavaScript powered menu that disables the navigation for the page the user is currently viewing, a potentially handy script for developers who don’t have access to a server-side scripting language and don’t want to customize the navigation for every page on the site.

After this, the author presents navigation menus based on form elements. The first example uses buttons, although instead of using <input type="submit">, the author chooses to use <input type="button"> and fires each using an onclick event handler. The <form> tag has no action attribute. Users without JavaScript enabled are thus penalized since the navigation menu will completely fail to work. In addition, there is no discussion about the implications of form elements acting as navigation elements.

Continuing the descent, the author provides samples of navigation menus based on checkboxes and then radio buttons, both of which introduce a host of usability concerns (smaller hit states, checkboxes imply more than one option, JavaScript-only, etc.). In fact, the only interface issue the author points out is how Netscape Navigator 4.x displays incorrect background colors on radio buttons in tables. Hell, even using a <label> element on the options would have at least indicated that the author cared somewhat about the user instead of flexing his simplified JavaScript muscles.

Following up to these two examples is a select-menu based navigation. This might not be so bad only because so many people use them, if not for the known usability issues, and the author suggesting that the current page be hidden from the options, preventing any type of user memory on the location of options in the menu (what he refers to as a “jump menu with intelligence”). He closes the chapter with a double-jump menu, allowing users to select an option in one select box, only to have to then select an option in a second select box.

Given that the title of this book is Usable Web Menus, there’s really no reason this chapter should have been included, at least not without caveats every page.

Chapter 4: Menus with Advanced Scripting and DHTML

John Stephens continues with a slightly more practical chapter, only because it has a useful JavaScript cookie functions, in case you don’t already have one in your library. The chapter continues to make gratuitous use of JavaScript to create a style switcher powered with a pop-up window (a pop-up window killer might kill it, though). In its defense, it does present the code necessary to allow Netscape 6 to natively allow the user to switch between style sheets.

The chapter then spends an inordinate amount of time working with image maps, something which was generally unnecessary in the context provided, and didn’t do a remarkable job of showing advanced scripting, as the chapter title promises. Eventually, an image map displayed in a <div> that can be hidden by the user was presented, although its usability benefits, if any, were not addressed.

The last pair of examples showed a menu loosely based on the Windows95 Explorer folder pane interface, and offered some useful blocks of code to hide and show menu elements.

Chapter 5: Flash Menus

Penned by Andy Beaumont, this chapter offers a refreshing break. This author knows about the stigma Flash has for usability and accessibility, and creates examples that don’t suffer as most Flash-based navigation does. Although the author doesn’t specify the version used to create the examples, Flash 5 appears to be the culprit.

The chapter starts off showing how to create, via movie clips and ActionScript, basic menus from a hard-coded list. The example is built upon to show how to feed the menus with XML, and then how to feed the XML from a PHP/MySQL setup. The code downloads on the glasshaus site also offer an ASP/MSSQL version, even though the book doesn’t go into it at all.

For some reason, though, the author modifies his XML from the second example to the third, forcing a minor re-write to the XML-parsing ActionScript. Otherwise, the chapter has a number of useful tips. It does not, however, delve any deeper into usability issues beyond the token page at the beginning of the chapter, let alone those related to the specific menu sample.

Chapter 6: Dynamic Server-Side Menus

This final chapter, authored by Jon Stephens and Jody Kerr, finally addresses a menu other than a basic navigation menu by giving an example of a breadcrumb trail. While the trail may be unnecessarily encased in a multi-cell table, it’s shown with a PHP/MySQL, ASP/MSSQL, and ASP/XML implementation, allowing many readers to benefit from it. The chapter goes into some detail on PHP and MySQL, while deferring to Microsoft on ASP and SQL Server.

After the breadcrumb trail example, the final menu example from chapter 4 (the Explorer-style menu) is brought back, and the reader is shown how to populate the JavaScript with some of the server-side language presented earlier in the chapter.

Resources

There were as many references for ASP, PHP, or JavaScript as there were for usability at the end of the book. If anything this is evidence that the book is far more code-oriented than anything else, and that usability isn’t given the priority its title implies.

Recommendation

All the code samples in the book are targeted for Microsoft Internet Explorer 4.x+, Netscape Navigator 4.x, Netscape 6.x, and Opera 5.x+ for Windows, and Internet Explorer 4.x+, Netscape 6.x+, and Opera 5.x+ for the Mac.

For a book on menus that are supposed to be usable, I was disappointed at how usability factors were discussed only at the beginning, as opposed to within each example as an exploration of the value of each suggested menu. Chapter 3 really brought this to an extreme by presenting menus that younger developers, assuming books know best, might blindly use without regard to their impact simply because they are in a book on usable menus.

The code examples are generally good, and handy references for younger developers. It’s nice to see Flash represented, even if only in passing. For the price, it’s not a bad book to have on the shelves for reference, but it’s not one I would run out and buy.

And one minor peeve — alt is an attribute, not a tag.