Improving Empty Page User Experience in Mobile Applications

In many software applications, users encounter empty pages such as list no‑data, failed searches, or missing user‑generated content. Although these situations seem rare, a poor experience can leave users confused or frustrated. This article discusses how to improve the UX of various empty states.

List No Data

Typical empty pages show an icon and a text message. A more engaging approach is to replace the static view with a Lottie animation that conveys the empty state dynamically. The following Flutter code demonstrates how to embed a Lottie animation and a descriptive text.

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      title: const Text('抱歉'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Lottie.asset('assets/empty.json', repeat: true, width: 200.0),
          Text('暂无数据', style: TextStyle(color: Colors.grey[400], fontSize: 14.0)),
        ],
      ),
    ),
  );
}

Search No Results

When a search yields no results, showing related or similar content can keep users engaged and improve conversion. The article cites an example from JD.com where alternative products are recommended.

User Data Not Added

If a feature requires user input (e.g., adding a shipping address) and the data is missing, the UI should guide the user to add it. The second implementation uses an animated button to draw attention and an AnimatedPositioned widget for the guide animation.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('收货地址')),
    body: Stack(
      children: [
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/common-empty.png', width: 100.0),
              Text('暂无收货地址', style: TextStyle(color: Colors.grey[400], fontSize: 16.0, height: 2)),
            ],
          ),
        ),
        AnimatedPositioned(
          duration: const Duration(milliseconds: 500),
          bottom: _bottom,
          height: guideIconSize,
          left: MediaQuery.of(context).size.width / 2 - guideIconSize / 2,
          onEnd: () {
            setState(() {
              if (_bottom == minBottom) {
                _bottom = maxBottom;
              } else {
                _bottom = minBottom;
              }
            });
          },
          child: Icon(Icons.arrow_downward, color: Theme.of(context).primaryColor, size: guideIconSize),
        ),
      ],
    ),
    bottomSheet: Container(
      height: 50.0,
      width: MediaQuery.of(context).size.width,
      color: Theme.of(context).primaryColor,
      child: TextButton(
        onPressed: () {
          if (kDebugMode) {
            print('跳到添加地址！');
          }
        },
        child: const Text('添加收货地址', style: TextStyle(color: Colors.white)),
      ),
    ),
  );
}

Network Connection Issues

Transient network failures can cause empty pages that only display an error message. Adding a reload button lets users retry without navigating away. The article outlines a two‑step handling process: reload when the device network is fine, or switch networks (e.g., to 4G) and then reload.

Summary

Four principles for better empty‑state UX:

Provide clear, friendly prompts (e.g., animation + text) for genuine no‑data cases.

When searches return nothing, suggest related content or tags to keep users engaged.

For data that requires user action, offer obvious calls‑to‑action and guided animations.

For network or permission errors, include a reload mechanism alongside helpful messages.

Overall, a well‑designed empty page should explain the situation and guide the user toward the next step, reducing the discomfort of a blank screen.