I am not particularly experienced at making user interfaces, so I'd like to get some insights as to the points I raise at the end of the post. My main concern is the interface could get cluttered up and become hard to navigate as more and more exercises are added to an exam.
Here are some screenshots of the app, followed by a brief video showing how it's navigated in a browser. Note: in the video and in some of the screenshots, you'll see some texts in Italian. The original editor is fully in Italian, so try and factor out the fact that there's text in two different languages. I tried to quickly change the texts in order to post this here, and apparently left out some. That's got nothing to do with the actual product. Apologies for that.
Here's the part where you add topics:
Here's a couple collapsed question editors:
Here's one of the most important parts: the fully expanded question editor
Here's the coding exercise editor:
Here's a view of a list of a few topics, some of them with their optional text editor opened: as you can see, it can get cluttered:
Specifically, I'd like to know:
- Is my color selection good for the goal of making the interface user-friendly and making it easy to tell the elements apart? What can be done to improve the overall colorset?
- Is the visual hierarchy, spacing, size of the elements, well-designed overall? If not, what stands out the most as something that can be improved?
- Is the interface easy to navigate, by the looks of it? If not, what could be done to improve on that? One thing I've been considering is adding an "index" of the various questions/exercises, grouped by topic, where you have links that allow you to jump to a specific item in the page
- Is the general layout too messy? Its complexity tends to grow as more questions/exercises/topics are added to the page. What can be done to keep it tidier?