2

In a list mode, I have a description column. Each record can contain a lot of text for this description field. Even if it is considered secondary information by the user, I still need to display it.

To avoid having line heights that are different in sizes, I force ellipsis on the first line. When the user clicks/hover/touch the ellipsis:

  • option 1: the user clicks on the ellipsis, it will open a pop-up to show to complete sentence.
  • option 2: the user hovers on the ellipsis to display an info tooltip.
  • option 3: expand the size of the input field so that it either becomes wide enough to show all text or becomes a text area that reveals all text.

The questions I have are:

  1. Do a long description must be on one or two lines?
  2. What should be the UX to see all the text without losing the context?

What would you recommend?

Thanks,

Improve this question

3 Answers 3

Reset to default
1

From the UX standpoint:

The user definitely becomes frustrated as the user has to click or mouseover on every item to see the full-length text (could be a popup or tooltip or inline) which is a tedious job when particularly the list is huge, even if it is 10 or so.

You may want to consider:

  1. Restrict the description to few characters which shows the full text in 2-3 lines. The brief (content) should be meaningful

  2. If you cannot restrict the text, have a button which says 'expand all / collapse all) along with tooltip.

Improve this answer
1

I'm a bit confused at the words input and textarea, because if these are really input and textarea elements, they shouldn't have any ellipsis at all. I'll assume you mean just one line or several lines of text. In this case, your best option is to vertically expand the line of text (think on an accordion type of element).

Thus, if you have this:

I'm a great line of text that will take no more than 60 char (...)

when clicked it will become:

I'm a great line of text that will take no more than 60 
characters, and after that I'll need to expand in as many
lines as needed

Expanding horizontally in a list view will mean horizontal scroll, and this way, text is not only completely visible but it also keeps an easy to read character amount

Improve this answer
2
  • Yes, sorry, they are not input. It is a display in list mode. The user is not entering any information but only consulting it. Will it be strange to see accordion expanding the complete page? What if the text is huge (2000 characters)?
    – Didier
    Jul 12, 2016 at 19:43
  • @Didier, please note that I'm not saying it should be an accordion , just tried to give you a reference on how shoul it expand. The important part is to expand vertically. As for 2000 characters (or whatever), as long as you make it clear this is a temporary status (usually using a transition), you'll be OK. Think about this: an ellipsis translates to more. This is understood by users, the challenge is always to keep the context and keep the user interactions at a minimum (for example, not going to another page unless content in ellipsis is so big it deserves its own page)
    – Devin
    Jul 12, 2016 at 20:41
1

I recommend for Option 3, the reason is - if user wan to see the more description then let user click and see more text. Showing text as inline expansion would be the better option. Showing more text on modal popup or popover would not be good idea cos it adds multiple DIV element and styles, simply adds addition style which is not required. Keep the ellipsis as link so that user can click on it see more text. Here I do not recommend on hover cos the expansion of text event will trigger when unknowingly user moves on links, this leads to minor UI glitch.

For ellipsis Keep the max height of 2 lines for the description, if this exceeds more than 2 line then add ellipsis.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.