| Java menu knowledge base
Menu design - what should I look for?
What makes good menu design?
There are three main concepts to keep in mind:
- Menu Scale
- Menu Space
- Menu Style
Menu Scale: assessing the Load
- One of your first questions must be: how big is this site? what kind of
load must the menu carry? how fast must the menu perform when released to
the target audience?
- Scalability is the term given to any system or application
which can adapt itself seamlessly from very small content to very large content
without loss of performance.
If your site is large, you need a scalable menu. Most menus from most companies
aren't scalable. To our knowledge, we are the only company to offer a scalability
guarantee.
- Don't waste your time developing with a menu that looked pretty on
the manufacturer's site where it only handled half a dozen menu items. As
soon as you download a menu to try out, test it with a full size menu and
ask the manufacturer to advise if there is any performance loss.
Menu Space: determining the Layout
- Design gurus love to analyse the percentages of pixels on a web site
which are devoted to categories such as "content", "navigation", "branding", etc.
The talk is of web site "real estate", using the metaphor of housing and
the property market to help designers correctly prioritise their use of space.
- It may be more helpful to analyse a site in terms of what the user DOES.
There are primarily two things a user does on your site, and they do these more or less simultaneously
in two different areas of your page:
- Their eyes are on the content sector
- Their hand (mouse, cursor) is on the navigation sector
- Anything which prevents or slows the eyes and hands from accessing these sectors is
a design error.
- The user's hands and eyes expect conventional layouts and metaphors. Classic, conventional
navigation uses a left-hand sidebar and/or a top-bar, which has a clear visual separation from
the content area so that the hands and eyes instinctively know where they belong. Likewise,
conventional navigation metaphors such as trees, buttons and drop-down menus please a user if they
react fast and as expected. Unusual navigation ideas can lead to a quick site exit.
Menu Style: balancing Layout, Look and Load
- Layout and Load
- This is the issue of "how many menu items do I have and how much space do I have for them?". Do
you have 10 items and 200x500 pixels, or 100 items and 800x20 pixels, or 1000 items and 20x70 pixels?
- Usually the menu items can't all be laid out in the space available, and you have to use
interactive menus to save space. The general concept is: keep menu items lower down the
hierarchy hidden until you need them, and only display the uppermost levels.
- For moderate space-saving, you can use a tree menu or sliding menu down the left-hand sidebar. These kinds of menu
offer greater space saving if they feature scrolling and line-wrapping.
-
The highest level of space-saving efficiency is achieved by drop-down menus, which can be
placed both in sidebars ("pop-out" menu) and along the top of the page. Greater space saving
and higher usability levels can be attained if these menus feature scrolling, line-wrapping
and intelligent layout automation.
- Layout and Look
- Competing with the dimension of space-saving is the dimension of clarity. As well
as allowing users easy access to menu items down the hierarchy, a good menu also has
to clearly show the user where they are in the grand scheme of your site.
- Activated parent items need to remain visible, preferably highlighted in some
manner such as a change of colour, and be permanently distinguished from child
items such as by font size. The layout needs to allow sufficient space to
respect these needs.
- Tab menus offer a strong sense of logical coordination, giving the user a strong
sense of where they are - which is why the top level of navigation on many of the
web's most competitive commercial sites (such as Amazon) consists of tabs.
- However good choice of colours, fonts and icons on other menu types can also
maintain clarity.
- Look and Load
- If you have a site with a small load requirement, you can probably
afford to splash out on looks. Animated buttons, using stylish java animations,
can do wonders for a site.
- A site with a high load requirement and a moderate look requirement (such
as an internal company documentation management system) may be best served with
a tree menu.
- A site with a high load requirement and a high public profile requiring
top aesthetics, is usually best advised to use some kind of
drop-down menu.
- Originality and breaking the rules
- If your goal is to stand out and impress precisely by breaking the rules,
the fastest and easiest way to do this is with a hybrid image-based drop-down
system such as a Sensomap.
|
|
