UX review of prototype

[Grutru]

Layout

1. I think on desktop, in the map view, there should be a list in the side bar - showing the results is in the map area.
   https://www.figma.com/design/z5SXhvc7pmdnXjMgaF1zy1/Discovery-directory?node-id=1169-8913&t=S5DId3ZMUZRaqhQ2-4
   We could do a default view with no side bar https://www.figma.com/design/z5SXhvc7pmdnXjMgaF1zy1/Discovery-directory?node-id=1169-9257&t=S5DId3ZMUZRaqhQ2-4 but that might be more work having it shift between the two? What do you think?

2. If we can move the search and filter into the side bar and move the toggle into it's own component that sits outside of the sidebar.

3. It's tricky using any colours in map UI components, I think for the time being if we can stick to black as our interaction colour and white as our background colour. We can try and maybe introduce a colour later on

Search

1. Include the magnifier icon and this suggestion text please https://www.figma.com/design/z5SXhvc7pmdnXjMgaF1zy1/Discovery-directory?node-id=1165-6677&t=S5DId3ZMUZRaqhQ2-4

Map

1. Include map navigation tools

• zoom as a minimum (some users won't know the scroll to zoom)
• zoom to your location (25km view) (Nice to have)
  Wonder if these are standard components that come with the mapUI kit? Let me know if you need to find/produce some

2. disable the zoom in when you click on a map pin, I think this works against user browsing behaviour
3. is it possible to set a zoom out limit? As we're only UK based? This might be tricky as the user zooms out from central point...

Search

1. Include the magnifier icon and this suggestion text please https://www.figma.com/design/z5SXhvc7pmdnXjMgaF1zy1/Discovery-directory?node-id=1165-6677&t=S5DId3ZMUZRaqhQ2-4

[paul-platypusdigital]

ROUND 1
Layout

1. I'm don't like the idea of making buttons/inputs teleport when they're interacted with, even if it's clear where they've moved to. I've moved it into the sidebar as per 2. It doesn't look exactly like the mockup because I wasn't sure if there was some left over experimentation in there or if I was just confused. I think I captured the intention? Anyway, if there's anything from the mockup you're more adamant about just let me know and I'll ask any questions before going ahead.

Showing the cards for visible markers is a bit of a feature in itself, definitely doable, but not trivial so I've left that for now. It will probably need a bit of discussion around where the filters go/move to, what happens when the user moves the map, what happens when a text search occurs.
2) ✔️
3) ✔️

Search

1. ✔️

Map

1. ✔️ They should be displaying in the bottom right (away from the header)
2. ✔️ was a bit experimental. I liked the idea when i was implementing keyboard nav, but seeing it later was janky
3. ✔️ Map is still draggable but the min zoom has been constrained and we can set it for each client (a US/AU/CAN map would probably want to zoom out further)

One question I had was: do you want the side bar floating above the page (higher z value) for both views? Or prefer the sidebar pushing the cards out of the space on the grid view? It just mainly concerns what happens when the sidebar starts hiding components in the header (if the sidebar stretches all the way to the top).
I assume there be some differences there between the app and the component (embedded). The app will probably need some branding (logo) etc, whereas the component might not.

Thanks for having a look. Looking forward to another round

[paul-platypusdigital]

Another thing I wanted to check: has anyone mentioned the other layout formats to you?

I'm just thinking the way I was intending to move ahead got shaken up a little by these changes.
Lynne mentioned at one point that she wanted the option for: Tabbed (current), Stacked (Map on top of grid view on the same page), Map only, Grid only
Also potentially Side by side (stacked by horizontal).

I'm mentioning it now because I figured that Side by side is somewhat similar to having the visible map markers show as cards in the side bar.

[lin-d-hop]

Thanks for this both! Really great to see the examples with/without containers - the map looks great in the full width version!

Agree with Paul on 1 - let's get some user insight about how people want to interact with the map before adding too many card display options. It might be that the cards under the search are actually a filtered card component, meaning its more about component layout than new components? Unsure, but Pauls point about the non-trivial feature is a good one at this early stage.

@Grutru I think it might be worth exploring with users how they imagine the map to be laid out on their websites. The interaction of the search&filter panel with the main display components might change in different circumstances. For P4G when users are logged in they might want to be zoomed to their location with display settings configured. For LWA searching might be a critical feature on the top of the map. It feels to me this will change between users and we probably want user insight to guide this. WDYT?

Both - It makes me think it might be useful to have a few different layout mockups ready for user interviews. I've got some ideas in my head but maybe that's worth a quick chat this week with the three of us to see what is easy/hard to do based on the work Paul has done?

[Grutru]

Thanks Paul for making all those changes! Agreed, the buttons jumping around wouldn't be great. Thanks for pulling together the demo of the embeds, really helpful to see we can do a full page/

Very happy to test out a few different layouts with users. I can mock them up in figma rather than Paul building them if it's easier?

From my research, the pattern of map + list view at the same time seems to be quite a common pattern. Google maps, Airbnb, Ubereats, deliveroo etc. You can see reference screenshots here https://www.figma.com/design/z5SXhvc7pmdnXjMgaF1zy1/Discovery-directory?node-id=32-1711&t=Xguho1j2EqxaSSk1-4 so I'm fairly confident it's a pattern that users already understand and expect.

In these layouts they often switch to map on top and 'sidebar' below like this. but this is an example from an application rather than
an embedded component which may raise some different constraints.

re: One question I had was: do you want the side bar floating above the page (higher z value) for both views? Or prefer the sidebar pushing the cards out of the space on the grid view? It just mainly concerns what happens when the sidebar starts hiding components in the header (if the sidebar stretches all the way to the top).

I think another reason for wanting the sidebar constantly visible is to avoid the interaction problem it creates from hiding/revealing. Another option would be to display 'card content' into a sidebar (what google maps does) when user clicks rather than floating card previews.

I think whatever route we go down the search will always need to be visible.

Let's jump on a call and chat it through. Thursday morning/evening work again?