web-dev-qa-db-ja.com

404エラーページをデザインするためのベストプラクティス

404エラーページをデザインする際のベストプラクティスは何ですか?これに関するブログや記事をたくさん読んだ。何日かは基本にこだわるとき、派手な画像の使用について言う人もいます。これに関するガイドラインはありますか?ベストプラクティスは何ですか?次の詳細のどれが間違っているか、従うべきですか?

リダイレクト:

  • ホームページへ
  • 検索ページへ
  • サイトマップへ
  • 自動リダイレクト?

エラーメッセージ

  • 404 Page not found

  • 他のいくつかのユーザーフレンドリーなメッセージ

使用する画像

  • エラーに関連する画像

  • ウェブサイトのタイプに一致する画像

その他のページ要素

  • ナビゲーション、フッターなどのWebサイトの一般的な要素を含める必要がありますか?

  • カラーテーマとウェブサイトのテーマが対照的ですか?

役立つガイダンスはありがたいです

編集:

誰に責任があるのか​​?

エラーメッセージで、the page you typed not exist(ユーザーのせいにする)または他のいくつかのメッセージは、理由が間違ったURLである場合でも自分自身のせいにしますか?

83
Sooraj

リダイレクト:リダイレクトする必要があります。リダイレクトする場合、どこにありますか?

一般的には違います。

ユーザーが実際に行きたい場所を知っていると確信している場合を除いて(そしてほとんどの場合、行かないでしょう)。明確なエラーメッセージを提供し、次に進むべき場所を彼らに決定させるのが良いでしょう。

ユーザーが移動した古いURLにアクセスしようとしている場合は、古いURLにリダイレクトしても問題ありません。ただし、実際には404ではなく3xxリダイレクトを使用する必要があります。

ページに明示的に記載する必要がありますか404:ページが見つかりません

私は多くの人がその数が何を意味するか知っていると思うので、ページに404を置くのが好きで、それはエラーの省略形として機能します。しかし、それは単なる設定です。たとえば、 Apple および Microsoft's 404ページでは言及されていません。

「ページが見つかりませんでした」という言い回しは必ずあるはずです。これはよく知られたメッセージです。

ページはどのように設計する必要がありますか?

それはあなたのサイトの他の部分に合うはずです。実際に見ているサイトで見つからないページを見つけるのではなく、人々が誤って別のサイトに行ったと思って混乱させたくない。

誰が非難されるべきですか?

だれも。 「ページが見つかりませんでした」という単純なメッセージは中立で正確です。

  • ユーザーのせいにすることは彼らを困らせるでしょう。自分を責めることは、不必要に自己非難されます。
  • それが誰のせいなのかは分かりません。おそらく、ユーザーが意味のないURLを入力したか(エラー)、サイトの一部が壊れています(エラー)。

非難の指を指すことは適切ではありません。間違えやすいでしょう。

他に提案はありますか?

ユーザーが入力したURLは、ユーザーが行きたい場所に関する情報を提供します。注意しておけば、これを使用してリダイレクトしたり、代替案を提案したりできます。 (これは、多くの類似したURLがなく、比較するためのある種の有限リストがあることを前提としています。これはすべてのサイトで機能するわけではありません。)

  • 私はApache mod_speling module が好きです。ページが見つからない場合は、非常に類似している(1文字か2文字の違いがある)ページを探し、適切にリダイレクトします。タイプミスを見つけるには良い方法です。ただし、間違ったページへのリダイレクトはエラーを返すよりもおそらく悪いので、それはかなり保守的です。

  • 正規のURLから離れすぎている場合でも、ユーザーが入力した内容を提案できます。これはアイデアです Brett Terpstraから :彼の404ページは現在のページに類似したURLを示唆しています。たとえば、これはhttp://brettterpstra.com/2013の結果です。

    enter image description here

これらはすべてのサイトに適しているわけではありませんが、興味深いアイデアであり、一般的なエラーページよりも少し役立つ可能性があると思います。

89
alexwlchan

完璧だと言っているわけではありませんが、今年は新しい404ページを立ち上げ、リンク切れを見つけたときにフィードバックを求めるオプションを含めました。

その結果、1週間に数通の電子メールが届き、サイトの片付けと問題の修正に役立っています。

