ウェブデザイナーが注意すべき 43 のウェブデザインの間違い

ウェブデザイナーが注意すべき 43 のウェブデザインの間違い

これはウェブサイトのユーザビリティに関する記事です。著者は自身の経験に基づいて、ウェブサイトのデザインでよくある 43 の間違いについて説明しています。これらの間違いは間違いなくウェブサイトのユーザビリティに大きな影響を与えます。昨今、Webサイトのユーザビリティがトレンドになっていますが、国内の大手Webサイトを見ていると、ユーザビリティがデザイナーに広く理解される概念になっていないようです。そこで、この記事が皆様のお役に立てれば幸いです。

1. ユーザーは数秒以内に Web サイトが何を行うかを理解する必要があります。注目はインターネット上で最も価値のある通貨です。 訪問者が数秒以内に Web サイトの方向を理解できない場合、別の Web サイトにアクセスする可能性が高くなります。 訪問者に、なぜあなたのサイトで時間を費やすべきかをすぐに伝える必要があります。

2. サイトをすばやく簡単に読みやすくします。インターネットは本ではないので、長い段落のテキストを使用する必要はありません。 おそらく、あなたのウェブサイトを訪問したとき、私は他の仕事で忙しく、すべてを急いで読まなければならなかったのでしょう。 箇条書き、見出し、小見出し、リストなど、これらすべては読者が求めているものを素早く見つけるのに役立ちます。

3. 読みにくい派手なフォントは使用しないでください。もちろん、特定のフォントを使用すると、Web サイトを目立たせることができます。 しかし、読みやすいでしょうか?主な目的が情報を伝え、読者に読み続けてもらうことである場合は、読み進めるプロセスを快適にする必要があります。

4. 小さいフォントは使用しないでください。前のポイントで述べたように、読者が読んでいるときに快適に感じられるようにする必要があります。 Firefox にはズーム機能がありますが、ウェブサイトをはっきりと見るためにズームインしなければならない場合、二度とそのサイトを訪問することはありません。

5. 新しいブラウザウィンドウを開かないでください。私は最初のウェブサイトでこれをよくやっていました。 理由は簡単です。外部リンクを新しいウィンドウで開くことで、ユーザーは私の Web サイトを離れる必要がなくなります。 間違っている!ユーザーがリンクをどのように開くかを決められるようにします。そうでない場合は、ブラウザに大きな戻るボタンは必要ありません。 ユーザーがサイトを離れることを心配する必要はありません。必要なときにユーザーは戻ってきます。

6. ユーザーのブラウザウィンドウのサイズを変更しないでください。ユーザーには自身のブラウザを制御する権利があります。 ウィンドウのサイズを変更すると、信頼を失うことになります。

7. 必要がない場合はユーザーに登録を求めないでください。はっきり言って、私がインターネットを利用するのは、情報を得るためであり、他の目的のためではありません。 絶対に必要な場合(提供できる情報が非常に貴重である場合など)を除き、登録してメールアドレスやその他の情報を残すことを強制しないでください。

8. 訪問者の同意なしに電子マガジンを購読させないでください。訪問者がサインアップしたときに、自動的にニュースレターを購読しないでください。 迷惑メールは友達を作る良い方法ではありません。

9. Flash を使いすぎないでください。 Flash を使用すると、Web サイトの読み込み時間が長くなるだけでなく、過度に使用すると訪問者に迷惑をかけることもあります。静的なページでは意図を表現できない場合にのみ Flash を使用します。

10. 音楽を聴かないでください。ウェブ開発者の初期の頃、彼らは音楽をウェブサイトに統合したいと考えていましたが、失敗しました。 決して音楽は使わないように注意してください。

11. サウンドを使用する必要がある場合は、ユーザーが開始できるようにします。プレゼンテーションをユーザーに送信したい場合やチュートリアルにサウンドが含まれている場合など、サウンド ファイルを使用する必要がある場合があります。それは問題ありませんが、ユーザーに制御権を与えてください。Web ページを開いた瞬間にサウンドを再生するのではなく、「再生」ボタンをクリックできるようにします。

12. ロゴがウェブサイトを乱雑にしないようにしましょう。ソーシャル ネットワークやコミュニティのロゴを使用すると、Web サイトがプロフェッショナルらしくない印象を与える可能性があります。 バッジや表彰状も「会社概要」ページに掲載する必要があります。

13. 「クリックスルー」ページを使用しないでください。ユーザーがコンテンツにアクセスするために必要な手順が少ないほど、効果的です。

