[UI/UX] Export/Print map UI

balagurova commented 4 days ago

Description

Hi! The current behavior of adding a new tab for 'Export' breaks convention of the existing sidebar and can be confusing. 'Export' isn’t a standalone mode like 'Data' or 'Layers,' so it doesn’t fit as a separate tab.

I would suggest choosing between two options: 1) Previous option with a block on the map. This approach looks good and doesn’t interfere with the sidebar. If the user wants to see the full map, they can simply collapse the block.

2) Modal window. Similar to how Google Docs handles printing functionality, this option opens a modal window with settings and a preview side by side:

Google Docs reference:

Screenshots

No response

Mockup URL/file

No response

balagurova commented 4 days ago

Figma mockup

JinIgarashi commented 3 days ago

@balagurova Thank you for suggestions.

Previous option with a block on the map version has issue when it is in responsive or small window size laptop. the floating dialog is annoying for users to change settings of exporting.

Modal window option looks good if a page is like traditional webpage. But I think this is not appropriate for map app. Exporting a map image needs some adjustments of map locations against image size. Current version can allow users to move map freely by checking actual paper size extent on map.

I am thinking we can have three tabs all the time in sidebar. Probably Export tab can be renamed to share tab by combining export and share functionality.

Tabs can be:

Data tab: search dataset and add it to the map
Layers tab: edit layer to visualize a map
Share tab: Share map URL or export an image to share with other people.

This can be a basic working flow of GeoHub from left tab to right tab. We can also delete share button and export button from layer tab footer.

What do you think this idea?

UNDP-Data / geohub