ウェブページやブラウザゲームを表示する際、「ページが見つかりません」(略称404ページ)に悩まされた経験は誰しもあるでしょう。404 Labの統計では、「404ページが表示されたら、どんな気持ちになりますか?」との問いに、39.88%の人が悲しくて声も出ないと答え、36.92%の人は前のページに戻って404ページの存在を忘れると回答しています。この統計データは興味深いものですが、誰もが404ページに悩まされた経験があることを示唆しています。
404エラーページが表示されるのは、ユーザーにページのリンクが無効であること、ページが削除されていること、ユーザーが入力したアドレスが正しくないことを知らせるためです。ウェブデザインのプロセスにおいて、大多数のウェブサイトがデフォルトの404ページを採用しており、404ページをデザインし直すことはありません。デフォルトの404ページのグラフィックやコンテンツでは、ユーザーが次に行う操作がわかりにくくなっています。
実は、404ページのデザインを改善し、直感的で工夫を凝らした方法でユーザーに次のステップを提示することができます。優れた404ページなら、ユーザーが探している情報が手に入りやすくなります。あるいは、その他の便利なソリューションやオプションを提供して、ページが見つからないことによるユーザーの失望や不信を抑えることができます。さらに、ユーザーが自分でサイトのコンテンツを探し出せるよう後押しします。
ここに分類した404ページデザインは、主に「ユーザー同士のやり取りをリンクし、ユーザー情報を正確に提供して、次のステップを提示する」ことをアピールしています。では、デザインの方向性のポイントを簡単に紹介していきましょう。
1. ユーザーの親近感をキープ
サイトの構成では、すべてのページで共通のグラフィックやサイトロゴなどの情報を表示します。これによりユーザーは同一サイトのページを表示していることが簡単にわかります。また、404ページにもそのサイトのグラフィックやサイトロゴなどの情報を取り入れます。なぜなら、ユーザーはサイト内外のいずれから404ページに飛ばされたのか、はっきりしないからです。ユーザーが見慣れたカラーやグラフィック、ロゴであれば、安心感が生まれ、ページを閉じられる恐れがなくなります。
– larknews:このページが表示された理由を面白おかしく説明し、怒りを静める。ただし、larknewsの404ページにはサイトのカラーやグラフィック、ロゴがなく、面白ページを開いたと思われる。
– Spore:sporeゲームの独創性を余すことなくアピール。オリジナルの404モンスターが404エリアに入ったことを知らせてくれる。早く立ち去らねば!
2. エラー情報をはっきり表示
ユーザーが404ページにジャンプした場合、エラー情報がはっきりと表示されなければなりません。はっきりと表示されるエラー情報は、ユーザーを脅かすものではありません。現在のトラブルを明確に伝え、ユーザー自身に過失があると思わせないようにして、次のステップの実行をサポートします。
– Rockettheme:強烈な色彩と特大サイズの文字で、ユーザーは404ページであることが一目瞭然。また、エラーメッセージで現在の状態を簡単に説明している。
– abduzeedo:宇宙空間の漂流がテーマ。わかりやすいテーマと画像のグラフィック効果に、ユニークなセリフを組み合わせている。「ヒューストン基地、トラブルが発生した!!我々は目的のページにたどり着けない:(」。
– 31three:様々なチョウのグラフィックデザインで、ユーザーの視覚が混乱する。現在の状態について詳しい説明がなく、404ページであることがわかりにくい。
3. 代案をはっきり提示
代案をきちんと提示することは、404ページの設計に大切な要素の一つです。ユーザーが適切に次のステップやリンク先を選べるようにし、「迷子」にならないようにします。代案は数多くの要素で計画と設計ができますが、よく用いられる方法には次のようなものがあります。
● メインメニューや検索機能を提供:ユーザーが早く正確に別のページにジャンプできるようにする。
● 別のページを推薦:サイトで人気のページを推薦して、ユーザーがその他の情報にアクセスできるようにする。
● カスタマーサービスやお問い合わせフォームを提供:ユーザーの不機嫌を解消し、トラブル修正の情報を得て、再発を防ぐ。
– Pop Cap:標識のグラフィックデザインで、メインメニューの代案を提供。ユーザーをそれぞれのリンク先へ案内する。
youcastr:3種類の代案を提供。キーワード検索で別ページへジャンプできる。または、前のページ、トップページ、お問い合わせページからリンク先を選べる。
4. 適度な代案を提供
前項で代案のデザインについて述べましたが、代案をどれだけ提供するかは難しい問題です。代案が多すぎると、ユーザーは手がかりを失ってしまいます。代案が少ないと、ユーザーにとって有用なサポートが提供できない恐れがあります。
– inspirationbit:ユーザーに提供する代案が多すぎるため、焦点が絞れない。
– Dailymotion cloud:404ページであることだけが通知され、次のステップが提示されていない。
5. フレンドリーな画面設計
404ページにオリジナルの工夫を凝らすというのは、よいアイデアですが、凝りすぎたものは役に立たないどころか、マイナスの影響さえ生じてしまいます。そのため、工夫と実用のバランスを取ることが大切です。シンプルでクリアな404ページのコンテンツの方が、ユーザーに一目瞭然のソリューションを提供し、404ページの苦境からすばやく解放してくれるかもしれません。
– Acme:フリーズ画面で404ページを表現。青地に白文字の画面では、一見コンピュータが本当にフリーズしたものと誤解されやすく、ユーザーが再起動するという悲劇につながる。
404ページは、ただエラーメッセージを表示するだけの単純な画面であってはいけません。ちょっとしたアイデアとユーザーの立場で新たにデザインし、シンプルでクリアなわかりやすいデザインにします。さらに、次のステップをサポートし、ユーザーの悲劇を減らすものでなくてはなりません。
出典:
Design Guidelines:404 error pages:http://www.michaelgaigg.com/blog/2009/03/09/design-guidelines-404-error-pages/
404 Research Lab:http://queenofsubtle.com/404/
200 best 404 error page design for inspiration:http://www.webdesignshock.com/404-error-page-designs/
————-
作者紹介
ガマニアエルゴノミックデザインセンター / Michellecy Lin
ユーザーを中心とした設計UCD(User-Centered Design)をグループのプロジェクトの実行や改善に応用し、ガマニアの自社製品でユーザーが最高に満足していただけるよう取り組んでいる。
————–