I'm making a webapp for my local university, which allows teachers to create exams made up of open-ended/multiple-choice questions and JavaScript programming exercises, as well as group them by topic and a whole host of options to randomize the items in the exam, plus other settings.

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: enter image description here enter image description here

Here's a couple collapsed question editors: enter image description here

Here's one of the most important parts: the fully expanded question editor enter image description here

Here's the coding exercise editor: enter image description here enter image description here

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: enter image description here


Specifically, I'd like to know:

  1. 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?
  2. 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?
  3. 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
  4. 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?
  • 2
    It may seem counterintuitive, however... due to the overall subjective nature, asking for "feedback" or "what can I do to improve X" is off-topic. Questions need to have the ability to be answered in a manner that can be seen as "correct", not merely an opinion with which you may agree. Please review the Guidelines for critique questions. In short, questions for critiques need to have answerable goals. General advice or feedback is too opinion-based and broad. – Scott Apr 28 at 11:01
  • 1
    The above comment being posted.. it is confusing due to the mix of colors and languages. – Scott Apr 28 at 11:04
  • 1
    No, but user interface design and usability is not the same things as graphic design. A graphic designer will generally handle how it looks and make that that work visually but they wont neccseserily tell you to remove a section or functionality because it is allready handled by xyz or suggest entirely different approach. So asking UX is in many ways a better alternative here. A bit like the cover designer of a book does not tell you about your plot hole. – joojaa Apr 30 at 12:37
  • 1
    @SamueleB. Your question is really broad and difficult to answer. It touches on both design and UX. My thoughts on it ... it is indeed cluttered. The solution is to present to the user only the task at hand and hide the rest. This could be done with pages, accordions etc. A good approach is to note the order of the actions and make sure they appear in front of the user in the correct order. Then also rate the action by importance and make sure the important tasks are big and easy to see. I think this needs much more work. – Komental Apr 30 at 18:27
  • 1
    @SamueleB. Yes, in general confusion comes when there are too many things to interact with or their design is not very obvious. That's why this is kind of complicated because you have UX problems to solve and also the design could be better. One thing I see as a problem is that there is a lot of sparse text and it's not very obvious if it is interface or data. Some elements need more space around them. I don't want to say it's too bad, it's decent but I have a feeling that teachers would struggle to use. After all test it on them and see if they can use it without your assistance. – Komental Apr 30 at 23:30

Here are a few changes I may consider...

  • Consistent Color -- You are using red, green, blue, purple, gold - some different colors are use for similar items ("add" uses both green and purple). There's no overall consistency. By using consistent colors for the same actionable items, the user quickly feels the UI is more intuitive. So, all "add" buttons should be the same color. All "remove/delete" buttons should be the same color, etc.
  • Unify colors -- For the basic content you appear to be using a range of greys. Stick to only a couple shades. For example the question number + and - really standout due to the dark background. It's unnecessary.
  • Zebra Striping -- This is more preference, but I don't feel the zebra striping is aiding the UI at all. Merely implement a grey divider and remove the grey backgrounds.
  • Consistent Icons -- You are using at least 2 icons for "remove/delete". They should all be the same icon to promote familiarity.
  • Icon Placement -- Never place a collapse/expand button right next to a delete button. One simply mis-click and you anger users. Move the collapse/expand button to the other side of the field.
  • Fieldset Legends -- Remove these. Place headers inside the content area so that the areas feel enclosed. By using legends there's a visual rollercoaster. Legends make sense if areas aren't collapsable or if the form is small in nature. But for larger forms I find legends more of a distraction than benefit. (Admittedly, this is my opinion.)
  • Input Areas -- You've got different heights for single line text inputs. Make all the text inputs the same height, and use the same font size, etc.

Below I've used 2 greys - #eeeeee and #aaaaaa. Green for user actionable items, red for removal. And I've used a yellow background highlight to indicate a currently active area.

I did not watch the video, purposefully. I believe a good UI should be intuitive enough to understand how it will work without any video tutorial. So, with that in mind and not fully understanding functionality, these ae all merely suggestions.

enter image description here

I'm not really certain about the "Aggiungi" (add?) button in the above though. It sticks out like a sore thumb in the above. I'd prefer a different implementation for that item. But I'd need to better understand functionality to work that out. Off-hand I'd suggest maybe placing it at the bottom of existing topics as opposed to the top. If a user is going to add a topic, they are going to be at the bottom of the current list. Necessitating a scroll to the top to add another topic is counterintuitive. Perhaps a separate row with a simple (+) Add Topic button.

  • Thank you! This is very useful advice. (Yes, "aggiungi" means add.) The reason why I added a video is because the interface doesn't fit in a single screenshot, and I thought some may prefer just a quick screencast of the page scrolling down to reveal the whole interface. Per the placement of the "add" button for question topics: I tried to keep it consistent with the "add" button for actual questions. Here's the intended use for the UI: you add some topics, then you add your questions, and place each question in a topic with the dropdown menu inside the question editor (see 4th screenshot) – Samuele B. Apr 28 at 20:12
  • Another area of concern for me is the navigability of the interface. It becomes huge very fast as soon as a few questions and topics are added, and I really don't want for it to end up being hard to navigate because that means nobody is going to use it. Like I mentioned, I'm thinking of an index at the top, but I'm open to more suggestions regarding that too – Samuele B. Apr 28 at 20:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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