I am given text span ranges (start and stop) for a specific paragraph from two separate APIs. One API has the spans as defined by a human while the other is defined by a machine. I essentially need to compare these spans and highlight them based on the outcome.

What makes it even more complicated is there are also two different span types that need to be identified as well. Lets call this category1 vs category2. The possible outcomes are:

  • Positive category1: spans from both APIs match
  • False positive category1: the machine defined a span that the human didn't
  • False negative category1: the human defined a span that the machine didn't
  • Positive category2: spans from both APIs match
  • False positive category2: the machine defined a span that the human didn't
  • False negative category2: the human defined a span that the machine didn't

Section1 = Category1 and Section2 = Category2 in the images below

enter image description here

Below is what I have done so far but was wondering if there is a clearer, more understandable way to do this. This is for internal use of my team so I don't really need to worry about accessibility.

enter image description here

  • This whole thing is a bit confusing. What is the purpose of "call[ing] this section 1 vs section 2". Why show two sections when it appears that the requirements - to visually distinguish between three types of match - are the same in both? Would your question still be valid if you removed the concepts of Section 1 and Section 2, and just showed one paragraph, with three statements, representing positive, false positive, and false negative?
    – dennislees
    Jun 9, 2017 at 16:08
  • For the person using this app it is important for them to know if the highlight is in section 1 vs section 2 as well as being able to visually distinguish between the 3 different match types. They are two separate requirements that I am identifying using highlights. Perhaps this isn't the best way? I updated my question to include a graph of the information the user needs to know when looking at the highlight/passage
    – Mcestone
    Jun 9, 2017 at 16:17
  • Ah, I just noticed that there are two colors in each highlight, that's not at all obvious or easy on the eye. Q: if the highlighted statement appears in a given section, won't it be obvious that that's the section its in? Why do you need to communicate two concepts in the highlight?
    – dennislees
    Jun 9, 2017 at 16:21
  • Section probably wasn't the right wording. Category is more accurate. "Section 1" vs "Section 2" does not symbolize where the highlight shows up in the passage but rather what the machine/human have identified as the category of the highlight. So it should be Category 1 vs Category 2.
    – Mcestone
    Jun 9, 2017 at 16:30
  • And what's the difference between a 'Category 1 Positive' and a 'Category 2 Positive' ?
    – dennislees
    Jun 9, 2017 at 16:31

2 Answers 2


Consider using fonts to distinguish the categories

Category 1 = Thin serif font

Category 2 = Heavy sans serif font

Different Colors = Different Match Types

You would need to provide a key and training so that users know what the font types and colors signify, but I think fonts do a better job at communicating the multi-level differences than multi-colored highlights.

The example below looks a bit disjointed because I threw it together in Word in 60 seconds. With a little thought put into the style, size, and weight of the fonts, as well as the colors of the highlights, I think it could work quite well.

enter image description here


I decided to use the first letter of the category type to distinguish between the two different categories and highlight colors to show pos, false pos and false neg. I liked the idea of the different font weights/styles but I was having trouble making the passage look cohesive.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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