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

推薦する

Dockerfile を使用したカスタムイメージの構築の実装

目次序文Dockerfile の紹介Dockerfileはイメージプロセスを構築するDockerfi...

Nginx 設定ファイルの詳細な説明と最適化の提案ガイド

目次1. 概要2. nginx.conf 1) 設定ファイルの場所2) ワーカープロセス3) イベン...

MySQL の binlog_format モードと設定の詳細な分析

MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...

MySQLでSQL文がどのように実行されるかの詳細な説明

概要最近MySQL関連の知識を勉強し始めました。学んだ知識ポイントと自分の理解を元に整理して共有しま...

Vueはカウンターのシンプルな生成を実装します

この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...

ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...

重要なmysqlログファイルの概要

著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...

Zabbix動的実行監視収集スクリプトの実装原理

Zabbix カスタム スクリプトを使用して監視データを収集する場合、通常、次の問題が発生します。サ...

React Hooks に基づく小さな状態管理の詳細な説明

目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...

Vueは遅延読み込みによりページの応答速度を向上

目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...

MySQLの大文字と小文字の区別によって発生する問題の分析

MYSQLは大文字と小文字を区別します言葉を見れば信じられます。タイトルを見れば内容がわかります。 ...

Ubuntu システムにおけるネットワーク構成ファイルの分析と説明

今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...

ReactのPropsの簡単な比較

目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...

vue-cropper を使用して vue で写真をトリミングする方法をご存知ですか?

目次1. インストール: 2. 使用方法: 3. 組み込みメソッド: 4. 使用方法:要約する公式サ...