I have a table of students with data.

I would like to make it more obvious to the user that the last two buttons can only be used in the context of selected row(s).

For that I would of course enable/disable the buttons when no Row is selected.

But that is not enough IMHO. I would like to re-locate those 2 buttons more to the table where the context is.

How would you do that?

I also like material design from google, but there is nothing about context buttons to the table: https://www.google.com/design/spec/components/data-tables.html#data-tables-specs

enter image description here


There are some suggestions to the current design:

  • Place related controls close to the context: Add/Remove/Clear are close to the table, and the Classes and Subjects are on the perephery

  • Remove icons, they looks not so distinctive and if the icon fonts will not load, user will see 'Student' and 'Students' actions, instead of the intended 'Add Student' and 'Remove Student'

  • Simplify the table by combining the both names under the single Student column, and remove ID. ID is internal piece of data
  • Use pale colors for the subjects, otherwise these draw too much attention

I think something like this looks more simple and will work better:

enter image description here

  • To 1) Thanks for the mockup. To 2) The icons did not look distinctive because Remove/Delete/Clear have nearly same icons which will change finally. To 3) Of course its just WIP Id will be removed later. To 4) Colors are determined by the teacher itself. They choose the colors they want ;-) The "X" on the subjects is to delete a single subject. Because with "Clear subjects" you can only delete ALL subjects of a selected student.
    – Pascal
    Jan 10 '16 at 21:34
  • Are Remove and Clear Subjects grey because nothing is selected? If yes how would you color them if I select a Row? Also blue like the "Add Student" ?
    – Pascal
    Jan 10 '16 at 21:55
  • @Pascal yes and yes Jan 10 '16 at 21:59

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.