UI Practicum #2. How to Present Advanced Scheduling Options Without Overwhelming the User

Published May 04, 2016 by Jane Portman
Categories:

In this issue of UI Practicum we’ll talk about presenting advanced options. Sometimes the solution is counter-intuitive. To achieve simplicity, we need to introduce an extra level of complexity — all to identify simple common scenarios and treat them separately.

Here’s a great example. Justin McGill, the founder of LeadFuze, asked me about their scheduling screen. His biggest concern was the overwhelming amount of controls on the page. “Should we split them into a multi-step wizard to make things easier for the user?” — he said.

Here’s what their scheduling page looks like:

LeadFuze Scheduling Page

By the way, this is a really polished piece of software! We see that the style is very nice, and everything makes a lot of sense. Then why is Justin so concerned about this screen? Where exactly do the problems hide? What can we do to improve the user experience?

Put the Steps in the Right Order

The first thing that’s confusing here is the sequence of steps. Scheduling an email sequence has a very strict logical order, where one step follows the other. Let’s see what screen areas these steps occupy:

Current Order

In the ideal world, all steps should have obvious order from top to bottom, and from left to right. Here this sequence is flawed: the CTA button is situated on the left, and higher than the end of step 2. This causes a lot of subconscious confusion to the user.

Instead, let’s go for the following scheme of things, which leaves no options to the user but to interpret the order correctly:

Ideal Order

Identify and Streamline Common Scenarios

So the task is to make things look more edible, and to avoid putting table on the right (so that our chosen order of steps remains obvious). What would you do? Split the table in two columns to prettify the layout?

Instead of prettifying things, let’s dive deeper into the problem. We observe a large scheduling table that’s filled by the same default times. And we feel that it’s redundant, since the user is very likely to use the same time for all days (that’s why there’s a checkmark saying exactly that).

Here’s the point: advanced customization will only be used once in a blue moon. Let’s identify the most common scenarios and hide the whole scheduling table unless the user really needs it. Here’s the list of potential scenarios:

The first two only require a single input line! That’s perfect. Let’s introduce a dropdown menu for the user to switch between these scenarios:

Simple Schedule

We’re using the gray area to visually consolidate the controls related to scheduling. We’re making it obvious that only this area changes when we change the schedule type in the dropdown menu. It’s a great practice when you need to switch a certain part of the UI without confusing the user. Here’s how the screen looks like when we select custom scheduling:

Custom Schedule

Please note that we got rid of a separate AM/PM dropdown for each time slot — it would double the number of clicks for the user. Now they only need to make 7 changes (instead of 14) to set up the whole week.

Also note that the custom schedule doesn’t have any checkmarks to “use same time every day” — this scenario is advanced by definition, and the user came here to trade extra time for superb customization.

Here’s the takeaway: by treating simple scenarios separately we can actually simplify the complex scenarios, too!

Practicum

If you need to represent a large amount of features to the users without overwhelming them, follow these steps:

Have UI puzzles like that in your own SaaS product? Send in your screens at jane@uibreakfast.com, and I’ll tear down the most interesting situations here in UI Practicum.

The 1-Hour UI Audit: Get the Free Course

With this free email course you’ll conduct a simple do-it-yourself audit of your web app: eliminate the obvious design flaws, gain control of your features, and start building the UI that customers really want.