| Menu Design Guide
Sliding menus
See also: list of sliding menu applets
Sliding menu feature checklist
This is a list of some things you should think about when choosing a sliding menu.
- General concept. The term "sliding menu" is normally used for sidebar menus which initially
show the top level items in a hierarchy. When the mouse activates these top
level items, submenus slide out vertically from beneath the parent item, displacing
lower items. By hiding multiple submenu levels in this way, sliding menus can handle
large menu systems in a small, convenient space.
- Trees v. Buttons. Sliding menus come in both tree and button varieties.
Not all tree menus slide - many just "flick" open instantly. Higher quality trees do a sliding
animation as well. A sliding tree will have a "tree scaffold" on the left-hand side plus indentation
of each level, with a result much like the Windows Explorer. Sliding buttons lack both the
scaffold and indentations - buttons just slide out from beneath other buttons. Sliding trees
can handle large hierarchies more clearly due to the scaffold and indentations. Sliding
buttons have the advantage that they take up less space because they don't have the extra scaffold
and indentations - but to make distinctions between levels clear, they have to resort to
other strategies, such as colour differentiations. Because of the visual layout differences,
sliding buttons are suitable for menus of up to a few hundred items. For a user-friendly
experience, sliding trees are better if you have thousands of items.
- Animation quality. A well-programmed sliding menu will have a constant,
smooth, rapid animation when it opens. You should also pay attention to the different types
of sliding animation. Some sliding menus have a little bounce, and their slides may even
accelerate and decelerate as if affected by gravity. How does the menu differentiate between
long submenus and short ones? Does the slide take too much time if you have long submenus?
In some sliding menus, the submenu slide in and out as an unbroken slab - but in others,
each menu item may individually slide, fade or expand into position.
- Scrolling. As submenu levels are unravelled, the total length
of a sliding menu can increase so that its content disappears below the bottom of
the applet. Some menus will simply leave it at that. Higher quality menus will offer
an as-needs scrolling option. Scrollbars will activate. Test the menus with scrollbars
to see what they look like, because this is often a feature where good companies and weak
companies can be distinguished. A poor sliding menu will use a clunky unattractive
AWT scrollbar, and may even leave the scrollbar fixed in position even when not needed. A
good sliding menu will turn the scrollbar into a work of art, with customisable
designs. There are also dozens of scrolling logics ("scrolling logic" = the way
a menu coordinates sliding animation and scroller correction, scroll drags, scroll
end-clicks and scroll mid-clicks, as well as conditional appearance).
- Oversize entries. Typically if you are trying to keep the navigation
into a small area on the left of the page, you are sometimes going to have an entry which
exceeds the width of the applet. A major design issue is how a menu copes with such
situations. Lower quality menus will ignore this situation. Slightly better ones will
throw in a horizontal scroller - but most users don't bother with horizontal scrollers - they
expect to see the whole entry and get irritated if they can't. The most elegant and user-friendly
solution is line-wrapping, found in the best menus.
- Further features. While there are many additional features which
may play a role in your choice of sliding menu (e.g. true-type fonts, rollover effects,
user-definable icons, image backgrounds, customisable colours), the points listed above
are probably the most important fundamental issues to concentrate on when designing a
site with sliding navigation.
List of menu design guides:
web buttons and animated buttons,
drop-down menus,
tree menus,
image-map menus,
menu tabs,
sliding menus.
The Image Intelligence Software Menu Design Guide is strictly copyright. Please refer to the legal and copyright information governing your use of this site.
|
|
