During the last Usability testing I conducted a lot of Users kept pressing the back button on a Flash only site. For me that meant the Flash application was not obvious and maybe a bad solution in this context.
Should I claim now that in every situation and for every project a pure flash site is bad or is usability also dependent on who you expect to reach?
I never claimed this is the solution to end all solutions, it is something to consider. The safest way is still a step by step order with reloads in between.
I dont know how ALA would ensure “tested solutions”, can you elaborate?
I like it very much. Just one comment though: under Fries, you forgot Poutine, a French-Canadian delicacy of hot fries covered with white cheese curds and then a heaping layer of gravy, mmmmm, good for the heart.
Copy & paste the code below to embed this comment.
Ben Davies
I’ve been thinking about the state/back button and bookmark problem for a while. Could you not do something as simple as:
1) Check for session variable. If the session contains a “state” reference ID, load the page with the with a hash reference of the state variable: i.e. mypage.php#9999-9999-9999-9999
2) If there is no state reference ID, create a new one. This involves creating a new entry in a database table called “state” which will use the state reference ID as the primary key.
3) For every message that is SENT to the server side, store the message content.
4) If the user visits the page via a bookmark or URL pasted into the address bar, check the database for the state reference ID, pull out the messages and run them again to rebuild the state of the page.
All you need to do then is store the last message sent for each updated section of the page (ie. if you have a table containing a list of records, only store the message that was sent to retrieve that list), and then “action replay” the message to get the state back. This would work for the back button/forward button too… (just replay the messages).
Doing it this way would mean that all the state control stuff would be server side: you would just need to run a function onLoad that checks the database for a state reference ID: if it exists, re-run the message used to generate that state…
Copy & paste the code below to embed this comment.
Ben Davies
oops, forgot to add: the reason for the session stuff is to allow only the session owner to make changes to the page state: “viewers” of the page state would see the page in its last updated form. The viewers ofthe page would be able to change the state, but doing so would give it a new state reference ID….
Hmmmmm… thinking about it… the state reference table could get very big very quickly if you had a popular “state” page…..
Copy & paste the code below to embed this comment.
Mike Rumble
Ben, you’ve proposed a nice solution but I can see that this may have problems scaling for larger sites.
If you’re going to use a database to record every change in state and then query this every time a page is loaded you’re going to see your database getting out of control very quickly, not to mention that additional overhead that this will add to the loading of your pages.
Copy & paste the code below to embed this comment.
Ben Davies
Yeah… I figured that the DB would get very big very quickly.
I like the idea of storing the messages sent to create the state of the page, and using the reference to track that state, but it also leads to another problem: how long do you store a “state”? Ideally, it would be for ever.
Binding the state to the browser (using cookies for example) would let you send the URL to other people either, so thats out of the question.
I found a error in your article (not related to your dynamic list).
you say:
[snip]Unless we generate the arrays of the script on the server (by setting a text/javascript header in a PHP script for example) or write them out inline, we have to maintain the data in two locations.[/spin]
I once did make dynamic js with header set to text/javascript and it made IE6 Win98 crash in combination with window.open fore some strange reason.
One SHOULD set the header to application/x-javascript which is the correct MIME-type. I hope this will help some people.
I like the idea behind this and it might spark some no methods, but the final example takes to much vertical space to use. Which is one of the reason to use a drop down box (select tag).
A better method is to use the optgroup tag. This way each group of options can be divided nicely in one drop down box.
If you have sub groups you can use CSS or entity to add an ident levels. I used since IE will not let you use CSS to modify the contents of select tag.
Optgroups are a wonderful way to sort a select into different categories, but it doesn’t really indicate a relationship between them and you cannot nest them, or am I wrong there?
W3c:
The OPTGROUP element allows authors to group choices logically. This is particularly helpful when the user must choose from a long list of options; groups of related choices are easier to grasp and remember than a single long list of options. In HTML 4, all OPTGROUP elements must be specified directly within a SELECT element (i.e., groups may not be nested).
As for nbsp, that is a bit oldschool and really is mixing content with presentation- painting with text.
If you define an off-left (or off-top) shift in pixels, then resize text to be extremely large, the text can intrude on the visible page unless carefully constrained. I’ve found it more foolproof to set the left margin of hidden text in ems so that its off-screen offset increases directly with the font size.
Nice article, Chris. Although, in the face of this bramble of accessibility & usability issues, my approach has been to keep a page quite lean to get immediate response time reloading it with new values. Most of the CSS you’re using here could still apply just fine if each menu level were supplied by the server.
Since you’re using JavaScript, why don’t you store unused portions of the menu system in hidden elements and then copy them to create new DOM nodes to produce submenus on demand? Or does that strategy have as many thorns for screen-readers as trying to unhide hidden elements?
Copy & paste the code below to embed this comment.
John Brookes
I like the hierarchical presentaion of information: I am not a web designer, and so do not know the gui issues well. But I am interested in the use of wizards to program code or at least do some kind of code generation. BTW, whats wrong with a page submit to send the results to the server? And what about this XMLHttpRequest object I keep hearing about? There is a technique to use a submit from an invisible (1 pixel) frame to transfer data without a page change.
These techniques get a bit confusing to a server programmer drilled in the ideology of MVC.
JB
I really like the idea of dynamic web content and I’m trying to utilise as much of it as I can in the slow process of redesigning my web site in my free time. One thing I thought would be nice was dynamic menus and after finding several possibilities I thought I’d look to some of my favorite CSS-oriented sites. Lo and behold I found this. It’s a cool idea, but I was wondering if it’d be possible to implement it differently.
I’d like to have links that are displayed across a top box (ah, the multi-box stereotypical layout…) change a menu in a left box when clicked or rolled over (either way is fine). So if one link is Home then it’d change the left box to have all the links for the home section. If one top link is Comics then the links in the left box might display stuff like Top Sellers, Recommended Reading, New This Week, etc.
I don’t know javaScript and I’m still learning PHP. The example, though, seems to load everything to the right.
Also, what’s this about tabbing through the links? Does that mean all the links are already there and they just have to be displayed, so a user could tab through the ones they can’t even see yet?!
This example: http://www.alistapart.com/d/complexdynamiclists/order.html was just facinating. I understand the usability/accessibility issues but it is just the navigation I have being struggling to think about. One that suggests journey or progression from one place to another in a horizontal form rather than vertically as most menus do. Thanks for the great pointer and all credit due.
Copy & paste the code below to embed this comment.
Shawna
Hi Christian,
I love your article and solution. It works well in the majority of browsers my visitors use and degrades well if javascript is turned off.
I’m trying to use it in a situation where I have two lists and I want my visitors to easily tab back and forth between the two lists. I almost have it working except I’d like to have the first list open by default – without the user having to click on the first tab – is that possible to do with your code and what would I need to change?
shouldn’t be hard to do, I will look into it after the bank holiday. There is sun outside here in London, and that is an occassion far too seldom to let go away unused.
This is a great example. But there is one piece of functionality I would like to have the parents (Main Courses, Drinks, Salads, Deserts in the example) be links (targeted to another frame). When I make them links they become null. It would be great to have another frame display all of the deserts when you click it and also have desert act as a parent and expand to show the desert categories. Is this possible without radically altering the code?
Copy & paste the code below to embed this comment.
Lance
I would like to put this in a box (e.g. border around the content), but I cannot get the box to contain the nested lists. In the posted examples, the size of the content area is fixed,so it is a non-issue. I thought that once the absolutely positioned inner boxes were nested inside a relatively positioned box, then the external box would grow to hold vertically to accomodate the the content, but for whatever reason, I can either show the entire list of nested lists and it fits in the box, or I can use the javascript to hide/show elements, but everything after the top level is outside the box.
Any examples of how I could get this working would be greatly appreciated.
Copy & paste the code below to embed this comment.
Joey Asato
Hello Mr. Niggel
This is my first time posting… Please don’t be offended.
I don’t know much about JavaScript, but is it possible to solve the tabbing problem by using tabindex attribute? And could this tab attribute be changed dynamically using JavaScript?
I just posted a new technique on my website to create accessible dynamic select boxes without arrays, using unobtrusive JavaScript and progressive enhancement: http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
This technique will probably change the perspective on the complex solution as described in this article. However, the real question will probably be how usable (or suitable) dynamic select boxes are as navigation tools.
From that point of view I like the solution Chris offers, because it is based on existing popular navigation interfaces and it visualizes how you navigate through a hierarchy.
Copy & paste the code below to embed this comment.
Kris
The Widget Browser on the Apple site should be marked up as a table instead of a collection of unordered lists. There are clearly three columns – not just visually, but logically! – namely Category, Widget and Info.
Set up as a table, it would also degrade much better for people without CSS or JavaScript. Let’s see if I can cook up an example.
Copy & paste the code below to embed this comment.
Kris
Hm, I grocely underestimated the trouble with relocating tablecells through CSS, due to lack of hierarchical nesting in tables. Ah well.. here’s how far I came, if anyone wants to finish it.
Copy & paste the code below to embed this comment.
Rod
Very incredible script but a big “default” : if you have 100 or 150 possible lists with a graphic (normal.gif), it loads the 100 / 150 normal.gif each time you click. The only solution I have found is to not put pics.
It becomes easy to criticize a script and throw problems at it like “what about the ajax problem?” – “what about when js and css is disabled?” – “what about screen readers?”
Sheesh. I can see why ALA initiated the ‘experimentation – use with caution’ warnings from a while back.
However, I will agree on the asthetics of it. It does look a bit awkardly ugly. But what’s really at stake here is the functionality. ALA has never claimed to be awesome designers, but this is a killer script (killer being a good thing).
Most likely, these are the kinds of widgets that I would implement on my own site. It would take weeks of meetings to get something like this implemented on a real project.
Copy & paste the code below to embed this comment.
Mosey
I was and am still very much interested in your method of display and choosing options. However, like some others thoughts – while it appears to be an excellent script technically, the aesthetics does baffle me slightly. I wonder how easy it is to make it into a vertical menu, (rather like the navigation menu for http://www.saila.com/usage/layouts/ ) while still retaining its accessibility? :) thanks!
57 Reader Comments
Back to the ArticleJens Meiert
I predict that one of two users will have problems dealing with that menu. And we need more tested solutions at ALA.
Danny
Those people seem to have a solution for the back button : http://dojotoolkit.org/
This article discusses this :
http://dojotoolkit.org/intro_to_dojo_io.html
Chris
During the last Usability testing I conducted a lot of Users kept pressing the back button on a Flash only site. For me that meant the Flash application was not obvious and maybe a bad solution in this context.
Should I claim now that in every situation and for every project a pure flash site is bad or is usability also dependent on who you expect to reach?
I never claimed this is the solution to end all solutions, it is something to consider. The safest way is still a step by step order with reloads in between.
I dont know how ALA would ensure “tested solutions”, can you elaborate?
Jules
I like it very much. Just one comment though: under Fries, you forgot Poutine, a French-Canadian delicacy of hot fries covered with white cheese curds and then a heaping layer of gravy, mmmmm, good for the heart.
Ben Davies
I’ve been thinking about the state/back button and bookmark problem for a while. Could you not do something as simple as:
1) Check for session variable. If the session contains a “state” reference ID, load the page with the with a hash reference of the state variable: i.e. mypage.php#9999-9999-9999-9999
2) If there is no state reference ID, create a new one. This involves creating a new entry in a database table called “state” which will use the state reference ID as the primary key.
3) For every message that is SENT to the server side, store the message content.
4) If the user visits the page via a bookmark or URL pasted into the address bar, check the database for the state reference ID, pull out the messages and run them again to rebuild the state of the page.
All you need to do then is store the last message sent for each updated section of the page (ie. if you have a table containing a list of records, only store the message that was sent to retrieve that list), and then “action replay” the message to get the state back. This would work for the back button/forward button too… (just replay the messages).
Doing it this way would mean that all the state control stuff would be server side: you would just need to run a function onLoad that checks the database for a state reference ID: if it exists, re-run the message used to generate that state…
Ben Davies
oops, forgot to add: the reason for the session stuff is to allow only the session owner to make changes to the page state: “viewers” of the page state would see the page in its last updated form. The viewers ofthe page would be able to change the state, but doing so would give it a new state reference ID….
Hmmmmm… thinking about it… the state reference table could get very big very quickly if you had a popular “state” page…..
Mike Rundle
Thanks for the link Christian, I’m glad that people can adapt negative indents or placement to fit their own needs.
The article was great, thanks for the write-up!
Mike Rumble
Ben, you’ve proposed a nice solution but I can see that this may have problems scaling for larger sites.
If you’re going to use a database to record every change in state and then query this every time a page is loaded you’re going to see your database getting out of control very quickly, not to mention that additional overhead that this will add to the loading of your pages.
Ben Davies
Yeah… I figured that the DB would get very big very quickly.
I like the idea of storing the messages sent to create the state of the page, and using the reference to track that state, but it also leads to another problem: how long do you store a “state”? Ideally, it would be for ever.
Binding the state to the browser (using cookies for example) would let you send the URL to other people either, so thats out of the question.
One to ponder..
Gerben
I found a error in your article (not related to your dynamic list).
you say:
[snip]Unless we generate the arrays of the script on the server (by setting a text/javascript header in a PHP script for example) or write them out inline, we have to maintain the data in two locations.[/spin]
I once did make dynamic js with header set to text/javascript and it made IE6 Win98 crash in combination with window.open fore some strange reason.
One SHOULD set the header to application/x-javascript which is the correct MIME-type. I hope this will help some people.
Jeremy Schultz
I like the idea behind this and it might spark some no methods, but the final example takes to much vertical space to use. Which is one of the reason to use a drop down box (select tag).
A better method is to use the optgroup tag. This way each group of options can be divided nicely in one drop down box.
If you have sub groups you can use CSS or entity to add an ident levels. I used since IE will not let you use CSS to modify the contents of select tag.
Chris
Optgroups are a wonderful way to sort a select into different categories, but it doesn’t really indicate a relationship between them and you cannot nest them, or am I wrong there?
W3c:
The OPTGROUP element allows authors to group choices logically. This is particularly helpful when the user must choose from a long list of options; groups of related choices are easier to grasp and remember than a single long list of options. In HTML 4, all OPTGROUP elements must be specified directly within a SELECT element (i.e., groups may not be nested).
As for nbsp, that is a bit oldschool and really is mixing content with presentation- painting with text.
Paul Novitski
If you define an off-left (or off-top) shift in pixels, then resize text to be extremely large, the text can intrude on the visible page unless carefully constrained. I’ve found it more foolproof to set the left margin of hidden text in ems so that its off-screen offset increases directly with the font size.
Nice article, Chris. Although, in the face of this bramble of accessibility & usability issues, my approach has been to keep a page quite lean to get immediate response time reloading it with new values. Most of the CSS you’re using here could still apply just fine if each menu level were supplied by the server.
Since you’re using JavaScript, why don’t you store unused portions of the menu system in hidden elements and then copy them to create new DOM nodes to produce submenus on demand? Or does that strategy have as many thorns for screen-readers as trying to unhide hidden elements?
John Brookes
I like the hierarchical presentaion of information: I am not a web designer, and so do not know the gui issues well. But I am interested in the use of wizards to program code or at least do some kind of code generation.
BTW, whats wrong with a page submit to send the results to the server? And what about this XMLHttpRequest object I keep hearing about? There is a technique to use a submit from an invisible (1 pixel) frame to transfer data without a page change.
These techniques get a bit confusing to a server programmer drilled in the ideology of MVC.
JB
Waa
I really like the idea of dynamic web content and I’m trying to utilise as much of it as I can in the slow process of redesigning my web site in my free time. One thing I thought would be nice was dynamic menus and after finding several possibilities I thought I’d look to some of my favorite CSS-oriented sites. Lo and behold I found this. It’s a cool idea, but I was wondering if it’d be possible to implement it differently.
I’d like to have links that are displayed across a top box (ah, the multi-box stereotypical layout…) change a menu in a left box when clicked or rolled over (either way is fine). So if one link is Home then it’d change the left box to have all the links for the home section. If one top link is Comics then the links in the left box might display stuff like Top Sellers, Recommended Reading, New This Week, etc.
I don’t know javaScript and I’m still learning PHP. The example, though, seems to load everything to the right.
Also, what’s this about tabbing through the links? Does that mean all the links are already there and they just have to be displayed, so a user could tab through the ones they can’t even see yet?!
Jon Dowland
There’s no vegetarian option for main courses :)
Matthew
This example: http://www.alistapart.com/d/complexdynamiclists/order.html was just facinating. I understand the usability/accessibility issues but it is just the navigation I have being struggling to think about. One that suggests journey or progression from one place to another in a horizontal form rather than vertically as most menus do. Thanks for the great pointer and all credit due.
Shawna
Hi Christian,
I love your article and solution. It works well in the majority of browsers my visitors use and degrades well if javascript is turned off.
I’m trying to use it in a situation where I have two lists and I want my visitors to easily tab back and forth between the two lists. I almost have it working except I’d like to have the first list open by default – without the user having to click on the first tab – is that possible to do with your code and what would I need to change?
Many thanks for a great solution!
Chris
shouldn’t be hard to do, I will look into it after the bank holiday. There is sun outside here in London, and that is an occassion far too seldom to let go away unused.
Jack Turner
This is a great example. But there is one piece of functionality I would like to have the parents (Main Courses, Drinks, Salads, Deserts in the example) be links (targeted to another frame). When I make them links they become null. It would be great to have another frame display all of the deserts when you click it and also have desert act as a parent and expand to show the desert categories. Is this possible without radically altering the code?
Chris
It is possible, but how would you expand the children? This would make you dependent on a mouse again.
Lance
I would like to put this in a box (e.g. border around the content), but I cannot get the box to contain the nested lists. In the posted examples, the size of the content area is fixed,so it is a non-issue. I thought that once the absolutely positioned inner boxes were nested inside a relatively positioned box, then the external box would grow to hold vertically to accomodate the the content, but for whatever reason, I can either show the entire list of nested lists and it fits in the box, or I can use the javascript to hide/show elements, but everything after the top level is outside the box.
Any examples of how I could get this working would be greatly appreciated.
Joey Asato
Hello Mr. Niggel
This is my first time posting… Please don’t be offended.
I don’t know much about JavaScript, but is it possible to solve the tabbing problem by using tabindex attribute? And could this tab attribute be changed dynamically using JavaScript?
Bobby van der Sluis
I just posted a new technique on my website to create accessible dynamic select boxes without arrays, using unobtrusive JavaScript and progressive enhancement: http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php
This technique will probably change the perspective on the complex solution as described in this article. However, the real question will probably be how usable (or suitable) dynamic select boxes are as navigation tools.
From that point of view I like the solution Chris offers, because it is based on existing popular navigation interfaces and it visualizes how you navigate through a hierarchy.
J Hendron
Dessert, not ‘desert.’ I always remember “two s’s” because I want more dessert.
pickupjojo
Very nice article, thank you very much.
Brad
Apple has a variation on this kind of column list on their site, styled to look similar to the columns in the Mac OS X Finder;
http://www.apple.com/downloads/dashboard/
Dave
Very useful function made here.
Kris
The Widget Browser on the Apple site should be marked up as a table instead of a collection of unordered lists. There are clearly three columns – not just visually, but logically! – namely Category, Widget and Info.
Set up as a table, it would also degrade much better for people without CSS or JavaScript. Let’s see if I can cook up an example.
Kris
Hm, I grocely underestimated the trouble with relocating tablecells through CSS, due to lack of hierarchical nesting in tables. Ah well.. here’s how far I came, if anyone wants to finish it.
Rod
Very incredible script but a big “default” : if you have 100 or 150 possible lists with a graphic (normal.gif), it loads the 100 / 150 normal.gif each time you click. The only solution I have found is to not put pics.
te
thanks alot!
Dustin Diaz
It becomes easy to criticize a script and throw problems at it like “what about the ajax problem?” – “what about when js and css is disabled?” – “what about screen readers?”
Sheesh. I can see why ALA initiated the ‘experimentation – use with caution’ warnings from a while back.
However, I will agree on the asthetics of it. It does look a bit awkardly ugly. But what’s really at stake here is the functionality. ALA has never claimed to be awesome designers, but this is a killer script (killer being a good thing).
Most likely, these are the kinds of widgets that I would implement on my own site. It would take weeks of meetings to get something like this implemented on a real project.
Mosey
I was and am still very much interested in your method of display and choosing options. However, like some others thoughts – while it appears to be an excellent script technically, the aesthetics does baffle me slightly. I wonder how easy it is to make it into a vertical menu, (rather like the navigation menu for http://www.saila.com/usage/layouts/ ) while still retaining its accessibility? :) thanks!
Tatyana
Thank You, Christian!
This is very interesting and comfortable solution! And understandable examples.
a user
common when is the next update?
Jeffrey Zeldman
What
REALLY
I can use HTML. Here’s the code I wrote for my page:
<h2>This is an H2 headline</h2>
I’m so glad HTML is blocked.
Oops. It isn’t.