: Avoiding overlapping text pattern I was wondering if there is any design pattern for making overlapping text to show nicer in a scene. How my scene looks like; I have orbs with various colours

@Dunderdale640

I have thought of some different ways you could display text.

Hover State

The first one since this is an online application would be to use a hover state for the different orbs. This wouldn't really work if the orbs didn't have any meaning. You would most likely need to add some sort of icon. Then have description text when hovering or clicking on the orb.



Angled Text

You could angle the text. This is commonly used for graphs with long descriptions.



Alternating Heights

Alternating the placement of the description. If the text is not overly long, then alternating the placement to slightly overlap each other could work.



Adding More Space

Creating more space. From the screenshot it looks like you have varying widths between all of the orbs. Is there a reason for this? Another idea is to just create more space between orbs.



Vertical Layout

Using vertical orbs. This would require altering the design layout but moving the orbs to the left hand side would give you much more room for displaying text below or to the sides of the orbs.

Vote Up Vote Down