Handling long text scenarios across multiple interaction patterns

Question

I'm working on an analytics dashboard. Most of the data we get is pulled in from multiple sources/3rd party tools. Also, most of the data is user generated content so we don't have a control on what is being shown. Majority of the information displayed on the UI is dynamically displayed.

So the major problem I am facing is accommodating the long strings of data being displayed in various forms on our interface:

1. Entity/brand names

2. Menu items

3. Entities on the graph scales

4. Graph legends

5. Cards view

6. List view

7. Drop downs

At some places we’ve used ellipses at the end and shown the full name/text as a tooltip on hover. However, I’ve received feedback that this is hampering the experience of the product since data is our USP.

We’ve tried wrapping the text to multiple lines at certain places but that results in compromising on the look & feel of the product. Example - size of cards will vary in a grid.

I want to standardise one behaviour across the product for any long text scenarios.

Can anyone give any ideas on best practices or solutions for this?

Answer 1

A potential solution for the card UI elements with dynamic content is to bring in a masonry UI. I've had to utilize it to solve for this exact scenario you're bringing up and it works well. A few large sites use it as well to handle user-generated dynamic content, like Pinterest.

Here is a few examples of masonry UI libraries:

http://isotope.metafizzy.co/layout-modes/masonry.html

http://masonry.desandro.com/

Hope this helps!