i want to create a single page website. on desktop after user click 1 object, the detail will show on the right side with width like 40% from screen.
on mobile im planning to use the same gesture but change from width 40% to 100%. do you think its the best idea to make the same gesture like the desktop?
its dummy content but the flow will be like this
I prefer showing the details under the object on the mobile devices. So the user can see object and details at the same time just by scrolling up and down.
Very basic example:
Full-screen details box will hide all other contents and sometime may create scrolling issue in some devices. That's the reason I do not prefer full-screen details popup on mobile screen. :)
I am assuming that when you say 'same gesture' you mean a single touch on mobile screen. Yes, using 100% of your screen would be ideal but the best case scenario would be to have a few options for the user to do A/B testing. This is a classic example where A/B testing should be able to answer for you.
You could implement a Bottom Sheet pattern on mobile. When the user taps an element on your 3D map, a bottom sheet containing details slides up. While the bottom sheet occupies about 50% of screen height, a user can still interact with a map. The bottom sheet can be dragged to full height and scrolled internally.
Like Google Maps does this:
To make it all responsive you can implement the details panel as MD's Side Sheet on a desktop which transforms to Bottom Sheet on small screens.
I think it will better if you could implement the Bottom Sheet for your mobile application. One example of that implementation is Google Map. When you click to 1 location, the bottom sheet, that contains the summary info about that location, will slide up. It will not occupy full screen and user can still interact with the maps to choose another place. If they would like to read more detail information, they can drag the bottom sheet to full screen and scroll to read.
More infor can be read here:
