View Full Version : Best way of display lengthy strings.

Mar 14, 2012, 01:51 AM
Dear All,

I am developing an application an Cocoa app using XCode on Lion. the app contains a main UI containing an scroll view to display strings of varying length in each of the cells in the view (max 35 characters)..

As the cells are of fixed length ( of fixed width and height), if an string to be displayed in the cell is greater than the cell size, I trim the string and append it with "...".

Could some of the experts in OS X UI development shed some light in other ways of displaying lengthier string which is generally followed by major MAC developers.

I could think of a few namely thought I am not sure that this is the right way to do it.
1. Continue to show by trimming and appending with string with "...", however if the user were to hover over the cell, show a tooltip with the entire string.

2. Reduce the font size such that the entire text is displayable in the cell.

Could somebody give me additional inputs on the same.

Thanks in advance.

Mar 14, 2012, 02:24 AM
If you're ok with bigger cells, you could always expand the height of the row when a mouse hovers over the cell with a nice simple animation, and then shrink it back when the mouse is outside the frame. If you want to go this route, take a look at the docs and sample code that deals with view-based tables. Alternatively, you could explode out the cell to a larger size, instead of the whole row. I suspect this would be too annoying though.

Mar 14, 2012, 02:39 AM
Thanks for the reply.

But, as stated earlier, to maintain consistency, cells are of predetermined dimensions hence Increasing the dimensions is not an option.

Mar 14, 2012, 03:08 PM
...But, as stated earlier, to maintain consistency, cells are of predetermined dimensions hence Increasing the dimensions is not an option.

UX design is all about making decisions based on constraints. It may actually be more useable for the user to hover over a truncated cell and have it's row animate open to reveal the text, and then have the row return to the consistent size when the mouse exits the frame. I think this would be a better experience than them trying to squint at a tooltip, furthermore, the user is not going to be able to select and copy text from the tooltip like they could with using the approach I proposed. I think it would be worth mocking up.

Build and run Apple's TableViewPlayground sample code (https://developer.apple.com/library/mac/#samplecode/TableViewPlayground/Introduction/Intro.html). Take a look at the Complex Cell TableView window, and check/uncheck the "Use Small Row Height" box to see kind of what I'm talking about. I think the appropriate animation would only apply to 1 row and the animation would be much faster, possibly with the ease in/ease out parameter set so it has a bit of a popping or snapping effect. I think users might find this classy, and an elegant way to solve a tricky problem.

Obviously you have your own constraints you have to deal with, but I think it might be worth considering. Consistency for it's own sake is often detrimental to usability.

Mar 15, 2012, 01:08 AM
Out of context I would suggest just sticking with the truncation scheme, it may not be worth the effort to expand the feature. This of course is predicated on the assumption that the full text is available elsewhere. Add the full feature when the entire app is done and ready to go and you've decided that it is worth it. If the full text is not available elsewhere, I would support the animation method suggested by Marinuthu.