Density and Accessibility

Ads power users need as much data on screen as possible. Google's accessibility requirements need click targets of at least 48 by 48 pixels. Both are non-negotiable, and they are in direct conflict. Teams were stuck.

Google's ads products are used by people whose job is maximizing return, and who make decisions on data. More rows on screen is not a preference, it is the work.

Google Material launched mobile first, and one of its tenets was to use space to create impactful visual moments. For a spreadsheet-shaped job, that is dead screen. We did not have to go looking for that opinion. It arrived on its own, in unprompted product feedback, from people nobody had asked about white space.

The obvious fix is to shrink everything and close the gaps. But click targets shrink with it, and Google's accessibility requirements set a floor of 48 by 48 pixels. That floor is not a guideline. Non-compliance carries legal risk for Google and for the customers who inherit it, and a product that cannot be operated is a product someone cannot be hired to operate.

Keep the density and raise the targets to meet the floor, and the targets overlap. You get a screen where hitting the thing you meant to hit is a matter of luck, which is worse for everyone, including the users the requirement exists to protect.

That is hard to say in a meeting and easy to see. So I built it. A prototype at the density power users need, with every target raised to the floor, where the middle row's target runs into both of its neighbours. Nobody argued with it after that.

There was no legal path forward without an accessible density option. That is the sentence the project turns on, and it was established with legal and with ads accessibility rather than asserted by design.

I wrote up the problem and the findings, then ran a session with the cross-product stakeholders: ten in UX including a director and four design managers, seven in engineering, plus central accessibility, the front-end library team and Material Design.

Alongside the findings I wrote a solutions document, with options rather than a recommendation. The group picked the same one: stop choosing on the users' behalf and let them choose the density themselves.

Then I took it to the Ads UX VP, because a feature that has to land in every ads product needs somebody senior saying so out loud. There was no product manager on this, so I wrote the PRD and the roadmap.

The first prototype study, eighteen participants, came back with a result I did not want. The feature was useful and almost nobody found it. The names and the icons were confusing.

So we stopped guessing at the name. After working through the options with the Material Design and central accessibility teams, we put them in a survey. 1,443 responses. "Display spacing", with T-shirt sizing for the options, won clearly.

Useful and undiscovered is not shipped.

We used our own design system's feature promotion guidance and built three versions: a carousel modal, a feature tooltip, and a NEW badge, each with a new icon per density option. A second study, twenty-four participants, on discovery alone. The tooltip plus the badge won, with the least disruption.

Participants also asked for an animation showing what the setting did, so the setting demonstrated itself.

The last prototype went back out for acceptance testing once the naming and the discoverability work had been folded into it. It rated 4.71 out of 5 for usefulness and 4.92 for ease of use.

The averages are the least interesting part.

On both questions the bottom two options took no votes at all. Not one participant found it slightly useful or not useful, and not one found it difficult to use. The thing that had taken all of the alignment work turned out to need no explaining once people could find it.

Sixteen components had to change: inputs, data tables, buttons, lists, menus, the condition builder, the selector pattern, autosuggest, slider panels, the column customizer, the tree, expansion panels, the push panel, pickers, and chips twice. Ads ran two front-end frameworks, ACX and Angular, so a component that existed in both had to be updated in both.

We worked with the Material Icons team to get the new icons approved and added to Google's official icon set, which is the part that outlived the project.

Very little of this was drawing. The design was a setting with four values.

The work was getting a product area to agree that the choice belonged to the user, proving the deadlock was real rather than describing it, and then discovering that a feature nobody can find has not shipped. The rating everyone remembers is the 4.92. The one I would point at is the eighteen-participant study that said useful and undiscovered, because everything good after that came from taking it seriously.

This is the short version. The full case study carries the prototypes, the research in detail and the screenshots, and it is password protected.