Different checkboxes - OK or NOK?

Question

I am working on one project in the role of UX Designer. Its a web app focused on sales and the most important part are forms. Quite long forms - to be exact. Every form is divided in several steps, but even the steps are quite long. The user has to choose many options. If the user chooses some options, there are another sub-options and so on...To prevent users freaking out right at the beginning, we keep some parts of the form collapsed at default. Only if the User pick some options, we expand the part of the form belonging to this option.

Designs are supplied by the external agency. They provided us with a new design for a "main checkbox". Normal check boxes are smaller, 3D style. This new ones are big 2D in different colours. The message should be like "this big check boxes are the most important".

I´m really not sure about the design on the new ones... My concerns are: 1) Is it too confusing for Users to have two different check boxes in one form? 2) If the checkbox is not checked it looks more like "missing picture or icon" for me. Its too big to "feel it" as unchecked checkbox. 3) I prefer to keep the same style of controls. The original small check boxes are the same style as radio buttons - for example. The new ones are too different.

Here is a sample of this form. It is only a part on the first step. All the controls I was talking about are highlighted in red. You can see the big check boxes right next to H3 Label 3 in checked style and right at the bottom as unchecked. The original check boxes are at the beginning. Both check boxes should be used at the same form. everything between checked and unchecked big check boxes is collapsed by default (when the check boxes are all unchecked)

I would really appreciate your opinions and comments. Thanks.

Answer 1

According to the Usability Heuristics

Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

from https://www.nngroup.com/articles/ten-usability-heuristics/

So, you are right consistency is important. Inconsistency can be used in order to show a different "functionality".

What I see in your example is that there are 2 kinds of checkboxes:

• Select a low-level option
• Select a top-level option

Someone could consider these checkboxes of the same kind. My questions would be:

• Does the user really care how the checkbox looks like?
• Does the user understand the difference in the 2 checkboxes and the reasons why it is used?
• Do the checkboxes communicate the message?

Answer 2

As Dimitra Miha points out, inconsistency is a tool in its own right, and it's nicely used in this suggestion. The different functionality of the main checkboxes is reinforced by both size and color, and the difference is very clear. However, it's still possible for some users to be confused, which can easily be avoided. You can use a checkbox that doesn't look like a checkbox at all :).

^{download bmml source – Wireframes created with Balsamiq Mockups}

If you use a toggle like this next to the product name (adjust the text to Yes/No for example, or something more fitting), you achieve the same functionality without relying on styling alone for the distinction.

Answer 3

As mentioned by Dimitra:

According to the Usability Heuristics

Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. from https://www.nngroup.com/articles/ten-usability-heuristics/

consistency is always important to strive for and inconsistency would likely lead to lower succes rate and errors. Therefore, in my opinion, I would not have chosen for this design.

That said, I would highly recommend testing this. Often these discussions can go on and on for ages within companies and are often based on assumptions. Leading to numerous company hours wasted on something which can be tested in no time. Bear in mind that it could well be that your users aren't really bothered by it all.

For testing, I would suggest setting testing 2 or 3 variations.

1. The proposed design
2. A design with a regular checkbox
3. If you have an alternative design like an accordion, togglebutton, etc. you could test that one as well.

Try to test it in such a way that you can distinguish between placement of the control and the design itself. It could well be that the large checkbox yields bad results, not because of its design, but because of its placement on the form.

Hope this helps.