目次
1. ユーザーに考えさせないでください
MailChimp
2. 「選択恐怖症」を避ける
3. ユーザーが欲しいものをすぐに提供します
4. 「検索」が必要です
5. ユーザーを理解する
6. テスト
ホームページ ウェブフロントエンド htmlチュートリアル 見てとてもためになりました!ウェブサイトのユーザビリティを向上させる 6 つの原則_html/css_WEB-ITnose

見てとてもためになりました!ウェブサイトのユーザビリティを向上させる 6 つの原則_html/css_WEB-ITnose

Jun 24, 2016 am 11:56 AM

一般に、Web サイトには次の 3 つのタイプがあります。

1 つ目のタイプの Web サイトは、優れた創造性とデザインを備えています。この種のウェブサイトは「すごい」と言うでしょう。しかし、残念ながら、優れたデザイン以外に提供できるものはあまりありません。

2 番目の種類の Web サイトには創造性やデザインが欠けていますが、欲しいものはすぐに見つかります。しかし、見た目に魅力がないからといって、それらをオフにしますか?

最高のウェブサイトとは、使いやすさと視覚的な魅力を完璧に組み合わせたウェブサイトです。このような Web サイトは、訪問し続けたくなるでしょう。マーケティングの観点から見ると、これが最適なタイプです。

見栄えの良い Web サイトであっても、ユーザーのアクセスを維持したり、使用コンバージョン率を高めたり、販売目標を達成したりできなければ、価値がありません。ただ褒めて背を向けるのではなく、戻ってきてもらいたいのであれば。ユーザーの視覚的な喜びだけを満足させる必要はありません。

ユーザーが Web サイトに戻ってきて忠実なユーザーになることを望むことが目標である場合は、Web サイトの使いやすさとユーザー中心の設計原則を改善することを検討する必要があります。これは、ユーザーのニーズに焦点を当て、効率的でユーザーフレンドリーな Web サイトを提供することを意味します。そうすれば信頼が得られます。それはとても簡単です。

ユーザビリティの向上は、ユーザーエクスペリエンスの向上と同じではないことに注意してください。ユーザーエクスペリエンスの焦点は、ユーザーのポジティブな心理的感情を向上させることです。もちろん、ユーザビリティを向上させることはユーザーを満足させ、最終的にはポジティブなユーザーエクスペリエンスにつながります。

ユーザビリティを向上させるためのいくつかの簡単な原則について話始めましょう。

1. ユーザーに考えさせないでください

これは、Steve Krug が著書『Don't Make Me Think』で提唱した、ユーザビリティを向上させるための最も重要な原則です。

「すごい!」デザイナー必読の本。 『デザイナーの完全独習ガイド』で強く推奨されており、PDF のダウンロードが付属しています。

Web ページは、表示されてすぐに理解しやすいものでなければなりません。ユーザーは無意識のうちに、どこをクリックすればいいのか、どこで欲しいものを手に入れられるのかを知っています。あまり深く考える必要はまったくありません。

これを行うことで、ユーザーは間違いなく幸せになります。典型的な例として MailChimp を取り上げてみましょう。

MailChimp

MailChimp のこのページは非常にシンプルです。ユーザビリティの向上には画期的なデザインは必要ありません。必要なのは、適切なものを適切な場所 (ユーザーが表示することを期待する場所) に表示することだけです。

このページのもう 1 つの優れた点は、ユーザーに「選択恐怖症」を感じさせないことです。これは、知っておくべきもう 1 つの原則です。

2. 「選択恐怖症」を避ける

人はあまりにも多くの選択肢に直面すると、選択をしないか、すでに最も慣れている選択肢を選択することがよくあります。この種の「選択恐怖症」はウェブページに現れるだけでなく、人生においても非常に一般的です。たとえば、カフェで黒板に書かれたさまざまなコーヒーの名前に直面したとき。 「選択恐怖症」は非常に厄介で、人々が選択を放棄したり、すでに慣れ親しんだ場所に戻ることを選択したりすることがあります。

新規ユーザーは、次にどこをクリックするかについて心配する必要はありません。 MailChimp のこのページもこれを非常にうまく行っています。

ヒント: 「無料で登録」などの重要な操作ボタンなど、最も必要なオプションを強調する必要があります。他のオプションは「その他」に含めることができ、1 ページにオプションが多すぎることを効果的に回避できます。

重要でないオプションは「その他」に含めることができます

3. ユーザーが欲しいものをすぐに提供します

