Interface Lab
Back to knowledge
Visual Foundations

Map and Geospatial Layout

Map and Geospatial Layout turns a frequent interface judgment into an executable constraint before generation.

Design Principle

Geospatial interfaces depend on synchronization between location, scope, objects, and selection state.

Principle

Geospatial interfaces depend on synchronization between location, scope, objects, and selection state.

Design action

Map, result list, filters, and detail panel share selected state; map controls must not cover important areas.

Examples

Positive example: Store, delivery, listing, event, logistics, or geodata pages need comparison between map and list. Counterexample: The map fills the page without list or filter feedback.

Apply when

Store, delivery, listing, event, logistics, or geodata pages need comparison between map and list. Users need to judge state, scope, risk, or next action quickly.

Source notes

Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/

Agent Directive

Map, result list, filters, and detail panel share selected state; map controls must not cover important areas.