Form design and UI Gestalt principles

When bad design costs money and time, and how to avoid it.

Photo by Mitchell Luo on Unsplash

I recently remodeled the bathroom in my home. I was eager to get rid of the ugly old tile and line the space with gleaming, modern ceramic.

I visited the tile store with my contractor’s designer to choose tile. We picked out large white 9" x 12" rectangular tiles for the tub surround.

The tile store put stickers with the specification on the back of our sample tile. We took photos of the stickers and sent them to the contractor. It seemed like the perfect way to get the information to the contractor so he could place the order. What could possibly go wrong?

On tile installation day, we got a surprise. The tile waiting for us was 8" x 8" squares. But we had picked out 9" x 12" rectangles. What went wrong? How could that happen? I never wanted square tile. I never saw square tile. I never specified square tile.

Or did I?

Bad form design: What size tile did I select?

Take a quick glance at that photo above. It’s the sticker affixed to the back of the tile, created by the tile store. If you think the checked box is associated with the 8x8 choice, I wouldn’t blame you. When I took a long look at that form, I didn’t blame the contractor for ordering the wrong tile, either.

It’s bad form design. And bad form design creates bad results.

If we examine the problems with this form within the context of UI Gestalt principles, we can discover why the wrong tile was ordered.

First, let’s consider the principle of proximity. This concept says:

When elements are positioned close to one another, they are seen as part of a group rather than as individual elements. This is especially true when the elements in the group are closer to each other than they are to any elements outside the group.

If we look at our form, the checkbox between 9x12 and 8x8 is equidistant between the two choices. It’s impossible to determine which choice is associated with that checkbox without additional context. There’s no grouping of checkbox and tile size.

So from there, let’s consider the principle of past experiences. This concept says:

Elements tend to be perceived according to an observer’s past experience.

When we glance at our form, we see that the checkbox before 8x8 is checked. Our past experience has taught us that checkboxes precede the option associated with it. Since we don’t have any proximity clues, it’s natural for us to assume that the checked box is for 8x8. In fact, when we actually mark the box using a pen, the ink mark runs into the 8x8 text.

All it takes to fix this form is moving the checkboxes in front of the options, and adding additional space between the options. With those simple changes, there would be no doubt which tile to order.

Better form design: Simple changes improve the form to make the selected tile obvious.

We could take this a step further and consider running one checkbox/option per line to improve the form even more. We’d need bigger stickers. It would be presumptuous of me to go down that path without talking to stakeholders to determine any constraints we might have. Can we use a bigger sticker size? Do we have room in the budget to buy bigger stickers?

But it’s now obvious that even working within our current parameters, we can improve the user interface (UI) on this form. This simple change also improves the user experience (UX) for the tile store, the contractor, and the homeowner. The form improvements will reduce the number of incorrect orders, saving money, time, and frustration for everyone involved.