Precedent for modal button with changing label and highlight color
My team is designing an interface for a route planning interface similar to Google Maps or Uber: select a pickup point and destination. Unlike those apps there is a ~small set of acceptable pickup/dropoff locations. We've decided that in order to select a location, the user should tap on a map (not select from a list, or search for an address).
Currently we have two "buttons" at the top, styled similar to Google Maps, that serve triple purpose:
- Show whether the user is selecting the pickup or dropoff (by highlight color, reinforced by being tied to the color of the stops).
- Provide a label showing the name of the selected stop selection.
- Act as a large hit area for switching between modes
These label/radio buttons are clearly non-standard UI widgets. They are almost segmented buttons, they are almost a tab bar, except that they are stacked vertically instead of horizontally.
I welcome your opinions on this design (or suggested changes) as comments, but my question is: Can you give me a precedent for UI widgets similar to these?
I think that Kayak used to have this in their date-range picker, but they don't have this any more.
The Apple Store currently uses highlighting of large buttons for modal radio buttons, but (a) the labels on these do not change, and (b) these represent a fixed selection, not an application mode.
