How to show page titles that are really long generated strings, as well as in the breadcrumb?

Question

Throughout our product we have some pages that are generated strings that can, and often are, really long. But, we also have pages with set titles that aren't such as: Deployments, Blueprints, Gateways.

Check this screenshot for reference:

My colleague removed the titles throughout the product for exactly this reason, stating that having just the breadcrumb would be enough for the user to know what page he is on. I disagree and believe this is bad practice, so I'd like to have the title.

The problem is having such a long string as a title looks really bad, and if it's too long it will have to be truncated which partially defeats the purpose of having a title in the first place.

Here's what the title looks like on default screens, I'd like the solution to be consistent throughout.

Any ideas or best practices here?

Answer 1

I would have the title be of a fixed length, and if it exceeds that length "..." is added to the end.

For example, say the maximum length is 12 characters. "Gateways" would remain the same, but a long string like "bb545jh6b438d8eerbb5exxxx" would become "bb545jh6b438..."

I would then have a tool-tip on the title that displays the full String.

Answer 2

Display title
Let the user define a display title when the new page is generated. The actual title will remain unique (for back-end purposes I guess), but the display title will be used as title to be displayed at the top of a page.
I don't know if this is at all possible, but it's just an idea.

Strip and format string
If all generated string follow the same format, you could strip and format the title in a new way. Like in your example, it kind of looks like the string is made up out of [category]_[title]-[unique_id]. If so, you could strip away the unique_id, perhaps the category, strip away any excess special characters to be replaced by a space and change the first letter to a capital letter.

That's all I can come up with.

Answer 3

You can trim title by appending 3 dots (...) and keep tooltip on the same which will show the full title on hover.

Answer 4

You should use Ellipsis for long titles. This can be achieved with CSS, JavaScript or a mix of both.

If you have very long item entries, just add an ellipsis for the item:

If the breadcrumb becomes too long, add ellipsis for the breadcrumb section: You can decide on a limit when this behaviour starts to appear, after 5 items, after 3 items, etc. In the example the limit is set to 6, although there are 8 items to display.

You can implement so that the ellipsis are clickable. So when the user is pressing on the "..." the breadcrumb gets expanded as: