I am writing an IOS app where there are labels in the mid point of each line segments. When the line are short the labels become clumped they block eachother.

The reason that I'm putting it in the middle of each line is because the label is going to show info about their respective line. How can I deal with the case that the labels are close together so they don't block eachother?

enter image description here

enter image description here

  • Can you color code each line/label? You could use colors + legends to avoid placing everything on the center. – Fernando Aug 8 '17 at 22:14
  • @Fernando thats a decent idea. You mean just move the labels somewhere to the side entirely right? – bakalolo Aug 8 '17 at 22:18
  • Yes, I mean literally a legend on the top/bottom right. Or the hard solution: move this to Stack overflow and ask for a placement algorithm. – Fernando Aug 8 '17 at 22:24
  • Can you give a little more context as to what the app is doing? there are other problems here too like the white lines fading into the background image. – J. Dimeo Aug 9 '17 at 2:29
  • @J.Dimeo it's suppose to measure distance of whatever is in the picture by specifying the distance using circles and the label is suppose to show the distance. Let me know what suggestions you have interested to hear. – bakalolo Aug 9 '17 at 2:44

Some ideas:

  1. What if the labels become smaller the closer they are? This will give space to both labels and the seeing the actual lines.

  1. Can the user move specific labels to front by clicking its respective line? This way the labels can overlap but the user user can see the proper information when needed.

  1. Extending a line from the line to the label, for examples:

enter image description here


If this app is meant to be somewhat of a ruler, is it important that the user see all measurements at once? What if, after points were selected, the lines between the points themselves were selectable, and would trigger the updating/refresh of a single Distance: [ ] label in a corner with that line's distance.

I'm envisioning the user taps points to create lines, then taps each line to view the distance between those points.

For extra credit, bold or otherwise highlight the selected line, and "lightbox" the rest (fade the background image and other lines) to emphasize which line is selected and whose distance is displayed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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