I'm developing an app meant to be used by a school; user personas are teachers and students.

Teachers can add exercises to the app database through an editor. Some of the fields of an exercise are meant to be public (i.e. shown to students when they see the exercise), and some are hidden (only visible to teachers for internal management purposes).

This is what the editor looks like:

enter image description here

For example, the field "exercise label" and "solution" would be hidden to students, whereas the "text" field contains public data.

I'd like to somehow visually differentiate the inputs to signal which contain public information and which contain information that's only visible to teachers.

I'm thinking maybe a differeng background color or border, but I'm using so few colors in the UI as of now that I'm afraid it'd look inconsistent or out of place.

How would you go about this?

  • By intuition I would have suggested to add text labels in caption font-size below the respective text field. Going with colored backgrounds only would be too little info for a user to understand.
    – Big_Chair
    Commented Feb 14, 2022 at 21:52

2 Answers 2


Here are two design ideas for this problem.

  1. If it is not already the case, propose a preview for the editor to see the exercice as a student. Maybe the solution text field is obviously hide for the student, but the teacher will need to verify it. As an eample, on facebook you have the option to "see as ..." on your profil. The preview could also be under the edition form like on StackExchange when you wrote a message.

enter image description here

  1. Separate the private and public information in two different sections. enter image description here

A very simple way to avoid dirtying your clear design is to use the same code in titles that makes comments in HTML, CSS or Javascript invisible to indicate that their content will not be seen by the student.

Although the teacher doesn't have to know them, by choosing one of these options, their meaning can be explained when they are used.

<!-- Commenting HTML -->

// Commenting Java single line

/* Commenting CSS multiple lines */

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.