I made a webapp that allows users to take on programming exercises: the assignment text is shown to the user, they have an editor to type code, and the code they submit is tested against a test case suite to see if the submitted solution is correct.

I am concerned with how handy and usable to interface I made for that is.

The user is presented with 3 tabs: on the left, they have the tab that opens the pane with the exercise text, in the middle, there's the one that opens the editor, and finally on the right there's the one that shows them the test cases.

When the user types code and runs it, the results are shown on the right of the editor.

Text pane:

enter image description here

Editor and execution results:

enter image description here

Test cases:

enter image description here

Here's the interface in action: https://youtu.be/LB1Ht6zorbE

I'm looking for a way to make the interface more usable.

There is a lot of content to show the user. Is the division in three panes with tab navigation a good fit for this? I am concerned with the users finding it annoying to have to back and forth between the text and code editor. I tried having the code editor displayed at all times below the text, and have the tabs just switch between the text and the test cases, but I believe that becomes cumbersome to navigate when the text or test cases are very long.

  • I see some fixes, but, questions: the text inside the text field has different styles (normal and italic), where are they set? Or is it just copy/paste from somewhere else? What's the longest text line in the test cases field?
    – Danielillo
    Commented Jul 24, 2022 at 14:24
  • The formatting in the exercise text is determined by the creator of the exercise. They have a rich text editor where arbitrary html is allowed. The test cases don't have an upper limit: they can have both a description (not shown here, but it has a left border looking like the exercise text and is shown right above the code) and a code field which can be arbitrarily long, depending on the needs of what is to be tested.
    – Samuele B.
    Commented Jul 24, 2022 at 14:45

1 Answer 1


Well, I don't see it as bad as a UX idea, but I would try to adjust some design, mainly spacing optimization.

There's a coherence in the three screens, although maintaining the same width in the work area I don't think it's necessary, it may even be a tradeoff. Personally, I find it difficult to interpret the wide spaces without utility, where the user is forced to scroll vertically in front of 25% of the screen width with information.

enter image description here

Text line length

The number of characters per line of the *Text pane* is extremely long, which causes tiredness and errors in reading. In a long exercise, with many symbols a normal reader will probably get lost in one of the central lines, having to read the text again from the beginning.

In general, the optimum number of characters per line in a text is three alphabets, approximately 90 characters. By eye, in the example of the question, the limit of the text box would be after the word "module" in the first line.

More about optimal line length


While redundancy is allowed in UX, I don't know if it's the same with repetition. In this case, the user only needs to know the number, the rest is unnecessary information (noise) since it is inside that section. It is the same as putting Home on a website as a title on the home screen and then at the top of each section.

enter image description here


The CTA buttons share only color, size and shape, the rest is position and space contrast:



Analyzing the application and in reference to what was stated –I am concerned with the users finding it annoying to have to back and forth between the text and code editor–, I think the most important thing for the user is the development of the exercise, the other three options, Text, Execution results and Test cases are options to display while the exercise is running, so I would try to keep the edit window as a fixed element and the possibility of doing a split with the other three options. In this way, everything is reduced to a single screen, and your concern will become the decision of the user.

  • Edit field on the left
  • Interchangeable side windows from tabs
  • Resize split button on hover

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.