ユーザーが Web サイトを閲覧するとき、それは従来のオフライン ストアをさまよっているのと非常によく似ています。そして彼らは本当に必要なものだけを探しています。ユーザーはただ閲覧するだけの Web サイトのすべての単語を読むわけではありません。何かがニーズを満たしたら、「開く」をクリックします。

経験: ユーザーに「これを読むのに時間がかかりそう」と思わせないでください。

たとえば、視覚的な手段を使用して、これらの高速視聴者のニーズを満たすことができます。

以下は、Bang2Joom の有料プランの美しい視覚化の例です。

視覚的な情報は素早く閲覧するのに便利です

ユーザーはさまざまな有料プランの違いを直感的に比較し、自分に合ったものを選択することができます。非常に明確かつ簡単です。

4. 「検索」が必要です

Web サイトが提供するコンテンツはユーザーのニーズを満たしている必要があり、検索には意味があります。特にウィキペディアのようなさまざまな分野のコンテンツが大量にある Web サイトでは、「検索」機能は必須です。

Wikipedia で検索

検索ボックスのベスト プラクティスは次のとおりです:

  • 検索ボックスは、ホームページだけでなく、すべてのページに表示される必要があります。
  • 検索ボックスは、ユーザーが簡単に表示および変更できるように、(Google などの) 十分な長さである必要があります。
  • 検索ボックスはスマートである必要があります。ユーザーが検索するとき、類似した「一般的な検索用語」を参照用に提供できます。さらに、ユーザーが単語を入力すると、そのすぐ下にいくつかの「推奨結果」を提供できます。 Apple の検索は、このベスト プラクティスの良い例です。
  • Apple の公式 Web サイトで検索

    5. ユーザーを理解する

    若いオタクは新しいものを探索するのが大好きです。多少複雑な Web サイトであっても、コンテンツが充実していれば、若者の関心は高いでしょう。また、好奇心が旺盛で、すべてのオプションを調べてすべてのボタンをクリックすることもあります。 Gamestop を例に挙げると、私はかつてこのサイトが少し使いにくいことに気づかずに何時間も費やしてしまいました。

    style=”color: #e36c09″ゲームストップ

    大人の場合は状況が異なります。彼らはより保守的で、シンプルさを好み、新しいものに対してより抵抗力があります。

    そのため、ウェブサイトを設計する際には、ターゲットとなるユーザーグループも考慮する必要があります。

    Google を例に挙げると、非常に幅広いユーザー層がいますが、シンプルさと機能性のバランスが非常に優れているため、誰もが使用する際に障壁に遭遇することはありません。

    さらにいくつかの簡単なヒント!

  • 「バナーの盲点」に注意してください。実際、ユーザーは広告によく似たものを無視することがよくあります。広告のように見える要素 (ページの右側に積み上げられた情報のブロックなど) は避けるようにしてください。
  • 登録が必要な場合は、ユーザーの時間を測定し、入力する必要があるオプションの数を最小限に抑え、最も重要なオプションのみを残します。
  • 「ワンクリックで購読解除」を許可します。
  • 携帯電話ユーザーのことを決して忘れないでください。レスポンシブデザインをやってみよう!
  • ユーザーがブラウザの前後の動きだけに依存しないようにしてください。 「戻る」必要がある場合は、ブラウザではなくウェブサイト上の「戻る」を使用するように依頼してください。
  • デザインにコンテンツを提供しましょう。
  • リンクを強調します。マウスをテキスト上に移動してポインタの変化を確認してリンクを特定するのは、悲惨な体験です。
  • この時点で、ユーザーのエクスペリエンスを向上させるために、Web サイトの使いやすさを改善する準備ができたと思います。

    もちろん、これらの原則はすべての状況に適用できるわけではなく、特定の状況については個別の分析が必要になる場合があります。ただし、6 つの原則の最後の点はあらゆる状況に真に適用できるということを私たちは常に念頭に置いています。最後に、そして最も重要なことです。

    6. テスト

    テスト、これはウェブサイトのユーザビリティを向上させるための鍵です。冒頭で、成功する Web サイトをデザイン、制作、維持する方法は無数にあると述べました。試した後は、必ずテストを通じて効果を確認し、より良い結果を得るために改善を続けてください。

    最後に、あなたの幸運を祈っています!

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    < Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

    この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

    < datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

    この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

    < meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

    この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

    HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

    記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

    HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

    この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

    ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

    この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

    HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

    この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

    < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

    この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

    See all articles