How to Upgrade B2B Logistics Map Interaction Standards for Better UX

1. Background and Significance

As logistics scenarios evolve, many backend systems now embed map displays and operations to provide users with visualized information. The existing 1.0 map interaction specification no longer covers most user scenarios, prompting an upgrade that will benefit product design, development efficiency, and user experience.

Product design: ensure design consistency across modules and improve collaboration among designers.

Development: raise component reuse and overall development efficiency through standardized guidelines.

User usage: deliver a unified, complete experience that reduces learning cost and usage difficulty.

2. Insights and Analysis

Design specifications evolve through stages; to build a reasonable standard we must look inward and outward, guided by atomic design principles, trace past designs, define classification, prioritize coverage and reuse, and then refine the interaction specification to unify product experience.

2.1 Current Situation and Business Scenario Specifics

Comparing existing pages with the 1.0 version reveals core modules needing addition or optimization:

(1) Map page layout

Various B‑end layouts have emerged (left panel + map, right panel + map, dual panels + map, etc.), harming consistency and wasting development resources.

(2) Element size

Users operate on devices with varied resolutions, including many small‑screen users and some systems defaulting to 150% scaling, requiring map pages to balance readable panels with sufficient map area.

(3) Map drill‑down

Typical continuous drill‑down (mouse wheel, gestures, buttons) does not suit our multi‑level hierarchy (region → battle zone → area → branch), requiring a level‑based drill‑down combined with an address selector.

(4) Basic controls and components

Diverse scenarios demand upgraded controls: overlapping points with panel linkage, flying lines, multi‑layer heatmaps, etc.

2.2 Competitive Analysis

We benchmarked common map products (logistics platforms, map services, real‑estate and travel apps) to ensure habit continuity while incorporating logistics‑specific needs.

3. Design Principles

3.1 Universality of the Specification

(1) Identify common design patterns across products and extract shared elements.

(2) Apply the specification to business needs and verify applicability.

(3) Design with foresight to accommodate future scenarios.

3.2 Interface Usability

(1) Optimize information architecture for readability.

(2) Provide clear status cues to prevent user disorientation.

(3) Enable direct map operations (zoom, drill‑down) for natural interaction.

(4) Preserve familiar controls to reduce learning cost.

3.3 Efficiency of Use

(1) Minimize page jumps to maintain immersion; offer obvious return paths when jumps are necessary.

(2) Reduce eye‑movement by colocating related information, avoiding horizontal jumps between panels.

4. Design Solutions

4.1 Map Page Layout

Key elements: navigation bar, map display, info/operation panel, filter area, legend, common map controls, toolbar. Two main scenarios:

Assist‑view: users primarily read panel info; map placed on the right (F‑type eye flow).

Operation‑config: users act on the map; map placed on the left, panel on the right.

Top area hosts search bar and toolbar; bottom area hosts legend; map controls sit at the lower‑right of the map.

(1) Single‑panel layout

For assist‑view, place panel left, map right; for operation‑config, reverse. Collapse side navigation on entry to maximize map area.

(2) Dual‑level panel layout

When information is abundant, use a primary panel for high‑priority data and a secondary collapsible panel for details, ensuring distinct interaction for expanding/collapsing each level.

4.2 Page Element Sizing

To accommodate 150% scaling on some PCs, we define width ratios:

Single‑level panel: panel 25‑30% of page width, map 50‑55% (map should not be less than 50%).

Dual‑level panel: each panel 25‑30%, total ≤50%; map ≥50%.

4.3 Map Drill‑Down

Beyond continuous zoom, we need level‑based drill‑down for our hierarchical regions. Requirements:

Support regular and specific level drill‑down/up.

Clearly indicate current hierarchy level.

Allow quick switching to other regions.

Two interaction patterns:

Continuous drill‑down via mouse wheel, touch gestures, or +/- buttons.

Level‑based drill‑down: hover highlights a region, click drills down, click outside collapses; breadcrumb + selector aid navigation.

5. Summary and Reflections

Defining map standards requires continuous monitoring and iteration. After release, track usage, ensure documentation is easy for designers, and encapsulate common components for developers to improve reuse, fidelity, and reduce review effort.