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*:
*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:
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.