エラーページを驚きと楽しみに変える：404ページ体験の最適解 | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

優れたエラーページ体験のためにすべきこと、避けるべきことななんでしょうか。

誰もが、「404 ページが見つかりません」と表示されたときの不満と失望を感じたことがあるでしょう。

Webの黎明期には、発生したエラーの種類を示すために無味乾燥なエラー番号を用いる必要がありました（当時メモリの制約が厳しかったため）。400番台はクライアントエラーに属するもので、「not found＝ページが存在しない」には404が割り当てられました。404エラーが起こる一般的な理由は、コンテンツの削除や移動によってリンク切れが起きたときや、URLを打ち間違えたときなどです。インターネットの言い伝えに、CERN（欧州原子核研究機構＝Web発祥の地）のサーバールームの部屋番号が404だったというものがありますが、インターネットの先駆者であるRobert Cailleau氏によってこの神話は否定されています。

もちろん、最善のユーザー体験はエラーの発生自体を阻止することで、ユーザーが404をいちども目にすることがない状況が理想です。とはいえ、サイトのデザインとエンジニアリングに人間が関わっているかぎり、この理想を追い求めるだけではなく、バックアッププランとして404ページをできるだけ良いものにしておくこともまた必要です。

Webサイトからひらめきを探す

404ページはいまや文化的現象となっており、ブラウザーのデフォルト404ページのパロディ「インターネット最後のページ」、404ページだけ収集したサイト、「デザインが優れた404ページ30選」に代表される、数多くのまとめ記事が存在します。404ページデザインのひらめきを探すのに不足を感じることは無いでしょう。気になる404ページを見つけたら、スクリーンショットをフォルダにまとめましょう。

404ページを後付けしたように感じさせない

404ページが最も訪問者の少ないページだったとしても、それをユーザーが見たときには、取り残された感じを与えないことが重要です。そのため、404ページは他のページとの一貫性を持ち、隅々まで考慮されたものであるべきです。つまり他のページと同じくらい、デザインやテストに力を注ぐべきです。

例えば、Instagramの404ページは少しもったいない感じです。視覚中心のプラットフォームなのに、このページにはユーザーを引き込むようなコンテンツや画像がなんら見当たりません。

それに対して、Mailchimpの404ページには、努力のあとが容易に見てとれます。フレディという同社のマスコットの描き下ろしイラストレーションが掲載されています。

404ページをブランドの構築機会として使う

Renny Gleeson氏TEDトークによれば、404ページは「あなたのことが好きな理由を再確認」する機会を提供するものです。これが分かっているブランドなら、自らのブランドストーリーの延長線として404ページを使うでしょう。一貫したデザインおよびブランディングを保ち、ページの適切なトーンを考慮すれば、これが可能になります。404ページに掲示されるエラーメッセージやコピーライティングにも「ブランドの声」を込めるべきです。

たとえば、NPRは404ページを「いまだ知られざる人々、土地、ものごと」にまつわる魅力的なストーリーを紹介する機会として使っています。ここで強調されているのは、偶発的な出会いへのワクワク感と、公共ラジオユーザーの多くが好むであろう興味深いコンテンツです。

コピーライティングやマイクロコピーを工夫する

マイクロコピーは、ユーザー体験をサポートする、文脈に沿った簡潔なテキストです。たとえば、エラーメッセージ、行動を促すコピー、ボタンテキスト、そしてもちろん404ページのメッセージそのものも含まれます。404ページは、本質的には問題があったことを告白するものですが、ブランドパーソナリティを反映したちょっとした楽しさを添えるのに理想的な場所でもあるのです。

Comedy Centralの404ページでは、人気番組サウスパークが使われています。コピーライティングには、ブランドとキャラクターのパーソナリティが反映され、バターズの心配げな表情がすべてを物語っています。

ユーザーを行き止まりの状況に置かない

404ページにたどり着いたユーザーは、探していた情報がないとわかれば即座にサイトを離れる可能性が高いでしょう。それは直帰率を高めます。404ページはユーザーが目的のページに到達する手助けとなるか、少なくともサイト閲覧の続行を促すべきです。それを達成する簡単な手段としては、サイトナビゲーションや検索バーの表示があります。主要なコンテンツへのリンク一覧も効果的でしょう。

さらに進んだUXアプローチは、ユーザーが404ページに到達した経路に応じて、関連するページを提案するというものです。例えば、特定の検索キーワードから流入したユーザーには、その単語にマッチするその他の結果へのリンクを提供することが考えられます。

Facebookの404ページの場合は、「このURLに関連したページ」のリストが含まれています。（ライオネル・リッチーのイラストレーションが和みを提供するだけでなく）

不満を伝える手段を提供する

404ページに、エラー報告の機能を追加するのは良い施策となり得ます。何らかの不具合を報告する先があることは、ユーザーが感じているかもしれない不満の積極的なはけ口になるからです。これはニュースやメディアなど数多くのアーカイブを抱えたサイトで特に行き渡っています。提供するエラー報告の仕組みは「不具合の報告」ページへのリンクのような単純なものでもよいですし、カスタムフォームを設置するのもよいでしょう。

The New York Timesの場合は「404」という専門用語を使わず、シンプルに「ページが見つかりません」というメッセージを表示します。次の行には、「そのページはどこかに消え去ってしまったようですが、私たちはあなたを失いたくありません」と愛らしいコピーライティングが続きます。ページ内にはリンク切れを報告するための具体的な手順も掲示されています。

アクセシビリティを忘れずに

404ページに行き当たったすべてのユーザーが、なにが起きたのかを簡単に理解でき、目的の完了に向けて進めることは非常に重要です。アクセシビリティに関する考慮も、404ページには他のページと同レベルであるべきです。そのためにはテキストが見やすい大きさになっていること、色のコントラストが適切であること、ページ構造や階層がキーボードだけを使用するユーザーやスクリーンリーダー利用者にも十分仕えることを確認します。

404でおもてなしを

優れた404ページは、「ページが見つかりませんでした」というレモンからレモネードを作るようなものです。いくばくかのクリエイティビティがあれば、不満と失望の瞬間を、その日起きた「ちょっとしたいいこと」に変える大きな機会になるでしょう。明瞭さとユーモアそして心遣いが、魅力的な404ページをデザインする大きな武器となります。最適な404体験を作り上げる準備が整った方のために、これが最後の助言です。

404ページへのトラフィックを常に把握しておく

404ページはWebサイトの中で最も訪問者が少ないページであることが理想です。もしそうでなければ、WebサイトのUXを著しく損なうような深い問題が存在する可能性が高いでしょう（404ページがあまりに素敵でわざと表示するユーザーが多すぎるとかでなければ！）。404ページへの訪問があればアラートを挙げるよう分析ツールを設定し、そのデータを分析して原因を探りましょう。404ページは知られていない秘密であるべきで、ユーザーはそれが幸か不幸かは別として例外的に巡り合うべきものだからです。

Amazonの404ページでは、数多くいるオフィス犬のなかからランダムに1匹が紹介されます。これは予期しないサプライズと楽しみを提供する戦略で、また、同社の企業文化を感じさせます。リンクをたどれば他の犬に会うこともできます。ユーザが404ページから感じるフラストレーションを、犬がかわいく和らげる働きを担っています。

この記事はFrom Frustration to Surprise and Delight: Designing the 404 Page for Optimal UX（著者:Linn Vizard）の抄訳です