A doctor I built a site for wants to add a second appointment booking widget to his website, connecting to a different service. One of the services allows users to browse available open slots and pick one. The other new one they want to add allows a user to book an appointment in a more general way by saying "first available", or "Thursday morning" etc. This is creating a nightmare for me because I like my sites to have a simple and single call to action button. How would you handle this one on the homepage while minimizing confusion for the user? Thanks!
A tabbed UI so only one widget is present at a time might be a good option. One tab for "Browse Opening" the other for "First Available".
The advantages to this interface:
- The UI is cleaner than displaying both options at the same time.
- Users can choose, and toggle, between the 2 options quickly.
- If a user starts on one tab and realized they wanted the options it's one click away.
- The user can only complete one of the options (a callback could be used to hide the entire form after a user has submitted either)
Sounds unpleasant, but it might be solvable.
The main CTA is something along the lines of
Make an appointment.
Behind that action is a browsable list augmented with your additional actions below the list, in case the user isn't finding what they're after.
Express your concerns to your client. Make sure they understand that using two booking systems may result in double booking and will require extra front office staff time to actively use both systems. Also express the other concerns you may have. Sometimes just laying out all the pros and cons can help simplify things.
If it is still desired to use both of them, then determine which widget is preferred over the other and make that method grab their attention.
Not knowing the layout or appearance of the two widgets it's hard to give exact recommendations; however, the flow could go something like this:
User sees the words "Book an appointment" and right below it are a few quick recommended times such as:
Below the handful of "quick" options is an option/button/link to "Browse all openings" -> on click show this widget front and center (I assume this is a calendar view that requires a fair amount of screen real estate).
Architecturally speaking, this is a binary choice inside the 'book appointment' user journey. It seems likely that 'book next available appointment' would be the most likely response for the business' needs and the user needs, however, some patients might want a specific appointment day and time. It's worth doing user testing on the option preference just to prove this, but anecdotally I'm sure most of us experience it this way round. This means you could set the default to 'next available appointment' and allow them to choose otherwise if they prefer. It removes delay, unnecessary interaction and commits to the user and the business most frequent need.