Dynamic Page Elements-Cloak and Dagger Web Design - Current Uses of Dynamic Elements
(Page 5 of 10 )
Let us take a look at the pros and cons and the feasibility of different uses of dynamic page elements. We will focus on what is the best practise for these, taking into consideration both accessibility and usability.
Foldout or Dropdown Navigations
This type of navigation is the most common use of hidden elements, a navigation on the top or the left of the page which acts like the menus of applications or the windows start menu. The sub menus are positioned over the content and do not cause the rest of the content to shift when being expanded.
If we use this kind of navigation, we need to be aware of several problems:
1. Content overload
If we use the whole sitemap as a navigation on each page, we do exactly what was explained earlier. Too many irrelevant links for this section will confuse users and the extra markup will slow down the page.
2. No "you are here" state
As the whole navigation collapses once users have chosen a page, there is no indicator as to where they are in the site, how many other elements there are in the same section and how many levels deep they are. We need to make them aware in another way (breadcrumbs, repeating the section navigation in a visible way).
3. Screen estate restrictions
The worst thing that can happen with a multi level drop-down menu is that it doesn't fit the screen and either cuts off options or causes a scrollbar.
State 1 does not pose a problem, State 2 makes it impossible for a sighted user to know what the options are and State 3 might make it impossible to use the menu. When the menu causes a scrollbar, and the menu hides and shows itself on hover rather than click, it gets hidden when the user tries to reach the scrollbar. This can become pretty frustrating.
To avoid these issues, we need to fix the page dimensions and check if all menus fit the screen when expanded to the last level. As we cannot know the size of the users browser - which can be different to the screen resolution - this poses other usability and accessibility problems.
One annoying browser bug we have to be aware of is that some browsers show flash movies and form elements on top of the menus instead of being covered by them. There is a work-around using an IFRAME [note 13], but that is hardly accessible. For Flash movies, there is a better solution [note 14].
The safest bet is to ensure that the space all the expanded elements cover is free of multimedia elements, forms and - of course - frames.
4. Mouse dependence
A foldout menu has to be navigable via keyboard to remain accessible. Therefore it should expand and collapse when the user clicks it, for reasons explained earlier. This is less sexy and does not give the same experience as an application menu, but web development is just not application development.
Many foldout menus using hover to trigger the sub menus can even get mouse users into real trouble. Examples are menus that don't allow for a big enough space to hover over or show gaps in between menu and sub menu. It is pretty frustrating to navigate down into the third level just to see the menu vanish again when you slipped a bit.
5. Unknown functionality
When we use foldout navigations then we should make users aware that there are more options to come when they activate this link. Studies have shown [note 15], that if users don't get that information, they won't use the navigation and get easily lost - rendering our whole effort to increase usability pointless.
Next: Explorer Menus (collapsible list navigations) >>
More Design Usability Articles
More By Christian Heilmann
