Webサービスのインターフェースをデザインするときに考えるべき3つの状態

Pocket

Webサービスのインターフェースをデザインする際、画面間の遷移を考えることも重要ですが、画面内の状態に着目することも重要です。そしてその3つの状態とはズバリ、「通常の状態」「ブランクの状態」「エラーの状態」のことです。

3つの状態

通常の状態

「通常の状態」とは、データが入った状態のことです。例えば編集画面で、既にデータが入っている状態ですね。通常はこの状態を一番時間をかけてデザインすると思います。

ブランクの状態

「ブランクの状態」とは、データが全く入っていない状態のことです。ユーザー登録した後に、ユーザーは真っ白に広がる画面を見て、何を思うのか・・・後述しますが、この状態をいかに作り込むかで、サービスに対するユーザーのイメージが変わってきます。

エラーの状態

入力などで、何らかのエラーが起きた状態のことです。ページが見つからないときや、サーバでエラーが発生したときの画面も含まれます。

ページが見つからない場合のデザインは、以下のページがとても参考になります。

日本のWebサイトの404ページデザインいろいろ+α

ページが見つからない場合も、コンテンツへの誘導の機会と捉えて、仕掛けを作っておくのが重要ですね。

エラーが発生したときのデザインのまとめも知りたいのですが、なかなか引き起こせないので、収集が難しいですねー。

ブランクの状態のデザインに時間をかける

ブランクの状態をデザインすることに時間をかけましょうー! 何故なら、ユーザーが一番最初に目にするのが、ブランクの状態だからですね。サービスに対する第一印象となるので、この印象次第でサービスを使い続けてくれるかどうかが決まります。

37Signalsの書いたGetting RealのChapter9 The Blank Slateでは、ブランク画面に以下のデザインを盛り込むと良いとあります。

  • チュートリアル、またはヘルプを盛り込むこと。
  • データで埋まった状態のサンプルページをつくること。
  • どのように使うか、画面の表示で進行と共に説明すること。
  • 「これは何のページ?」「ここから何をすればいい?」という初めて見る人の疑問に答えること。

開発中は大抵テストデータで画面が埋まっているので、ブランクの状態というものがどういう状態だったか、忘れがちになります。だからこそ、ブランクの状態は意識的に考えないと、すぐおざなりになってしまいます。サービスからの離脱を防ぐためにも、ブランクの状態は常に意識するようにしたいものです。