Airbnb Discovers A Better Calendar Picker Component From This UI Experiment
This was a simple calendar picker experiment that Aribnb recently ran and eventually rolled out. The A/B test contains at least 4 simple UI changes which might have contributed to a positive outcome. And so this also shows us what a slightly better UI component looks like.
Highlighted UI Changes From This Leak
Bordered Month Slider Buttons
One visible change is of the arrow icons gaining more of a defined border, making them more of a button style.
Disabled Background Fill For Unavailable Dates
Secondly, we also see that the B variation had a greyish background fill on the dates that were not available. Interestingly, the disabled style also used a hatched texture as an additional cue to further differentiate the style.
Green Background Fill For Available Dates
Similarly, the available dates gained a stronger green background fill for the available dates. Perhaps these two styles made it a little more easier to compare and see which dates were available and which weren't.
Finally, notice how the component in version B is a little wider by filling the full column. The date buttons are therefore slightly bigger, or perhaps have a bit more padding.