ウェブサイトのユーザビリティ101

ユーザビリティは、あらゆるWebサイトの成功の基本です。サイトの使用が困難な場合、ユーザーに不満を与えるだけでなく、ビジネスにも悪影響を及ぼします.


ユーザーは、使いにくいサイトに費やす時間を減らし、行動を促すフレーズを完了する前に諦めます。また、読んだ内容の記憶が少なくなり、戻ってくる可能性がかなり低くなります。.

つまり、サイトの使い勝手が悪いと、ビジネスにとってひどいものになります。しかし、あなたはそれについて何ができますか?

答えは次のとおりです。

  • そもそもウェブサイトが使いにくい理由を理解する.
  • 物事を改善するためのテクニックを知る.
  • ウェブサイトの存続期間を通して、ユーザビリティテストの継続的なプログラムを実装する.

この投稿で私たちが探るのは、これらの3つのコンポーネントです。まず、Webサイトを使いにくくするものから始めます。.

ウェブサイトを使いにくくするもの

誰かがウェブサイトを使いにくいと思う主な理由は3つあります.

最初の理由は サイトはただ混乱している. おそらく、ユーザーが処理しなければならない画面上の要素が多すぎます。または、気を散らすアニメーションや画像がたくさんある場合もあります。いずれにせよ、ユーザーはすぐに圧倒されます.

第二の理由は ウェブサイトが期待と矛盾している. たとえば、ウェブサイトでの検索方法を尋ねた場合、ページの右上に移動して、検索ボタンを押す前に検索クエリを入力フィールドに入力する可能性があります.

ただし、入力フィールドが右上にないか、ボタンがない場合は、サイトが期待どおりに動作しなかったため、すぐに混乱します。.

ウィキペディア検索の例
長い間、ウィキペディアはユーザーを検索機能の位置とラベル付けで混乱させていました.

人々がウェブサイトで苦労する最後の理由は 彼らは単にそれらの多くを尋ねます. 多くのサイトは、製品の長いリスト、無数の行動を促すフレーズ、または肥大化したナビゲーションを一度にユーザーに提示するオプションが多すぎます。.

人々は圧倒され、苦しむ 分析麻痺 あまりにも多くのオプションに直面したとき。実際には, ヒックス・ロー オプションの数と選択にかかる時間の間に直接的な関係があることを実証しました。今こそ、ほとんどのユーザーがオンラインへの投資を望んでいない時期です.

選択肢が多いほど、応答時間が長くなります
Hicks Lawは、ユーザーに提供する選択肢が多いほど、ユーザーが決定するのに時間がかかることを示しており、サイトを放棄する可能性が高くなります.

あなたのウェブサイトを見ると、間違いなく使いやすいように見えます。しかし、残念ながら、あなたはあなたのウェブサイトの使いやすさを判断することができません。これには2つの理由があります.

  • 最初, 私たちが何かに慣れるほど、それはより直感的になります。あなたはそれが本当であることを理解するために運転することを学んだときだけ考える必要があります。人々が最初に運転することを学ぶとき、それは考慮すべき非常に多くの異なる事柄に圧倒されます。しかし、数年運転した後は、運転の記録はもちろんのこと、旅の記憶がなくても職場に到着するのは簡単です。.
  • 二番目, 私たちが私たちのウェブサイトを見ているとき、私たちは通常それを完全に注意しています。ただし、ユーザーが使用することはほとんどありません。他のWebサイトをナビゲートする方法について考えてください。オフィスで騒々しい同僚であろうと、家で注意を要求している子供であろうと、あなたはしばしば気晴らしに囲まれています.

モバイルデバイスの状況はさらに悪化し、外出中やテレビを見ているときなど、他のアクティビティを行っているときにモバイルデバイスを使用することがよくあります。.

それで、私たちのウェブサイトに関する私たちの判断を信頼できない場合、どのように私たちはその使いやすさを改善し始めますか?答えは、テストする必要があるということです.

