Google Maps: 3D Landmark Selection
Auto Compute, Introduce 3D Maps to Users by One Click
Over the next several years, the map will transition to be a more immersive and dimensional experience. We want to introduce a feature, Auto Compute, allows users to tap on a landmark to trigger a tilted 3D view. This action smoothly re-centers the map on the selected landmark with an animated transition. By offering a more detailed and immersive perspective, the 3D view helps users better understand the orientation and layout of a location before visiting, making it especially useful in complex or unfamiliar environments.
The Scope
Define and design camera behaviors to introduce smooth tilt 3D experience by selecting landmarks.
Design Statement
How can the camera behavior be configured, including tilting, rotation, zoom level, and animation, to assist map users in gaining a sense of the area, learning more about a place before visiting, and understanding the orientation?
Highlight 🤩
What and Why?
Flat 2D maps lack depth and orientation cues in unfamiliar areas, while manual 3D controls create high touch friction on mobile.
Design Process 🔍
Interaction Method
To consider how users interact with gestures and how they hold their phones while using the map, we chose the most common gesture, TAP, as the trigger for the Auto Compute feature.
Data Analysis
Before starting the design, we collected existing data, over 418 high-fidelity landmark models currently on the map. We sorted them by priority, size, and shape, and informed the development team if additional models were needed or if fidelity improvements were required.
Frame Design
When a user taps on a landmark, the map automatically tilts to a default 35° angle and centers the landmark in the frame, occupying 80% of the screen height or 90% of the width, depending on its shape.
Camera Design
When a user taps on a landmark, the map automatically tilts to a default 35° angle and centers the landmark in the frame, occupying 80% of the screen height or 90% of the width, depending on its shape. This transition shifts the view from an abstract 2D map to detailed 3D models. A smooth 1000ms animation enhances the experience, making the transition feel fluid and intuitive.
Camera Behavior Analysis
- Tilt the camera from 20° to 70° to observe the visual clutter caused by size differences in surrounding buildings, nearby navigation (such as routes one block away), and the density of POIs in 3D maps. Shallow tilts at 30° to 40° appear clean and reveal the maximum amount of map data to users.
- Tilt the camera from 20° to 70° to observe the visual clutter caused by nearby and distant surrounding buildings in 3D maps. Shallow tilts at 30° to 40° appear clean and reveal the maximum amount of map data to users.
Prototype 🥳
We send this feature to the internal testing tool utilized by over 100k testers, here is the mockup.
More UX/UI Projects
