User Interface for Student's Grades and Attendance

Question

I'm working on a design project and I'm having a hard time figuring out the UI for the last part: grades (1 to 10 + date of grade) and attendance (date of missed class). This is the admin side, which includes adding, editing and deleting both grades and attendance. Each student will have on their page a list of all the subjects, like so:

Clicking on the cog will bring down the required info. So how should I structure this data so it would be usable and easy to understand? Should I split the horizontal space in 2?

Answer 1

One approach would be to split the data into separate tables, with the ability to add a row to each table.

For example, let's say you click the cog for Matematica. The area would expand and display one table for grades, and another table for attendance (say one table above the other). Each table would allow the user to add a new row. It would be useful to allow users to edit/update each row inline, and to provide a delete button on each row so that it can be removed.

You may find it helpful to read through a few interface design patterns, such as these for tabular data:

• http://designingwebinterfaces.com/ultimate-guide-to-table-ui-patterns
• http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

A good general list of UI design patterns is here: http://www.welie.com/patterns/. It's helpful to consult patterns (i.e., tried and true solutions) when faced with various design problems.