小さなWebツールの空の状態を設計する

空の状態も機能の一部

小さなWebツールには、空の画面が何度も現れる。初回利用、リストを消した直後、検索結果がないとき、まだ設定していない保存ビュー。そこで「データがありません」とだけ表示すると、ユーザーが手がかりを必要とする場面で会話が止まってしまう。

良い空の状態は、余白を飾るものではない。今の状態を示し、その意味を短く伝え、次にできることを一つだけ置く。たとえばリンク保存ツールなら、「リンクがありません」よりも「最初のリンクを保存すると、タグであとから見つけられます」のほうが始めやすい。

空の画面はランディングページではない。ユーザーはすでに作業の途中にいる。そこに複数のボタンを並べると、案内ではなく選択肢の整理になってしまう。

行動は、空になった理由に合わせる。

検索結果がない場面では、「新規作成」より「条件をリセット」のほうが自然なことが多い。新しいワークスペースなら、作成を促してよい。文脈で決めるのが基本になる。

空の状態のコピーに、大きな約束はいらない。「生産性を変える」といった言葉は、小さな道具では浮いて見える。必要なのは、何が起きたか、次に何ができるかがすぐ分かることだ。

型は単純でよい。タイトルで状態を言う。補足文で理由や得られる結果を言う。ボタンは動詞で始める。「保存したメモはありません / メモを作ると、よく使う文章をここから開けます / メモを作成」のような形で十分に機能する。

中身が入った画面だけを見ると、空の状態は見落としやすい。しかし小さなツールでは、ユーザーが最初に出会うのが空の画面であることも多い。

新規アカウント、最後の項目を削除した直後、失敗した検索、権限がない状態などを意図的に作って確認する。それぞれの画面が「何が起きたか」「なぜ空なのか」「次に何をすればよいか」に答えているかを見る。

空の状態を整えることは、大きな機能追加ではない。ただ、迷う数秒を減らす作業である。その小ささが、道具の信頼感を支える。