直感的でユーザーフレンドリーな404ページのデザイン
公開: 2019-10-16私たち全員が、ある時点で404ページを操作しました。
これらのページは、リンクが壊れている場合、ページが削除されている場合、またはユーザーがページアドレスを誤って入力した場合に表示されます。 しかし、理由が何であれ、修正が必要なエラーが残っています。 さらに、壊れたリンクはあなたのサイトのランキングを傷つけます、そしてそれはあなたが必要とするものではありません。 あなたのサイトのSEOの側面は非常に重要なので、404通知を監視するのを忘れたという理由だけでトラフィックを失いたくありません。
404ページをできるだけ早く修正する必要があることは明らかですが、ユーザーがリンク切れに遭遇したときを実際に予測することはできません。 したがって、準備を整えてネガティブなエクスペリエンスをポジティブなエクスペリエンスに変えるには、404ページをカスタマイズして、ユーザーフレンドリーで直感的にする必要があります。
悪いものを良いものに変える方法を学ぶ準備はできましたか？ それを見つけましょう。
サイトの404ページをカスタマイズします
インタラクティブな要素がたくさんある信じられないほどカラフルで魅力的なウェブサイトを閲覧していて、「404ページが見つかりません」というメッセージが表示された空白のページに突然遭遇したとします。
ちょっと目覚めますね。
404ページは不快な驚きとして表示されるべきではありません。そのため、サイト全体のレイアウトと同じデザインを維持することが非常に重要です。
そのためには、背景、色、フォント、その他の要素（該当する場合）を含め、404ページの外観を他のページの外観と同じに保ちます。 同様に、多くのWebサイトは、404ページをブランドを強調し、ユーザーにもう一度思い出させる機会としてとらえています。
サイトの404ページをデザインするときは、メッセージに注意してください。 巧妙に作成されたメッセージは、巧妙なしゃれを含めるか、目立たない方法でユーザーに製品/サービスについて思い出させる良い機会です。
何が起こったのか説明する
Apacheの下のデフォルトの404ページを見ると、次のことがわかります。
以上です。 ユーザーは、実際に何が起こったのか、次に何をすべきかを知りません。
あなたはあなたの顧客を気遣い、不快な経験を却下したいので、エラーの説明を提供してください。 404の主な理由は通常次のとおりです。
- ユーザーが何かをタイプミスしました、
- リンクが壊れています、
- ページが存在しません、
- サーバーとの接続が切断されています。
もちろん、上記の問題をすべてリストアップする必要はありません。 説明が理解できることを確認してください。
問題について正直に言うと、ユーザーに勝ち、サイトにとどまり、閲覧を続けるように促すことができます。
魅力的なメッセージを作成する
404ページは、ブランドが巧妙に作成されたメッセージを通じてそのアイデンティティを披露する絶好のチャンスです。
最高の404ページの例は、多くの場合、次の機能を備えています。
- 駄洒落
- サイトの製品またはサービスに関連するメッセージ
- 個人的な魅力、
- ポップカルチャーと認識可能なイベントへの言及。
404ページはデフォルトではエラーであるため、ポジティブで楽しいエクスペリエンスとはまったく逆の何かに変換する必要があります。
GitHubは、404ページのデザインに関して素晴らしい仕事をしました。 開発者と「スターウォーズ」の物語に対する彼らの愛情についてのステレオタイプを使用し、スターウォーズの映画をまったく見なかった人々でも視覚要素とページメッセージの両方を即座に認識できるようにすることで、それを独自の利点に使用しました。
実行するアクションを提供する
召喚状は非常に重要であり、404ページのデザインには絶対に必要です。
ユーザーに空白のページと選択肢がないままにしないでください。 したがって、404のようなことが起こったとしても、相互利益につながる代替案を提供してください。
404ページで最も人気のあるCTAのいくつかは次のとおりです。
- 検索バー
- ホームページ
- トップ製品/サービス
- 製品またはニュースレターにサインアップする
- 無料トライアルのオファー
CTAボタンのデザインに注意してください。 それらは簡単に見つけられる必要があり、背景と混ざらないようにする必要があります。そうしないと、ユーザーはそれらに気付かないでしょう。 同様に、CTAボタンのメッセージについても考えてみてください。「ここをクリック」のような決まり文句の代わりに、より創造的なものを使用してください（「私たちが得たものを見る」）。
ユーザーが何かを検索したため、404ページにアクセスしました。 そのため、ページに検索バーを追加して、もう一度試すオプションを提供してください。
「クエリがどこにも見つからないようです…もう一度やり直してみませんか？」のようなメッセージでサポートできます。 適切に作成されたCTAは、エンゲージメント率が高く、画像と組み合わせてうまく機能します。
同様に、検索バーにヒントテキストを追加します。 テキストのあるバーは、空のバーよりもエンゲージメントが高くなります。
404ページの検索バーでは不十分です。 ユーザーが何が必要かわからない場合はどうなりますか？
「ホームページ」またはその他の関連ボタンを追加して、ユーザーを404ページから潜在的なコンバージョンにナビゲートします。 また、「お問い合わせ」ボタンを追加して信頼性を高めることもできます。
一部の企業は、404ページを自社の製品やサービスについて思い出させ、対応するリンクをページに配置する機会として使用しています。
たとえば、eコマースストアの場合、最も売れている商品を404ページに配置して、ユーザーに最高の商品を見つけて（願わくば！）購入する機会を与えることができます。
他のサイトに関しては、確かにあなたはあなたのユーザーにとって価値のある何かを提供することができます。 これは、製品の無料トライアル、コースへのサインアップのオファー、またはサイトの便利な領域へのガイドにすることができます。
楽しくする
すでに上で述べたように、ユーザーが意図した結果を得られなかったため、404ページはネガティブな体験です。 この問題を解決するには、ページをインタラクティブにするか、楽しい要素を追加します。
あなたが非常に専門的なブランドとしてあなた自身を位置づけても、少しのユーモアは傷つけません。 また、多くの企業が404ページにゲーミフィケーションとビデオを追加して、ユーザーを引き付け、ユーザーを楽しませ続けています。
404エラーの追跡
404エラーはユーザーの仕事ではありません。 しかし、それを追跡し、エラーの原因とユーザーの旅を特定するのはあなたの仕事です。
404エラー追跡用のツールを選択する際に留意すべき点がいくつかあります。
404エラーが必ずしもサイトにあるとは限りません。顧客は古いニュースレターを開いてリンクをたどるか、Googleの検索結果に表示される可能性があります。
したがって、エラー監視用のツールを選択するときは、すべての場所で404エラーが検索されることを再確認して、すべてを修正できるようにしてください。
サイトの所有者として、あなたはおそらく何百万ものことをしなければならず、404エラーを修正することはあなたのリストの一番上にないかもしれません。
これが、404エラーのコストを知らせるツールが必要な理由です。 そして、ここではお金について話していません。それは、失われたコンバージョンの割合、増加したバウンス率、失われたユーザーの数である可能性があります。
404エラーがビジネスに与える影響を確認すると、タスクに優先順位を付けて、404エラーをリストの上下に移動するのが簡単になります。
404エラーは、定期的に発生するものではありません。 あなたが完全にうまくやっていて、突然、ユーザーが404を取得することが起こるかもしれません。
そのため、追跡ツールは404エラーを常に監視し、エラーが見つかったらすぐに通知する必要があります。 このようにして、タイムリーに修正し、他のユーザーが404ページに遭遇するリスクを排除することができます。
追跡ツールの種類
404エラーを特定し、正常に修正するのに役立つさまざまなタイプの利用可能な追跡ツールがあります。
Screaming Frogのようなクロールツールは、Webサイトをすばやくスキャンし、壊れたリンクをチェックするのに最適です。
これらのツールはあなたのウェブサイトのリンクを分析し、どれが壊れているか、そして何がエラーの原因であるかをあなたに知らせます。 さらに、クロールツールは通常、管理とインストールが簡単です。
このようなツールの最大の欠点は、Webサイト上のリンクのみを分析することです。そして、高度な分析の重要性について私たちが言ったことを覚えていますか？ 同様に、クロールツールは404エラーのコストを教えてくれませんが、それを特定するのに役立つだけです。
クロールツールは間違いなく便利であり、ストアですべてが正常であることを確認するために、定期的に展開する必要があります。 ただし、見過ごされている可能性のある他のエラーがないことを確認するために、定期的かつ高度な分析を実行することを忘れないでください。
クロールツールとは異なり、バックリンクツールは、ユーザーをサイト上の壊れたリンクに導く外部ソースに焦点を合わせています。
MozのLinkExplorerは、ユーザーをサイトに誘導しているWebサイトを見つけるのに役立つツールの1つです。 このような分析は、404リンクを削除してサイトのランキングを向上させることができるため、SEOに非常に役立ちます。
しかし、繰り返しになりますが、クロールツールの場合と同様に、被リンク追跡ツールは、壊れたリンクを特定する1つの側面のみをカバーします。 古いニュースレターやソーシャルメディアを含め、404個のエラーリンクをすべて見つけたい場合は、より包括的な分析が必要になります。
404ページのエラーを追跡する最も一般的で効率的な方法の1つは、GoogleAnalyticsを使用することです。
そのためには、次のコードをコピーする必要があります。
<script>
// Create Tracker - Send to GA
// Replace UA-11111111-11 with your own Tracking ID
ga('create', 'UA-11111111-11');
ga('send', {
hitType: 'event',
eventCategory: '404 Response',
eventAction: window.location.href,
eventLabel: document.referrer
});
</script>
そしてそれを404エラーページ/テンプレートに追加します。 GoogleアカウントのIDをコードに貼り付けることを忘れないでください。
その後、どの正確なURLが404エラーを引き起こし、どこでそれらを取得するかを確認できます。
そして最後に：問題を修正してください！
事故が起こるでしょう、そしてそれは事実です。 イライラするユーザーが待っている間に必死に問題を修正するよりも、見栄えの良い404ページを事前に用意しておくことをお勧めします。
ただし、404はエラーであり、修正する必要があります。 エラーの優先度に応じて、リンクをリダイレクトしたり、ページを復元したり、ソースリンクを修正したりできます。 同様に、次のことを行います。
- 自動化された定期的な404レポートを導入して、404ページを監視し、タイムリーに修正します。
- 404でリアルタイム通知を設定します。
- 監査を実行して、壊れたリンクを特定します。
全体として、ユーザーフレンドリーな404ページは、ユーザーに価値をもたらし、全体的なWebサイトのデザインに関して一貫性があり、サイトのナビゲートに役立つ必要があります。 これらのルールに従うことで、ユーザーを維持し、同時にコンバージョンを増やすことができます。