1

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.

Different check boxes on a long form

3
  • 2
    Pattern recognition is a large part of good UX so different patterns for the same function (in this case the two different styles of checkbox) is not necessarily a good idea. With that in mind, why not use an accordion to collapse the forms for the user? That way you don't need the extra checkboxes at all. The forms inside each section could be built in such a way that they only register with the back-end/database/server if they differ from their default settings - each section could also be given a 'Reset' option. Not a direct answer to the question you asked, just a suggestion. May 11, 2017 at 7:43
  • Thanks. I have the same feeling in line "it should be more similar"... Accordeon form is a good point, however these forms are too big for it. We have had some forms in accordeon style and it became really confusing. It works fine with smalles forms, but these ones didn´t end up well when we tried a accordeons....
    – Claire
    May 11, 2017 at 7:52
  • Just an off-the-cuff opinion: Use the same style checkbox and the scale difference will be less disturbing. May 12, 2017 at 16:54

3 Answers 3

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?
0

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 :).

mockup

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.

0

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.

1
  • Consistency is never a goal, consistency is a tool. "Users should not have to wonder whether actions mean the same thing" also means that in case they do not mean the same thing, this should be made very clear. One of the ways to make it clear is through different design. Different=inconsistent. May 12, 2017 at 14:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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