DreamingWell Morhping Tabular List

Morhping Tabular List

Posted by Travis Collins at April 12, 2006 4:48 PM

I have spent the last few days developing a "fluid user interface element" I call the "morphing tabular list". Many of the sites I develop use table structures to present information; one item per row. The biggest caveat is that these lists can grow to be quite large, but the application does not allow for paging, or shrinking the information in the list. Therefore I have created the Morphing Tabular list that creates a "middle step" in the normal "choose, click, view" process. This middle step of scrolling over an element to provide an expanded view, shrinks the list size by reducing the amount of information in each element and still provdes that "one page stop" for a list of information. Here is my working example:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dui lectus, fermentum at, ullamcorper eget, suscipit eu, felis.

Those intrested in usability and user interfaces should read on! I would like feed back and other takes on this user interface element.

Caveates of this method and this implementation include inherent limit on size of the roll over information, and the fact that rolling over an element causes the whole page to shift down. Clearly the fix for the page shifting is to display the list element expanded above the list. The size could be negated by having the expanded element be less wide than the orginal element, such that the users can scroll with their mouse down one side (maybe 50px wide) while each element expands along the rest of the list. I have yet to implement this. I am interested in other takes on this data presentation method. Let me know what you come up with!