ウェブサイトのユーザビリティをテストする方法

多くの人が、ユーザビリティテストは余裕がない贅沢を検討しています。時間と費用がかかること。ただし、両方とも可能ですが、必ずしもそうである必要はありません。.

手始めに、テストに関して多くの誤解があります。多くの人とテストする必要はありません. 5人か6人は十分です. また、必ずしも実際の視聴者を必要としません。ユーザビリティのテストに関しては、実際のユーザーでテストする方が常に良いですが、ほとんどの人は同じ課題に苦労します。特定のニーズを持つ人々(高齢者や子供など)と協力している場合にのみ、人口統計が重要になります.

テスターが増えても問題が発見されたわけではありません
5人または6人を超えるユーザーでテストすると、検出される追加の問題の数が劇的に減少します。.

あなたが実行できる多くの簡単なテストがあり、それらは無料またはせいぜい数ドルで実行できます。さらに、1時間以内に結果が返されることがよくあります。テストして決定的な答えが得られた場合、適切なアプローチについての議論よりも長い時間を費やすことができます。.

最善のアプローチは、「それをテストしよう」という考え方を採用することです。つまり、どの戦略を選択するかを決定するときはいつでも、推測せずにテストしてください。.

テストする前に、ウェブサイトの再設計が完了するまで待ってはいけません。その段階では手遅れです。問題が見つかった場合、問題を解決するには時間がかかり、費用もかかります。.

ウェブサイトのユーザビリティをテストすることになると、テストを早く開始することはできません。スケッチやワイヤーフレームを使用してテストすることも可能です。ただし、何かをビルドする前に、間違いなくデザインのモックアップをテストする必要があります。.

スケッチ、ワイヤーフレーム、デザインコンセプトのいずれの場合でも、ユーザーが実行できる2つの簡単なテストにより、正しい方向に進んでいるかどうかがわかります。.

1)ファーストクリックテスト

Webサイトにアクセスするとき、ユーザーが最初にクリックしたときに、タスクの完了に成功したかどうかを判断できます.

ウェブサイトのユーザビリティに関する尊敬すべき研究 Bob BaileyとCari Wolfsonによると、ユーザーが最初のクリックを正しく行うと、87%の確率でタスクを正しく完了することがわかりました。ただし、最初のクリックが間違っていると、46%に下がります。.

ユーザーがデザインコンセプトを示し、特定のタスクを完了するために何をクリックするかを尋ねることにより、ユーザーが最初のクリックを正しく取得できる可能性をテストできます。.

これは直接行うことも、電子メール、ソーシャルメディア、またはWebサイトを介してユーザーに送信する調査を実行することもできます。また、あなたに代わって参加者を1人あたりわずか1ドルで募集する多くのサービスがあります。.

アンケートとして実行する場合は、ユーザーがWebサイトの静止画像をクリックした場所を追跡できる特別なソフトウェアが必要です。この種のソフトウェアの1つの良い例は 使いやすさのハブ. 簡単なファーストクリックテストを実行できるだけでなく、推奨する2番目のテスト(5秒のテスト)もサポートします.

ユーザビリティハブの画像ヒートマップ
ユーザビリティハブを使用すると、ファーストクリックテストを実行でき、参加者の募集にも役立ちます.

2)5秒テスト

ファーストクリックテストは、ナビゲーションの効果を理解するのに役立ちますが, 5秒のテスト サイトの視覚的な階層をテストします。つまり、ユーザーがページの重要な要素を表示しているかどうかを理解できます。.

名前が示すように、5秒のテストでは、ページを非表示にする前に5秒間ユーザーにページを表示します。この時点で、ユーザーに見たものを思い出すように依頼します.

彼らが思い出したことだけでなく、それらの要素を繰り返す順序にも注意してください。通常、人々は最初に最も大きな影響を与えたものについて言及します。行動を促すフレーズや重要なメッセージを思い出すのに苦労している人は、修正が必要な問題があることを知っています。.

