ネット初心者ユーザに配慮した導線設計 (ユーザビリティ実践メモ)
ウェブサイトは、インターネットの利用にあまり慣れていない 初心者ユーザにも配慮して設計する必要があります。 今回は、インターネット初心者ユーザがサイトの基本的な構造を理解して いないために陥りがちな行動について、ECサイトの利用シーンを例として ご紹介します。 弊社のユーザ行動観察調査では、あるECサイトで以下のようなユーザ行動が 見られました。 ユーザがECサイトで気に入った商品を見つけた際、「カートに入れる」ボタンを クリックして買い物かごページヘ移動しました。 このときユーザは、「続けて他の商品も購入したい」と思っていましたが、なぜか 買い物かごページからブラウザの「戻る」ボタンを押し、商品ページに移動しようとしませんでした。 なぜ買い物かごのページから戻らなかったのかを質問したところ、「買い物かごのページ から前のページに戻ってしまうと、いま買い物かごに入れた商品がキャンセルされて
置くだけでは不十分？ヘルプ活用3つのポイント (ユーザビリティ実践メモ)
FAQやよくある質問などのヘルプコンテンツは、ユーザの疑問や不安を解消するために、どこのサイトでも必ずと言っていいほど設置されています。 今回から数回にわたって、「FAQ・ヘルプ」をテーマにした記事をお届けする予定ですが、まず今回は、ヘルプ活用の基本ともいうべき3つのポイントについてご紹介します。 一点目は、以前の実践メモ（「FAQの隠れた役割」）でも触れていますが、「よくある質問」や「FAQ」というリンクを置くだけでなく、本文の中で、ユーザの疑問が生じるところからヘルプに誘導する」ということです。 サイトを閲覧しているユーザは、「商品やサービスを選び、購入する」といった何かしらの目的を持って動いていることが多く、「ヘルプを閲覧しに行く」といった脇道へ逸れる行動には移りにくい状態です。 そこで、図2のように、ユーザが疑問や不安を感じるポイントで、ユーザの疑問・不安に合わせた表現を用いたリン
オーバーレイ表示を行う際の注意点 (ユーザビリティ実践メモ)
1ページでは載せきれない補足情報などを提示する際、元のページの上に重ねて表示する方法がしばしば用いられます（オーバーレイ表示と呼ばれています）。 今回は、オーバーレイ表示を行う際にどのような点に注意すべきかについてお伝えしたいと思います。 前提としてオーバーレイ表示には、下記のような利点があると考えられます。 ・ ページ遷移を挟まずに情報を提示できるため離脱されづらい ・ 情報に触れてもらえる確度が高い 一方で、この表示方法が抱えるリスクも存在します。 特にモーダルダイアログ（オーバーレイで表示されたダイアログを閉じるまで、他の部分が操作できないタイプのもの）を用いる場合にはかなり致命的なリスクが存在することが弊社のユーザ行動観察調査で発見されました。 実は調査の中で、オーバーレイで表示されたコンテンツ（下図B-2）を見終えたユーザが、ブラウザの「戻る」ボタンを押してしまうシーンが何度も見
「自由にカスタマイズ」の落とし穴 (ユーザビリティ実践メモ)
「一人一人のニーズに合わせてカスタマイズできる」ことを売りにした製品やサービスは、近年よく目にします。 例えば、 ・個々の保障内容を自由に組み合わせられる自動車保険 ・各パーツのスペックやオプションを自由に選んで注文できるパソコン などはその代表的な例といえるでしょう。 そのため、何のヒントもない状態で「何でも自由にカスタマイズできますよ」と言われても、ユーザは却って戸惑ってしまいます。 そのため、以下のような工夫が考えられます。 工夫１：代表的なプラン例を提示するあらかじめ、スタンダードな内容で構成したプラン例を用意した上でカスタマイズ可能であることを伝える、というのは代表的な工夫の１つです。 例えば自動車保険のオンライン見積りを提供している三井ダイレクト損保では、「プラン1-3」まで3つのプランを提示しています。 工夫２：カスタマイズ可能な項目に、判断材料を提供する もう一つの工夫とし
驚くほど伝わらない、サービスのメリット (ユーザビリティ実践メモ)
ユーザ行動観察調査を実施すると、全力で訴求しているはずのメリットや強みが、驚くほどユーザに伝わらないケースが多く見られます。 伝わらない理由は様々ですが、今回は具体性が足りないために他社サービスとの違いが伝わらない、という例をご紹介します。 一方で、料金などはユーザにとって非常に具体的で他社と比較しやすい情報となります。ユーザ行動観察調査でも「サービス内容は大体同じ」という思いを強めたユーザが、料金だけで比較検討をする行動が多く見られました。 具体性のある情報を提供することが重要 類似サービスが多く存在する中で、自社サービスのメリットをユーザに伝えるためには、情報の具体性が必要です。「講師の質が高いです」という例の場合、下記のような改善が考えられます。 例えば講師の質を訴求したい場合には、質とは何を指しているのか、なぜ質が違うと言えるのかを具体的に書く必要があります。パーセンテージや年数な
【海外事例に学ぶ】フォーム入力におけるリアルタイムエラー表示のポイント (ユーザビリティ実践メモ)
今回は、A List Apart掲載のルーク・ウロブレウスキ氏(※)による記事、“Inline Validation in Web Forms”をご紹介します。当記事のテーマは、フォーム入力中のリアルタイムエラー表示（インライン・バリデーション）方法の最適化についてです。 まずはフォーム入力におけるリアルタイムエラー表示がどのようなものか、以下のデモをご覧ください。 【動画】�：フォーム入力におけるリアルタイムエラー判定デモ 上記のようなリアルタイムエラー判定のできるフォームについて、ウロブレウスキ氏は21歳から49歳の22人の被験者でユーザ調査を実施しました。 すると、通常の入力フォームと比べ、入力の成功率が22%向上し、エラー率が22%減少、入力時間も42%減少したとのことです。さらに、調査結果からは次のような2つの知見が得られています。
【○×】Q. 会員登録ボタンの存在を多くのユーザに気付いてもらえるよう、サイズを特大（450×150px）にして、その中に画像アイコンや会員登録のメリット訴求文言などを追加した。この判断は正しい。○か×か？: beBit.Q
【解説】ボタンが大きすぎたり、ボタン内に要素を置き過ぎると、ユーザに「画像のかたまり」として認識されてしまい、ボタンであることに気づいてもらえない可能性があります。ボタンの大きさが大きいことは良いことですが程度にも気をつけましょう。 解説詳細 ボタンの形状や大きさ、マウスオン時の挙動などは、「よくある形式」を選択することでユーザの慣れを味方に付けることができます。 もちろん奇抜なデザインや挙動によってユーザの気持ちが高まり、その結果成果につながるケースもありますが、かなり難易度が高いように思います。 今回のケースにおいても、「ボタンを特大に」した結果、周りの要素とのスペースが十分にとれずにごちゃごちゃしてしまったり、普段見ているボタンよりも大きすぎる要素であるためにただの画像と誤認されてしまう危険性があります。 実際、弊社で行ったユーザビリティ調査においても、あるボタンがクリックされないの
コンバージョン直前のユーザがつまずきやすいポイント (ユーザビリティ実践メモ)
コンバージョン率向上を考えた場合、エントリーフォーム最適化（EFO）など、フォーム内の改善に意識が向きがちですが、実はフォームに入る前の段階にも改善すべき点が残されている場合があります。 今回はフォームに入る前のページでよくみられる、ユーザのつまずきやすいポイントをご説明します。 ウェブサイトを訪問しているユーザにとって、個人情報の入力などの手続き行為は主目的ではありません。商品を購入したり、申し込み後にサービスを利用することが本当の目的です。その目的に早く到達するため、手続き行為にはできるだけ手間をかけず、手早く終わらせようとする傾向が見られます。 ここで、注意が必要なのが手続きの途中に会員登録のステップがあるケースです。 ECサイトでは「購入」の手続きの途中で「既存/新規ユーザ」の振り分けが行われる場合がありますが、ユーザは手続きのステップとして「会員登録」が必要あることを必ずしも事前
【○×】Q. あるECサイトの商品一覧ページで、商品をブランド別に絞り込む機能をユーザに使いやすい形で実装したい。前提として現在ブランド数が20あり、今後も増えていく場合、ひとつのプルダウンを用いた絞り込み機能を実装すべき。○か×か？: beBit.Q
【解説】ブランドで絞込みたいユーザは、頭にある「特定のブランド」をすぐ見つけたいと考えています。プルダウンは一度に見える選択肢に限りがあるため、大量の選択肢を詰め込むと、ユーザに適量のスクロールを求める形になり、ユーザの期待に添えない機能になってしまいます。 解説詳細 まず、ブランドで絞り込みたいと考えているユーザがどんなユーザであるか、を想像することから始めましょう。 「ブランドで絞り込みたい」と考えているユーザは「特定のブランド」を頭に浮かべているはずですから、そのブランド名を頭で復唱しながら画面を見ているはずです。 では、その状況下で用意されていてほしい画面は次のうちどちらでしょうか？ 「ブランドFを探しているユーザ」になりきって考えてみましょう。 パターンAのプルダウン方式で探そうとすると、スクロールによる見落としが発生しやすい上、自分が見落としただけなのか、それとももっとスクロー
目的を持ったユーザに、その他の情報を伝えるには？ (ユーザビリティ実践メモ)
更新情報の確認など明確な目的を持ってサイトに定期的に来訪するユーザは、常にサイトの同じエリアを見て、同じように離脱しがちです。 一方で、このように定期的にサイトを訪れてくれるユーザがいる場合、「彼らの目的達成を妨げることなく、都度他の情報も訴求したい」と考えるサイト運営者が多いのではないでしょうか。 １．【 プッシュ型 】 目的達成の過程で情報を提示する固定化しているユーザの視線の動きの途中に情報を挟むことで、ユーザに気づきを与えます。 ■メリット�目に付きやすいので情報伝達の確実性が高く、一部分に手を加えるだけなので手間も少なくすみます。■デメリット�ユーザにとっては目的遂行途中に予期せぬ情報を挿入されることになるので、内容によっては不快感を与えることでサイトに対してマイナスイメージを抱かれてしまう、または当初のユーザの目的達成の妨げになる危険があります。そのため、目的遂行中のユーザ心理
わかりにくい1クリックよりも、わかりやすい2クリック (ユーザビリティ実践メモ)
トップページに多くの要素を盛り込まねばならず、情報の整理に悩んでいる方も多いのではないでしょうか。そんな時、ユーザの文脈を考慮することで情報整理方法が見えてきます。 上の画面例はBtoB向け製品を主に扱っているメーカーサイトのトップページです。各製品カテゴリへのテキストリンクがトップページに配置されており、弊社のユーザ行動観察調査では、はじめてこのサイトを訪れるユーザが「何かごちゃごちゃしている」と言いながら、どこをクリックすべきか迷う傾向が見られました。 そこで、 トップページでは大まかに振り分け、次の階層で各製品カテゴリを選ばせるという図2のような画面に変更したところ、ユーザは目的の製品ページへスムーズに到達できるようになりました。 改善後の画面 目的のページに達するまでのクリック数は少ないほうがよいと言われますが、クリックを減らすことが目的になってユーザを迷わせてしまっては本末転倒で
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
【○×】Q. ある資格講座には異なる3つのコースがあり、各コース詳細を説明するには、費用など計10項目について語る必要がある。 Webページでユーザにコースを選択してもらいたい場合、最初に見せるべきコンテンツは、「各コースの詳細全てを整理した表」であるべき。○か×か？: beBit.Q
【解説】「まず自分に合ったコースをざっくり判断したい」と考えているユーザに情報量が多い複雑な表を見せると、判断に困ったり面倒を感じて離脱される可能性があります。最初は取っ付き易い図やイラストを用意し、各コースの特徴を分かりやすく理解できるよう配慮すべきです。 解説詳細 ユーザの多くは、「難しそうなページ」「面倒を感じるページ」に直面すると拒否反応を起こしてしまいます。 「表」という表現方法は、場合によっては情報を分かりやすく整理してユーザに伝えられますが、含まれる情報量や項目数が増えると、とたんに理解することが難しくなります。 以下のような表も、しっかり動機付けがされていたり、前提知識があるユーザでなければ、一見面倒に見えてしまうのではないでしょうか。 一方、例えば以下のような図を見せられた場合はどうでしょうか。 これを見た後で詳細がまとまった表を見ると、初見のときと比べて気の持ちようがと
【○×】Q. 記事ページのタイトルとなる大見出しはもちろん、本文中にいくつか差し込まれる小見出しについても、ユーザの目を引くように文字サイズを大きく（2段階以上大きなフォントサイズに）したほうが、それに紐づく本文をじっくり読んでもらえる。○か×か？ : beBit.Q
【解説】必要以上に大きいサイズで小見出しを用意すると、本文を読んでいる途中でユーザの視線が次の小見出しに奪われてしまい、流し読みを促進してしまいます。よって、ユーザが落ち着いて文章を読みたいと考えるページでは、控えめなサイズで小見出しを用意すべきです。 解説詳細 ユーザの多くは、目立っている文字や画像にはついつい目が行ってしまうものです。 この行動特性はメディアサイトやブログの記事ページにおいても同様です。 そのため、必要以上に存在感のある小見出しは、本文を読んでいる途中のユーザの視線まで奪ってしまう可能性を含んでおり、せっかくじっくりと本文を読むモードになっているユーザを、流し読みモードに切り替えてしまいかねません。 実際に以下に用意した「小見出しを必要以上に大きくした記事例」を見てみると、本文を読むことに集中することが少々難しいと感じないでしょうか。 一方で、以下のような「小見出しを本
複数カラムレイアウトをどう活かすか (ユーザビリティ実践メモ)
本実践メモでも以前に取り上げたように、ここ数年、横幅900px以上を採用するサイトが増えてきています。 画面横幅を900px以上にするメリットとデメリット。右端が欠けることに注意 横幅の拡大によって、情報を掲載できるスペースは拡大し、実現できる表現の幅も広がります。 もちろんそれらは喜ばしいことですが、自由度が増すからこそ、効果的なスペースの使い方をきちんと考えることがますます重要になります。今回はカラムを複数に切ったレイアウトについて、スペースをどのように活かすべきかを考えてみたいと思います。 複数カラムの使用は、メッセージを分散させる カラムを複数に切って情報を提供することは、1つのページに複数の役割を与えることを意味します。 もちろん、ナビゲーションなどページにとって必要な機能もありますが、より多くのエリアを 定義することはそのページが持つメッセージをぶらしてしまう危険性があることを
プルダウンメニューのページ遷移は自動？手動？ (ユーザビリティ実践メモ)
プルダウンメニューで項目を選択して、ページ遷移（表示変化）を待っているが何も起きない。ユーザ行動観察調査ではこんな光景がよく見られます。 今回は、ページ遷移を伴うプルダウンメニューでよく見かける「ユーザのイメージと異なる挙動をする」設計について考えてみたいと思います。 プルダウンメニューで項目を選択し、次のページへ遷移するのを待っているが何も起きないプルダウンメニューで項目を選択すると、勝手に次のページへ遷移してしまい、違和感を感じた 特に日常的に使用されるサイトでは、ユーザの期待を裏切らない挙動が求められます。以下の例を参考に、ユーザ心理への配慮について考えてみたいと思います。 ページ遷移を伴うプルダウンメニューは、「Go」ボタンなどを設置し、ユーザに手動でページ遷移を行ってもらうのが一般的です。これは、ユーザが誤った項目を選択してしまった場合に、意図しないページに遷移してしまうことを防
【○×】Q.あるサイトのナビゲーションに「商品一覧」という項目がある。これにカーソルを合わせるとサブメニューが出現し、その中に「ブランドA、ブランドB、…」と詳細な導線が用意されている。この場合「商品一覧」はクリックできない仕様とすべき。○か×か？: beBit.Q
【解説】「商品一覧」はクリックできるリンクとすべきです。初めてサイトを訪れるユーザの場合「商品一覧をクリックしたが反応が無い」といったストレスを体験する可能性が高い上、JavaScriptが機能し難いスマートフォンでは導線が利用できなくなってしまいます。 解説詳細 「ナビゲーションの各メニュー項目にカーソルを合わせると子項目が表示される」といった機能は、主にサイトを利用し慣れているユーザがページ遷移をショートカットするために利用する機能です。 そのため、サイトを利用しなれているユーザにとっては、親項目にあたる「商品一覧」がリンクとしてクリックできる必要は無いかもしれません。 しかしながら初心者ユーザ、とくにITリテラシーの低いユーザにとっては、あらかじめ目に見えている導線がリンクとしてクリックできないことは想像できていないため、ユーザがストレスを受けるケースが多く見受けられます。 ユーザ行
【○×】Q.ユーザが画像をざっと見て良し悪しを判断する商品の詳細ページでは、「左：画像、右：文章」、その下は「左：文章、右：画像」と、画像と文章を交互に配置したレイアウトとする方が、そうでない場合に比べて文章にも目を通してもらえる可能性が高い。○か×か？: beBit.Q
【解説】写真画像で良し悪しを判断しようと考えているユーザの視線は、自然と画像と画像をつなぐ形で流れます。画像と文章を交互に配置することでユーザの視線が散らばり、スクロール速度も遅くなりやすいため、比較的文章にも目を通してもらいやすいレイアウトとなります。 解説詳細 例えば、セオリー通り情報が整理されたきれいなレイアウトを達成しようとすると、以下のようになります。 この場合ユーザは、気になる画像があれば横にある文章にも目を移しますが、基本的にはすーっと下に向かって画像だけを眺めてスクロールするといった行動をとりがちです。 また、単調なレイアウトであるためにユーザのスクロール速度も速くなりがちです。 一方、画像と文章を交互に配置したレイアウトでは、ユーザの視線は以下のように散らばってくれる可能性が高くなります。 この場合はユーザが画像から画像に視線を移すタイミングで自然と文章が視野に飛び込んで
なぜその見出しはユーザに気づいてもらえないのか (ユーザビリティ実践メモ)
「あ、そこに書いてあったんですね。探していたんですけど気づきませんでした。」 ユーザ行動観察調査を行っていると、時々ユーザの口からこんな言葉を聞くことがあります。 その原因の一つに、見出し文字が画像要素と判断されて無視されていることが挙げられます。これは例えば、以下のような場合に起こりやすい現象です。 １．画像に画像文字が同化している場合 特に「目的にあった文字・文章を探すモード」となっているユーザは、本文のみを追っているため、画像を見飛ばしてしまいがちです。上図のように見出し文字が白抜きになっているケースでは、さらにそのリスクは高まります。 多くの場合、本文の文字フォントは黒系統か青字（リンク）であるため、ユーザの頭の中に「黒や青い文字を追っていれば…」といった思い込みが生じ、白っぽい要素は文字として認識されづらくなってしまいます。 よって、ユーザが文字や文章を追って情報探索を行うであろ
ECサイトの落とし穴：「よくあるパターン」で安心していませんか？ (ユーザビリティ実践メモ)
ECサイトにおいては、「商品を探す」、「商品を見る」、「カートに入れる」、「購入する」といった基本的な作法は概ね共通化されてきていますが、商品ごとの特性やユーザ心理によっては定型的な情報提供では不十分なケースがあります。 下記のような商品紹介ページでユーザ行動観察調査を行った際、この商品を使用したことのないユーザは、商品特徴や価格を確認した後で「分量」や「目安の日数」を探し回るという行動が見られました。 健康食品は継続して利用するものであり、かつ商品によって1回に使用する分量が異なるため、価格情報だけでは「お得」なのかどうか判断できなかったためです。ところが、商品の分量は商品名に含まれており、なおかつ一回の使用量は商品説明の中に埋もれてしまっており、いずれも価格から離れた位置にあったために気づかれませんでした。 ECサイトの商品ページで提供されている情報については、「価格」、「送料」、「配
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
