Pattern 19: Structured menus
AKA:

You have developed a SITE MAP (12) and a NAVIGATION BAR (25). You realize that you want to put more information in the navigation bar than will fit easily onto a normal sized screen and you want to avoid the need for the user to scroll horizontally. You want users to be able to CHOOSE FROM A SMALL SET (Tidwell) but again there are more categories than you would like. You understand the concepts of PRIMING AND INTERFERENCE (18).

Pulldown menus will save space in this situation. However, they need to be given small set structure. Furthermore, user have to be able to realize that they are there.

Therefore

Save space in the navigation by using short and, if possible, structured menus. Consider pulling out the menus horizontally if they are not too long and providing your usability and get-it tests indicate no problems are so caused. Ensure that there is a visual cue to tell the user that the menus are there.

This pattern is terminal within this language.

As we know from pattern 18, structure and organization help priming. This can be seen readily by the figure 19.1 in the book. In (a) related items are adjacent and the lines emphasize this. In (b) there is no such organization and the menu is confusing to read and difficult to remember.

HTML provides no way to do this – and no control over things like founts, format and spacing. Putting lines in therefore wastes space but is worth trying if the lists are not long.

Similar considerations apply when using pull-down list boxes (combo boxes). With very long lists, such as list of place names, they are often the only solution. If you do use menus there should be some cues to indicate that they are there.
The Times’ site shown above makes effective use of pull-down menus to save screen space in the navigation but some are rather long and, as they are unstructured, slightly hard to take in at a glance. The design should avoid the possibility of users covering stuff up in two senses. Here the pull-down menu actually has three more items that appear below the fold and, of course, if you try to scroll down the menu disappears and you can’t pull it down until you scroll up again; catch 22! That assumes you even know that what you can’t see is there. Resizing the window is the only solution. Admittedly, this is quite a small window but the principle stands that designers need to think about such issues carefully. In an earlier version of the site the menus could be sometimes obscured by a text box.

Note incidentally that the service navigation bar has disappeared stage right; indicating, perhaps, that the MAGIC MARGINS (60) pattern has not been applied – because of the fixed length of the menu bar.

www.trireme.com (shown above) approaches the same menu problem by pulling out the menus horizontally instead of vertically. However, some users reported being confused at first by this strategy, probably because it was unusual at the time.

Browse the language	What is Wu?	Look at an example pattern sequence	Structure of the patterns
Comment on Wu	Contributors	Return to TriReme home page	Links to related sites