また、ウェブサイトの内容についてユーザーに尋ねることもできます。返信に驚かれるかもしれません。多くの場合、私たちに明らかなように見えるものは、ユーザーにはわかりません。ユーザーがウェブサイトのトピックや組織が提供するものを完全に誤解することは珍しいことではありません.

テストが設計概念に限定されているわけではありません。ユーザビリティテストを実行して、既存のWebサイトまたはプロトタイプもテストできます.

3)軽量ユーザビリティテスト

ユーザビリティテストを実行するには多くの方法がありますが、私たちの目的のために、すべてのテストオプションの中で最も軽量なものをお勧めします。これは、ユーザビリティテストの価値を頭の中で確立するのに役立ち、将来、より野心的になることを奨励します。.

私が言及しているユーザビリティテストのタイプは、簡易化されたリモートテストと呼ばれています。つまり、実際にテストすることはなく、実験が行われているときに立ち会う必要もありません。.

この種のテストを実行するには、テストをオンラインで投稿し、完了した人を記録する方法が必要です。幸い、次のような多くのツールが利用できます。 UserBrain.

UserBrainのユーザビリティテスト
UserBrainは、簡単なリモートユーザビリティテストを実行できる多くのツールの1つです。.

セットアップは簡単です。 Webサイトでユーザーに実行してもらいたいタスクを定義してから、そのタスクを完了するようにユーザーを招待します.

返されるのは、ユーザーが自分の考えていることと、自分のサイトで決定を下した理由を説明する音声解説を含む、ユーザーがタスクを完了しようとしている短いビデオです。.

繰り返しになりますが、UserBrainのようなツールは、ユーザーに代わってユーザーをリクルートすることが多く、費用は約$ 15からです。ただし、友人、家族、または同僚から参加者を参加させることもできます。そうは言っても、彼らは良い参加者になるにはあまりにも多くのことを知っているので、社内の人々を使用しないようにしてください。.

ご覧のとおり、テストは難しいものである必要はありません。採用を支援するためにサードパーティを使用することを決定した場合、多くの場合、わずか1時間で結果が返されます。その結果、再設計プロセス全体を通じて、また実際のサイトでも定期的にテストできます。実行するテストの回数が増えるほど、明らかになる問題が増えるため、これは良いアイデアです。.

より少ないテスターでより多くのテストがより良い
多数の人がいる単一のラウンドよりも複数回のテストの方が効果的です.

つまり、修正が必要なWebサイトの問題をすばやく見つけることができます。これらの問題にどのように対処するかは、問題の内容によって異なります。ただし、この記事の残りの部分では、Webサイトの使いやすさに関するほとんどのハードルを克服するのに役立ついくつかの一般的な方法を紹介します.

ウェブサイトの使いやすさを向上させる方法

ウェブサイトの使いやすさを向上させる方法はたくさんあります。ただし、3つの領域に特に注意を払う価値があります。これらは:

  • シンプルなインターフェース.
  • 重要なコンテンツと行動を促すフレーズの可視性.
  • コンテンツの関連性と明確性.

では、これら3つをさらに詳しく見ていきましょう。.

1)インターフェイスとコンテンツを簡素化する

ほとんどの場合、ユーザーインターフェイスとコンテンツを単純化することが、Webサイトの使いやすさを向上させる最も効果的な方法です。.

多くの場合、ウェブサイトには、無意味なストック画像、2次的なナビゲーションリンク、ユーザーが気にしない無関係なコンテンツなどの不要な要素が詰め込まれています.

多くの場合、誰かが便利だと思うかもしれないという態度を持っているので、オンラインで公開しましょう。その結果、私たちのウェブサイトは非常に乱雑になり、人々は興味のある要素を見つけることができなくなります.

