Etsy Discovers A Better, Padded And Wider Search Bar In This A/B/C Test
Etsy just completed a cascade experiment with 3 version of their global search bar. Interestingly the cascaded version with all inherited changes, took the lead. And more so, when it comes to form fields, this new evidence continues to shape our userstanding that bigger most likely is better.
C - Oct 19, 2019 Screenshot
Highlighted UI Changes From This Leak
-
More Padding and Contrast
Comparing to the older control version (A), the new search bar in B gained more padding. This is visible with a taller input field, as well as on the focused state below with the expanded autosuggestion box.
Furthermore, the B search bar also differentiated from the white background with a slightly grey fill. The possible advantage of such a change might be a higher contrast / greater visibility of the input. The counter hypothesis might be that the grey fill risks suggesting inactivity. Because this change was combined with other ones, it's harded to tell whether this had a positive, flat or negative impact.
-
Lower Contrast Search Icon Without Labels
In the default non-focused state of variation B we can see a shift towards a low contrast search icon, from a high contrast search button with a clear "Search" label (A). It would be interesting to actually see the data on this isolated change. For the time being, we do have some accumulating evidence that combining icons with labels might be more effective.
This is very similar to Pattern #2: Icon Labels
-
Wider Search Bar
Finally, in variation C, the search bar takes up the maximum width allowed. This suggests that bigger form fields might be better.
0.5 Repeatability has been assigned to Pattern #97: Bigger Form Fields as evidence that it's getting better
Repeatability is a net count of evidence for or against a pattern. It’s how we can predict which patterns are better than others. :)
Comments