Home arrow Design Usability arrow Page 3 - 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 - Current Problems
(Page 3 of 10 )

"Three Clicks" vs. "Content Overload"

When talking to clients and designers about collapsible navigations we will sooner or later stumble over the "three clicks rule" [note 4]. This rule states that users should find any content on your page with three clicks (otherwise they get bored and fed up and leave your site to spend millions on your competitors' sites).

This rule does not state that the three clicks should happen in the same document and without a page load in between. Therefore we can satisfy it by adding a sitemap to our site, and voilà, two clicks and users can go anywhere on the page.

Of course this does not apply to a product catalogue, the three click rule needs to apply to the sub section you are in there.

Multi level foldout menus replicating a sitemap do allow the user to go anywhere on the site from any page. For a sighted user with scripting and CSS turned on this can be very convenient (granted the navigation is easy to use and does not require neurosurgeon hand-eye coordination skills), but what is shown on our screen is not everybody's experience.

By adding all the links - with all their necessary HTML - of the whole site to each page, we create a "content overload". Depending on the depth of our site, users without CSS or Javascript might see a nested list of 50 links, and will have to cope with this amount of data. Sighted users who can use a mouse might not have a problem with that, but keyboard and screen reader users will have to navigate through these links one at a time.

This can be a quite infuriating experience when you want to read link 28 and link 29 afterwards - it means hitting tab 28 times, reading, waiting for the page to load and hitting tab 29 times, repeated ad nauseam.

Some browsers have "type ahead" [note 5] functionality that jumps to a link when you type a word contained in it, and speech recognition systems can number the links for you. Regardless of these handy extensions, we still create a whole load of content that is not really relevant to this section of the site. A real world equivalent would be to print the register of a catalogue on each of its pages.


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