0

I'm designing a multi-page/step wizard/flow where one of the pages needs to focus on findability and extensive filtering options - but also selecting (or deselecting them across searches).

Since the user will need to search multiple times and gradually select items, I need to keep selected items around across searches / changes in filters.

There is not enough visible space on screen to both offer extensive filtering options, a table / graph / list with enough info - and also a selected items list at the same time.

I've considered pushing selected items to a tab, however since it's the primary goal of the page, it doesn't feel right. It doesn't make it stand out as a primary action that is required to continue the flow.

I have some whitespace left, so I was wondering if anyone had some great ideas for alternative visualizations which emphasizes that items have been selected, and possibly give the user to show them in some creative way.

Here's what I have so far.

enter image description here

With tabs:

enter image description here

With alternative way of visualizing selected items:

enter image description here

I guess as you can see in the images, I'm also very much in doubt where to place the progress bar and whether to make the step in that bar clickable or if using back and next buttons is necessary, however that is not my primary concern.

Edit:

Could a combination between 2 and 3 be viable?

enter image description here

In that case is there a better way than the round circle (green check or red exclamation mark) to highlight that selecting is the primary action that needs to be done. Is a simple popup with a message when you try to click next enough?

1
  • Like @BrunoH suggested, it makes a lot of sense to have a "shopping cart" type of element to show the selected items with this kind of flow. It's hard to think of another solution without knowing what we're dealing with. Could you provide more context of the 'items' we're working with? Oct 25, 2022 at 13:02

1 Answer 1

1

Not knowing what the other steps (before and after the selecting step) are it is difficult to come up with a solution.

What often is a good starting point to finde a solution is to find existing patterns that do similar things. What you are describing feels like the behavior one would do in an e-shop. You search for items and put them in to a shopping cart. 'Shopping cart' might be the wrong wording in your case but the pattern could still be used.

Since you have steps bevor and after that 'shopping' you probably should show the shopping card as an overlay or you could ad an additional step for that. This totally depends on what is going on in the next steps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.