ウェブデザイナーが注意すべき 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 のグループ分けの例

mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...

ドラッグ効果を実現するための js オブジェクト指向メソッド

この記事では、ドラッグアンドドロップをJSオブジェクト指向で実装するための具体的なコードを参考までに...

高可用性 Web クラスターを実装するための Keepalived+Nginx+Tomcat サンプル コード

高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...

クリーンなXHTML構文

XHTML を書くには、明確な HTML 構文が必要です。 XHTMLを書くには、きれいなHTML構...

SpringBoot と Docker の統合の詳細なプロセス

目次1. デモプロジェクト1.1 インターフェースの準備1.2 構成の準備2. Dockerがリモー...

Linux 基本チュートリアル: 特別な権限 SUID、SGID、SBIT

序文Linux のファイルまたはディレクトリの権限については、共通の rwx 権限を知っておく必要が...

一般的な Dockerfile コマンドの使用方法の紹介

目次01 CM 02 エントリーポイント03 ワークディレクトリ04 環境05 ユーザー06巻07 ...

MySQL で複数のフィールドを連結する詳細な例

MySQL クエリ結果の行フィールドの結合は、次の 2 つの関数を使用して実装できます。 1. co...

ベースタグとは何ですか? また、それは何をするのですか?

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトの...

Linux で固定 IP を設定する方法 (テスト済みで効果的)

まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...

Vue プロジェクトがページング効果を実現

ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...

ボタンの権限判定を実装するためのVueカスタムv-has命令

アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...

Dockerは単一のイメージを使用して複数のポートにマッピングします

必要:公式サイトのリソースサーバーは確かに1つのインスタンスでは使えず、複数のインスタンスを一緒に使...

Vue 要素と Nuxt の使用に関するヒントを共有する

1. 要素時間選択提出フォーマット変換例えば 2018年9月7日金曜日 00:00:00 GMT+0...