Home arrow Design Usability arrow Page 9 - Dynamic Page Elements-Cloak and Dagger Web Design
DESIGN USABILITY

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Dynamic Page Elements-Cloak and Dagger Web Design - Enhanced Internal Navigation
(Page 9 of 10 )

Scripting is often used to enhance "internal navigation" - a list of links pointing to anchors inside the same document. We can use scripting to hide content parts and show them when the user clicks the link, thus avoiding a long scrolling page. Effectively, we are simulating a site navigation in one document, which creates other problems:

1. Changing user behaviour patterns

As mentioned earlier, a wrong jump in a simulated paged navigation like this might make the user try to go back via the back button or the appropriate keyboard shortcut. This will initialise - hide all elements, and show the first one - not the last one the user has chosen. There is not much we can do about that except for making the user aware that this is not a "site inside one document".

2. Disallowing bookmarking and direct linking

User won't be able to bookmark a certain section of the document, and some browsers do not change the state of the links to visited once you jumped to this section. A good scripting solution should allow the user to directly jump in the page by supplying the anchor in the URL:

http://www.foo.org/index.html#bar

Furthermore, we could trace the clicks and set a cookie to show the last section when the user visits the page again.

3. Jumpy display

Unless we show and hide the element via including it or not on the backend, there will be a brief moment when the element is visible before it gets hidden. This is nothing serious, but can be annoying.

4. Cutting off content

By hiding different content sections and showing them onclick we make it easier to read the document on the screen. Some users, however, may want to print out or see the whole document. We should give them an option to do so.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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