幸いなことに、簡単な3ステップのプロセスでそれを解決できます。.

ステップ1は 特定のページのすべての要素を評価し、その要素を削除できるかどうかを自問する. どのような悪影響があり、より使いやすいウェブサイトに支払う価値のあるコストであるか?

ステップ2は 残りの画面要素を見て、それらの要素のいずれかが二次的な役割を果たすかどうかを尋ねます. おそらく、彼らは二次的な聴衆のニーズに応えるか、ユーザーがそれほど重要でないタスクに取り組むことができるようにします.

その場合は、その要素を非表示にして、より重要なタスクから人々の注意をそらさないようにできるかどうかを自問してください。それはウェブサイトにもっと隠されているのでしょうか、それともタブやアコーディオンの下にあるのでしょうか?それはそれが人々にまだアクセス可能であることを意味しますが、大多数のユーザーの経験を複雑にしません.

最後に、ページに残したものを確認します。. ユーザーに最も注意を払ってほしいことについていくつかの決定を行う必要があります.

たとえば、主な行動を促すフレーズは何ですか。 「ソーシャルメディアでフォローしてください」などの後続のアクションよりもはるかに注意が向けられていますか?

コンテンツはどうですか?ユーザーがあなたのコンテンツを見る可能性が高い順序は何ですか?それは意味がありますか?人々はあなたのストラップラインを見て、あなたの住所のようなそれほど重要でない何かを見る前にあなたが何をしているのかを説明しますか??

5秒間のテストが役に立ちます。ページの視覚的な階層が正しいかどうかを見つけるのに役立ちます.

もちろん、正しいかどうかを判断するには、ページで最も重要な要素を頭に明確に示す必要があります。.

これを行う1つの方法は、要素に注意点を割り当てることです。 25の注意点を自分に与えます。すべてのページ要素には少なくとも1つのポイントが必要ですが、人々が1つのことに注意を向けたい場合は、より多くのポイントが必要です。したがって、たとえば、主要な行動を促すフレーズには6つのポイントがあり、プライバシーポリシーには1つのポイントがあります。.

それが完了したら、それらの相対的な優先順位を反映するようにページを設計できます。これは、適切な要素に注意を引き付けるためにページをどのようにデザインするかという問題を提起します.

2)最大の可視性のための設計

デザイナーがストラップラインや行動を促すフレーズなどのより重要な画面要素にユーザーの注意を引くために使用するテクニックはたくさんあります。ただし、特に強力なものは5つあります。これらは:

  • ポジション.
  • 画像.
  • ネガティブスペース.
  • 色.
  • サイズ.

1)位置を考慮する

ウェブページの読み方や動作の予想のため、ページ上のいくつかの位置は他の位置よりも注意を引く可能性が高いです.

たとえば、西では左から右に読むため、ページの左側を優先します。また、ほとんどのWebサイトでは、右側の列にセカンダリコンテンツが含まれる傾向があることもわかりました。これらの2つの要素を組み合わせることで、右側の列に貴重なコンテンツを配置することで、ユーザーがコンテンツを目にする可能性を減らす.

ユーザーは左側を優先します
ユーザーの注意は左側の列に向かって偏っています.

また、ユーザーはページの上位にあるコンテンツにもっと注意を払う傾向があるため、何かを見つけてもらいたい場合は、多くの場合、上部に配置することをお勧めします.

ただし、タイミングも重要です。たとえば、誰かがあなたのニュースレターにサインアップしたい場合、彼らがあなたのコンテンツの品質を評価する機会を得た後、その行動を促すフレーズをページの下に置く方が良いかもしれません.

そのため、要素を配置するのが最適かどうかを知るためにテストを行うことをお勧めします。はい、一般的な経験則として、行動を促すフレーズをページの左上または中央に配置するのが最も効果的です。ただし、多くの例外があり、特に画像の影響があります。.

2)画像は慎重に使用してください

