complex time-Input on mobile

Question

I'm newish to developing and really new to ux / design. In a mobile app I'm building, I'd like the user to have the option to get an appointment using the app without having to call. Now my question is, what would be the easiest way to pick the time?

So far I've thought of these solutions, but both kind of suck:

1. display day calendar-like

This way the user can see if and when there still are appointments available and is able to define the times himself.

But I think users (especially first time users) might not be able to figure out how it works (tap somewhere to define start -> tap somewhere to define end). Plus, it's generally annoying to have to tap on those small columns.

2. recommend times

Once the user picks a date, the app reads available times throughout the day and suggests them to the user. Maybe even let the user define a preferred time and if it's not available, suggest similar times (1 hour later / earlier, same time next day, ...)

This way, the user is guided and not supposed to perform anything "difficult". However, he is not allowed to define the time of his appointment himself.

I can't think of any convenient and user-friendly way to implement this but I'm sure there is one.

Answer 1

I think there are a couple of things you need to consider here.

Do appointments have a set length of time? For example, all appointments are 30 minutes long. If this is the case, then your second option of recommended times should work fine. Also having set lengths for appointment times reduces the chances that appointments will overlap. This also might make the visual calendar option a little easier to use because they are selecting a pre-determined block of time rather than having to pick a start and end time.

It would be nice to offer an initial view of the calendar with a "Request Appointment" button similar to how the Google calendar app works. The visual option might be easier for users to understand while the a separate appointment screen with more options is used to create the actual appointment.

Either way, I don't know that there is a one-screen answer for your question but hopefully this gives you something more to think about.