Designing Mobile Data Visualization: From Web to Handheld Screens

Abstract: The concept of big data is now familiar; successful data analysis not only reflects a company’s performance but also helps optimize operations. Data‑analysis products, however, require a learning curve and serve a narrower B2B audience. This article compiles methods and insights for moving data‑centric products from web to mobile, offering design references for similar tools.

1. Identify Target Users and Scenarios

In many workplaces a boss hands a report to a visual designer, asking for an attractive data‑display chart. Designers often confuse “information visualization” (infographic) with “data visualization.” Infographics focus on artistic effect and require handcrafted graphics, while data visualizations are more universal and support interactive exploration.

Data visualization, unlike infographics, maintains consistent chart forms regardless of data changes and is typically built by analysts or operations staff.

2. Key Module Extraction

For B2B tools, designers should not immediately translate web layouts to small screens. Three core observations guide the migration:

To‑B tools are inherently complex; web screens offer ample space, while mobile must prioritize critical information.

Mobile usage is fragmented, so operations should be simplified.

Mobile devices have stronger caching; reduce network‑loaded content and leverage native controls.

The design focus shifts from “editing” on web to “reading” on mobile. The primary module to migrate is the dashboard, which aggregates reports for quick consumption.

After identifying the dashboard, designers reorganize layout: chart area (largest), file list for navigation, filter panel for frequent data slicing, exploration tools, and auxiliary functions such as refresh.

3. Define Interaction Gestures

Because tool‑type products involve frequent operations, mobile interaction must be rethought. The process includes:

Catalog all web gestures and their functions.

Determine which can be directly reused.

Redefine gestures that cannot be carried over.

Examples of reusable gestures are tap, double‑tap, and drag. Non‑reusable gestures require new designs such as long‑press for right‑click equivalents.

Chart‑type specific selectors are proposed:

Slider selector for axis‑based charts (e.g., bar, line, area) placed at the screen bottom.

Crosshair selector for charts lacking a single axis (e.g., scatter, stacked bar, multi‑line).

Triangle selector for non‑axis charts such as pie or Nightingale diagrams.

Pointer selector for ring‑type charts.

Legends also need horizontal dragging on mobile to reveal hidden items.

Tooltips, common on web via hover, are re‑positioned to the top of the screen on mobile, with horizontal scrolling if necessary.

Table charts retain similar presentation on both platforms, but mobile must respect aspect‑ratio constraints.

Finally, a side‑by‑side comparison illustrates the completed migration.

Conclusion

The author shares practical insights from working on B2B data‑visualization products, emphasizing that while the audience is narrow, the design principles—clarity, concise interaction, and mobile‑first reading experience—are broadly applicable.