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:
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?
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:
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:
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:
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:
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!
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.
Join 8,000 awesome people on my mailing list — SaaS founders, product managers, designers & developers who are business-driven and want to build better software.
