Home arrow Design Usability arrow Page 6 - 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 - Explorer Menus (collapsible list navigations)
(Page 6 of 10 )

Explorer tree menus are vertical list menus that expand and collapse the sub-menus when you click their parent element - much like the explorer tree on windows showing sub-folders and programs when you click on a folder name. While posing less problems than a foldout menu, there are still some pitfalls to avoid.

1. Content overload

The rules of "content overload" apply here, the user may be confused or even annoyed by the amount of links not related to this section.

2. Not maintaining the current state

A good explorer navigation should keep the current section expanded when the page loads - something that can be easily achieved. As the current sub section stays visible after choosing an element, highlighting this element and keeping a visited state should also be no big issue.

3. Mouse dependence

Expanding and collapsing the elements on hover is not possible without trading off keyboard users. Therefore we should stick to clicking the menu sections to expand sub-elements. As the menu items are arranged vertically, expanding the sub sections when hovering over each of the parent elements could appear rather annoying. Users want to reach link number 5, not expand and collapse all sub-menus in between 1 and 5 before reaching it.

4. Unknown functionality

Elements that have sub elements should tell the user so, to avoid frustration loading a page when in reality there was a shortcut. We should make sure that this highlighting is only applied when the solution is working.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials