Webサービスのインターフェースをデザインする際、画面間の遷移を考えることも重要ですが、画面内の状態に着目することも重要です。そしてその3つの状態とはズバリ、「通常の状態」「ブランクの状態」「エラーの状態」のことです。
3つの状態
通常の状態
「通常の状態」とは、データが入った状態のことです。例えば編集画面で、既にデータが入っている状態ですね。通常はこの状態を一番時間をかけてデザインすると思います。
ブランクの状態
「ブランクの状態」とは、データが全く入っていない状態のことです。ユーザー登録した後に、ユーザーは真っ白に広がる画面を見て、何を思うのか・・・後述しますが、この状態をいかに作り込むかで、サービスに対するユーザーのイメージが変わってきます。
エラーの状態
入力などで、何らかのエラーが起きた状態のことです。ページが見つからないときや、サーバでエラーが発生したときの画面も含まれます。
ページが見つからない場合のデザインは、以下のページがとても参考になります。
ページが見つからない場合も、コンテンツへの誘導の機会と捉えて、仕掛けを作っておくのが重要ですね。
エラーが発生したときのデザインのまとめも知りたいのですが、なかなか引き起こせないので、収集が難しいですねー。
ブランクの状態のデザインに時間をかける
ブランクの状態をデザインすることに時間をかけましょうー！ 何故なら、ユーザーが一番最初に目にするのが、ブランクの状態だからですね。サービスに対する第一印象となるので、この印象次第でサービスを使い続けてくれるかどうかが決まります。
37Signalsの書いたGetting RealのChapter9 The Blank Slateでは、ブランク画面に以下のデザインを盛り込むと良いとあります。
- チュートリアル、またはヘルプを盛り込むこと。
- データで埋まった状態のサンプルページをつくること。
- どのように使うか、画面の表示で進行と共に説明すること。
- 「これは何のページ？」「ここから何をすればいい？」という初めて見る人の疑問に答えること。
開発中は大抵テストデータで画面が埋まっているので、ブランクの状態というものがどういう状態だったか、忘れがちになります。だからこそ、ブランクの状態は意識的に考えないと、すぐおざなりになってしまいます。サービスからの離脱を防ぐためにも、ブランクの状態は常に意識するようにしたいものです。
