I'm making an app that validates a text file and then shows the errors associated with it. Currently all errors are listed as rows.

I'd like to make it easy to correct the errors in the text file so the validate-repair-validate cycle is fast.

What's the best way to go about it?

Here is my current attempt at it:

enter image description here

  • what is the count at the top referring to?
    – Mike M
    Jun 19, 2019 at 0:41
  • Number of errors (red messages) and warnings (yellow messages). Hovering over the count shows "7 Errors * 6 Warnings" Jun 19, 2019 at 0:58

1 Answer 1


Try visually mapping errors to code as adjacent to each other as possible. Allow filtering and selection to isolate code snippets.

Try a split pane view

Right now you have a lot of up/down scrolling in both the errors and the code pane below it.

The eyes have to keep mapping a selection above to a scroll animation and shift below, plus a potential scroll slip when the mouse leaves the selected error to go work on the code. Then the error message can be out of view just when you go to fix the code.

With a split pane you have more lines of code exposed in addition to the errors, ideally that on click show the selection, and line up the code similar to your animation above.

Since you allow some hover over the errors and warnings headers, you can allow some form of filtering and selection, so programmers can debug any errors, or work through them by language / severity level.

enter image description here

  • I love the split pane idea! Thanks. Showing the line number is possible as well. Jun 19, 2019 at 7:34

Your Answer

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

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