[CWM] Designs for the Search and Directory panels to be implemented in React

lin-d-hop commented 1 month ago

Track under CWM project in clockify

Description

Create new designs for Directory and search panels

Use the existing panels as the basis.
Spec out the requirements for each panel, aesthetic and functional, as they differ from the original designs. This should be fully captured in the comments added by @ColmDC in Overview doc
Document the rationale behind any enhancements and omissions
Create designs with the above points in mind, consider the supporting API data flows and the React/Redux stack being used.
Submit designs for team review to ensure all requirements are met

Working Practice

This issue is to be worked on by @ms0ur1s Marcel, what processes would support you to get regular accountability and feedback while you work on thsiis? Posting regular WIP updates in public channels?

Acceptance Criteria

Full designs, including UX flows for interactive components, for the search and directory side panels of MM
Documented list of changes (additions and omissions)

More Context

Overview doc Timeline Planning doc

TODO

Add an estimate for this work before you begin :)

ms0ur1s commented 1 month ago

@lin-d-hop, thanks Lynne. 😁

An estimate of 4 days. I'm probably overestimating, but given my recent history I thought was probably safer.

ms0ur1s commented 1 month ago

@lin-d-hop, I also had a good meeting with @ColmDC this morning and we discussed time-boxing a couple of hours to research how other map applications implement information panels etc.

ms0ur1s commented 1 month ago

https://www.uk.coop/directory https://coops4dev.coop/en/icadp

https://miro.com/app/board/uXjVKtn18ao=/

https://m3.material.io/components/side-sheets/overview

ms0ur1s commented 3 weeks ago

Desktop version 1 https://xd.adobe.com/view/6ccaab13-f506-49a2-b84a-1c8866433df7-3999/

Desktop version 2 https://xd.adobe.com/view/f984948b-5c42-45b1-8e20-b767d8ce753d-acd7/

Mobile version https://xd.adobe.com/view/d7dd98f3-eb08-45f7-9b9d-4922bbce217b-828e/

The prototypes linked above are fully interactive as far as buttons and navigation go, but on the directory and search panels only the first option / drop-down is clickable and the first result on the search results panel - although if you click on a non interactive portion of an element, hints are provided by the way of highlighted clickable areas.

As usual you are also able to navigate screen by screen using the arrows below the presentation area. You will however encounter extra screens created for purpose of making the designs interactive.

Please leave feedback within https://github.com/DigitalCommons/mykomap/issues/264 issue for consistencies sake.

A version including Colm's alternative (no map view) will be forthcoming.

ms0ur1s commented 2 weeks ago

No map view

I've added links below for the prototypes that include the no map view.

There is now a button positioned at the top right of the map to allow for switching between views and if you click on the 'List View' button you will be taken to the list view page.

Desktop version Within the list view you can scroll to the bottom of the displayed items and if you click on first item a modal is displayed with the full details of the co-op. From within the modal you can view the co-ops position on the map or close the modal. You can also switch back between views.

Mobile version The mobile version follows the search flow of the map version. As with the desktop version the list of items is scrollable and to view a co-op's full details you click on the first item. The full details pages is also scrollable and the buttons work as per the desktop version.

As per the previous iterations please add any comments to issue https://github.com/DigitalCommons/mykomap/issues/264 for consistency.

Desktop version https://xd.adobe.com/view/0f8c7d84-e063-4008-a2fb-c7e3b8580d07-5adf/

Mobile version https://xd.adobe.com/view/4ed77098-5133-4b80-b34c-2f2b3e5b22a7-1b84/

rogup commented 1 week ago

These designs look great!

I have a few thoughts on the mobile designs:

On slide 14 of the mobile mockups, I was what does 'Displaying 4 -9 results' mean?

Also, I'm wondering if we need the results pane (slide 7) at all on mobile. It feels quite similar to the new List View, since both take up the whole screen anyway on mobile. What if performing a search whilst on map view just brought up the map showing all the markers that match the filter, then the user can switch to List View to see the results in text form (slide 14), with a button to switch back to Map View to see the markers again? And clicking 'search' could always go back to the search panel (slide 9).

ms0ur1s commented 1 week ago

Thanks @rogup 😁.

On slide 14 of the mobile mockups, I was what does 'Displaying 4 -9 results' mean?

Sorry this wasn't clear. it's supposed to be an indicator of paging, there being 4 of the 9 results visible on that page. If you scroll to the bottom of the screen the pagination is visible.

Also, I'm wondering if we need the results pane (slide 7) at all on mobile. It feels quite similar to the new List View, since both take up the whole screen anyway on mobile. What if performing a search whilst on map view just brought up the map showing all the markers that match the filter, then the user can switch to List View to see the results in text form (slide 14), with a button to switch back to Map View to see the markers again? And clicking 'search' could always go back to the search panel (slide 9).

Sounds like good idea, I'll mock this up and update the mobile version this afternoon.

ms0ur1s commented 1 week ago

@rogup, I've update the below mobile prototype.

Follow the search screen flow using the map view
Chosen the country and apply filters
You arrive at a map populated with markers.
Here you can click on 'List View' and be taken to the results in list view
Or click on any marker and a pop-up will appear

https://xd.adobe.com/view/4ed77098-5133-4b80-b34c-2f2b3e5b22a7-1b84/

wu-lee commented 6 days ago

Agree, these look great, not much I can think of to add, currently. There may need to be space for a branding logo? (Current maps can have one, at least)

rogup commented 6 days ago

@rogup, I've update the below mobile prototype.

Follow the search screen flow using the map view

Chosen the country and apply filters

You arrive at a map populated with markers.

Here you can click on 'List View' and be taken to the results in list view

Or click on any marker and a pop-up will appear

https://xd.adobe.com/view/4ed77098-5133-4b80-b34c-2f2b3e5b22a7-1b84/

Cheers for this @ms0ur1s !

A few other things I was thinking (but you might have already thought about this or have a different opinion about whether it would be a good UX!):

After doing a search and reaching slide 8, could clicking 'search' go back to slide 11 to perform a different search, with an option to clear existing filters?
when clicking List View from slide 8 and reaching slide 16, it would be nice to be able to go back to the Map View - could there be the same buttons at the top of the screen to choose the view? And if the navigation tray at the bottom was still there, maybe there wouldn't need to be 'Clear Filters', since the user could go back to search to clear/alter them.
Sometimes it's not clear how to get back to the map when on different screens. Do you think a 'map' navigation button at the bottom would be helpful? Or maybe when on the search/navigation/about pane, clicking search/navigation/about again could close the pane and return to the map

ms0ur1s commented 6 days ago

Agree, these look great, not much I can think of to add, currently. There may need to be space for a branding logo? (Current maps can have one, at least)

Thanks @wu-lee, I'll look to get this integrated.

ms0ur1s commented 6 days ago

A few other things I was thinking (but you might have already thought about this or have a different opinion about whether it would be a good UX!):

After doing a search and reaching slide 8, could clicking 'search' go back to slide 11 to perform a different search, with an option to clear existing filters?

when clicking List View from slide 8 and reaching slide 16, it would be nice to be able to go back to the Map View - could there be the same buttons at the top of the screen to choose the view? And if the navigation tray at the bottom was still there, maybe there wouldn't need to be 'Clear Filters', since the user could go back to search to clear/alter them.

Sometimes it's not clear how to get back to the map when on different screens. Do you think a 'map' navigation button at the bottom would be helpful? Or maybe when on the search/navigation/about pane, clicking search/navigation/about again could close the pane and return to the map

Thanks @rogup, I'll have a look at these.

ms0ur1s commented 5 days ago

@rogup, great suggestions. Your changes are here: https://xd.adobe.com/view/53d8a726-c336-4903-aaba-58ec3addac86-068b/

rogup commented 5 days ago

Thanks for updating, looks good!

lin-d-hop commented 4 days ago

Thanks all for the great back and forth. These designs are looking great. With the new design issues created here I'm closing this one :)

DigitalCommons / mykomap