検索条件の入力画面で配慮したいインターフェース例
今回は「ユーザが混乱してしまうインターフェースとその解決法」の1パターンを、会員登録をして使うECサイトを例にしてご紹介します。 それでは、上記の状況をどのようなインターフェースで表現すれば良いでしょうか。一例を挙げてみます。 2通りのお届け先のいずれかを、ラジオボタンで選択させる形式です。 図1の場合、弊社のユーザビリティ調査では、お届け先を変更したいユーザがラジオボタンのチェックを忘れ「お届け先の変更」ボタンをクリックしてしまう様子が観察されました。さらに、ラジオボタンと「変更」ボタンのどちらをクリックすれば良いか分からない、と困惑するユーザもいました。 問題の原因は下記の2点が考えられます。 原因 1: 「別のお届け先に送る」と「お届け先の変更」という、同じアクションを想起させる文言が近接している 原因 2: 「変更」ボタンのアフォーダンスが高く、ユーザの行動はボタンのクリックに誘導
検索条件の入力画面で配慮したいインターフェース例 (ユーザビリティ実践メモ)
ユーザに2つの選択方法を提示することが、かえってユーザを適切でない行動に導いてしまうこともあります。今回は検索条件の入力画面を用いて、その一例をご紹介します。 図1のような画面構成で、 チェックボックスを選んでから選択ボタンをクリックすると、チェックボックスがOnとなっている駅名で検索を実行（=複数選択が可能）青字下線をクリックすると、その駅名のみで検索を実行という機能になっていたとします。 この際に行ったユーザビリティ調査では、渋谷か新宿か池袋であればどこでも構わない、といったような複数の選択肢を持つニーズが多く見られたにも関わらず、青字下線のリンクを最初にクリックするケースが度々観察されました。� この画面構成の場合、チェックボックスよりも青字下線リンクの方がアフォーダンスが高いため、多くのユーザは頭に思い浮かんだ駅名をページ内で見つけると、次のアクションとして青字下線リンクをクリック
フォームの離脱率を下げるには (ユーザビリティ実践メモ)
フォームに入った段階で、多くのユーザは商品の購入や、会員の登録など、目的達成のために行動します。 しかし、他に気になる情報が呈示されていると、そこから離脱してしまい、スムーズに目的を達成できない場合があります。 グローバルナビゲーションのようにフォームから画面遷移するリンクは、可能な限りなくした方が良いと思われます。 しかし、フォーム入力中に、ユーザが疑問に思ったことに回答するヘルプなど、情報提示が必要不可欠な場合もあるでしょう。 そうした場合には、フォームから画面遷移することなく、フォームの中で情報提示することが望ましいと思われます。 例えば、フォーム内でのヘルプの見せ方として、javascriptを用いて動的に表示する方法があります。 ヘルプリンクをクリックすると、吹き出しが表示され、その中に情報を提示します。 以上のように、フォームから画面遷移するリンクを排除し、必要な情報はフォーム
テキスト入力エリアにおける空白の価値 (ユーザビリティ実践メモ)
ECサイトの商品検索ボックスなどの入力フォームにおいて、以下のようにテキスト入力エリアに初期値として説明を入れているケースが見られます。 ユーザに入力を促す目的で使われていると考えられますが、この表現を利用しているECサイトで、ユーザに特定の商品の検索を促した際、以下のような行動が見られました。 商品名で検索しようとしたユーザは、まずプルダウンをクリックしました。 ユーザはプルダウンの候補の中で「製品」を選択し、キーワードを入れないまま矢印ボタンをクリックしました。 その結果、カテゴリだけを選んだ状態での検索となったため、キーワードの追加を求めるページが表示されました。 するとユーザは一瞬とまどった様子を見せた後、そのページで改めて製品名で検索し、目的の製品ページにたどり着きました。 その後ユーザへインタビューしたところ、以下のようなコメントが得られました。 キーワードを入れる場所があると
メール認証でユーザを脱落させないためには (ユーザビリティ実践メモ)
会員登録や商品購入の流れの中で、ユーザのメールアドレスにメールを送信し、メール内に記載されたURLをクリックしてもらうことで作業の完了となる『メール認証』を採用しているウェブサイトがあります。 たとえば、あるウェブサイトでは商品注文の途中のステップで次のようなメール認証の説明画面が表示されます。 あるユーザビリティテストでは、この画面の「注文の完了」というメッセージを「このステップを行えば注文が完了します」という意味ではなく「既に注文は完了した」と誤解しメールをチェックすることなくブラウザを閉じてしまうユーザが続出しました。 このケースでは「確認メール」という文言も誤解を招きやすい表現だったようです。これを注文内容の確認メールだと考えてメールチェックを行わないユーザもいたのです。 メール中のURLをクリックしないと注文が確定しないという記述はあるのですが、一旦注文が完了したと思い込んでしま
携帯サイトでは誤クリックにご用心 (ユーザビリティ実践メモ)
携帯サイトを使っているとき、操作キーを連打しすぎてリンクを押し間違えた経験はありませんか。携帯サイトを設計する際は、このような「誤クリック」に配慮する必要があります。 このような画面では「戻る」や「キャンセル」ボタンがセットで配置されていることが一般的であり、画面を作る際は「戻る」ボタンが間違ってクリックされないよう配慮する必要があります。しかし、携帯サイトではリンクの一つ一つにフォーカスが当たってしまうため、リンクが隣接して配置されている場合は特に「勢い余っての誤クリック」が発生する恐れが高くなるのです。 操作キーで操作をする限り、この問題の抜本的な解決は難しいのですが、以下のような次善の策をとることはできます(※効果は機種に依存します)。 「戻る」や「キャンセル」はボタンではなくリンクにする ボタンよりもリンクの方が、フォーカスが当たっていることを認識しやすいためです。 「申し込
自由記述欄の入力率を上げるには 2 (ユーザビリティ実践メモ)
2007年3月5日のユーザビリティ実践メモにて、お問い合わせや資料請求ページにおける自由記述欄の入力率を高めるコツをご紹介しました。 ユーザが入力欄に何を入れていいかわからずに戸惑う可能性があることを考慮し、適切な入力例を添えて入力を促す、という内容です。 詳細はこちら 自由記述欄の入力率を上げるには 入力フォームがあるページを閲覧したユーザにいきなり自由記述欄への回答を促してしまうと、ユーザはたとえ何を記述すればよいかがわかっていても、最初の印象として入力が面倒だと感じて問い合わせや資料請求そのものを諦めてしまう可能性があります。 そこで、まずは入力しやすい個人情報や選択式の項目を配置し、次に自由記述欄を設けることをおすすめします。 このようにすることで、最初にユーザが感じる心理的な負担が少なくなり、ある程度簡単な入力を進めたあとに自由記述欄を見るため、入力作業の敷居が低くなります。
ユーザの心を冷ます「もう一度選ばせる」に注意を (ユーザビリティ実践メモ)
ウェブサイト設計は、ページ単体で捉えるのではなく、それまでに閲覧したページで得た情報や心理状態を踏まえ、「線」で捉えることが重要です。今回はその一例をご紹介します。 ユーザが投稿した記事を掲載するサイトAは、各記事のタイトルまでは公開されており、全文を読むにはログインが必要でした。 タイトル一覧をスクロールしていき、ある記事に関心をもったユーザは、全文を読むため、次に表示されたログイン画面でユーザIDとパスワードを入力しました。 いざ内容を読もうと思った矢先に表示された画面は、タイトルの一覧が並んでいる画面で、お目当ての記事がどこにあるのか、また探さなければなりませんでした。 【ケース2】 あるメーカーサイトの場合 メーカーサイトBでは、扱う商品が多岐に渡るため、各商品を大カテゴリ、中カテゴリといった階層に整理して掲載していました。 ユーザがある商品ページから、「商品に関するお問い
商品の並べ替え機能はユーザニーズに合わせよう (ユーザビリティ実践メモ)
商品点数が豊富なECサイトは、ラインナップの多さ自体をサイトの強みにすることができます。しかし、ユーザが目的の商品を探しづらい場合には逆に、商品点数の多さがマイナスのイメージを与えてしまうことにもなります。 トップページ→商品一覧(商品カテゴリトップページ） →個別商品ページ この流れの中で、商品一覧の中から目的の個別商品にたどり着くまでの絞込みプロセスがスムーズに進むかどうかが、ストレスの少ないECサイトを実現できるか否かの分かれ道の1つになります。 例えば、ソファーを買いたいと思って訪れたECサイトで、トップページから「ソファー」カテゴリーのトップページ（ソファー一覧）に辿りついたとします。 このとき、単にそのECサイトで扱っているソファを羅列するだけ、または価格で絞り込めるだけでは、おそらくユーザは目的のソファをどのようにして選べばよいのか迷ってしまうでしょう。 そこで、ユーザがそ
意外に効果的なフッターリンク (ユーザビリティ実践メモ)
ウェブサイトを訪れたユーザにできるだけ多くのページを閲覧してもらうために、どんな対応が考えられるでしょうか。 他に見たいと思うコンテンツにスムーズに移動できるようにすることが重要となります。 今回は、後者を実現するための手段の一つとして、フッターリンクの有効性についてご紹介します。 ナビゲーションリンクには、一般的には「グローバルナビゲーション」や「左ナビゲーション」「右ナビゲーション」などがありますが、中でもユーザに頻繁に利用されているのはページ下部に配置されたフッターリンクであることが弊社のユーザビリティテストでわかっています。 フッターリンクはページの下部に配置されるナビゲーションリンクであるため、設計時には軽視されがちです。しかし、ユーザにとってはページの上から一通りコンテンツを閲覧した後に出現する関連ページへの最も近い導線であるため、有効な手段となっているわけです。 フッターリン
誤解を避けるコンテンツ配置のコツ (ユーザビリティ実践メモ)
自社商品・サービスのキャンペーンページなど、ユーザが高い期待を持ってページを閲覧する場合によく起こる問題点をご紹介します。 ユーザビリティテストを実施すると、キャンペーン情報に興味を持ってクリックするユーザが多かったのですが、いざキャンペーンページへ遷移するとすぐに興味をなくし、ページを離脱してしまう動きが観察されました。 行動をよく観察すると、ユーザはキャンペーンページに来た後にまず価格（“通常の価格“という部分）に目が行き、これを割引後の価格だと勘違いしたために「安くなっていない」と感じ、ページを戻っていたことがわかりました。 価格には「※通常の価格」という注意書きがあり、ページをスクロールすると割引後の価格も表示されているのですが、なぜユーザは間違えてしまったのでしょうか。 このページを訪問するユーザの心理を考えてみると理由がわかります。 トップページの誘導リンクをクリックしたユーザ
コラム一覧｜ビービット(beBit)- エクスペリエンス・デザイン・パートナー
本コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 本コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し
画像による例示の落とし穴 (ユーザビリティ実践メモ)
検索サイトなど、ユーザが操作方法を学ぶ必要のあるサイトでは、初心者に対して使い方を説明するコンテンツがあると利用の助けになります。 しかし、この画面例の掲載には注意が必要です。 上記のように、サイトをキャプチャした画面例はとてもわかりやすいのですが、このような画面をユーザビリティテストでユーザに提示すると、実際にここから検索を開始しようとする行動が数多く見受けられます(例えば、検索ボックスに入力しようとする、青字リンクをクリックしようとするなど)。 ユーザはこれが画面サンプルであることに気づかず、操作できるものと勘違いしているためだと考えられます。 ユーザの勘違いを防ぐためには、キャプチャした画面であることがすぐにわかるように、 キャプチャ画像を縮小し、該当箇所を明示 サンプルであることを画像上で明示 といった工夫をすると良いでしょう。 ただ、画像を縮小し過ぎたり、サンプルの文字を過度にア
コラム一覧 ｜ - エクスペリエンス・デザイン・パートナー
エクスペリエンスデザイン・パートナーのビービットが執筆したコラム一覧のページです。
コラム一覧 ｜ - エクスペリエンス・デザイン・パートナー
エクスペリエンスデザイン・パートナーのビービットが執筆したコラム一覧のページです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.bebit.co.jp/memo/archives/2007/07/post_71.html
http://www.bebit.co.jp/memo/archives/2007/06/post_70.html
http://www.bebit.co.jp/memo/archives/2007/02/post_55.html
http://www.bebit.co.jp/memo/archives/2006/09/post_37.html
コラム一覧｜ビービット(beBit)- エクスペリエンス・デザイン・パートナー