What is the best way to display a large data set, e.g. 50 words, in a table cell? I am thinking maybe a linkable piece of text such that when clicked, displays a popup box with the full text. Another idea what to display a few words with a hover/tooltip option to display the rest of the text.
Thoughts?
Please refer to this jsfiddle for an example of the structure I am working with
Both of your ideas are good, and here is a third.
Include a small link in the data cell saying "more" that when clicked, expands the table cell dynamically to show the full text. The link when expanded changes to say "less" which then collapses the table cell.
Deciding which options to choose will depend on the importance of the user being able to view the complete text in context.
I am assuming that its not about one cell, and that you will have a bunch of these cells in your table. If not just ignore the whole thing i wrote - and possibly notify me to remove my post :)
If yes, you will have to make some analysis of couple of things before you decide if you will go with popup or tooltip
frequency of reading that large part (if you are browsing for products, there is a good chance that i would like to see some more info about it frequently - which implies that popup will probably annoy me since it involves extra steps of closing and opening a window - so tooltip)
ability to compare them (wach out for a short term memory, you don't want an info to expire while person closes one window and opens the other - so tooltip again)
ability to focus on the content a person is reading (it is far more comfortable to use a popup instead of a tooltip, especially if there will be some complex actions in it - so popup)
content structure (if that content is consistently structured, than its easy to quickly skim through many data cells, since after the first 2 you learn how to read it. If its not you will probably spend more time in each - so popup)
size of that content (you dont want some HUGE tooltips on your page, especially if its bigger than a table cell - you will endup covering the other cells - so popup)
I explored all these options: hover, expand, twitter-esque sliding pane etc etc and all have pros and cons:
hover if it is unlikely word count will over run contents of cell. you can see the problem if every cell has to expand on hover and how annoying that would become.
expand seems to work pretty well if the hidden content is not too expansive. this approach also hands control back to the user that on hover does not
new window / sliding div or whatever works if the cell contents are really large, but then you have to ask yourself, why are you putting this kind of information in a table? Having said that, this approach is great for storing extra attributes that are tangentially linked and helpful to the object in the cell and I have used it as a way of allowing users to scan a list of objects, identify the most relevant record and display a div with all attributes associated with that record, an example of this might be a table of holiday notes where the cell lists the description of an activity for the user to identify and on click reveals a window, pane, whatever, of details related to the activity eg price of hire car, lunch details etc etc. Not a good approach for when the user has to compare columns though.
But the bottom line is, whichever option you go with, test!
Maybe another solution... You can show the full content of this cell in a infobar under the table with no delay, when you roll over a row. But its depend on how fast must explore the user the cell informations. Otherwise the tooltip is a good solution in most cases.