画像は私たちの注意を強力に引き出します。私たちの目は画像に引き付けられ、特に画像に顔が含まれている場合はそうです。私たちは人間に注意を払うように生物学的にプログラムされています.

画像の使用方法によっては、サイトの使いやすさの妨げになる場合があります.

たとえば、代わりに注意を引く画像が近くにある場合、ユーザーの注意は行動を促すフレーズをスキップするのが簡単です.

画像はCTAの有効性を低下させる可能性があります
近くの画像への行動を促すフレーズをスキップするのは簡単です.

ただし、画像を使用してユーザーの注意を引くこともできます。たとえば、私たちは写真に見られる顔の目のラインをたどる傾向があります。ユーザーが行動を促すフレーズやその他の重要なコンテンツを見ている場合、その可能性が高くなります.

CTAに関連する画像の方が良い
画像と行動を促すフレーズを関連付けると、ユーザーの注意を引くのに役立ちます.

私たちが従う傾向があるのはそれだけではありません。矢印や方向線を使用して、他のコンテンツに注目したり、他のコンテンツから目を離したりできます.

また、重要なコンテンツと関連する画像の間の相対的な距離は、人々が見るものに影響を与えます。 2つの要素が接近している場合、それらは互いに関連付けられる傾向があります。つまり、行動を促すフレーズのすぐ横にある画像は通常、 その行動を促すフレーズに注意を向けます.

微妙なデザインの行動要請
微妙なデザインキューは、重要な行動を促すフレーズにユーザーの目を引き付けます.

要素間の関係は、別の方法でも役立ちます。それは私たちが有利に否定的なスペースを使用できるようにすることができます.

3)ネガティブスペースを利用する

きっと見たことがあると思います ウォーリーはどこ 過去には。ウォーリーを見つけるのが難しいのは、キャラクターが特に偽装されているということではありません。実際、彼は明るく個性的な衣装を持っています。彼はページ上で非常に多くの要素に囲まれているため、見づらい.

ページで注目を集めるために競合する要素の数を取り除くことについてはすでに説明しました。しかし、私たちが使用できるもう1つの手法は、重要なコンテンツをスペースで囲むことです。近くにラッチするものがないため、代わりにそのコンテンツに焦点を合わせます。白い壁に最小のマークが表示されるのと同じ理由です.

負のスペース
負のスペースは、近くの画面要素に注意を集中させます.

重要なコンテンツを他の要素から際立たせる唯一の方法は、ネガティブなスペースではありません。色も使えます.

4)色で強化

鳥や花が明るく対照的な色を使用して、周囲から目立つようにする方法は誰でも知っています。行動を促すフレーズなどの重要なコンテンツ専用に異なる色を予約することで、Webサイトで同じテクニックを使用できます.

ハイライト色
クリエイティブデジタルデザイナーのAndy Clarkeは、WWFでの作業でハイライトカラーを効果的に使用しました.

ただし、色だけが異なるため、色だけに依存しないように注意する必要があります。.

とは言っても、サイズを有利に使用するなど、他のテクニックと組み合わせると、色は注目を集める強力なツールになる可能性があります.

5)相対的なサイズを利用する

要素の相対的な重要性を判断する1つの方法は、サイズによるものです。プライバシーポリシーへの小さなリンクよりも、行動を促すフレーズの大きなボタンの方が重要であることを本能的に知っている.

ただし、アイテム間の相対的なサイズとして重要なのは、サイズ自体ではありません。すべてが大きい場合、何もありません。人々の心にはすべてが等しく重要です.

また、要素サイズの違いが大きいほど、要素サイズの違いが大きくなります。したがって、プライバシーポリシーと主要な行動を促すフレーズの違いは明白です.

ただし、ウェブサイトの要素間の相対的なサイズが十分に大きくない場合が多いため、違いを明確にするために違いが明確ではありません。.

