Home arrow Design Usability arrow Page 5 - Dynamic Page Elements-Cloak and Dagger Web Design

Dynamic Page Elements-Cloak and Dagger Web Design

There are not many aspects of web design that seem to ignite the same fascination in developers as making elements dynamic by hiding and showing them on user interaction. Collapsible lists, maps with hover elements and multi level drop-down navigations still seem to be hot and need to be part of a web site to make it "cool" and to "increase usability". Much like the magician conjuring the rabbit out of the top hat for the tenth time in a row, this design stunt does gets a bit stale though. Maybe it is time to take a step back and look at what we do.

Author Info:
By: Christian Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
October 18, 2004
  1. · Dynamic Page Elements-Cloak and Dagger Web Design
  2. · The Origin of Dynamic Elements
  3. · Current Problems
  4. · Troubles with Available Screen Estate
  5. · Current Uses of Dynamic Elements
  6. · Explorer Menus (collapsible list navigations)
  7. · Collapsible Page Elements
  8. · Tooltips and Hidden Extra Information
  9. · Enhanced Internal Navigation
  10. · Conclusion and Notes

print this article

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.

blog comments powered by Disqus

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials