[Dotcoop - Misc] Display # of co-ops filtered in UI

lin-d-hop commented 5 months ago

Please track against the clockify project [Dotcoop - Misc]

Description

On the Mykomaps search panel we want to display the total number of co-ops that have been selected by a search/filter combination.

The design task here is to define the most intuitive place in the UI for this number to be displayed.

So for example, this page should display the number 5.

And this would display the number 4000.

In the above images you can see that Colm has written the number next to the 'Clear Filters' box. However this is likely not the best place for this information to be displayed.

Acceptance Criteria

It should be clear what this number is referring to. One option is to display the text '4000 results found'
This information will be displayed regardless of whether the filters are being used. When all filters are clear the number displayed should be the total number of initiatives in the directory.
The display method should work for between 0 and 999,999 initiatives.
Please provide designs for mobile and desktop screen size.

lin-d-hop commented 5 months ago

@ms0ur1s This issue is a specific task for the design work here, superceding #230 I'll unassign you from that one.

ms0ur1s commented 4 months ago

Thanks @lin-d-hop, now gonna start on this one, but I can't see to assign it to myself.

ColmDC commented 4 months ago

I have assigned you Marcel, but you should (hate that word) be able to self assign.

ms0ur1s commented 4 months ago

I have assigned you Marcel, but you should (hate that word) be able to self assign.

Thanks @ColmDC

ms0ur1s commented 4 months ago

https://xd.adobe.com/view/aefe2e1a-612a-4ed4-b570-0bf513927e8c-fbad/grid

I've included versions with the standard display of filtered results (positioned below the filters) and versions with the results displayed in their own panel, just as the results appear if an item in the directory panel is selected.

In the standard version I've moved the clear filters button to above the filters, making it text link, to shift the results up a little. I've also included a version with minimal results text (X matching results) and a version that mimics the text displayed above the ICA filters, which includes the array of combined filters. The second seems unnecessary as the selected filters are visible directly below.

For the versions that position the results in their own panel I've added an apply filters button below the filters, primarily because the results panel would have to be displayed separately from the filters panel on a mobile device. Therefore the required filters need to be selected prior to displaying the results panel.

ColmDC commented 4 months ago

The second seems unnecessary as the selected filters are visible directly below.

I think this may have been useful for debugging a long time ago. I agree there isn't much of a case for it in a public version.

ColmDC commented 4 months ago

For the versions that position the results in their own panel I've added an apply filters button below the filters, primarily because the results panel would have to be displayed separately from the filters panel on a mobile device. Therefore the required filters need to be selected prior to displaying the results panel.

Not sure I follow this logic. The filters are always automatically applied as soon as you change the filter option or accept a text change in the Search box. So what would the accept filter button do?

ColmDC commented 4 months ago

I have noticed a bug which may be causing some confusion. If you return to the Directory panel after carrying out some filters/text searches, all the filters/searhces are cleared, bar those on the field that is displayed in the Directory panel (i.e. Country in ICA map). But if you then return to the search panel those original search and filter options appear to be there in the drop down and Search box, but they are no longer applied. This needs its own ticket, but flagging it here in case it effects the design of this feature.

ms0ur1s commented 4 months ago

For the versions that position the results in their own panel I've added an apply filters button below the filters, primarily because the results panel would have to be displayed separately from the filters panel on a mobile device. Therefore the required filters need to be selected prior to displaying the results panel.

Not sure I follow this logic. The filters are always automatically applied as soon as you change the filter option or accept a text change in the Search box. So what would the accept filter button do?

Yes @ColmDC you're right, I'm probably not explaining myself clearly. If we were to display the filtered results in their own panel, on a mobile you wouldn't want those results displayed until you'd chosen all of your filters, because due to the size of the screen it's impractical to display both filters and results simultaneously. If you did you'd end up with something similar to what currently happens when you select a directory entry on mobile (image supplied below). Therefore, you'd want the filtered results to overlay / replace the search filters on mobile, with a visable a call-to-action (CTA) at the top of the results (such as the magifying icon, a back arrow or a close icon) to navigate back to the filters. Sort of like a mulit-level menu is often handled on a mobile, you open the menu, chose an option and the next level of options replaces the first. Hopefully this is a little clearer.

Current directory results display problem

Filtered results with CTA to navigate back to filters

ColmDC commented 4 months ago

Thanks @ms0ur1s. That makes sense. Do you think we should be consistent across screen sizes, so have a button to request the searches/filters to be applied, for large screens too? I've also been reminded of the other bug that has already been recorded here. https://github.com/DigitalCommons/mykomap/issues/197.

ms0ur1s commented 4 months ago

Thanks @ms0ur1s. That makes sense. Do you think we should be consistent across screen sizes, so have a button to request the searches/filters to be applied, for large screens too? I've also been reminded of the other bug that has already been recorded here. #197.

Yes @ColmDC it makes sense to be consistent across screen sizes. In relation to #197, it's probably worth sorting that one out as well if we're updating the left hand panel.

lin-d-hop commented 4 months ago

@ColmDC is this now ready to be turned into issues?

ColmDC commented 4 months ago

@ColmDC is this now ready to be turned into issues? Not yet.

If we were to display the filtered results in their own panel, on a mobile you wouldn't want those results displayed until you'd chosen all of your filters, because due to the size of the screen it's impractical to display both filters and results simultaneously.

The display of filtered results in their own panel only occurs when selecting an option from the Directory panel. I can't replicate the scenario you have illustrated in the Current directory results display problem. Is it a scenario you discovered when using the app, or that you assumed was a valid case. If the former, can you explain how you induced it? Provide a screen shot. Cheers.

ColmDC commented 4 months ago

I think the same applies to the option displayed in Desktop - filtered display - right hand results.

If I am right and those scenarios are not possible, then I think we just need the following changes.

Yes to display position 1 and 5 when nothing filtered. Yes to display position 2 and 5 when there are filteres applied. Don't display 'filter debug message' Yes to moving the Clear filter button to the text click option above the filters as in Desktop and - filtered display - minimal and equivalent on Mobile. No to addition of Apply filters button. Yes to replacing the X in the top right hand corner of stand alone results panel with a Clear filters clickable text, as in Desktop - filtered display - right hand results. Behaviour on clicking should be to clear all filters and search text, close the stand alone results panel and open the Directory panel.

ColmDC commented 3 months ago

@ms0ur1s can you take a look at my last two comments above? Cheers.

ms0ur1s commented 3 months ago

@ColmDC is this now ready to be turned into issues? Not yet.

If we were to display the filtered results in their own panel, on a mobile you wouldn't want those results displayed until you'd chosen all of your filters, because due to the size of the screen it's impractical to display both filters and results simultaneously.

The display of filtered results in their own panel only occurs when selecting an option from the Directory panel. I can't replicate the scenario you have illustrated in the Current directory results display problem. Is it a scenario you discovered when using the app, or that you assumed was a valid case. If the former, can you explain how you induced it? Provide a screen shot. Cheers.

Apologies for this one @ColmDC, I produced the directory display error using a browser based mobile / device simulator called Mobile FIRST. It has proved reliable in most cases, however, after checking the ICA map (the map used in the example above) on a few actual devices (an iphone 6s, 12 and an ipad mini 2) the directory panel works as it should - the second level on the directory overlaying the first.

ms0ur1s commented 3 months ago

I think the same applies to the option displayed in Desktop - filtered display - right hand results.

If I am right and those scenarios are not possible, then I think we just need the following changes.

@ColmDC, could you clarify what you mean by the above, please.

Yes to display position 1 and 5 when nothing filtered. Yes to display position 2 and 5 when there are filteres applied. Don't display 'filter debug message' Yes to moving the Clear filter button to the text click option above the filters as in Desktop and - filtered display - minimal and equivalent on Mobile. No to addition of Apply filters button. Yes to replacing the X in the top right hand corner of stand alone results panel with a Clear filters clickable text, as in Desktop - filtered display - right hand results. Behaviour on clicking should be to clear all filters and search text, close the stand alone results panel and open the Directory panel.

Cool, that all makes sense.

ColmDC commented 3 months ago

I think the same applies to the option displayed in Desktop - filtered display - right hand results. If I am right and those scenarios are not possible, then I think we just need the following changes.

@ColmDC, could you clarify what you mean by the above, please.

I was just saying that if I was correct that your way of generating those pathways through the app on mobile weren't valid, (which you concur with now) then I was proposing that list.

ColmDC commented 3 months ago

Cool, that all makes sense.

Great. Can you reformulate the spec now below, before moving to development?

ms0ur1s commented 3 months ago

Cool, that all makes sense.

Great. Can you reformulate the spec now below, before moving to development?

Cool, @ColmDC would those specs be for the development stage?

lin-d-hop commented 3 months ago

No to addition of Apply filters button.

@ColmDC Without the Apply Filters button the UX on mobile will be horrible once the design is implemented to display the results in a secondary panel. I think this is a bad idea to leave it out. Let me know if you definitely want this removed at the risk of a bad mobile UX. I can then turn this into issues.

ColmDC commented 3 months ago

Let me know if you definitely want this removed at the risk of a bad mobile UX.

I went through it with Marcel and agree with you both that the Apply Filter button should stay on both screen size and the filters should not be applied until it is pressed.

ms0ur1s commented 3 months ago

@ColmDC should I move this one out of in progress now?

ColmDC commented 3 months ago

@ColmDC should I move this one out of in progress now?

Yes I think we are consideting the design is complete and @lin-d-hop is working on the Issues for its implmentation.

rogup commented 3 months ago

Hi @ColmDC / @ms0ur1s please can you point to the final designs for #230 ? It's hard to follow all of the conversation in this ticket and know which designs are up to date

ms0ur1s commented 3 months ago

HI @rogup, I think it boils down to the below (illustrated in the updated designs), is that correct @ColmDC?

https://xd.adobe.com/view/a97190af-1c83-4d63-bd73-cd4bd9c25b58-fc22/grid

We have the addition of a total result count when no filters are applied (desktop and mobile)
The addition of an apply filters button (desktop and mobile)
Filtered results appearing to the right as per directory results (desktop)
Filtered results appearing over the top of filter as per directory results (mobile)

ColmDC commented 3 months ago

@ms0ur1s The filter results seem to have lost the display of result count, which is essential for small screens, where the search panel is covered. Should we always display the count in both?

To be explicit, the addition of an Apply filters button means we no longer automatically trigger the filtering whenever when a new filter option has been selected.

To be consistent we should also stop carring out text matching until the button has been pressed.

ms0ur1s commented 3 months ago

@ms0ur1s The filter results seem to have lost the display of result count, which is essential for small screens, where the search panel is covered. Should we always display the count in both?

Hi @ColmDC, I seems unnecessary to duplicate the result count on desktop, perhaps it should only display on mobile the results panel. What do you think? The link below contains an updated design.

https://xd.adobe.com/view/06927e2d-af74-4e6f-8749-35a116f28e33-53c1/grid

To be explicit, the addition of an Apply filters button means we no longer automatically trigger the filtering whenever when a new filter option has been selected.

To be consistent we should also stop carring out text matching until the button has been pressed.

I concur. For consistency, filtering should only be applied once the apply filters button is clicked.

ColmDC commented 3 months ago

seems unnecessary to duplicate the result count on desktop, perhaps it should only display on mobile the results panel. What do you think? The link below contains an updated design.

Okay. Let's go with this. @rogup is the Issue clear enough now to move to implementation?

DigitalCommons / mykomap