14. 連絡先情報を必ず残してください。最悪なのは、ウェブサイトに連絡先情報が一切残されていないことです。 これは訪問者にとって悪いことであるだけでなく、貴重なフィードバックを逃すことになるため、あなたにとっても悪いことです。

15. 「戻る」ボタンの動作に影響を与えないでください。これは、Web サイトのユーザビリティに関する最も基本的な概念です。 いかなる場合でも、[戻る] ボタンの動作は影響を受けません。たとえば、新しいウィンドウを開くとウィンドウが壊れ、特定の Javascript リンクでもウィンドウが壊れます。

16. 点滅するテキストを使用しないでください。訪問者が 1996 年以降でない限り、フラッシュ テキストを使用しないでください。

17. 複雑な URL 構造を避けます。シンプルなキーワードベースの URL 構造は、検索エンジンのランキングを向上させるだけでなく、訪問者がページを訪問する前にそのページの内容を把握できるようにします。

18. レイアウトにはテーブルではなく CSS を使用します。かつてはページレイアウトに HTML テーブルが使用されていましたが、特に CSS の登場以降は、HTML テーブルに固執する必要はありません。 CSS はより高速で、より安定しており、より多くの機能を提供します。

19. ユーザーがサイト全体を検索できることを確認します。検索エンジンがインターネット革命をもたらした理由は、情報の検索が非常に簡単になったからです。ウェブサイトでは、悪口を言わないでください。

20. ドロップダウンメニューの使用は避けてください。すべてのナビゲーション オプションはユーザーにとって直感的である必要があります。 ドロップダウン メニューはわかりにくく、訪問者が実際に探している情報が隠れてしまう可能性があります。

21. ナビゲーションにはテキストを使用します。テキストナビゲーションは高速化されるだけでなく、安定性も向上します。 たとえば、インターネットを閲覧するときに画像をオフにするユーザーもいます。

22. PDF ドキュメントにリンクする必要がある場合は、必ずその旨を明記してください。リンクをクリックして、Acrobat Reader が起動するのを待つ間にブラウザがフリーズし、(見たいものではない)PDF が開いたという経験はありませんか? これは非常に面倒なことなので、ユーザーが適切なアクションを取れるよう、PDF へのリンクの横に特別な注意書きを必ず含めてください。

前のページ1 2 次のページ 全文を読む

<<:  imgタグ間のスペースの問題の詳細な説明

>>:  Vueは、サイドナビゲーションバーをタブページに関連付けるサンプルコードを実装します。

推薦する

MySQL に絵文字表現を挿入できない問題の解決方法

序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...

複数のフィールドをグループ化するMySQLグループ

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

MySQL をベースにしたシンプルな検索エンジンを実装する

目次MySQL ベースの検索エンジンの実装1. ngram全文パーサー2. 全文インデックスを作成す...

JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...

MySQLで負荷分散を実装する方法

序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...

CentOS 7 で NFS ファイル共有ストレージ サービスを構築するための完全な手順

序文NFS (Network File System) は、ネットワーク ファイル システムを意味し...

Linux 脆弱性スキャンツール lynis の使用分析

はじめに: Lynis は、徹底的なセキュリティ スキャンを実行できる Unix システム用のセキュ...

5分でDockerをインストールする詳細な手順

CentOS に Docker をインストールするには、オペレーティング システムが CentOS ...

MySQLワームレプリケーションの基本知識

ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...

RedisとMemcacheの比較と選び方

最近 redis を使っていて、とても便利だと感じているのですが、インメモリ データベースを選択する...

Oracle VM VirtualBox の CentOS7 オペレーティング システムのインストール チュートリアル図

目次インストール手順環境設定実行構成インストール手順ダウンロードアドレス: バージョン6.0 最初に...

Hadoop を使用せずに Linux 環境に Spark のスタンドアロン バージョンをインストールする方法

ビッグデータはますます注目を集めており、ビッグデータのいくつかの構成要素に精通していないと、自慢でき...

HTML ページでコンテンツの選択、コピー、右クリックを防止する方法の詳細な説明

時には、Web ページに掲載されているコンテンツが悪意のある人物に盗用されるのを望まないため、Web...

HTML テキストフォーマットの簡単な例 (詳細な説明)

1. テキストの書式設定: この例では、HTML ファイル内のテキストを書式設定する方法を示します...

Vite2.x に基づく Vue 3.x プロジェクトの実装

Vue 3.x プロジェクトの作成 npm init @vitejs/app my-vue-app ...