また、ユーザーが探しているものを見つけやすくするための明白な検索ボックスも含まれています。サイトマップを刷新していますが、完了したらここから再度リンクします。

私はBrett Terpstraソリューションが好きです(どのページを探していたかを示唆しています)が、CMSに基づいてコーディングするのは難しいと思います...

http://lawsociety.org.uk/broken-link/

enter image description here

23
BenLF

ページが存在しないことを伝えるだけでなく、ブランドに関連するエクスペリエンスにも貢献しているため、私は常に機知に富んだ404ページに感謝しています。

たとえば、私はハプティックのパートタイムの従業員であり、カスタマーサービスを向上させるために通話なし、テキストのみアプローチをとっています。

したがって、404ページのテーマを設定するために、次のことが行われました。

enter image description here

以下に示すオプションの数を確認してください。

目標は、ページが存在しないことを伝えることであり、さまざまなメタファーを使用してそれを言うことができますが、「ページが見つかりません」のヒントを残すことが最善の方法です

良いデザインパターンとして、自動リダイレクトは避ける必要があります。オプションを提供することで、ユーザーが希望するセクションに移動できる場合、なぜ自動-何かに移動しますか?

ユーザーがどのようにWebサイトにアクセスするか、そしてユーザーが何に注目するかを理解することで、ページヒットの日付順に移動したい複数のオプションを提供することで、404ページにテーマを設定する利点が得られます。

誰もがこれを異なる方法で行い、創造性は、強力なブランド認知度を作成する際のあなたの目標であるべきものです。

7
Swapnil Borkar

共感はユーザーのためのソリューションに取り組むときに私たちが努力しているものなので、私はこれを人間の視点から答えます。

仮定:何か悪いことが起こったと聞いて、3人の友人が訪れました。

ウェブサイト=悪い日を過ごしたり、何かを失望したり失ったりして、励ましが必要なあなた。

画像1 =友達のボブ、画像2 =友達のライアン、画像3 =友達のリザ

画像1:ボブImage 1 = Bob

画像2:ライアンImage 2 = Ryan

画像3:LizaImage 3 = Liza

あなたが心から感謝するイメージフレンドはどれですか、またはすべてが順調になったときに前向きでいられるよう支援するために後で電話しますか?

その質問にお答えさせていただきます。 :)

4
Chimdi2000

スティーブ・ジョブズを言い換えると、デザインは「それがどのように機能するか」です。

404ページは避けたいものです。そのため、404ページで最も重要なことは、表示されていることを確認し、今後表示されないように何かを行うことができるようにデザインすることです。 。これはロギングを意味します。はい、これはすでにサーバーログにありますが、サーバーログからの問題の修正はそれほど簡単ではない場合があります。 index.phpエントリポイントから404を生成している場合は、404ページを記録するために何かを行うことができます。そのため、ヒットしたときに、問題を簡単に確認できる場所に関連情報があります。

適切に設計されたWebサイトは、実際には404ではありませんが、404に関しては、設計は「治療ではなく防止」である場合があります。これは、単純かつ要点を保つことができるため、表示された場合は明確ですボットや他の不正なURLのソースで帯域幅を浪費しないようにします。つまり、有用性、検索ボックス、およびその他のトリミングのCMSブロックを気にする必要はありません。ホームページへのリンクがある「ページが見つかりません」で十分です(ホームページはロードされることがわかっており、サイトナビゲーションがあることがわかっています)。

とても簡単です。はい、単純な画像を追加したり、CSSスタイルを設定したりできますが、それ以外の場合は、訪問者がコンテンツ内の壊れたリンクを表示して修正したいコンテンツ、または.htaccessスタイルの書き換えで、ハードワークを保存します404をイースターエッグする前。

3
Henry's Cat

私は404ページをユーモアと組み合わせて使用​​し、ユーザーとのつながりを強化しています。役立つリンクとガイダンスを提供したいと思います。

パーソナリティ溢れるeコマース404ページの多くの良い例があり、コンバージョンを増加させようとしています。一部は製品の推奨事項でさえあります。おそらく彼らは、店内の間違った通路を歩くのと同じことだと考えています。

2
Bob

答えはタイトルにあります:404 Not Found。

期待していたコンテンツを表示する新しい場所に連れて行けない限り、標準の404 not foundエラーを表示するだけでよいのではないかと思われます。探しています。

0
forloop