I have a webapp LMS in which there's a page that allows teachers to monitor the progress on ongoing exams. The page displays a table with data about all students that are participating in the exam and their progres, e.g. how many questions they've answered.

In this page, the teacher can select some of the students from the table and apply actions to them, such as: if a student has turned in, undo the submission; close the exam prematurely for some students; reopen the exam for some students for whom it was closed. The teacher can also close the exam for everyone (so it's not technically a bulk action, as it doesn't depend on the selected student set).

The page currently looks like this:

enter image description here

As you can see, there's a button for each one of the actions. The issue is that, depending on screen width, not all actions will fit on the same line. Additionally, if I ever have to add more actions, I might have a problem. (The "reopen" button to reopen the exam for the selected students is missing in this screenshot, but you get the idea.)

What would be the best way to feature these "bulk" actions in a way that bears low cognitive load to the user and clearly communicates to them what the options are?

As an aside, I would also like to somehow fit a few stats in the top row, such as these:

enter image description here

The thing I'm concerned with is that adding these cards in a row just below the one at the top with the action buttons would show less rows in the table, hiding possibly useful information for the user. But maybe the user doesn't need to have access to all that information at once?

This is what it'd look like adding these stats cards on a row below the action buttons:

enter image description here


2 Answers 2


Try regrouping, aligning and resizing some of the elements.

Right now, you have users coming to the list with potentially high numbers of students. But you have the search buried off to the right behind the bulk actions.

The stats are a nice touch, but in either version they take up a huge amount of space for a total of 2 icons, and 6 words. These could be substituted for lozenges or chips; You'll get all the info in close proximity. I can read all the stats in one glance.

I've tried putting the stats close to the title, so as you scan the page you quickly get an overview with the stats. The search is closer to the student name or email (the most likely way to search), and the actions are off to the right.

enter image description here

Dealing with narrow width viewports:

If you have a lot of actions in a small area, you can keep the first couple actions, and have the rest spill over into a dropdown:

enter image description here


I love the shortcut tab. But I believe it solves a different problem.

What I can suggest is: To not show the buttons if nothing is selected. If something selected, then can show a floating bar at the bottom of the page for the actions. This way we take users step by step and to teach them that the first thing they need to do is to select the checkbox.

Hope this helps!

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.