What makes a good UI for a teacher to comment on student's essay

Question

My scenario is that I have ESL (English as a Second Language) teachers who want to comment on student's essays. The essay is an unformatted text (just blank lines separating paragraphs). The nature of the correction is usually word choice, word order, spelling, commas, wrong tense, ...

Goal

I am creating a web app that should aid the teacher in making the corrections. It should make the corrections easy to enter and it should present them in such a way that the student can easily go through them.

Current state

Currently the web app only allows the teachers to write a text comment below the essay. They usually quote parts of sentences and either write their comments after the quote, or highlight the changes they made by writing changed parts of the sentence in UPPER CASE. Since the essays are very short (about 150 words), this is not as painful as it may sound. I believe that since reading the corrections while having to cross reference their original writing takes some effort from the students, some of them do not pay enough attention to the corrections.

MS Word

After looking what the teachers do outside of my web app, I found the "Track changes" and "Add comment" features in Microsoft Word. The first one allows to turn on a tracking mode which visually highlights editing changes (red background with strikethrough effect for deleted and green background for added text) and the second feature allows to select parts of the text and attach a side notes to them.

From my experience, this usually works well enough for the teachers, but it is possible that one can do better. Do you know of some examples how this problem can be solved or can you come up with your own solution? Is it a good idea to try to just copy the two Word features?

Answer 1

A good example of editing/commenting is also Google Docs as well as HackPad.

More in general, I think what works well is something that clearly identify the wrong part (i.e. red color or strike through line), the solution (i.e. uppercase or bold), and having the ability to have additional information about the specific issue––maybe a little "i" icon that on hover or click can display the teacher's comments.

There's nothing bad in copy a good solution (if you think that's the optimal solution or a really good one), especially if it's done by a company that spent years in testing their solution. On the other hand, it's always good, even just as an exercise, to throw everything out and start from scratch by thinking "if X was invented today, what would it look like?"

Answer 2

There’s been a centuries-long tradition of proofreader’s marks. They’re not universal, tough, with several standards having emerged (ISO 5776, BS 5261, DIN 16511 etc.). Teachers, perhaps without knowing it, often employ a subset of their local standard when picking up their red pen. This includes for a good part the intuitive symbols that partially are also common to multiple conventions. Some apply to letters, spaces or punctuation marks, others to words, sentences or whole paragraphs.

Anyhow, you can probably identify a set of semantic symbols your users are already using. They contrast with stylistic symbols like ‘underline’, ‘strike through’ or ‘text color’. Some of them could be used to tag/categorize comments, others for tracked edits (insertion, deletion, addition). I’ve not yet seen that in general purpose applications like text editors and PDF viewers. The markup tools there are usually more generic, mostly for highlighting without inherent meaning. They miss specialized stuff like ‘juxtapose words’ or ‘… letters’. Some actually somewhat support the traditional combination of textual mark and margin mark, e.g. a marginal comment anchored on a run of words.

In conclusion, a good(?) way to go may be a rich text editor with custom toolbar whose buttons are based upon traditional handwritten marks. Underneath the hood you could use simplistic markup, e.g. Markdown / Common Mark combined with (extended) Critic Markup which would be accessible to the user in source view of course.