I am prototyping an HTML5/CSS3 input form where users enter some details about goods received in relation to an order. They are able to mark items as accepted though unsatisfactory (e.g. arrived zinc-plated not parkerized, but still, usable). For any items marked unsatisfactory they are later asked to select one or more reason codes and enter explanatory text.

I am not happy with the aspect of the design for marking rows as unsatisfactory.

In the following I am asking them to confirm a negative - which seems wrong. In particular - using a tick to mark an unsatisfactory item. Tick usually means "correct" not incorrect!

If I rephrase it as "OK?" and have the checkboxes pre-ticked I am asking them to unmark the rows for which further action will then be needed. This also seems wrong

tabular input form

I've looked at some related questions here, such as Checkboxes - Is better to check exceptions or to uncheck exceptions? but could still do with some ideas.

From a usability perspective, Is there a better pattern I could use?


Yes, checkboxes can only be enabled or disabled. And if a checkbox is disabled (value = Satisfied), then the follow up seems out-of-place.

How about replacing the checkboxes with dropdown selectors? The dropdown can default to SATISFIED in which no follow up will be required after NEXT button. And if the user changes SATISFIED to UNSATISFIED, then the NEXT button should properly trigger a follow up.

You can also make the default value of the dropdown a 3rd neutral value (blank or 'CHOOSE').

If there's not enough room for the long-spelled UNSATISFIED, then make the dropdown's YES and NO. In this case, the title of the column can be as SATISFACTORY?

enter image description here

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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