How to display a lot of necessary important messages

Question

I'm looking for a clear way to show a lot of case notes for teaching staff.

Context is: this is for a page that teachers view when in class with their students. There is a Case note section that should show pertinent information about each student. Teachers/Admin staff create these case notes in an effort to communicate - throughout the day/week - with staff.

Presently the page flow is:

• Class name / Class year / Class time

• Case note 1 for Student X

• Case note 2 for Student Y . . Case note n for Student n

• List of all Students.

The challenging part is that there could be 80+ case notes, and all of those case notes (theoretically) be about one student. The display of these case notes displays the most recent entry at the top of the list. There's also no category/hierarchy of case notes.

I think my options here are:

• Show a "# of case notes" identifier adjacent to each student that, when selected, shows the respective case notes
• Introduce a category of case notes, and only show those case notes within the case note view
• Only show the 5 most recent case notes, with an option to view all case notes

Any ideas or examples that help with displaying - potentially a lot of - necessary and timely information

Answer 1

One thing jumps out at me from your question.

The challenging part is that there could be 80+ case notes, and all of those case notes (theoretically) be about one student. The display of these case notes displays the most recent entry at the top of the list. There's also no category/hierarchy of case notes.

I think I'd disagree with your final point. You've identified some of those during your question, but here are some you could consider using to organise the data.

• Grouping by student
• Grouping by date/time
• Grouping by class
• Grouping by items which have been read or those which are "new"

I think you should consider at a conceptual level understanding more about the use cases of the system. Why do people need to find a case note? What is their workflow? When/where do they need the information? How can you help them achieve their goals?

Those are just boilerplate questions but it seems to me the best solution is to design a system which solves the goals of the users. For example, perhaps a key use case is finding notes which need to be actioned first. If that's the case, how does a user know what needs to be done first? What criteria would a teacher use to determine what to do first?

Maybe, the core use case is less time focussed and more individual, e.g. a teacher needs to find all notes to a specific student and work through those systematically. In this case, you likely need to find a way to allow teacher to find a student easily and their related notes, and present them in the order which they would expect to work.

In your question title you say they are all necessary and important, which could be the case, but as with anything, some will be more important than others and you need to understand how that priority is derived to find the best solution here. I'd recommend speaking to some of the teachers and trying to dig more into how they currently do it, to help inform your design.

Answer 2

displaying - potentially a lot of - necessary and timely information

This will mean poor user experience. Message or other timely information means that the user should interrupt other activities to respond to such messages. This requires quick change of the context, this makes pressure on users. As a result this will lead to a big number of mistakes and thus to complains of those who are affected by these mistakes (students, in your particular case), this will lead to high level of stress by teachers and they will complain.

I suggest you to review the requirement and then the solution design.

For instance, change the process so that there is no need to answer the messages quickly. Split them so that on a single day only a limited number of students can be processed. Or change the process so that every teacher needs to process only a relatively small parts of messages, means involve more teachers or split processing into many days.

Answer 3

What about a multilevel bubble chart, I'm thinking on a first level where you can show the students using a size and color classification to know which ones to pay attention to, something like this:

https://observablehq.com/@d3/bubble-chart

Then you can click and zoom to a second level where you see the actual notes for that student, as a second option you can mouse over and show a card with maybe the to 3 notes where there is attention required.

Answer 4

I think you might need to clarify what teachers want to see. Do they want to see case notes only regarding students that are in their current class, with a class being identified by name, year and time? Or might they be interested in all case notes regarding 'their' students, as in, all case notes to every student that has at least one class with them?

In any case, I think you should provide many different routes/views:

• A detailed, single-case note view showing teacher, student, class, creation date, modification date, modification/appendation history etc.
• An overview for a class showing all case notes that happened in this class. Typically this will be sorted by "last updated/created" and show the student name and a short description.
• An overview showing all case notes for a student.
• An overview for yourself (a teacher). Which case notes have you created, regardless of class/student?

I'd imagine that most of the time, a three-liner card with some kind of identifiable image or pseudo-image would be most appropriate to display a single case note within an overview. Think of an email or message program. The name of the student and the class should be clickable links taking you to the student / class view. Clicking anywhere else on the card takes you to the 'case note detail' view.

In any case, you'll have to think about authorization: Which teachers are allowed to see which case notes? Modify them? If you already have these roles, you could model your routes on these roles. E.g. all teachers that share a class with a student are allowed to see all case notes for this student – then you need a view for this case. If teachers aren't allowed to access this information, then obviously, you don't need a view for that.

Answer 5

What you're describing is a lot like email, so why not treat these messages just like email from the user experience perspective?

Like email, there are new messages and unread messages for starters. Add a way to archive messages, flag messages as important, or flag for followup. Let users pin messages.

Answer 6

Using an agile approach to define the user's goals would be a good place to start. The following template for writing user stories really helps you work with the user in mind; As a (type of user), I want to (perform some action) so that I (can achieve some goal/result/value).”

The purpose of user stories is to explain the roles of users in a system, their desired activities, and what they intend to accomplish by successfully completing a user story.

For this story I would assume that would be; As a teacher or admin staff, I want to be able to view all the Case Notes in an organized way so that I can see how many Case Notes there are per student.

The acceptance criteria for this would be as follows; Scenario: Teacher arrives on the class communication page. Based on their role, this teacher will be able to view a list of students in a table with the following columns; first name - last name - grade level - case notes

Given I am on the class communication page and I click on a student's name When I view the student's detail page and I click on case notes for that student Then I should see a list of case notes that I can sort by relevance (date, importance flags)

The user flow described below is a UI focused list of details to solve your teacher's goals. It describes having the teacher view a list of students first and then drilling into details of each student from there.

When the teacher or admin arrives on the class communication page, depending if you have user role levels set (permissions per different types of users), the base view should contain the following;

• A title section at the top containing the following; Class Name / Class Year / Class Time

• A table view displaying the details of all the students under the above class name with the following columns; First Name | Last Name | Grade / % | Case notes

This type of view with sortable headers and pagination would allow the teachers to sort by relevance and by how many rows they would want to see on a page. The table cells in the "Case Notes" column could have a clickable badge/link displaying the number of case notes for that student.

When clicking on the badge, a dropdown (or accordion UI that would slide down in the table row/expandable row) would be triggered displaying a truncated list of the 5-10 most recent case notes for that student. The dropdown/accordion should also contain a "view all" link.

When clicking on the "view all" link, the teacher would be taken to the view that displays all case notes in a table with the following columns;

• Date - allow the user to sort that view by most recent date

• Case Note - truncated summary of that case note

• Teacher/admin - this column would show the name of the teacher/admin who posted the case note

• Bulk level Actions - delete, archive or "mark as read" and a way to flag a message so if another teacher views the list of messages, the importance of that message can be highlighted

• A comment field - allow the teacher to comment on the Case Note and save their comment.

• Return or back arrow - A way to exit this view and return to the main screen