| Menu Design Guide
Tree menus
See also: list of tree menu applets
Tree menu feature checklist
This is a list of some things you should think about when choosing a tree menu.
- Creating user-friendly hierarchies. How are you going to structure the content relative to the
applet width and height? Are you going to chop the content into
a lot of categories and folders, each with a smaller number of
entries? Or do you want to have a shallow tree structure with
very large numbers of entries inside each folder? Some
guidelines: (1) never put more than about 12-16 items inside
each folder - if you need more, create more folders; (2) the
contents of your largest folder should be viewable without
scrolling the applet - only scroll to reach other folders.
Some people try to put very large trees inside applets with
extremely small heights, resulting in a usability problem. If
you need maximum menu size for minimum screen space, you
should be using a pop-up/drop-down menu.
- Scrolling. As submenu levels are unravelled, the total length
of a tree 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 tree menu will use a clunky unattractive
AWT scrollbar, and may even leave the scrollbar fixed in position even when not needed. A
good tree menu will offer a good level of scrollbar customisation, both in terms of appearance
and behaviour.
- 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.
- Comparing with Windows Explorer. The
most commonly known tree, the Windows Explorer menu, has only one line
for every entry, and bi-directional (up/down and left/right) scrolling.
However for websites and web applications, multi-line entries with
mono-directional (up/down) scrolling is much more popular, because you
can see the menu entries better. If your client has made the demand "exactly
like Windows Explorer", try to educate your client to the different needs
of a web environment so that your client accepts functional and aesthetic
variations.
- Checkbox trees. Web application developers often
needs trees with checkboxes. Some points to think about: do you need
checkboxes and icons, or just checkboxes? do you need some kind
of logical link between the checked state of a parent item and its
child? do you need semi-checked states to show that only some items in a folder
are checked? how are you going to move information about checked states
to and fro between applet and surrounding web application?
- Sliding v. non-sliding trees. Sliding (animated
opening and closing folders) is a graphical effect requiring image
processing. Image processing requires system resources. If your priorities
are primarily aesthetic, a sliding tree is a good choice. However if
your priorities are primarily functional (e.g. you just have a huge
amount of documents to navigate), a non-sliding tree may offer a greater
scalability due to its lesser use of system resources.
- General features. If you are just starting to look
at trees and are not sure what to expect of a good product, here is a quick
checklist: scalability to 10,000 items; user-definable multi-state icons;
user-definable submenu indicators (these are the +/- boxes next to the icons
on many trees); history-tracking (the ability to track click history, in
terms of active, visited, unvisited); rollover effects; positioning control
(e.g. indentation distances, icon sizes, line heights, etc); script trigger support;
true-type font availability; backwards compatibility to java 1.1.
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.
|
|
