Item picker (with search filters) UX

Question

In my school web app, teachers can create exams and pick exercises to put in them from a big "exercise pool" they previously created.

The exam editor allows teachers to create slots and to insert one or more exercises in each slot. This is achieved using an "exercise picker" which is opened inside a dialog.

The picker shows more exercises as the user scrolls down (infinite scroll) and allows to filter exercises according to some search criteria. Exercises are shown as cards with a button to allow for selection.

Here's what it looks like in action:

https://youtu.be/JKPwjn05cbI

I have two questions about the usage and UX of this component:

1. is it okay for the search filters to behave the way they do? As you can see, they are at the top of the picker and scroll out of view when scrolling down. I am afraid this could wind up being annoying for the user to have to scroll back up each time they want to change the filters. At the same time, I don't want to stick the filters to the top at all times as they would take up a lot of space. Maybe a solution could be to shrink the height of the search filters box as the user scrolls down, parallax-like, until there is only a small stripe left with an icon that can be used to expand it?

2. as you can see, when I select a one or more exercises, if I close the dialog and open it back, I have to dig down to find the selected exercise(s). Would it be appropriate to keep the selected ones at the top? The main reason for not doing this would be that it alters the order of exercises shown to the user: one exercise could have been 23rd and now it's shown as the first one. I thought about separating them from the others, like showing a small title "Exercises you selected" and keeping them at the top, but I'm not sure.

Overall, I'm looking for ways to optimize usage of this component and to keep the interaction cost as low as possible. Any feedback is welcome.

Answer 1

First, if it's possible to change, your result list might be better suited for a pager rather than infinite scroll. A pager would:

• Show the user how many results there after searching/filtering so they can decide whether to refine, or not
• Keep your page length manageable so that you don't have to make the controls travel down the page with the user.

Whether you use a pager or infinite scroll, the good part is that your list of Exercise cards is fairly compact, so on Desktop you could use a lot of the layout space to persist both search/filter and the user's selections, making each column scrollable as needed. I know you want to minimize the filter section, but it's an important part of the process of finding the right exercises, and I think you should keep it persistent. Each selection made in the middle column could then persist in the right-side column. When the user is done with making selections for each slot, they can click an Add Selected button to continue.

I'm using checkboxes for filtering as you can put everything in alphabetical order and make it extremely easy to scan, but filter chips could work as well. I'd caution against using a large number of filter chips that have no particular order.

Answer 2

Firstly, some follow-up questions -

1. Why are there two search bars, one for Exercise Label & one for Text? Taxonomy could be improved here to be easily understandable. Also, why are the search bars occupying 90% of the horizontal width?
2. Is there a reason why there are so many tags at the ending part of the expanded filters section? Does the system just show all available tags? The last tag suggests that the system is picking up keywords and automatically converting them to tags, is that the case?

As I understand, you could condense the filters by reusing the horizontal space of the text fields & clubbing all list navigational elements into one band. Diving into a more filters button could open a modal. That band could be sticky so the user does not have to scroll up everytime. You could also have another look at the spacing & padding of the individual exercise card too.

W.r.t the 2nd question, does the ordering of the questions matter to the teacher? A question might be 23rd in the master list but when they add it to the slot, does it not show up as 1st? Showing the selected exercises up front, stuck to the top is a good idea.