Constructing Usable Web Menus

236 Pages·2002·12.611 MB·English

by  Andy Beaumont, Dave Gibbons, Jody Kerr, Jon Stephens (auth.)

Summary of Contents
lntroduction 1
Chapter 1: Rules for Good Menu Design 9
Chapter 2: lnformation Architecture for Menus 35
Chapter 3: Basic JavaScript Menus 55
Chapter 4: Menus with Advanced Scripting and DHTML 91
Chapter 5: Flash Menus 151
Chapter 6: Dynamic Server-Side Menus 185
Resources: 215
Index: 221
Usable Web Menus
Andy Beaumont
Dave Gibbons
JodyKerr
Jon Stephens
© 2002 Apress
Originally published by glasshaus in 2002
ISBN 978-1-59059-186-4 ISBN 978-1-4302-5358-7 (eBook)
DOI 10.1007/978-1-4302-5358-7
Usable Web Menus
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or
by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in
critical articles or reviews.
The authors and publisher have made every effort in the preparation of this book to ensure the accuracy of the
information. However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors, glasshaus nor its dealers or distributors will be held liable for any damages caused or
alleged to be caused either directly or indirectly by this book.
web professional to web professional
© 2002 Apress
Originally published by glasshaus in 2002
Trademark Acknowledgements
glasshaus has endeavored to provide trademark information about all the companies and products mentioned in this
book by the appropriate use of capitals. However, glasshaus cannot guarantee the accuracy of this information.
Credits
Authors Technical Editor
Andy Beaumont Chris Mills
Dave Gibbons
Jody Kerr Commissioning Editor
Jon Stephens Chris Mills
Technical Reviewers Managing Editor
Kapil Apshankar Liz Toy
Justin Everett-Church
Jon Duckett Project Manager
Damien Foggon Sophie Edwards
Martin Hannen
Dan Maharry Production Coordinator
Alex Shiell Pip Wonson
lmar Spaanjaars
Stephen M Williams Cover
Dawn Chellingworth
Proof Readers
Dan Walker Indexers
Agnes Wiggers Adrian Axinte
Alessandro Ansa
Cover Image
hunting-island-light-3 - from the Carolina Lighthouses series (for full series, go to
http://www.atpm.com/7.08/carolina-/ighthousesl). Photo taken by, and used by kind permission of A. Lee Bennett Jr
(contact: [email protected]).
We chose this image, not only for aesthetic pleasure, but also because the stairway signifies navigation within a site,
and of course, navigation is what this book is all about!
"The historic Hunting Island lighthouse was originally constructed in 1859 and rebuilt in 1875 after it was destroyed
during the Civil War. This is the only lighthouse in the state of South Carolina open to the public." "The Hunting Island
lighthouse provided safe passage for ships until it was deactivated in June of 1933. A unique feature of this lighthouse
is that it was constructed using cast iron plates and designed to be dismantled in case it ever needed to be relocated.
As fate would have it, due to erosion of the beach in 1889, the lighthouse was moved inland 1 1/4 miles from its
original site to where it presently stands."
Excerpts taken from the Hunting Island tourism page, http://www.huntingisland.com/.
About the Authors
Andy Beaumont
Andy Beaumont is a freelance interactive developer/designer based in central
London. As a firm believer in the "sharing of knowledge' ethos that has made
the Flash community so strong, Andy writes Flash tutorials for the likes of
\;--.··.·-- . pixe/surgeon.com and Computer Arts magazine, teaches Flash and
\l ' ' ' ActionScript at Mac Uni in London, and runs a personal Flash help site at
http://www.eviltwin.co.uk. As something of an ActionScript mercenary Andy
has worked with many top design agencies including magneticNorth,
Conkerco, and Broadsnout.
~
First and foremost I would like to thank my beautiful partner Kelli for belief ana
support beyond the call of duty. Professionally I need to thank the brilliant
Brendan Dawes, Pete Barr-Watson, the BD4D people and the pixelsurgeons.
Finally, thanks to everyone that contributes to the online Flash communities at
were-here.c om, ultrashock.com and the Flashcoders list, without whom I
would know half as much as I do today.
Dave Gibbons
Dave Gibbons is a writer and web designer from Beaverton, Oregon, US.
He recently worked for five years as a writer, Web/lntranet Designer and
programmer, and usability tester at Intel.
When not losing sleep over proper menu design, Dave writes humor ("humour"
in the rest of the English-speaking world), novels, and screenplays.
Jon Stephens
A site developer, writer, and consultant living and working in Scottsdale,
Arizona, Jon Stephens works with JavaScript, PHP, and in producing technical
documentation for area firms. He's an original member of CNET's Builder Buzz
developers' site, and has served there as a Community Leader since 1998.
Jon has co-authored two books on HTML and JavaScript for Wrox Press.
Acknowledgements: Chris Mills and Sophie Edwards at glasshaus - for
encouraging me to participate in this project, and for putting up with my
somewhat erratic and eccentric ways! My reviewers, including Martin Honnen -
who helped make this a much better book; Ed Lonergan and colleagues at
Corporate Architects and associated companies - for moral and other support;
my friend and co-author Jody Kerr- whose fault it is that I wound up in
Arizona; my parents; and Sionwyn - who took my hand from half a world away.

Table of Contents
Introduction 1
Who is This Book for? 2
What's Covered/Chapter Synopsis 2
Conventions 3
Support/Feedback 5
Web Support 5
Chapter 1: Rules for Good Menu Design 9
Usable Web Menus 10
12 Rules for Web Menu Usability 11
Summary 33
Chapter 2: Information Architecture for Menus 35
Challenges in Making Menus Meaningful 36
Setting Your Priorities 38
Understanding Your Target User 39
Why Is the User Here? 39
What Technology Does the User Have? 42
What Does the User Know Already? 43
Who Else Will See This Site? 44
Dealing with Existing Content 45
Information Architecture for Menus 46
Putting lA To Work On Your Menus 47
Depth in Navigation 50
Testing to Verify Your Design Decisions 52
Summary 53
Table of Contents
Chapter 3: Basic JavaScript Menus 55
A Brief Aside into JavaScript, DHTML, and CSS 55
Example 1: Text Link Example with CSS 57
Example 2: An Image Rollover Menu 58
Example 3A: Using a Sidebar Rollover Image 62
Example 3B: An "Intelligent" Menu 64
Menus Using Form Elements 70
Example 4: A Basic Button Menu 71
Example 5: Radiobutton Menus 74
Example 6A: A Basic "Jump Menu" 75
Example 6B: A Jump Menu with Intelligence 78
Example 7: A Double Jump Menu 81
Summary 87
What's Ahead 88
Chapter 4: Menus with Advanced Scripting and DHTML 91
CSS Basics 92
CSS Example 1 : Choosing a Stylesheet 93
Generic Cookie Functions 95
Using a Cookie To Set a Stylesheet Preference 98
CSS Example 2: Choosing a Stylesheet (Advanced Browsers) 103
Image Maps 111
Image Map Example 1 113
Image Map Example 2: Tabbed Display Menu 114
Image Map Example 3: Floating Menu 122
Expanding/Collapsing Menus 129
Expanding/Collapsing Menu Example 1 130
Expanding/Collapsing Menu Example 2 140
Summary 148
Chapter 5: Flash Menus 151
Flash and Usability 151
Level 1: Dynamic Flash Menus 152
The Primary Navigation Button 153
Completing the Primary Navigation Element 154
Generating the Menu Entries 155
Building the Interface 155
Primary Navigation 155
Secondary Navigation 156
Behavior Clips 158
Activating and Deactivating the Submenus 159
ii