0

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

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.

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

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.

2
  • Kudos for questioning biased solution detail and asking the OP to reconsider approach. I think the columns detail is mixed up, 2 columns being more suitable to landscape than portrait.
    – straya
    May 12 at 23:59
  • @straya I'm sorry, just have more time to rethink my answer again and need to say that 2-column leave more space for map in portrait and 1-column leave more space in landscape if you don't overlap map and info.
    – Serg
    May 17 at 8:25
0

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

0

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
Initial map state Navigable map collapsed information panel Select state

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.