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

推薦する

Vue での keepAlive の使用例の詳細な説明

開発においては、一覧から詳細ページにジャンプし、また詳細ページに戻る際に一覧ページの状態(スクロール...

Vueはボタン切り替え画像を実装します

この記事では、ボタン切り替え画像を実現するためのVueの具体的なコードを例として紹介します。具体的な...

Windows Server 2016 リモート デスクトップ サービスを展開するためのクイック スタート ガイド

現在、2016サーバーは、win2008や2012よりも優れたマルチサイトhttpsサービスをサポー...

Linux ファイアウォール設定の詳細な手順 (yum ウェアハウス設定に基づく)

序文この実験では、デバッグ用に2つの仮想マシン(CentOs6とRed Hat 6)を準備します。 ...

MySQLはストアドプロシージャを使用して数百万のデータを素早く追加します。サンプルコード

序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...

VMware 15.5 バージョンのインストール Windows_Server_2008_R2 システム チュートリアル図

1. VMware 15.5から新しい仮想マシンを作成する1. VMware を開き、ホームページで...

中国語ウェブコンテンツを紹介する10の経験

<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...

Javascriptの基礎を学ぶための10の重要な質問

目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...

MySQLの文字セットを変更する方法

1. MySQLの文字セットを確認する '%char%' のような変数を表示します。...

1つの記事でJSONPの原理と応用を理解する

目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...

HTML タグのネスト規則の紹介

XHTML タグには、div、ul、li、dl、dt、dd、h1~h6、p、a、addressa、s...

MySQL スロークエリログの役割と公開

序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...

HTML は、Web ページの作成者が学習して習得しなければならないものです。

HTML を学ぶメリットは何ですか? 1: ウェブサイトやブログのウェブ構造を簡単に変更できます。...

CSS3 カウントダウン効果

成果を達成する実装コードhtml <div クラス = 'ラッパー'> ...

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...