ウェブデザイナーが注意すべき 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は、サイドナビゲーションバーをタブページに関連付けるサンプルコードを実装します。

推薦する

VMware12 で Ubuntu19.04 デスクトップ版をインストールする (インストール チュートリアル)

1. 実験の説明仮想マシンに、 Ubuntu 19.04オペレーティングシステムを手動でインストー...

Vueドロップダウンリストの2つの実装方法の比較

Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...

React の国際化 react-intl の使用

React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...

MySQLサービスの自動停止の解決策

この記事では主に、MySQL サービスの自動停止の解決策を紹介し、参考と学習のために共有します。一緒...

MycliはMySQLコマンドライン愛好家にとって必須のツールです

マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...

Win2008 サーバー セキュリティ チェック手順ガイド (日常のメンテナンス手順)

ドキュメントはしばらく前から書いていましたが、アップロードする勇気がありませんでした。サーバーのセキ...

Nginx リバース プロキシ構成の完全なプロセス記録

1. 準備LinuxシステムにTomcatをインストールし、デフォルトのポート8080を使用してTo...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

MySQL 5.7 のユニオンオール使用法のブラックテクノロジーを 5 分で学ぶ

MySQL 5.6 での union all のパフォーマンスパート 1:MySQL 5.6.25 ...

Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。

実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...

VueはElementUIのフォームサンプルコードを模倣する

実装要件ElementUI を模倣したフォームは、インデックス コンポーネント、Form フォーム ...

ネイティブ JS で音楽プレーヤーを実装するためのサンプル コード

この記事では主に、次のように共有されるネイティブ JS 音楽プレーヤーのサンプル コードを紹介します...

Dockerでmongodbデータベースを使用するための実装コード

mongoイメージを取得する sudo docker pull mongo mongodbサービスを...

Mysqlツリー再帰クエリの実装方法

序文部門テーブルなどのデータベース内のツリー構造データの場合、部門のすべての従属部門または部門のすべ...

MySQL サーバー ログイン エラー ERROR 1820 (HY000) の解決方法

障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...