Show relevant information as UI text correctly



  • I'm making a webapp meant to be used by schools, in which teachers can create quizzes and assess students' answers. I'm finding myself struggling to get across the domain logic on grading, which is somewhat complex. I need some advice as to how to display the relevant information concisely in the form on UI text.

    These are the facts I need to get across:

    • each answer has a score. Some types of exercises allow for the score to be automatically computed (e.g. multiple choice questions), whereas others require the teacher to manually enter a grade (e.g. open answer questions).
    • by default, the overall grade is computed as the sum of the scores obtained in each exercise. Updating an exercise's score also updates the overall grade (i.e. it's kept in sync with the exercises' scores).
    • the displayed grade could temporarily be "incomplete" or "partial", if one or more exercises that require manual assessment don't have a score assigned yet
    • the teacher can, at any time, override the overall grade, and enter either a number or an arbitrary string (e.g. "A+"). If this happens, then the grade won't be kept in sync with the exercises' scores anymore.
    • any overriding of the grades and score can be undone at any time. For example, undoing the override of the overall grade puts it back in sync with the sum of the scores of the exercises.

    This is that the UI looks like:

    enter image description here enter image description here

    enter image description here

    This short clip shows usage of the application. https://youtu.be/T-6jTaN0Ppk (watching is strongly recommended to get a feeling of what goes on during usage of the application)

    My question is: is the information being communicated properly to the user? Is there anything that could be done to get the point(s) across more easily, such as different placement of the text/different usage of icons, and so on?



  • Without analyzing in-depth the classification procedure, something that only the person in charge of the project can understand 100%, a couple of suggestions come to mind after seeing the interface.

    Organization

    First, I would try to organize all the content by defining well-differentiated areas between action and information. After watching the video, knowing the user must go from top to bottom to insert data, I would avoid them doing it from left to right. I think there is enough space to set the action and info columns. This helps to:

    • Clearly see the data and the interrelationship between them
    • Perception: it's about teachers, and all teachers use the outer left margin of the page for side notes.

    Gamification

    Apparently, it's a somewhat tedious task: reading all the content is already a bit tiring, interpreting it, classifying it, etc. Consequently, I would try in the data to insert, if these respond to a clear pattern, for example numbers from 0 to 9, avoid forcing to incorporate it manually, and look for click-type options. There are several ways to achieve this, perhaps online sales platforms serve as an example to get ideas.

    enter image description here




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2