The many nuances of online car-buying often demand acute attention-to-detail from the user. Additionally, form inputs represent a significant portion of the Driveway UI.
For these reasons, we take liberties in how we present certain form inputs to reduce overall cognitive load – offering a smooth and conversational user experience. This license is most prevalent in our Outlined Selector component.
The label functions as headline in these incentive options, which also contain a short description, dollar amount, and eligibility details link.
Outlined selectors can support checkbox or radio button functionality. While at their core, they function as standard true/false inputs, additional content and other elements may be wrapped inside of them. These unique semantic conditions require standards that are separate from traditional inputs, particularly when considering how they present error feedback, or are labeled as a group.
A shopping list displayed using a group of outlined selectors versus a plain checkbox group.
By embedding additional content inside an otherwise straightforward true/false selector we unlock some interesting UX caveats.
When disabling an option from a standard list of checkboxes or radio buttons, it can be safely assumed that the disabled option is inaccessible and therefore not relevant to the immediate task.
Perhaps broccoli is out of stock at the store, so I wouldn’t be picking up broccoli.
We leverage the additional content in an outlined selector if it can provide valuable context. The disabled selector could also still be relevant to the immediate interaction. For example, if a selector is disabled, we may display text explaining why it is disabled.
The disabled selector is styled so the user may still comfortably scan its content rather than skip over it.
Due to the current selection, certain options are not available. Keeping the notification text accessible allows the user to better consider their options.
