The case against fly out navigation
Fly out navigation, also called cascading menu navigation, is a navigation system that displays sub–categories when a user places their mouse cursor over a navigation button. This style of programming is prolific in software and on the internet. This article questions the need for fly out navigation and provides some reasons why Tanagram Partners does not recommend using it.
Fly out navigation presented itself as a mistake to me in 1998 when I was working with a team of developers to build Cummins.com. We spent four times the budget trying to develop a dynamically populated fly out navigation system from existing Open Source code and scratch. The problem was that every browser had its own way of reacting to JavaScript and DHTML. One technique would work in Internet Explorer but not Netscape and another would be the opposite. We finally found a solution, as many others since have, but the question still remains: Is fly out navigation a good thing? To answer the question we did some research and developed this list of pros and cons. Our conclusion is the same. Even the best–designed and implemented fly out navigation is unwarranted and creates more problems than it solves.
Here is our list of pros and cons:
Pros
Cons
Pro #1 – Allows expert users to gain access to the entire site architecture with a single click
An expert user is an individual with significant computer experience who uses the web site or application, for which they are considered an expert, multiple times daily. Expert users are important, but typically do not make up the majority of users. The most common users tend to visit infrequently or are new to the site. Numbers alone do not make these individuals valuable to our clients. These “basic” users are very important because our clients understand that infrequent or new also means easy to scare away. They do everything they can to insure these infrequent or new users return to use their application.
It can be hard to dissuade clients from using fly out navigation because they are usually "expert" users themselves. To be fair, most of our clients need little more than a reminder that they are not part of the target demographic that the site is optimized for even if they use it like the rest of the customers.
Pro #2 – Simplifies page layout
Designers love simplicity. Naturally they are drawn to the minimalist qualities of a navigation metaphor that hides most of itself until it’s needed. As a professional firm we must always weigh the needs and find the point that strikes the balance between brand and ease–of–use. The answer always comes down to the client requirements. If the client needs a sleek interface more than they need to provide easier access to content then hidden or fly out navigation may be used. If the transaction not the presentation is the most important factor we’ll use a well–designed indexed navigation.
Pro #3 – Provides additional contextual information about the contents of the category the customer is about to browse
The key to successful navigation is a clear understanding of the content located under every link. Indexed navigation uses contextual groupings on the homepage to aid users in navigating content. Fly out navigation similarly shows sub–content groupings but waits for the user to rollover an object before doing so. This has promoted the phenomenon we like to call “User Scrub.” User scrub is when a user drags her mouse over every navigation element reviewing the fly outs before navigating to a destination. Scrubbing costs time the user must invest to overcome the deficiencies of the fly out site navigation.
Pro #4 – A popular solution
The internet is young, there are more common practices than best practices.
Con #1 – Costs more to develop, debug, and maintain
Recently, several of our clients made the decision to exclude fly out navigation from their new site design. The most common reason was the cost of maintaining the programming and user complaints. One client had a new user base in China that was still working on version 4 browsers. The JavaScript and DHTML capabilities of Internet Explorer 4.0 and Netscape 4.0 are very limited.
The programming used to create fly out navigation is not necessarily complex. The original writing of the code is not usually expensive. The costs begin to add up when the programmers attempt to make the navigation work on the large variety of browsers and platforms. Each browser has its own quirks and programming a system that works with all of these quirks gets complicated quickly. Clients also told us that over time, new programmers would modify the code to facilitate something new and end up breaking the navigation for several different browsers. The new programmer was then charged with learning all of the “hacks” that made the previous code work and would then be forced to work within that framework. This example helps illustrate the additional difficulties and costs associated with maintaining the programming knowledge.
Con #2 – Fly out navigation takes longer for users to navigate
Wichita State University published a study that found when users were searching for something on a web site, fly out navigation took notably longer to navigate. The report went on to state that users showed a preference towards non–cascading type navigation.
Con #3 – Fly out navigation introduces interaction errors.
Testing is a critical part of our development method. Over the years we’ve seen a trend while observing the use of fly out navigation. There are frequently issues with mouse / navigation interaction. While this phenomenon is particularly prevalent with beginner and elderly users, all user classes have provided examples of navigation failures or "losing" the navigation menu. Losing the menu occurs when a user, transitioning their mouse between a primary navigation button and a sub–button, accidentally rolls over either: 1) another button triggering a new fly out window or 2) off of the navigation completely triggering its disappearance. When losing occurs the user must start over from the beginning point and reacquire her navigation goal. Needless to say, all users expressed frustration after losing a menu.
Con #4 – Does not reflect most users needs
The typical basic user cannot and does not want to memorize a web site’s architecture to be able to access its content. Instead she finds an entry point that looks relevant, drills down, and if she fails to find what she is looking for, uses the back key to return to the home page and starts again. This method allows her to easily maintain a bearing on her location within the site. Being able to teleport from any location to every other location on the site is irrelevant to her. They don’t want to get lost. Instead, typical users require shallowed, topically categorized content categories and a navigation that always provides positional context.
Con #5 – Introduces a point of failure at the client level
Fly out navigation makes heavy use of client–side programming scripts like JavaScript. While today’s browsers typically support JavaScript, it can be disabled in the user preferences. If fly out navigation is incorporated special considerations must be made to accommodate a menu failure. The users must be able to navigate the site using two different methods of navigation.
Con #6 – Increases page weight
Unfortunately, dial–up connections are still a consideration for web site designers. While some very small scripts exist for fly out navigation, their addition is not inconsequential and must be considered during page weight optimization.
Con #7 – Decreases site accessibility for disabled users
In order to reach the widest audience possible, we strive to create web sites that are accessible to disabled users through a combination of techniques based on Section 508 standards and W3C Recommendations. The use of fly out navigation immediately complicates this practice. For low-vision users who rely on screen reading software to navigate the web a site that relies on a JavaScript based fly out navigation hides the majority of the site's content. Depending on how the fly out navigation was programmed it might even be impossible for these users to move beyond the home page of the site. For users with low motor skills fly out navigation, which typically requires more precise cursor control, presents even greater challenges related to losing the menu. While it is possible to alleviate some of the accessibility issues arising from the use of fly out navigation through modern programming techniques, these techniques are not fully tested and oftentimes add even more complexity to an already complex set of code.
Con #8 – Users think then do?
User Interface Engineering published a thought provoking article stating "Users Decide First; Move Second."
We believe these points make a compelling case against the use of fly out navigation and look forward to your insites. Please feedback with the link below.
Fly out navigation presented itself as a mistake to me in 1998 when I was working with a team of developers to build Cummins.com. We spent four times the budget trying to develop a dynamically populated fly out navigation system from existing Open Source code and scratch. The problem was that every browser had its own way of reacting to JavaScript and DHTML. One technique would work in Internet Explorer but not Netscape and another would be the opposite. We finally found a solution, as many others since have, but the question still remains: Is fly out navigation a good thing? To answer the question we did some research and developed this list of pros and cons. Our conclusion is the same. Even the best–designed and implemented fly out navigation is unwarranted and creates more problems than it solves.
Here is our list of pros and cons:
Pros
- Allows expert users to gain access to the entire site architecture with a single click
- Simplifies page layout
- Provides additional contextual information about the contents of the category the customer is about to browse
- A popular solution
Cons
- Costs more to develop, debug, and maintain
- Tests show users take longer to search using fly out navigation
- Introduces interaction errors
- Does not reflect most users needs
- Introduces a point of failure at the client level
- Increases page weight
- Decreases site accessibility for disabled users
- Users think, then do?
Pro #1 – Allows expert users to gain access to the entire site architecture with a single click
An expert user is an individual with significant computer experience who uses the web site or application, for which they are considered an expert, multiple times daily. Expert users are important, but typically do not make up the majority of users. The most common users tend to visit infrequently or are new to the site. Numbers alone do not make these individuals valuable to our clients. These “basic” users are very important because our clients understand that infrequent or new also means easy to scare away. They do everything they can to insure these infrequent or new users return to use their application.
It can be hard to dissuade clients from using fly out navigation because they are usually "expert" users themselves. To be fair, most of our clients need little more than a reminder that they are not part of the target demographic that the site is optimized for even if they use it like the rest of the customers.
Pro #2 – Simplifies page layout
Designers love simplicity. Naturally they are drawn to the minimalist qualities of a navigation metaphor that hides most of itself until it’s needed. As a professional firm we must always weigh the needs and find the point that strikes the balance between brand and ease–of–use. The answer always comes down to the client requirements. If the client needs a sleek interface more than they need to provide easier access to content then hidden or fly out navigation may be used. If the transaction not the presentation is the most important factor we’ll use a well–designed indexed navigation.
Pro #3 – Provides additional contextual information about the contents of the category the customer is about to browse
The key to successful navigation is a clear understanding of the content located under every link. Indexed navigation uses contextual groupings on the homepage to aid users in navigating content. Fly out navigation similarly shows sub–content groupings but waits for the user to rollover an object before doing so. This has promoted the phenomenon we like to call “User Scrub.” User scrub is when a user drags her mouse over every navigation element reviewing the fly outs before navigating to a destination. Scrubbing costs time the user must invest to overcome the deficiencies of the fly out site navigation.
Pro #4 – A popular solution
The internet is young, there are more common practices than best practices.
Con #1 – Costs more to develop, debug, and maintain
Recently, several of our clients made the decision to exclude fly out navigation from their new site design. The most common reason was the cost of maintaining the programming and user complaints. One client had a new user base in China that was still working on version 4 browsers. The JavaScript and DHTML capabilities of Internet Explorer 4.0 and Netscape 4.0 are very limited.
The programming used to create fly out navigation is not necessarily complex. The original writing of the code is not usually expensive. The costs begin to add up when the programmers attempt to make the navigation work on the large variety of browsers and platforms. Each browser has its own quirks and programming a system that works with all of these quirks gets complicated quickly. Clients also told us that over time, new programmers would modify the code to facilitate something new and end up breaking the navigation for several different browsers. The new programmer was then charged with learning all of the “hacks” that made the previous code work and would then be forced to work within that framework. This example helps illustrate the additional difficulties and costs associated with maintaining the programming knowledge.
Con #2 – Fly out navigation takes longer for users to navigate
Wichita State University published a study that found when users were searching for something on a web site, fly out navigation took notably longer to navigate. The report went on to state that users showed a preference towards non–cascading type navigation.
Con #3 – Fly out navigation introduces interaction errors.
Testing is a critical part of our development method. Over the years we’ve seen a trend while observing the use of fly out navigation. There are frequently issues with mouse / navigation interaction. While this phenomenon is particularly prevalent with beginner and elderly users, all user classes have provided examples of navigation failures or "losing" the navigation menu. Losing the menu occurs when a user, transitioning their mouse between a primary navigation button and a sub–button, accidentally rolls over either: 1) another button triggering a new fly out window or 2) off of the navigation completely triggering its disappearance. When losing occurs the user must start over from the beginning point and reacquire her navigation goal. Needless to say, all users expressed frustration after losing a menu.
Con #4 – Does not reflect most users needs
The typical basic user cannot and does not want to memorize a web site’s architecture to be able to access its content. Instead she finds an entry point that looks relevant, drills down, and if she fails to find what she is looking for, uses the back key to return to the home page and starts again. This method allows her to easily maintain a bearing on her location within the site. Being able to teleport from any location to every other location on the site is irrelevant to her. They don’t want to get lost. Instead, typical users require shallowed, topically categorized content categories and a navigation that always provides positional context.
Con #5 – Introduces a point of failure at the client level
Fly out navigation makes heavy use of client–side programming scripts like JavaScript. While today’s browsers typically support JavaScript, it can be disabled in the user preferences. If fly out navigation is incorporated special considerations must be made to accommodate a menu failure. The users must be able to navigate the site using two different methods of navigation.
Con #6 – Increases page weight
Unfortunately, dial–up connections are still a consideration for web site designers. While some very small scripts exist for fly out navigation, their addition is not inconsequential and must be considered during page weight optimization.
Con #7 – Decreases site accessibility for disabled users
In order to reach the widest audience possible, we strive to create web sites that are accessible to disabled users through a combination of techniques based on Section 508 standards and W3C Recommendations. The use of fly out navigation immediately complicates this practice. For low-vision users who rely on screen reading software to navigate the web a site that relies on a JavaScript based fly out navigation hides the majority of the site's content. Depending on how the fly out navigation was programmed it might even be impossible for these users to move beyond the home page of the site. For users with low motor skills fly out navigation, which typically requires more precise cursor control, presents even greater challenges related to losing the menu. While it is possible to alleviate some of the accessibility issues arising from the use of fly out navigation through modern programming techniques, these techniques are not fully tested and oftentimes add even more complexity to an already complex set of code.
Con #8 – Users think then do?
User Interface Engineering published a thought provoking article stating "Users Decide First; Move Second."
We believe these points make a compelling case against the use of fly out navigation and look forward to your insites. Please feedback with the link below.
posted by Joseph Juhnke at 9:51 AM
2 comments
