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.
Editor and execution results:
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.