0

I have this user interface where the user can batch edit/add/delete Test Types and their weights related to a subject/schooclass combination.

Each test type belongs to a test.

There are actions on buttons which should not always be possible to execute due to business logic coming from the backend like:

  • Editing a test type and changing the weight should not be possible if the the related test(s) has already pupils with scores/grades assigned.

  • Deleting a test type should not be possible when this test type has already been assigned to an existing test

As the user can not do anything within that test types view to change the button states I would not disable the edit/delete buttons, but I would hide them.

Question Where is the advantage for the user to hide those buttons or let the user click those buttons but get an error notification in return like:

  • "You are not allowed to change the weight of a test(s) when the pupils already took the test!"

  • "You can not delete this test type because it is already assigned to one or many other tests which can not be deleted either else you might loose the pupils grade/scores!"

enter image description here

UPDATE

I am following the option now to disable the buttons. As I support desktop/mobile clients a tooltip will not work.

Therefore I have this mockup prepared as solution. I hope you like it if not please let me know :-)

enter image description here

2
  • Not an answer to your question, but you probably don't want to use exclamation points on your error messages. Users don't like to be yelled at. Commented Dec 15, 2016 at 17:52
  • Its just a sample quickly written down in real time here but thanks!
    – Elisa
    Commented Dec 15, 2016 at 18:28

4 Answers 4

2

"As the user can not do anything within that test types view to change the button states I would not disable the edit/delete buttons, but I would hide them."

I disagree with the premise that if the user isn't able to make changes that would make the button active then it should be hidden.


Option 1:

If you are presenting the tests all together as in your image, I would show the button disabled and not clickable. When the user hovers over the disabled button a tooltip should tell him why it is disabled.


Option 2:

Avoid the need to present those 4 types (if I understood correctly) of test types in the same list. Instead present 4 different lists where each item has the permitted/appropriate actions:

  • Editable & deletable test types
  • Editable not deletable test types
  • Not editable but deletable test types
  • Not editable nor deletable test types

The names I used are just so we understand the capabilities of each list of test types.

6
  • Nice... option1 was also yesterday in my mind. I think you misunderstood something: 1.) These are not the tests, the list shows the "Test Types" 2.) the Test Types in the list are not 4. The number of the Test Types can be of any length depending on the teachers need. Please update accordingly :-) I have added the "touch-screen" tag to this question now as I develop for desktop and mobile. Thus option1 with the tooltip is nice idea but no option.
    – Elisa
    Commented Dec 15, 2016 at 14:14
  • About the tooltip on touch devices I'm not 100% sure without seeing the exact case. This question has some thoughts about it. Maybe instead of tooltips it could be written directly next to the test type.
    – Alvaro
    Commented Dec 15, 2016 at 17:14
  • @Elisa I think I understood correctly, but let me know if Im still missing the point. There can be any number of categories (let me call them like this instead of test types) and any number of tests belonging to only one category (but a category can have multiple tests). When I mean 4 types I don't mean 4 categories but 4 types of categories, so lets say you can divide these categories in: •categories which have at least a test associated (these don't have delete action), •categories which tests already have pupils (these don't have the edit action), etc.
    – Alvaro
    Commented Dec 15, 2016 at 17:17
  • oh yu are changing my domain language ;-) I am not sure whether I understand YOU now! #1 Test has 1 TestType # 1 TestType belongs to N Test # Ok got it now. You divide the TestTypes - which must have a weight of 100 all toghether - into 2 categories depending on related data. Well then I prefer option1. I need to display all of that test types in ONE list because they all make up 100% and the user need to be able to see each items weight. I will not use tooltips instead I will use validation errors on the right side. Just in neutral color as hint. I will update my question with an image :-)
    – Elisa
    Commented Dec 15, 2016 at 18:38
  • ok uploaded the image. Let me know what you think!
    – Elisa
    Commented Dec 15, 2016 at 19:02
4

Considering usability, it is better practice to have all controls in your page always visible. Otherwise controls look missing or confuse the user looking for follow-up actions which are not in display.

However, changing states (like temporarily disabling submit buttons) can help to prevent false form input. I have added 2 examples.

  1. Easy to scan forms allow a conditional submit.

  2. More complex forms will rise data validation warnings after submitting. This way the form will have less visual clutter on first view.

enter image description here

12
  • Hey Rien, for me it looks like you have answered to a total different post/question. Can you directly answer to my question instead of posting some images which are valid in general but have nothing in common with my images? :-)
    – Elisa
    Commented Dec 15, 2016 at 10:08
  • Hello Elisa, I will take a more in-depth look for your specific question. Commented Dec 15, 2016 at 11:08
  • This is a good answer to your question. If you know they can't do it, don't let them try and do it! IF you hide them, your screen looks like it has no interaction on it. If you let them click an unusable button you make them feel stupid. Commented Dec 15, 2016 at 14:41
  • 1
    If you can go to the tests and change the test type associated, then either of those conditions could be set back to false and the buttons would be active again. Therefore it doesn't make sense to hide the buttons because they could become enabled again. I would disabled them as this suggestion says and maybe show why they are disabled. Commented Dec 15, 2016 at 14:51
  • 1
    @Elisa even if I can't change them here (which I've heard you say multiple times), it seems pretty likely that I can change the test types on my individual tests (wherever they are in this interface). Hiding a button implies there is never a way to change it, from this screen or otherwise. Commented Dec 15, 2016 at 15:11
2

It would suck to be constantly told-off for pressing a button for a test that can't be edited. Makes the user feel stupid.

I'd prefer the buttons that can't be changed to be in a disabled state rather than removed entirely. You could still give the warning message if the user clicks the button as it wouldn't take much for the user to learn that clicking the disabled looking button will give them an error.

If that's not possible, and if the error message is critical to the users' understanding of using the page, then maybe display a cover-all statement paragraph on the page explaining that changes can't be made to tests already in use and hide the buttons. This would be preferable to being nagged at for making wrong decisions.

0

According to my experience and your user case. I think that

  • If the function is temporarily available to the user, display the action button as disabled status. When the mouse hovers on the action button, tell the user the reason the button is disabled and how to enable this action.

  • If the function is no longer or not allowed to the user, do not display the action button to the user, it's useless and totally unhelpful.

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.