SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

おすすめのイベント

おすすめの講座

おすすめのウェビナー

マーケティングは“経営ごと” に。業界キーパーソンへの独自取材、注目テーマやトレンドを解説する特集など、オリジナルの最新マーケティング情報を毎月お届け。

定期誌「MarkeZine」

第68号(2021年8月号)
特集「ブランドの魅力が伝わる、戦略的な顧客接点」

定期誌購読者なら
誌面がウェブでも読めます

今日から実践!ユーザビリティ向上ノウハウ

ユーザーの誤解を防ぐ、ちょっとしたユーザビリティテクニック


 兄弟(関連性のある要素)同士をユーザーに分かりやすく明示することで、サイトの使いやすさは大きく向上します。今回は関連のある要素の配置の仕方によりユーザーの混乱を防ぐテクニックをいくつかご紹介します。(ユーザビリティ実践メモの中から編集部がチョイスした記事を再掲載しています)

要素の関連性をユーザーに分かりやすく見せれば混乱は防げる

 今回はユーザビリティテスト(ユーザ行動観察調査)の結果から、関連性のある要素同士を離して配置してしまったことで混乱を招いたケースをご紹介します。あるショッピングサイトでは、商品絞込みのために、「価格から探す」と「ジャンルから探す」の2つの検索を用意していました。(下図参照)

あるショッピングサイトの商品絞り込み検索機能

 上記の検索は、「価格」と「ジャンル」の両方をプルダウンメニューで選択した後、右の「検索」ボタンをクリックすることで、AND検索を実行できます。(「価格」と「ジャンル」のどちらか一方だけでも検索可能です。)

 一見、問題のなさそうな画面ではありますが、ユーザビリティテスト(ユーザ行動観察調査)の結果、一部のユーザーは「検索」ボタンに気づかず、「価格から探す」のプルダウンメニューを選択しただけで、自動的に価格が絞り込まれると勘違いしました。

 「価格から探す」のプルダウンメニューと「検索」ボタンの上端を揃えていないことで、この2つの要素の関連が分かりづらくなっており、勘違いが生じたと考えられます。

 この画面の設計者としては、「価格から探す」と「ジャンルから探す」の両プルダウンメニューと、「検索」ボタンを関連付けたいという意図があり、「検索」ボタンを中央に配置したのだと推測できますが、その結果かえってどちらのプルダウンメニューとも関連が見えづらくなってしまったと言えます。

 上記の改善策として、以下の方法が考えられます。

距離による関連付け

 兄弟(関連性のある要素)同士を距離的に近づけます。

 下記の改善例は、プルダウンメニューと「検索」ボタンの天地を揃えることで、関連性を強めています。

エリアによる関連付け

 兄弟(関連性のある要素)同士の関連性をさらに強化するために、これらの要素を同じエリア内にくくります。

 下記の改善例は、エリア全体を囲む枠を強調し背景色を敷くことで、検索エリア内の要素全てに関連があることを明示的にしています。

エリアを区切るとユーザーの視線の流れを遮ってしまうため、安易にエリアを区切らないよう注意が必要です。

 このように兄弟(関連性のある要素)同士を距離的にもエリア的にも関連付けることで、ユーザーの混乱を防ぐことが可能です。

 上記の観点は全てのインターフェースを設計するうえで常に必要になりますので、サイト運営者の方は一度ご自分のサイトを見直してみてはいかがでしょうか。

この記事は参考になりましたか?

  • Facebook
  • Twitter
  • Pocket
  • note
今日から実践!ユーザビリティ向上ノウハウ連載記事一覧

もっと読む

この記事の著者

株式会社ビービット(カブシキカイシャビービット)

仮説検証型の独自方法論「ビービットUCD(User Centered Design)」を用いて、ウェブおよび携帯サイトの戦略立案、サイト設計、構築、効果検証を行うインターネットコンサルティング会社。年間1000人を越えるユーザビリティテスト(ユーザ行動観察)やアイトラッキング調査など各種リサーチを実施し、ウェブユーザの心理と行動パターンを分析。サイトの売上向上、コンバージョン率改善などの具体的成果の創出を行っている。詳細はこちらからご確認ください。【書籍紹介】 絶えず...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2009/05/22 17:47 https://markezine.jp/article/detail/5753

Special Contents

PR

Job Board

PR

おすすめ

イベント

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング