cft

Checkboxes vs multi-select dropdown — A comparative study

The article ahead is a case study where I will - — outline the use case — analyse the current design — research to come up with an alternative — perform A/B testing — float out the final solution


user

Vasudha Mamtani

2 years ago | 3 min read

While re-looking at a certain journey in the portal I have been working on, I came across a particular screen I invested myself in. This screen was a simple, straight-forward form with a bunch of fields. Sounds pretty basic, right? That’s what I thought too.

Since I was committed to doing a thorough analysis, I put every little detail through a fine-toothed comb and discovered one form field that I believe needed a look over — the checkboxes.

The article ahead is a case study where I will -
— outline the use case
— analyse the current design
— research to come up with an alternative
— perform A/B testing
— float out the final solution

Use case –

Without revealing too many details, the primary journey of focus is when a user selects one category from a list 10. According to the category selected, the user can select from a bunch of sub-categories. These choices for these sub-categories might range from 4–19.

The gif below shows what the current process looks like –

Current process — using checkboxes

Current design analysis –

When I stumbled upon the one that populated the screen with 19 options, my eyes almost popped right off the sockets. There were 19 (!!) checkboxes on the screen that the user was supposed to skim through and choose from.

When the experience didn’t feel right, I decided to research form fields and best practices. Stating the highlights below –

  1. Cognitive load is always an important factor —
    It is an established fact that forms are not fun. Even when done extremely unconventionally, they are tedious to fill out. Thus, any form element that increases the user’s cognitive load needs to be straight-up eliminated.
  2. Readability influences usability –
    When scanning alphabetically arranged content, the reading pattern that should be maintained is top-down. If placed horizontally, the reading pattern would be left-right top-down. Moving the cursor in a pattern like that is not just tedious, but also impractical.
    Notice the distance being covered by the cursor in the gif below to understand how taxing the process could be.

Tedious cursor movement to make selections

After research, the conclusion derived was that the alternative we had to come up with would not just need to reduce the cognitive load, it would also need to be seamlessly usable when scaled up.

Multi-select dropdown checked all boxes (no pun intended :P).

Proposed process — using a multi-select dropdown

Component testing –

With 2 options in hand, the next logical step was to perform A/B testing.

The reason we chose to do this was we knew that we were not experts in the area that we were solutioning for. Even though we had more than enough context about the journey, we wanted the end user’s point of view to make a decision.

Again, without going into the minute details, these are the high-level steps we took for A/B testing –

  1. Created 2 prototypes of the user journey under consideration with both alternatives integrated within.
  2. Selected a sample of 8 users to run the test with.
  3. Provided a set of clear instructions to each user before beginning the test — did this by including a slide before the prototype.
  4. Compiled comprehensive notes about the comments received from each user after every test. Some samples attached below for reference.

Option 1 — Checkboxes; Option 2 — Multi-select dropdown

Results of the A/B testing –

While a lot of users were neutral about both components, there were several others who spoke very strongly in the favour of the multi-select dropdown option.

Since research had already proved that the second option was a better solution from a usability perspective, all we need was the user’s buy-in to be certain about the solution we were proposing.

This concludes the comparative analysis done to bring about a change in a small, but important component. While the process lasted for less than a week, it results were essential to bring about a change that was long overdue.

So, have you gone all the way for such a tiny change? If yes, drop a comment about your experience!

Upvote


user
Created by

Vasudha Mamtani


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles