0

There is always one time when we need to insert a map in a webpage or app while there is a vertical scrolling in the whole content. For example, imagine a web that has a map as the first element of the page and below it exists more content of any type: text, images...

The problem is that a user could see the map in a mobile device and not be able to scroll to the content below it, so I wanted to ask you if you know any recommendations about the proper height/screen proportion this scrollable area has to have. Do you know any alternatives to this vertical scrolling problem?

PD: I used the example of a map because it's more evident that needs to have scroll, as a scrollable list for example can have scroll or not. I suppose that a recommendation for a scrollable map area can be applied to any type of scrollable area.

Improve this question

2 Answers 2

Reset to default
1

3 main examples of how this is handled come to mind: Google, AirBnb and Realtor.ca

Both Google and Realtor.ca allow users to click into the map. The map screen then has different types of filters and controls to control/navigate what's seen on the map and relies on users using their mobile devices back button to leave the map view.

AirBnB has removed the map view entirely from their mobile site. I do think there is still a way to access it but it's painfully cumbersome and I can't figure it out at the moment.

My first recommendation would be just having users click into and back out of a scrollable map view. It's easy enough to handle in design so they know they're clicking into map functionality. If you're insistent to use a scrollable map within a scrollable page on mobile I'd recommend using Instagram as a sizing reference.

Improve this answer
2
  • Oh, I never thought about Instagram scrolling. Are you referring to the horizontal scroll in a post with more than one picture, right? Or to some other part of the app? Thanks for your response!
    – Nico Salomone
    Commented Apr 22, 2020 at 8:39
  • 1
    Exactly! With this map you're talking about a scrollable area within a scrollable page in a mobile experience. When approaching a problem like that you'll be able to come up with multiple solutions so I always like to ask myself "What behaviours have users seen elsewhere?" before I reinvent the wheel and design something no one is familiar with. Instagram's horizontal scroll very nicely places a scroll within a scroll, with visual indicators and users are easily able to step back out of that horizontal scroll as vert. scroll functionality is still accesible top and bottom. Food for thought
    – It's Dylan
    Commented Apr 22, 2020 at 16:43
1

Screen 01:

The content area should display minimum information that the user needs. As per that decide height.

enter image description here

Screen 02: To view additional information, the user can drag the card upwards. Visual cue should be provided.

enter image description here

Screen 03: Now the user has a bigger area to view the content. User can drag down the card to view the map again or can tap on map area .

enter image description here

Improve this answer
5
  • Thanks for your response Swapna, I assume you propose to set a specific height to the portion of the content that shows at the bottom of the screen and make the map variable in height depending of the size of the smartphone screen?
    – Nico Salomone
    Commented Apr 22, 2020 at 8:42
  • No map area height is not variable. The content area is something that stays on top of it. You can drag it over the map area to view the entire content. Something similar to : Seeing details of driver when you booked a cab in UBER app
    – Swapna
    Commented Apr 22, 2020 at 9:12
  • Here is the reference : google.com/…
    – Swapna
    Commented Apr 22, 2020 at 14:55
  • 1
    This doesn't seem like it accommodates for scrollable page content. It would be interesting to prototype and test how many users drag themselves into the map view when trying to scroll up on the page content.
    – It's Dylan
    Commented Apr 23, 2020 at 20:00
  • Not necessarily we need to have scrollable content. The goal is to optimize the experience for both of the views when space is a constraint.
    – Swapna
    Commented Apr 24, 2020 at 1:23

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.