情報を確実に伝える「近接」テクニック (ユーザビリティ実践メモ)
ウェブサイトに十分な情報を載せているのに、なぜかユーザに正しく情報が伝わらない、そんなケースは多いのではないでしょうか。今回は、実際の事例をもとに、「情報の関連性」を使ったテクニックをご紹介します。 今回取り上げるサイトでは、ウェブや電話では契約の新規申し込みはできないにも関わらず、「契約までの流れが理解されず、申し込みの電話がきてしまう」という課題がありました。対策として、お問い合わせページ内に「契約までの流れ」を記載していました（図1)が、ユーザは全く気付かず電話をしてしまう状況でした。 皆さんなら、どのような改善案を考えますか？（制約条件として、「商品説明」ページなどは修正ができないものとします） ユーザは「探している情報」しか目に入らない ありがちな対策として、「契約までの流れを画面上部に配置し、とにかく情報を見せる」という案があります（図2）。しかしこの案は、あまり効果的とは言え
Webページの情報を共有してもらうための３つのポイント (ユーザビリティ実践メモ)
複数の人が関わるシナリオを意識しよう Webサイトを訪れたユーザが、商品・サービスの購入など何らかの意志決定を行う際、自分ひとりだけの判断で決めず、他の人と相談してから決めるという場合は、実はかなり多いものです。 弊社のユーザ行動観察調査では、以下のような例が見られました。 幹事役の数名が、各自で会場候補を検索各自が自分の選んだいくつかの候補を持ち寄り、どの会場にするか相談決定 【例2．企業におけるIT製品の導入】 部門の担当者が、おおまかな要求仕様を決め、メーカーサイトや販売店サイトを検索性能や価格などを一覧できる比較表を作り、IT管理者などに相談（IT管理者がWebサイトを閲覧する場合もあります）絞り込んだ候補について決裁文書を作り、上司に相談決定 【例3．住宅ローンの借り換え】 妻が金融機関サイトや比較サイトで情報収集夫に相談して候補を絞り込む絞り込んだ金融機関の店舗を夫婦で訪れ、担
「ちら見せ」は逆効果？ (ユーザビリティ実践メモ)
コンテンツへの興味を喚起するためにその内容を一部露出させる、いわゆる「ちら見せ」施策を実施しているサイトも多いかと思います。今回は、その「ちら見せ」施策が逆効果となるケースについて考えます。 ところが、弊社でそのサイトのユーザ行動観察調査を行うと、ユーザはクチコミの最初の数行を数件読んだだけで満足し、会員登録することなくサイトを離脱する、という行動が頻発しました。 これでは逆効果です。 一般的に、クチコミや体験談を調べているユーザは、対象物・対象分野についての知識が少なく(時には不安も感じており)、「概要を把握したい」と思っています。そのため、クチコミを数件見渡して雰囲気を掴むとそれで満足してしまうのです。 このように「ちら見せ」が機能しづらい場合、どのようにすれば良いでしょうか。 有効な方法の一つは、ユーザに会員登録のメリットを体験してもらうことです。例えば、仮登録のような中間ステップを
強引な伝え方は効果的か？ (ユーザビリティ実践メモ)
サイトを運営していてもっとユーザに知らせたいけれどなかなか認知が取れないサービスがあり、もどかしく思った経験はありませんか？今回は、「ユーザに強制的に情報を見せる」例についてご紹介したいと思います。 このサイトでは、ほとんどのユーザがログインするとまず最新情報ページを閲覧し、すぐにログアウトするか他の個別のサービスページに遷移してしまうため、最新情報ページでいかに新しいサービスを訴求するかが課題となっていました。 このような場合、よく使われる手法として以下のようなものがあります。 ポップアップウインドウ ウェルカムページでのFlashムービー 動画の自動再生 ライトボックス（同一画面上にレイヤーを重ね、背景を暗くすることで上レイヤーに注目させる手法） このサイトでは、ライトボックスによる情報訴求が注目度が高く有効であるという仮説を立て、ログインしたユーザが最新情報ページへ移動すると同時に自
ユーザの視線に配慮したページ作り：「表」編 (ユーザビリティ実践メモ)
弊社のユーザ行動観察調査では、アイトラッキング（ユーザの視線分析）を利用していますが、ある程度ユーザ理解があれば、「認知的ウォークスルー」（ユーザになりきってそのサイトを検証する）という手法でも、視線の流れを意識したサイト評価・設計ができるようになります。 今回はWebページ内の表のつくり方を例に、「視線を意識したサイト設計」のヒントをご紹介しましょう。 このニュース一覧は、ぱっと見はきれいなのですが、実際にはユーザの情報収集を妨げています。その理由がわかるでしょうか？ この例の場合、ユーザはまず文頭を見て自分に必要な情報を探すのに対し、文章が中央ぞろえになっているため、視線を左右に動かす必要があり、情報収集の効率を下げています。 そこで、文頭を左寄せにすることで視線がスムーズに流れ、表が読みやすくなります。 ただし、左寄せが万能なわけではありません。次の例をご覧ください。 いかがでしょう
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
振り分け画面でユーザを逃していませんか？ (ユーザビリティ実践メモ)
会員・非会員など、ユーザの状況によってウェブサイトに複数の入り口がある場合、振り分けが必要となります。今回は、そのような振り分け画面での要素の配置についてのコツを紹介します。 この画面を訪れたユーザは、すでにサービスに入会している方でしたが、少し迷った末、一番上の「○○プランお申し込み」（新規入会者用のリンク）をクリックしてしまい、かなり先に進むまで自分が間違えていることに気づきませんでした。 そこで、上の画面を、次のように変えてみたところ、ユーザはスムーズに自分の状況に適したリンクを選択することができるようになりました。 この画面で問題が解消された最大のポイントは、振り分けの要素を左右に並べたことです。 人は左右に並んでいる要素に対しては「対等な要素」、あるいは「対比されている要素」だと認識する傾向があります。したがって、左右に要素を並べられると、無意識的に「2者を比較しよう」というモー
見出しは冒頭15文字が勝負 (ユーザビリティ実践メモ)
ニュースサイトや一部のブログなど、日常的に数多くの情報を扱うニュース系のサイトでは、見出しの配置や優劣がユーザの行動に大きな影響を与えます。 商品の比較や購買のためにECサイトを訪れるようなユーザと大きく異なり、ニュース系サイトのユーザは以下のような行動特性を示します。 特定の目的を持たずにサイトを訪れ、興味を引く情報を探す見出しを流し読みし、興味があるものだけクリックして詳細を見る短時間に、必要最低限の情報を得ようとする 弊社のユーザビリティテスト（ユーザ行動観察調査）では、こういった流し読みの際にユーザに認識されるのは、冒頭の15文字程度であることがわかっています。アイトラッキングによる観察では、ひとつひとつの見出しを読むのではなく、ほぼ一直線に視線を進めていきます。 【参考ページ】 アイトラッキング分析 つまり、この15文字の中に、リンク先の内容が想像できて、なおかつ興味を引く言葉を
【海外事例に学ぶ】「会員登録はこちら」を用いない会員化シナリオ (ユーザビリティ実践メモ)
今回は、A List Apart.掲載のLuke Wroblewski氏による記事、"Sign Up Forms Must Die"をご紹介します。 ユーザにウェブサービスを提供する上で、まずは「会員登録」を求めることはよくあることだと思いますが、今回は、「まずは会員登録」から始めずユーザの会員化を実現する方法についての記事です。 旧来の「まずは会員登録」の事例： 動画共有サイトの一つ、 Google Video( http://video.google.com/)を例にとります。ユーザはGoogle Videoに訪問し、色々な動画を見ていく中で、自分もウェブ上に動画を公開してみたいと思います。そこで、「ビデオをアップロードする(Upload Video)」を押すと、その機能を利用するためのアカウント作成を初めに求められ、以下の会員登録ページにたどり着いてフォームへの情報入力を求められます
携帯サイトではメール受信設定への対応が重要 (ユーザビリティ実践メモ)
携帯サイトでの会員登録で、メールアドレス確認のためにユーザが入力したメールアドレスに仮登録メールを送信し、メールに書かれたURLから本登録をさせるフローにすることがあります。 弊社で行ったユーザビリティテスト（ユーザ行動観察調査）では、携帯サイトでの会員登録の途中で、自分の携帯電話に仮登録メールが届かず、ユーザが混乱して登録をあきらめてしまうケースが多数見られました。 このサイトでは、会員登録フローの画面上でメール受信設定についての記述がなかったため、メール受信設定をしていたユーザは、仮登録メールを受信するにはドメインを新たに追加する必要があることに気づきませんでした。 このような事態を防ぐために、携帯サイトではメール受信設定についてきちんと記述し、ユーザが自社のドメイン/メールアドレスを確実に追加できるようにしておくことが重要です。 この時に気をつけるポイントは2つあります。 1つ目は、
携帯サイトのフォーム設計のコツ (ユーザビリティ実践メモ)
PC向けサイトの資料請求ページなどでは、入力フォームに近接して入力例を置くことで入力形式の違いによるエラーを防ぐことができます。 しかし携帯サイトの場合、入力フォームの周りに入力例を表示したとしても、パソコンとは違い実際にユーザが入力する際には入力画面に切り替わってしまうため、ユーザが例を見ながら入力することができません。 入力フォームについてもう1点注意することがあります。 例えば上記にて、年月日の入力フォームを縦に並べてしまうと、スクロールのしかたによっては携帯サイトの画面に月日の入力フォームが表示領域外に隠れて見えなくなるケースが発生し、ユーザが誤って年のフォームに月日も同時に入力してしまう可能性があります。 入力フォームは横並びにする、入力フォームに文字数制限を設けることが有効です。 同じ役割を持つ画面でも、PCと携帯という物理的な環境やユーザの使用環境の違いを考慮すると違った設計
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
IDを指定してもらうタイミング (ユーザビリティ実践メモ)
会員登録手続き等、入力フォームにおいてユーザに好きなIDを指定してもらう場合、ID入力フィールドの画面設計に注意が必要です。 弊社で行った同様の入力フォームの調査では、何のIDを入力してよいかが分からず「ここには何を入力すればいいの？」と困惑するユーザが確認されました。 こうしたケースでは、ユーザに運営者側の意図を伝えられているかどうか、忘れずにチェックを行いましょう。 IDの入力フィールド付近に「ご希望のIDを指定してください」といった文言を添え、ユーザにIDを指定してもらうことを明確にする冒頭にあるID・パスワードの入力フィールドは、所有ID・パスワードの入力と誤解されやすいため、できる限り冒頭に設置しない （但し、その前の文脈から、ユーザがIDを新しく取得する意思を持ってこのページに来ているとすれば、この限りではありません） 上記の工夫を施したフォームでユーザビリティテスト（ユーザ行
プルダウンメニューの初期値 (ユーザビリティ実践メモ)
選択肢の多いプルダウンメニューから目的の項目を選び出すのは、ユーザにとって面倒な作業です。 今回はこの負担を少しでも軽減するために、今すぐできる改善施策をご紹介します。 例えば、あるサイトには昭和10年から平成19年の中から、自分の生まれた年を選択するプルダウンメニューがありましたが、プルダウンメニューの初期値を設定していなかったため、上記の中からスクロールを繰り返し、自分の生まれた年を探し出さなければなりませんでした。 改善策として、このサイトは若年層をメインターゲットとしていることに着目し、初期値を昭和61年とし、ユーザの負担を軽減しました。 【ご参考】プルダウンメニューの初期値を設定するhtmlタグ「selected」 <select name="XXX"> <option value=“59”>1984/昭和59年 <option value=“60”>1985/昭和60年 <op
無視されるテキストリンク (ユーザビリティ実践メモ)
「○○はこちらから」というテキストリンクはよく使用されていますが、 ユーザビリティテスト（ユーザ行動観察調査）を行うと無視されてしまうケースが多数見られます。 今回は典型的な例を紹介します。 弊社のユーザビリティテスト（ユーザ行動観察調査）では、申し込みをしようとしていたユーザがリンクに気付かず、ページ内を探し回る動きが見られました。 この例には複合的な問題が含まれています。 まず、「申し込み」という情報が周りの文章に埋没してしまっていることが問題です。 申し込みに関する記述が何かの説明文に見えるため、自分に関係のない情報と認識されてブロックごと読み飛ばされてしまいます。 また、赤字で目立たせている箇所が「こちら」という、遷移先のページが想像できないリンク名になっているため、ユーザの注意をひきつけることができません。 直前に「お申し込みは」とあるのですが、多くのユーザは流し読みをする傾向が
検索条件の入力画面で配慮したいインターフェース例
今回は「ユーザが混乱してしまうインターフェースとその解決法」の1パターンを、会員登録をして使うECサイトを例にしてご紹介します。 それでは、上記の状況をどのようなインターフェースで表現すれば良いでしょうか。一例を挙げてみます。 2通りのお届け先のいずれかを、ラジオボタンで選択させる形式です。 図1の場合、弊社のユーザビリティ調査では、お届け先を変更したいユーザがラジオボタンのチェックを忘れ「お届け先の変更」ボタンをクリックしてしまう様子が観察されました。さらに、ラジオボタンと「変更」ボタンのどちらをクリックすれば良いか分からない、と困惑するユーザもいました。 問題の原因は下記の2点が考えられます。 原因 1: 「別のお届け先に送る」と「お届け先の変更」という、同じアクションを想起させる文言が近接している 原因 2: 「変更」ボタンのアフォーダンスが高く、ユーザの行動はボタンのクリックに誘導
フォームの離脱率を下げるには (ユーザビリティ実践メモ)
フォームに入った段階で、多くのユーザは商品の購入や、会員の登録など、目的達成のために行動します。 しかし、他に気になる情報が呈示されていると、そこから離脱してしまい、スムーズに目的を達成できない場合があります。 グローバルナビゲーションのようにフォームから画面遷移するリンクは、可能な限りなくした方が良いと思われます。 しかし、フォーム入力中に、ユーザが疑問に思ったことに回答するヘルプなど、情報提示が必要不可欠な場合もあるでしょう。 そうした場合には、フォームから画面遷移することなく、フォームの中で情報提示することが望ましいと思われます。 例えば、フォーム内でのヘルプの見せ方として、javascriptを用いて動的に表示する方法があります。 ヘルプリンクをクリックすると、吹き出しが表示され、その中に情報を提示します。 以上のように、フォームから画面遷移するリンクを排除し、必要な情報はフォーム
テキスト入力エリアにおける空白の価値 (ユーザビリティ実践メモ)
ECサイトの商品検索ボックスなどの入力フォームにおいて、以下のようにテキスト入力エリアに初期値として説明を入れているケースが見られます。 ユーザに入力を促す目的で使われていると考えられますが、この表現を利用しているECサイトで、ユーザに特定の商品の検索を促した際、以下のような行動が見られました。 商品名で検索しようとしたユーザは、まずプルダウンをクリックしました。 ユーザはプルダウンの候補の中で「製品」を選択し、キーワードを入れないまま矢印ボタンをクリックしました。 その結果、カテゴリだけを選んだ状態での検索となったため、キーワードの追加を求めるページが表示されました。 するとユーザは一瞬とまどった様子を見せた後、そのページで改めて製品名で検索し、目的の製品ページにたどり着きました。 その後ユーザへインタビューしたところ、以下のようなコメントが得られました。 キーワードを入れる場所があると
携帯サイトでは誤クリックにご用心 (ユーザビリティ実践メモ)
携帯サイトを使っているとき、操作キーを連打しすぎてリンクを押し間違えた経験はありませんか。携帯サイトを設計する際は、このような「誤クリック」に配慮する必要があります。 このような画面では「戻る」や「キャンセル」ボタンがセットで配置されていることが一般的であり、画面を作る際は「戻る」ボタンが間違ってクリックされないよう配慮する必要があります。しかし、携帯サイトではリンクの一つ一つにフォーカスが当たってしまうため、リンクが隣接して配置されている場合は特に「勢い余っての誤クリック」が発生する恐れが高くなるのです。 操作キーで操作をする限り、この問題の抜本的な解決は難しいのですが、以下のような次善の策をとることはできます(※効果は機種に依存します)。 「戻る」や「キャンセル」はボタンではなくリンクにする ボタンよりもリンクの方が、フォーカスが当たっていることを認識しやすいためです。 「申し込
検索結果がゼロだった場合の対処 (ユーザビリティ実践メモ)
規模の大きいショッピングサイトや求人、旅行、不動産などの情報サイトでは、価格帯や機能などの条件指定による検索や、フリーワードの検索機能が提供されています。 ただ自由度が高い反面、想定通りの検索結果が返ってくるとは限りません。 複合条件で絞り込んだ場合などは、検索結果が1件も表示されないことが頻繁に発生します。 そのため、検索結果ページのユーザビリティが重要になりますが、この時の検索結果ページの表示次第では、望ましくないユーザ行動が起こります。例えば、以下のようなメッセージがただ無機質に表示されるウェブサイトもあります。 『検索条件に該当する商品は見つかりませんでした。』 次に向かうべき先が見つからない場合、多くのユーザは、そのサイトには希望するページが無いのだろうと判断してしまいます。そしてサイトを立ち去ってしまうのです。 検索結果が無かった場合には、まず条件に合致したページが見つからな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
