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:

Map mobile version

Disclaimer: he/she doesn't have much experience with UX/UI nor have I.

I came up with this prototype*:

Initial state State selection state City selection state
Map initial state Map state selection Map city selection

*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
Map initial state Map state selection Map city selection

The most important elements of the map section are:

  • The map itself;
  • The information panel.

English is not my first language so any edit/suggestion is appreciated.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.