Improving "set appointment time" and "number of people attending" UI elements on booking form

Question

I created the UI above to help facilitate the booking of various services. However after testing it on several users, a number complained about the form's "lack of guidance". They did not understand the point of the date, start/end time and the 3 icon components.

I want to add text labels but at the same time I am conscious about the amount of space lost, and whether or not it takes away from the sleekness of the application or maybe bombards the user with too many words.

How can I improve the UI to make it more easier for the end-user to follow, but at the same time keep it well spaced out?

Answer 1

The feedback from your users are valuable. Did you ask what did they not understand about the date, start/end time? I would choose usability and sacrifice a bit on the aesthetic if necessary.

There are a few factors you should consider to improve the usability.

Labels and Hints

Run some A/B test on your form labels. Instead of What service are you after you might want to simplify it to Select a service You might want to add hints to each form elements and guide user on what to do.

Components

I did a similar booking app before and conducted user testing on the booking page. I noticed most users got stucked with the "End Time" field. Their feedback was that they didn't know exactly what time the service was going to end. We decided dropped the End Time field and we managed to improve the entire booking process.

I'm using selection component here instead of text box entry because user dislike typing on mobile device not to mention error prone as well.

Defaults

This one is rather subjective. You might want to put in some default values for date and time field to speed up the booking process. Use current date and time for the default values.

Default values usually get overlooked and sometimes user proceed without changing them. You have to be very careful with this one.

Progressive Reduction

This last one relates to your 3 icon components. If you are concern that the text label is going to clutter your interface, you might want to implement Progressive Reduction by assigning levels to the buttons. You introduce the button with text label first. You slowly remove the button label as user proficiency in the app improves.

The idea behind Progressive Reduction is simple: Usability is a moving target. A user’s understanding of your application improves over time and your application’s interface should adapt to your user.

Although this method requires a bit more effort, it definitely signal your app as an intelligent one that grows with the user.

Alternatively you want to replace the buttons with a selection field. This is more straight forward and doesn't requires much thinking.

Speaking from experience, you probably want factor in available time slots as well. Show users what are the available date and time, much like how you book an apartment in Airbnb. This could be part of the date and time selection (mark dates/time that are not available). Trust me this would improve the user experience and save a lot of unnecessary headache on technical implementation.