Home arrow Design Usability arrow Page 2 - 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 - The Origin of Dynamic Elements
(Page 2 of 10 )

Hiding and showing elements on user interaction originates from application design. Applications become more usable by not showing us all their options at once but allowing us to turn them off and on. Furthermore, we can arrange the elements freely on the screen and the application "remembers" their state and location when we end it.

Application design offers a much richer interface than web design to allow for these usability enhancements. An HTML page is a document, and resides inside several applications - the operating system, the browser and, if needed, an assistive technology like a screen reader. What makes it worse is that we don't know which applications are used, and trying to guess which ones they are [See Note 2] is flaky at best if not impossible.

The Perfect Solution

A perfect dynamic elements solution should be unobtrusive and accessible:

  • It should only apply itself when it can be applied to avoid hiding elements that cannot be shown again.
  • It should be independent of input device
  • It should enhance existing markup rather than creating crucial content via CSS or Javascript.

These are the basic legal requirements [note 3], but our solution should also offer a bit more usability.

Maintaining the Current State

If possible, our solution should store the users' current status. Typically a hiding and showing solution initializes the page every time the browser loads the page. All elements that are to be hidden get hidden, which can be pretty annoying when you reloaded the page without wanting to. These unwanted reloads happen a lot when we use collapsible elements to simulate a whole web site in one document "to avoid long loading times".

As web users who had to suffer badly designed pages for years, we got used to going back to the previous page when we ended up on a wrong one either via the "back" button or the equivalent keyboard shortcut - not via the navigation - thus initializing all hidden elements. This can only be prevented by storing the current state in a session, database or cookie.

Telling the Users Where They Are

Our solution should make sure that users get the information where they are in the page hierarchy at any point, the "you are here" effect of the boring old text links.

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