How to handle map section navigation in mobile

Question

Given a section which takes full height of the device's viewport and have the following controls at disposal of the user:

• Can pan through the map within a certain boundary (a country);
• Can select an state to view it's information;
• Can input or select a city's name to view it's information;
• Can see only one of the informations simultaneously (accordion).

How does one accommodate these functionalities in a handheld device (i.e. mobile phones)? Without annoying the user with:

• Mistakenly get his touch input while scrolling down the page to pan the map ("scroll hijack"?);
• Visual pollution with too much screen elements (e.g.: Map + Information panel);
• Very small font size.

Here's what the designer came up with:

I came up with this prototype*:

Initial state	State selection state	City selection state

*Made in figma

But I don't think it is the "best" solution, for the following reasons:

• The user don't see the selection on the map, it would just popup above it, giving the animation of the selection in a window of 200 milliseconds (maybe delay it to ~750 milliseconds);
• The user's pan interaction is removed, because the panel is now above it.

But it have its pros:

• The user is given space top and bottom to scroll the rest of the page, the section itself is about 75% of the device's total viewport height;
• No extra information noise/pollution on the initial state (inert, i.e.: no first interaction);
• The user is given an option to exit the information panel (top right corner).

My initial question remains, as I'm not too confident with this "solution" that I've provided. I hope it isn't too subjective and there are better solution for this.

Here is a preview on desktop:

Initial state	State selection state	City selection state

The most important elements of the map section are:

• The map itself;
• The information panel.

---

_{The designer doesn't have much experience with UX/UI nor have I, but I'm trying to help finding an adequate solution.}

Answer 1

First, why are you concentated on working with the map? As I can see, the main purpose of this application is providing information and the map is only one of available controls to select state or city among others. If so, I advice you not to overlap map and information section. So make the map just smaller and independently controllable. Also you may use the map as data visualization object by color coding different percentages or population or other data to capture user's attention to most important things without forcing him to study all the data within information section. Also, I think it's better to use picker than type state and city of course if you have not infinite city list for particular state.

Second, if you have strict requirement to use the map this way, than smaller information section size is better. So, in portrait orientation initial two column section is good, while in landscape orientation single column is better. The only thing I want to say about two column section - relocate blocks to make left column as 'navigation' column to select state and city, while making right column as 'information' column.

Answer 2

i dont think you design would have any issues on the desktop view as you have enough space for both map animation/panning and info panel

but on mobile what you can try is shrinking the info and proving extra info on collapse and expand

OR Vaccination 1st Dose and second dose can be side by side and just display the percentage . the bar is taking too much space just to show percentage

and search will be hidden by default only if i want to search further i can tap on expand and then enter search. but this is subjective to what user are doing the most

Answer 3

I took some hints from this blog post: Better Map UX, Prevent Scroll Hijacking.

Basic requirements

I broke down the basics functionalities of the map, given that it's the only section on the website the focuses on the map itself:

• Prevent scroll hijack;
• The user must know that the map is navigable;
• The user must be able to activate and deactivate the map;
• The user must be able to expand and collapse the information panel.

Providing solutions

With basic requirements settled, it was introduced a button which activates or deactivates the map navigation (with scroll and click events) and another to collapse or expand the panel information, for better overview of the map. Each one of the buttons has an enabled and disabled state visual feedback.

When the map is deactivated, an overlay with 70% of opacity covers the map as indication of being unnavigable. The page starts with the map beign deactivated to prevent scroll hijack.

There's an initial information, in the information panel, informing that the user can pan and select a state on the map, to view its information about the vaccination.

Overview

Initial state	Map in the navigable state	Collapsed information panel	Selection state