ご覧のとおり、デザインは注意を引くための強力なツールですが、サイトのコンテンツも考慮する必要があります.

3)コンテンツを作成するときにユーザーを考慮する

ウェブサイトのコンテンツの主な問題は、ユーザーを考慮して作成しないことです。 「自分自身について何を言いたいのか」という前提から始めます。代わりに、「ユーザーは何を知りたいのか」と質問する必要があります。

つまり、ユーザビリティの観点から、適切な情報を適切なタイミングでユーザーの前に配置する必要があります。.

1)ユーザーに回答を検索させない

多くの場合、ユーザーは必要な情報を探す必要があります。たとえば、ニュースレターに登録しているとします。あなたが行う直前に、彼らがあなたをスパムするかどうか、またはあなたの電子メールアドレスがどれほど安全であるかについて、たくさんの質問があなたの心を通り抜けます。ただし、あまりにも頻繁に、ウェブサイトの奥深くに埋め込まれたプライバシーポリシーで回答を検索する必要があります。代わりに、私たちはそれらの質問に答えるべきです ニュースレター登録フォームのデザイン.

ユーザーの質問に対処する
現在ユーザーの注意が向けられているユーザーの質問に対処します。答えを探し出さないでください.

これがコンテンツへの取り組み方に関する唯一の問題ではありません。私たちには、世界観に関するコンテンツを構造化する習慣もあります。ユーザーが世界を別様に見ていることを忘れます.

2)ユーザーのメンタルモデルを一致させる

私たちはそれぞれ世界のメンタルモデルを持っています。それは、私たちが世界をどう見るか、そして私たちが概念や物事の間で作るつながりに影響を与えます.

問題は、専門化するほど、メンタルモデルが周囲のものと異なることです。たとえば、銀行に行ったらどうするかと聞いたら、おそらく何らかの金融取引を思い浮かべるでしょう。しかし、プロのアングラーと同じ質問をすると、川岸を思いつくかもしれません。.

メンタルモデルはおそらく視聴者とは大きく異なるため、これらの異なるメンタルモデルは、サイト構造を作成するときに大きな課題になる可能性があります。あなたは主題の専門家なので、世界の見方はユーザーとは異なります.

そのため、次のような手法を使用して、サイト構造の作成にユーザーを関与させる必要があります。 カード仕分け, または、少なくとも私たちが思いついた情報アーキテクチャをテストします.

情報アーキテクチャで発生する可能性があるもう1つの問題は、表示するナビゲーションアイテムの数です。.

3)オプションを制限して区別する

多くのWebサイトでのユーザビリティの大きなハードルは、ナビゲーションの複雑さです。多くのサイトでは、ナビゲーションの各レベルに要素が多すぎます。それは2つの理由で問題です.

  • 最初, 短期記憶に多くの情報を保持するのはひどいです. 通常、一度に約4つの要素を保持できるため、クレジットカード番号は4桁の4つのグループにグループ化されます。.
  • 二番目, ナビゲーション要素が多いほど、類似している可能性が高くなります. オプションが互いに区別されない場合、ユーザーは不確かになり、間違いを犯す可能性が高くなります.
選択肢を明確にする
複数の選択肢がある場合は、それらが異なることを確認してください。類似している場合、ユーザーは選択しません.

そのため、ユーザーに一度に表示するオプションの数を制限し、各オプションができるだけ明確で明確にラベル付けされるようにする必要があります。これは、ナビゲーションアイテム、eコマース製品のカテゴリ、行動を促すフレーズのいずれについて話している場合でも当てはまります。.

わずかな投資で大きな違いが生まれます

ウェブサイトのユーザビリティは、非常に複雑なテーマです。ただし、開始は簡単で、わずかな労力で大きな違いが生まれます.

最終的にはユーザーが幸せになるだけでなく、 コンバージョン率の向上 そして口コミの推薦は言うまでもなく、再訪問者の数.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map