|
Menus with Beauty and
Brains, the first article in this series, featured Burpee
Seeds as a wonderful example of strong navigation.
|
|
Last time we took a tour through what makes a menu work. If you have
not read the last issue, you should start with Menus
with Beauty and Brains: The Heart of an Excellent Site. Also, I
have added an excerpt of a letter from Don Zeidler, the leader of the
design team for the Burpee Seeds
site (featured last time). The letter enforces my message that it is
hard work to create simple menus.
This time we are going to look at the graphics that we use for menus.
When we are building menu graphics, we must keep all the same principles
of design that we use for all graphic images, but we have several other
considerations. We must make sure that the text used in menus is legible,
and that the menu components are quick loading. If you have three separate
menu areas on each page, all with rollovers, the byte count grows quickly
if you are not watching your optimization at every step.
|
|
There is an unlimited number of ways to present menu
items, but you must be aware of your visitor needs. Text that cannot
be read will ruin well-planned navigation. However, large menu items
waste download time, take up valuable space and can detract from the
content.
|
|
Once you have your structure in place, you still have one more step
to complete before you start to design. We looked last time at why it
is crucial to understand the reasons that a visitor is coming to your
site, and the importance of planning.
You cannot design the structure of your menus unless you have that information.
However, you also need to know a little more about your visitor in order
to design the graphics for your menu.
The first question to ask how small can your menus be? We usually try
to make our menus as small as possible, in order to provide great navigation,
but still leave most of the screen for content. But we must be careful
that we are not excluding some of our visitors with a font that is too
small, or with a color combination that makes the menu items too hard
to read. Once again, the importance of knowing your visitor cannot be
overemphasized.
On the other hand, you can go to far in the opposite direction. The
lower sample at the left is a common menu item. There is no doubt that
any visitor can read the menu items, even with the low contrast color
scheme. However, even two menu items take up a lot of space and command
too much attention. Plus, the two items here weigh in at over 5 times
the file size of all the menus shown above.
The best menu system will fade to the background when it is not needed.
Menus created with large type and bold colors often overwhelm the content.
Test this when you see a site with large, bold, navigation. My bet is
that you will spend more time clicking from page to page than actually
absorbing the content. (Are you having trouble reading this paragraph?
My eye wants to go to the menu items.) Our surfer brains are lazy ...
the mouse goes naturally to the attention getters on the page. That's
why teaser menu items are so effective (see menu
definitions). However, teaser menus are designed to direct our visitor
to the places we would like them to go, or where they will fulfill the
purpose of the visit. Site navigation should be integrated well into
the page design, but subtle.
|
| |
|
One last thing before we move to creating great looking text in graphics
and some design ideas: Don't forget that menus can be "real"
text, too. If you find that your design calls for plain text, consider
using plain text. In the next article in this series, we will look at
design tips to create professional looking menus with HTML text.
Let's make some graphic text ...
|
