Usable Web Menus
March 11, 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 be 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.
Includes:
a.Guidelines on designing usable web menus, with 12 common-sense rules to follow
b.Information Architecture for menus (including identifying your target user), and user testing
c.Easy to Follow tutorials on building menus with HTML, JavaScript, CSS and Flash
d.Advanced tutorials on dynamically populating menus from XML and databases with server-side scripting, including PHP and ASP
e.Extensive Web support including fully adaptable downloadable code for your own use and a gallery of working menu examples
Who is This Book For
This book is for intermediate to advanced web professionals who need to implement a navigation menu on a web site as quickly as possible, with the minimum of hassle.
| Introduction | | 1 |
| Chapter 1: | Rules for Good Menu Design | 9 |
| Chapter 2: | Information 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 |
Introduction
This book focuses almost exclusively on navigation menus, which show you how to get around a web
site. We won't worry too much about esoteric distinctions like Internet/intranet/extranet or how to
handle multiple sites or subsites. We will also stay away from discussing other types of menus, like
the choice selection menus you sometimes find on fill-in forms.
We need to start by getting a couple of definitions out of the way, just to make sure we're all working
with the same ideas:
- Menu: A navigational method that enables a user to go directly to specific, known parts of a
web site. Almost every good web site has at least one menu, plus a search feature for
finding information people couldn't figure out from the menu.
Though it may seem like we're knocking "Search" as a bail-out throughout the
introductory chapters, we're certainly not. A search feature obviously has many
useful applications that don't necessarily mean your menu has confused or
otherwise failed the user. For example, visitors to a CD shopping site who know
what they want to buy will go straight to the search feature, rather than "drill down"
through a menu system.
- Usability: How easily and quickly a device can be learned and put to work. If it takes two
minutes to figure out a menu, it probably suffers from poor usability. If its purpose and use
is immediately clear, a menu has very good usability.
If you want more technical discussions of these topics, see one of the many books
and courses on Human-Computer Interaction (HCI) or Human Factors. For our
purposes, we'll work with much less formal definitions than you'd get from a PhD.
Note that the definition of usability we use incorporates the word "quickly," but not the word
"beautifully." One of the first things learnt in usability testing is that fast, simple usage is more
important than aesthetic splendour. Design and corporate branding are often at odds with usability.
(We'll see many examples of ignorance in this area throughout this chapter.) Time savings are also
often the most quantifiable measures of a particular design's success over its alternatives. For
example, if you give a user the task of finding a particular piece of information with your menu, you
may discover that it takes extra time when the menu includes branding or other overhead. You may
also find that it makes no difference. See Chapter 2 for information about testing your menus with
users.
We're also looking at how easily users can use a menu. For example, if your menu is immediately
readable and understandable, but the user has to position their mouse pointer in tiny squares to
operate it, the menu is still not very usable, as we can see from the example opposite. This menu
has many problems, including bad contrast and mysterious wording, but its biggest usability problem
is that you have to click the little, dark squares to navigate to any subsection. (The excellent new
version of michaeljrosen.com is scheduled for upload by the time this book comes out.)
So, when we lay out guidelines for good usability of web menus, we're looking at ways your users
often, but not always, your customers can get to work on your web site quickly and easily.
12 Rules for Web Menu Usability
|