How to Include Functionality Within a Table
In Whooo’s Reading, we prioritize the ability for differentiated learning. No two students learn alike and it is crucial that we provide a way for teachers to facilitate such learning.
Teachers can customize several things for their students:
The Challenge Build an interface that provides three things:
1) The ability to view and change these settings for each student
2) The ability to view and change these settings for an entire class
3) The ability to set advanced classwide settings (goal types and details)
Solution The Differentiation table. The table has three columns of settings: Academic Level, Quizzes, and Supplemental Tasks. The rows for each student and class show the current settings and the ability to change these settings.
We added some height to each row and stacked the quiz settings vertically, to be able to fit all of the data. Each student’s settings are editable by simply clicking on the form field (input or toggle).
The tricky thing here was how to deal with the advanced settings since it is an interface within itself (see image above). For the the classwide row, it shows the goals selected and the various quiz settings applied for all the students in the class. “Edit” triggers the ancillary modal (shown above) that has the interface for changing the various settings.” This keeps the interface super clean and focused.
Finally, how do you save changes you’ve made? We wanted to keep it simpler by having no top level controls (besides changing classes).
Additionally, a top level save button would be out of view when scrolling. We used the empty space on the far right of each student’s row. Once a student’s settings are edited, we fade the save button into that free space (on the right).
Final Version
If you like this post, subscribe to the publication (UI/UX examples and topics) and get involved in the conversation! Give this a clap 👏!
