Mobile app version of vmapp.org
Login or Join
Ann6370331

: 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

@Ann6370331

Posted in: #Canvas #DesignPrinciples #InterfaceDesign #Patterns

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 and small differences in size and each one has a label in the bottom of this orb. Is there any way to make more manageable, the case when some orbs are quite close to each other then the texts overlap quite heavily

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Ann6370331

1 Comments

Sorted by latest first Latest Oldest Best

 

@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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme