Wizard split step VS big step in B2B application

Question

We are re-developing a B2B application to make it more user-friendly, but keep it robust.

One of the features has popup wizard with 3 steps.

On Step 2, we'll need to have a grid of items to be checkboxed/selected to progress onto Step 3.

The catch is that for the grid to appear a user will need to search for certain CSV criteria (we have 4 criteria by which users can search). When the criteria is populated and is applied, the step would clear/load (see below steps 1.2 and 2.2) and the grid of results with those criteria would appear.

This is where the opinions are divided:

• have a 'split step' approach (see 1.x screens attached): have a screen of 4 input boxes + apply criteria button;

• OR have a full step approach (see 2.x screens attached): put everything in one screen and use a collapser for criteria.

Here are our thoughts:

• split step provides a cleaner UI, and less waste of real estate when our users are looking at the grid and can always go back and reapply different criteria. (if they want to change the criteria, click back? will the users panic about anything?)

• full step provides users with the all-in-one screen and the criteria can be collapsed (initially or afterwards? but then won't the user panic with 'where did my criteria panel go?' we aren't sure)

• the grid can be huge... and fitting everything into one big step... might be blow up a browser or cause a lot of scrolling - just as bad as going back and forth.

• Both approaches are as crazy with 'clicks' (one has on and off collapsing big chunk or scrolling, the other has going back but not seeing the grid), but B2B apps aren't the prettiest from what we have seen.

• Both approaches will have the issue of 'apply criteria' and reload the entire grid.

PS: some of you might notice our pagination is crazy. It's because it is. I hear you.

Thanks for any help guys :)

Answer 1

Try putting the stepper navigation up top. Allow them to see the criteria values, and refresh as needed.

Since the quality of the list is dependent on the criteria, you could attempt a persistent sidebar, similar to filtering in ecommerce.

Material design has some simple patterns for steppers. This will get you some horizontal space to work with.

Can you go full screen? Maximize real estate.

Assuming this is a desktop, if you are going to use a dialog, can you expand it to full screen? This will give you more real estate, and allow you to place always visible filters to the left.

If you can, show results and filters together.

From Edward Tufte, a key principle of information design:

Allow important visual analysis to be done adjacent in space, not stacked in time.

If you can delineate the sections of the page, you can take advantage of the common pattern of filters to the left, results to the right.

Don't make them memorize the filters they applied to get the results.

By seeing both together, you avoid a memory tax on the user, and they don't have to open and close filters that would live either on a previous step, or above the table of results.

This is where adjacent in space comes into play.

UPDATE: You could separate the criteria (BIG STEP), but not punish them for wanting to view / edit in context if need be.

Flexibility can help those either uncertain of their choices, or need to see and filter the data in context.

While I find v1 Big Step very useful to help concentrate on a single task, could you build flexibility for those who need to be reminded or edit their choices in context?

If you allow for another way to edit, you won't punish those users who need to view (and maybe edit) the criteria.

Worst case scenario is that they don't see the criteria view / edit option, and go back a step.

I've come across this pattern from the trading platform Kraken, where you have a table, and can view and edit the filters as a popover above the table:

the upper right shows that filters are engaged:

with a popover, I can see the table values:

While I find some of the graphic design choices a little distracting (the thick dark purple), I found it helpful to filter the data.

In your case, you can place an 'View / edit criteria' button or link, prominent enough to be noticeable yet not distracting.

Answer 2

I came across a similar requirement where we had to onboard Enterprise social media accounts that had more than 40 Facebook pages. We were ad-tech company and our USP was we consolidate your various social media channels into 1 platform. We used to have a dedicated employee that handled onboarding with these clients as they were big whales.

---

Here are my 2 cents

• split step provides a cleaner UI, and less waste of real estate when our users are looking at the grid and can always go back and reapply different criteria. (if they want to change the criteria, click back? will the users panic about anything?)
• Both approaches are as crazy with 'clicks' (one has on and off collapsing big chunk or scrolling, the other has going back but not seeing the grid), but B2B apps aren't the prettiest from what we have seen

I feel the users here are trained personnel with industry knowledge where they know what CSV criteria they are looking for. So we can call these Power users. As a result, I will definitely focus on the efficiency of the user while maintaining the effectiveness. My priority on how clean UI looks is secondary.

From the relevant information above, my money will go to 2.x options. Here are the reasons why:

1. All information is glanceable at the same place to make effective judgments.
2. Since they don't have to go back and forth, it makes the process more efficient.

---

• the grid can be huge... and fitting everything into one big step... might be blow up a browser or cause a lot of scrolling - just as bad as going back and forth.

I feel display of dense data can be handled more graciously. If you want any inspiration, look around these data tables 👉👉 https://ant.design/components/table/

Answer 3

I work a lot on .GOV projects over here in the UK. We advise splitting tasks into small components because we find it focuses users attention on a specific thing. Ergo, the step wise approach is always the way to go.

It looks like with more complex interactions you are trying to do too much on one screen. This will make it harder to learn.

And another thing you need to consider: how often will this tool be used? Daily? Monthly? Once? That effects the type of interaction too. If it's rarely used, it's even more likely you need a progressive step-wise approach.

Summary

Step wise is good because it breaks down the task

It focuses user attention

It's easier to learn

But may not be as fast for expert, frequent users

The trick is, of course, to test your work with users.