2014 is the year of usability. Okay, I made that up, but we all know how important usability is. Typically when I talk usability, I’m more interested in the little things that set your website or app apart from the others. Instead of learning complex user interface theory, there are simple things you can employ quickly that’ll give your site an edge that other’s may not have.
Preserving an Elements Expand / Collapse State
One usability enhancement that I recently became aware of was the ability of a website to store my expand / collapse state of various elements on the page, between page loads. I’ve never visited a site that seems to maintain that state.
For instance, if I’m sneaker shopping , I might be presented with a grouping of sneakers by size. To view the sneakers in a particular size grouping, I’d click on the size to expand the full list of sneakers within.
I proceed to click on an individual sneaker product, then decide to use my back button to go back to the listing. But wait, my expanded size selection is now collapsed again – how annoying!
This is an understandable shortcoming, as tracking a user’s expand/collapse state in a server-side database would be a resource drain.
Leveraging HTML 5 Storage
HTML 5 Storage to the rescue (again)! By storing expand/collapse state in a sessionStorage key, unique to a page and element on the page, we can easily track and retrieve the state.
Instead of going into detail, I decided to write a quick jQuery plugin to add this functionality. For most, it should be a simple matter of including the plugin, then choosing the elements to provide the “Persistent Expand / Collapse” feature to.
The Download
You can check out the plugin plugin here: jQuery Preserve Expand / Collapse
Note: You could easily modify the plugin to use localStorage as opposed to sessionStorage, if that method makes more sense for your users.