Web Design Example: Super Dropdown navigation Menu

Summary

The navigation menu is not necessarily a simple collection of text links, which enriches the level of navigation information and even the hierarchy of the entire site's content. Because the general Pull-down menu has a lot of usability problems, prompting mega Drop-down menu came into being, because this kind of menu is really cow x, so I call it Super Pull-down menu. The related test proves that the Super Pull-down menu overcomes the defects of the common Pull-down menu and is worth recommending widely.

Body

First, combine the examples , let's first analyze what the Super Pull-down menu looks like.

1. Mega, two-dimensional panels group navigation options with clear information;

2. Organize navigation options by means of layout, layout and icons;

3. Find all information in a single, fast manner without scrolling;

4. When the main navigation at the top of the page, you can expand the menu vertically or horizontally, when the main navigation on the left side of the page, you can fly out of the form to expand the menu.

Second, let's take a look at the advantages of the Super Pull-down menu for the General Pull-down menu.

1. At a Glance

For large web sites, common drop-down menus often hide the options that most users need to see. While scrolling solves the problem of the display, because users cannot intuitively compare all the options, they have to rely on short-term memory to write down the scanned information, and a quick memory can directly affect the efficiency of accomplishing the task. Especially when the Pull-down menu is too long, the common pull-down menu is more annoying.

The face of complex web sites (especially E-commerce sites) Super Drop-down menu fully embodies the "clear" principle, all the information panoramic view, users do not have to bear the burden of memory.

2. Clear groupings

Common Drop-down menu levels and groupings are ambiguous, usually in front of the level two menu name plus a "-", or indent processing.

The Super Pull-down menu, because it contains a large number of information, so from the information organization, layout, visual expression of the emphasis on the hierarchy and group relationships between options to help users understand their choices.

3. Visualization of information

The common Pull-down menu only applies to text links, we need to use typesetting, text style to distinguish between the different options of the level of relationship and importance.

The Super Pull-down menu can be visualized, more intuitive, and easier to understand by using rich forms of icons, pictures, hints, etc. The text is replaced with icons in Windows Word 2007 Drop-down menus, and prompts are displayed when you move the mouse over each icon to help the user make a choice.

Then, it focuses on the application rules of the Super Pull-down menu in detail.

The rules I'm talking about are for the Super Pull-down menu, and the same rules for the normal Pull-down menu omit the word xx.

1. Response speed

Response speed is one of the factors that are important to consider when designing a user interface, which is no exception to the Super Pull-down menu. General interface elements must be in a short time (0.1 seconds) to respond, so that users feel that they are operating caused by the changes in the screen, too slow response to make them feel the control of the computer is irrelevant to themselves, so the response needs to be timely. But for the characteristics of the Super Pull-down menu, too fast and not too good, the user to browse the information is numerous, if the mouse accidentally moved out of the menu to turn off the menu instead of interfering with the user's operation.

Therefore, in the design we should pay attention to the response speed settings, and for different systems and browsers to be tested to ensure its availability. How do you set this time? According to the many years of his experiments, the following recommendations have been drawn:

A. Mouse hovers over a navigation option for 0.5 seconds.

B. If the mouse is still in this option, you need to expand the Super Pull-down menu within 0.1 seconds.

C. If the mouse moves out of the navigation option and stays in the area beyond the navigation for more than 0.5 seconds, the Super Drop menu is pulled in 0.1 seconds.

D. Diagonal principle: If the mouse below the path of the following figure to glide to the lower left to the right, the period will move out of the navigation options and menu area, in this case should keep the Super Drop-down menu expansion state. Although most users do not have this problem, for seniors and mobility problems when users should be appropriately lengthened this time.

2. Reasonable organization of a wide range of information in the menu

The Super Pull-down menu contains information from the form of text, links, icons, tips, etc., from the content also contains multi-level navigation options, Web site flow, specific product information, reasonable organization of this information, clear the group, can be super drop-down menu play a real role. The guidelines from the main groupings are:

A. Packaging According to the information's relevance. For example, the user's mental model can be studied by means of card classification, so that the information of high correlation and user approval is assembled in a group.
B. Maintain a medium level of granularity. Do not provide too many options in one group, reducing the amount of time a user scans the information. On the contrary, do not divide too thin, so that users need to spend more time to understand the meaning of each group and the difference.

C. Use concise, descriptive and tagged Copywriting. Web Product copywriting has a guideline: let users grasp the meaning of a keyword while sweeping, avoiding the use of a technical term.
-Use simple, straightforward copywriting;
-Do not use identical words in the same menu.

D. Group layouts by information. You can sort and layout according to the importance of the grouped information or use frequency, and clear the grouping and hierarchical relationship by visual means.

E. Do not appear duplicate option information. Don't let the user confuse, remove redundant information.

3. Keep it simple and effective

By using the standard of usability, let the Super pull-down menu "Keep it simple", we can do a lot of things on the menu, but that doesn't mean we should do it.

A. What users really need is a click to achieve the goal, not to make the menu look high-end on the use of fancy interactive effects and features.

The Super Pull-down menu is a quick jump into the pop-up control, not a dialog box, not the more complex the better. Some super Pull-down menu has a close button in the upper right corner, users need a Quick click-Query-Jump, when the user moves the mouse to other navigation options or other areas of the page, the current menu will automatically close, so this "off" is not necessary. Dialogs can be complex and cool, and if they don't want to use it, turn it off and think it's in the way of moving to another location.

B. The Super Pull-down menu is suitable for navigation and browsing of Web sites, and is not applicable to operations that need to be continuously visible and that cannot be interrupted.

For example, some Web sites in the navigation bar "My Account" login design in a drop-down menu, users fill out the form when the mouse may be moved to the menu, so the menu has been missing, this design will hinder the user's operation. A simple and effective solution is to link the "My Account" login directly to an entirely new page. In addition, the Global search box is also an example, no one will put it in a drop-down menu, of course, the following image is an accident.

C. Avoid information overload as much as possible.

Don't throw in a lot of information because the Super Pull-down menu is huge and has lots of space. The less the option information means the less time to read, while reducing the cost of understanding and making fewer mistakes.

4. Barrier-free operation

To improve the accessibility of the Super Pull-down menu, there are several ways to do this:

A. Simple: Do not hinder access to the Pull-down menu, so that each option in the navigation to keep clickable, the link to the page is also correct.

B. Shortcut: Access by shortcut. For example, in Word2007, press one character selection and items in the menu, and display the corresponding Super Drop-down menu. Displays a shortcut prompt next to each option in the menu. This allows the user to operate smoothly and quickly with one or two letters, without memory, and with lower cost of understanding.

C. Compatible: After the completion of the Super Pull-down menu design, implementation phase we should pay attention to monitor and browser compatibility issues. Ensure that most users can navigate through all the information of the Super Pull-down menu.

"PostScript" Yesterday in the work encountered a question about navigation, a small handful er unknown truth of the masses on the "need to introduce a Super Pull-down menu," The topic of lively discussion. I would like to as an argument to the Lao's article translation, but see too much trouble, or in their own digestion based on a summary. If there is a deviation, please make great efforts to shoot brick ^_^.