We have a page where user selects what training courses are required for each role in organisation (HR-type web-based system). That looks like that:

Training Matrix

Now have ability to hide columns, fix headers for scrolling and it can be used OK. But when there are a lot of columns (talking about 40-50) and hundreds of rows, it is not very comfortable. Our next step in improving is make every checkbox auto-saving, so users don't have to remember to click Update button, but that is as far as we can imagine improvements.

Is there a better way to present/edit this type of information? There are no intentions to go mobile at the moment, so screen size is not an issue.

p.s. I'm new to UX (coming from stackoverflow), not sure about the tags applicable to the question here. Please feel free to re-tag appropriately.

  • Is there a need for every user to see ALL roles and trainings? I think, there is potential in reducing the noise by filtering the options based on the the logged-in (?) user. – Steffen Kastner Oct 18 '12 at 11:06
  • That is for admin user to update, so they have to be able to update ALL of that stuff. Normal users don't get to see matrices. – trailmax Oct 18 '12 at 11:42

I think there are two major things you can do, apart from instant update – which I think is really nice. The content only showing checkboxes could have a fixed size if you rotated the header text 90 degrees. This would make it easier to follow the lines and avoid the horizontal scroll bar at the bottom.

Secondly you could leave the grid in all white – and when you click a row header or a column header you’d highlight just that one row/column. Since this is a HR-system the user are probably only interested in either the employee progress or the course itself. Like the following images.

enter image description here enter image description here enter image description here

| improve this answer | |
  • That's really neat. Thanks for that! The matrix in question is to define what competency is required for a given role, not completed training courses. But the idea is the same. – trailmax Oct 18 '12 at 13:47
  • @trailmax Thanx! I read something about training courses, and thought that was the task - but as you say: the style applies to your scenario as well. Good luck implementing this (with jQuery?) :-) – Benny Skogberg Oct 18 '12 at 13:51
  • 1
    Thanks, I know what you mean! -)) At the moment we have DataTables (datatables.net ) for grid. Will have to do some customisation.. and that'll be jQuery. – trailmax Oct 18 '12 at 13:55

How often does this information change? When it does change how does it change?

For example, if you add a new training course, you'll presumably need to decide which job roles it's relevant for. But do you really need to see the whole grid to do that, you might only need a page for the new course with a list of roles to pick from.

Likewise, if you invent a new job roles you might only need a page with a list of the courses to pick from that could be provided for people in that role.

Another alternative, if you don't actually need to see everything all at once is to have two lists like this...


download bmml source – Wireframes created with Balsamiq Mockups

Selecting something in the left list "activates" the right one by adding checkboxes to add the relevant courses. You might want to have another view with the lists the other way around, or you could just click on the items in the right hand list to "activate" the left one with checkboxes, although that's a little less obvious perhaps. You could garnish those lists with "add course" and "add role" buttons as needed.

Essentially, rather than thinking of the data model, think about what the common tasks are you need to do with the system, then design interfaces for those very specific tasks. Don't try to design one generic interface to solve everything - that way leads to creating a monster! ;-) If you can tell us what those tasks are then you can probably avoid that huge grid altogether.

For example, maybe you need to compare a bunch of roles or courses to each other. That's ok, but likely it would be easier to pick the roles/courses you wanted to compare and then get a more limited display just for those, rather than facing the whole grid.

If you really do need to see the whole grid all at once then @Benny's suggestions are great.

The only thing I'd add is are there any natural groupings of job roles or training courses at all?

If so I'd collect those together so you have (for example) a "Management" block of 5 columns, then a small gap then a "Technical roles" block of 7 columns and so on.

You could do the same with the training courses if there is some natural grouping for those.

If you can group things, then you can close groups to hide rows or columns group by group, rather than individually.

| improve this answer | |
  • That's really good idea! You are right, this data is not going to change a lot, but soon we'll have People to Teams relationship and that can use your technique. – trailmax Oct 20 '12 at 10:33

Clicking on a row label could highlight the row label and replace the matrix data with just that row's information. Alternatively it could expand the row enough to show all it's data.

Clicking on the selected row label would restore the matrix view.

You could also only make the row editable only when it's active (clicked on and showing all data) and have explicit "Save" and "Cancel" buttons, in the (expanded) row label area when it's active.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.