FAQの隠れた役割 (ユーザビリティ実践メモ)
ユーザから頻繁に問い合わせを受ける質問に対応するため、多くのサイトでは、「Q&A」や「よくあるご質問」といったFAQ（Frequently Asked Questions）コンテンツを用意しています。 今回はFAQを効果的に活用する見せ方について考えていきます。 FAQはユーザが持つ疑問の解決につながりますが、ユーザはサイトを利用するなかで、FAQをそれほど意識して探しにはいかないことに注意が必要です。 では、FAQはページのどこに配置するのがよいでしょうか。 ヘッダーエリアか、左右のナビゲーションにFAQのリンクが配置されているパターンを思い浮かべる方が多いでしょう。（図１） ユーザは、コンテンツエリアを中心に見ていくため、意識的に探さないとFAQがあることに気付きません。 サイトの共通要素として、問い合わせなどと同様、どのページにも同じ位置に配置すべきですが、それに加えて、コンテンツを
Ajaxによるエラーチェックの注意点 (ユーザビリティ実践メモ)
入力フォームについて、最近ではAjaxを用いることで、「送信」ボタンをクリックする前にエラーチェックをする手法が使われるようになっています。 今回はリアルタイムでフォームのエラーチェックを行う場合の注意点について考えてみます。 あまり良くない例：Remember the Milkの登録画面 http://www.rememberthemilk.com/signup/ ユーザ名を入力する欄では、入力と同時にエラーチェックが行われるため、多くの場合1文字目からエラーが表示されます。 2文字目を入力すると即座にエラーメッセージが更新されます。 ユーザが当初から自分のユーザ名として考えていた「bebittaro」を入力し終えると、利用可能である旨のメッセージが表示されます。 上記は入力に対しリアルタイムでフィードバックを返すことで誤入力を避けようという工夫ですが、ユーザが入力を終える前にエラー表示
携帯サイトのフォーム設計のコツ (ユーザビリティ実践メモ)
PC向けサイトの資料請求ページなどでは、入力フォームに近接して入力例を置くことで入力形式の違いによるエラーを防ぐことができます。 しかし携帯サイトの場合、入力フォームの周りに入力例を表示したとしても、パソコンとは違い実際にユーザが入力する際には入力画面に切り替わってしまうため、ユーザが例を見ながら入力することができません。 入力フォームについてもう1点注意することがあります。 例えば上記にて、年月日の入力フォームを縦に並べてしまうと、スクロールのしかたによっては携帯サイトの画面に月日の入力フォームが表示領域外に隠れて見えなくなるケースが発生し、ユーザが誤って年のフォームに月日も同時に入力してしまう可能性があります。 入力フォームは横並びにする、入力フォームに文字数制限を設けることが有効です。 同じ役割を持つ画面でも、PCと携帯という物理的な環境やユーザの使用環境の違いを考慮すると違った設計
色や模様が購入の決め手となる商品の見せ方 (ユーザビリティ実践メモ)
ECサイトでの商品画像の出し方についてはこれまでも何度か取り上げてきました。今回は衣料品やアクセサリーなど、同じ形状であっても色や模様によって購入意欲が変わってしまう商品の見せ方について考えます。 図1：商品一覧画面と商品詳細画面 上記のサイトを訪れたユーザは、商品一覧画面を見てBのシャツの形状は気に入ったのですが、灰色ではなく水色のシャツが欲しかったので、Bのシャツの商品詳細を閲覧しようとはしませんでした。その後、しばらく一覧画面を閲覧した末、別の商品を探しに他のサイトに行ってしまいました。 実はBのシャツには水色の商品もあったのですが、ユーザは一覧画面の写真だけで判断してしまったため、水色のシャツの存在に気がつかなかったのです。 衣料品やアクセサリーのような商品は色違いや模様違いというだけでユーザには全く別の商品だと認識されてしまいます。そのため、同じタイプで三色を展開しているものであ
すぐ、その場で修正できる確認画面 (ユーザビリティ実践メモ)
ECサイトの購入フォームや、会員サービスの入会申し込みフォームでは、ユーザが名前や住所など多くの項目を入力しなければなりません。
可読性の大切さ、見直してみませんか？ (ユーザビリティ実践メモ)
アメリカのIT関連調査会社フォレスター・リサーチの調査結果(※1)によると、「ウェブサイトの失敗項目で最も多いものは、文字の可読性である」ということが指摘されています。確かに文字の可読性はユーザビリティの基本事項ですが、実際のところ、可読性はユーザ行動にどの程度影響を与えるのでしょうか？実例を交えてご紹介します。 弊社でユーザビリティテスト（ユーザ行動観察調査）を実施したところ、図1のパターンでは、ユーザは1ページ目の画面を一瞥しただけで閲覧をやめてしまいました。コンテンツの冒頭を読んでから判断したのではなく、全く読みもしなかったのです。その理由として、ほとんどのユーザが「なんとなく暗い感じがして、読む気がしないから」と回答しました。 背景色そのものにも原因はあったでしょう。しかし、ユーザに敢えてコンテンツを読んでもらったところ、「内容はとても面白い、商品に魅力を感じた」との回答が得られた
ユーザの訪問頻度を考慮したトップページ設計 (ユーザビリティ実践メモ)
今回は「ユーザの訪問頻度」を考慮した工夫について、ニュースサイト（※1） のトップページを題材に取り上げます。 ※1 記事コンテンツを中心としたメディアサイトを「ニュースサイト」と定義しています。 例えば、あるニュースサイトでは、１日に記事を2、3本配信しており、トップページではその日の最新記事3本を大きく見せるレイアウトを採用していました。 今日の最新記事が面積を大きく取っているため、情報が更新されたことが伝わりやすくなっています。1日1回以上の頻度でサイトを訪れるユーザにとっては、新しい情報だけをすぐに手に入れることができる好ましい設計であると言えます。� しかしアクセス解析の結果、このサイトには週に1回程度の頻度で訪れるユーザが圧倒的に多く、毎日訪れるユーザはごく少数であることが分かりました。つまり、多くのユーザにとっては15-20本程度の『まだ見ていない記事』があるにも関わらず、ト
ユーザの商品探索プロセスとサイト上の注意点 (ユーザビリティ実践メモ)
家具、日用品などを扱うECサイトでは、ユーザがサイトに訪れてからどの商品を購入するかを検討する行動が多く見られます。このようなサイトでは、ユーザがいかに目的とするものにスムーズに辿り着けるかが特に重要となります。 こうした問題に対処していく場合、次のようなユーザの行動特性を踏まえる必要があります。 ユーザは最初に、探しているものの形状、大きさなどの大まかな特徴を含んだ表象(注)を形成します。 （「リビングに置くための低めのテーブルが欲しいなあ」といった漠然としたイメージを思い描いています。） (注)表象・・・ある存在に対する頭の中の対応物。イメージ。 イメージがあいまいで直接具体的な商品が引き出せないため、一旦像を抽象化します。 （一般名詞としての「机」を想起します） 外部の視覚的刺激を受けて探しているものが属するカテゴリを同定します。 （画像やカテゴリ名を頼りに、探しているものが「ローテ
Googleの「サイトリンク」を活用する (ユーザビリティ実践メモ)
Googleで企業名、団体名、サイト名などを入力して検索すると、最上位の検索結果に、トップページへのリンクだけではなく、サイト内のカテゴリ別のトップページなどが表示されます。 Googleのヘルプでは、 サイトリンクは、ユーザーの役に立つと Google が判断した検索結果についてのみ表示します。 サイトの構造が原因で Google のアルゴリズムが適切なサイトリンクを見つけることができない場合や、サイトリンクとユーザーのクエリとに関連性がないと思われる場合、サイトリンクは表示されません。 という説明がされています。 弊社のユーザビリティテスト（ユーザ行動観察調査）では、このサイトリンクが頻繁に利用されている様子が観察されています。 たとえば「住宅ローンを探す」という設定下では 銀行名で検索 その銀行のトップページ＋サイトリンクが最上位に表示される サイトリンクの中に「住宅ローン」という文
世の中の関心事を踏まえて対応する (ユーザビリティ実践メモ)
インターネットの浸透の高まりに伴って、マスメディアの影響力の低下が取り上げられることが増えています。 ただ現在でも、マスメディアの報道等によってユーザの心理が影響されることは少なくないと考えられます。 例を挙げて考えてみましょう。 今年1月に明らかになった中国製ギョーザの中毒問題は、マスコミで連日大きく取り上げられてきました。 現在でも加工冷凍商品の売上げが落ち込んでいるなど、食品や健康関連の商品の原材料や製造国に対するユーザの意識は、事件以降変化していると考えられます。 こうした変化を踏まえると、仮に国産であることが自社商品のアピールポイントではなかったとしても、その商品が国内で生産・産出したものであれば、「国産」であることを積極的に示した方が、それを意識しているユーザの不安を払拭することに繋がります。 実際、弊社のユーザビリティテスト（ユーザ行動観察調査）では、ある健康関連の商品を紹介
リンクは青字下線？ (ユーザビリティ実践メモ)
テキストリンクは青字下線で表すことが一般的ですが、最近では、デザイン性を重視して敢えて青字下線を使用しないサイトも増えてきています。 そこで今回は、リンクの見せ方について検討してみたいと思います。 具体的には、青色以外のリンク色を用いる場合は、 下線をつける サイトの背景色や他のテキストに埋没してしまう色にしない という配慮がなされていれば、ある程度自由な色であってもユーザビリティに影響はないということが観察されています。 下線を使わない場合は、リンク色は青色のままの方が望ましいようです。加えて、「オンマウスで下線表示、または色反転する」といった何らかのフィードバックを演出すると、リンクであることがより明確に伝わるようになります。 リンクの見せ方の注意点としては、他にも サイトの中で一貫性を持たせる(例：ページごとに下線があったりなかったりするのは原則NG) 一般的なルールから逸脱しない(
説得不要ユーザを考慮した入口ページ設計 (ユーザビリティ実践メモ)
会員登録やサービス申込などのコンバージョンをゴールとしているウェブサイトのターゲットは、そのゴールの達成までに「説得が必要なユーザ」と、「説得が不要なユーザ」の2タイプに分けて考えることができます。 今回は、後者の「説得が不要なユーザ」について取り上げます。 このサイトには、非会員が利用できるサービスもあるのですが、入口ページで会員登録へのリンクを目にしたユーザが、即座に登録を開始しました。 このユーザは、会員登録へのリンクを見たことで、登録した方が多くの機能を使えるのだろうと予想し、とりあえず登録しておこうと考えたのです。 こうした「説得が不要なユーザ」の存在については、アクセス解析による定量的な事例もあります。 あるサイトで、会員登録のボタンをトップページ右上から左上に移動し、クリエイティブを目立つものに変更しました。 この変更の結果、トップページ流入直後の会員登録率が増加し、同時にサ
マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ)
しかし、プルダウンでの項目選択を行う入力フォームにおいては、この便利さが逆効果になる場合があります。弊社のユーザビリティテスト（ユーザ行動観察調査）で観察された例をご紹介しましょう。 1ページの入力項目が多く、何度かスクロールしなければ「次へ」のボタンまでたどり着けない入力フォームを使うという作業で、ほとんどのユーザはホイールを使いながら入力を進めて行きました。 その中で、あるユーザがプルダウンの項目を選択し終え、ページをスクロールして次の項目へ入力を進めようとホイールを操作したところ、直前に入力したプルダウンにまだフォーカス（ハイライト）が当たった状態であったため、選択項目が別のものに変わりました。つまり、ホイール操作がページのスクロールではなく、プルダウン内の選択項目の移動に使われたということです。 ユーザはページがスクロールしないことにすぐ気づき、ページ内の空白部分をクリックしてプル
フォームの離脱を防ぐ心遣い (ユーザビリティ実践メモ)
資料請求や申込みフォームにおけるユーザの離脱を防ぐ方法はこれまでもご紹介しましたが、今日は「入力フォームに遷移する手前」で行う離脱を防ぐ心がけを私の実体験からご紹介したいと思います。 郵便番号、住所、名前と入れ画面をスクロールすると、次の項目に、「お客さま番号」という項目があることを見つけました。 始め、このお客さま番号が何の番号か思い当たらなかったのですが、入力欄の脇にある「お客さま番号とは」というリンクから、毎月届く領収証（「電気ご使用量のお知らせ」）に記載されている番号であることがすぐにわかりました。（このサイトでは、実際の領収証のイメージで説明しており、とてもわかりやすくなっていました） しかし、領収証の保管場所をすぐに思い出せなかった私は、また後日手続きを行おうと思いここで画面を閉じてしまいました。 皆さんはこのような経験をされたことはないでしょうか？ このような状況にユーザが置
ソフトウェア紹介ページでの画像の使い方 (ユーザビリティ実践メモ)
ECサイトで、商品写真を積極的に使ってユーザの購買意欲を高める手法について、これまで何回か取り上げてきました。 実際の大きさがイメージできる商品写真を置こう写真で魅せる商品紹介 今回は、ソフトウェアやWebサービスなど、形のない商品を紹介するページにおいてユーザの意欲を高める方法を考えます。 通常このようなページでは、商品・サービスのメリットやしくみ（操作手順）を以下のような方法で訴求することになります。 文章のみで説明図＋文章で説明実際の操作画面のキャプチャを表示 弊社のユーザ行動観察調査で、上記の３パターンのページを見せ、反応を観察したところ、 文章のみ→ほとんど読まれない（スクロールもせずに別のページに移ってしまう） 図＋文章→視線が止まり、図の表す意味について考え始める。場合によってはそこで閲覧を止めてしまう 画面キャプチャ→画像を確認しつつ、次々と読み進めていく という傾向が
画面メモを意識した携帯サイト制作 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザは、携帯で情報収集を行う際、画面メモを好んで使用します。 (なお、サイトによっては「後で見る」機能が提供されていますが、その場合でも画面メモが優先的に使用される傾向があります。) このとき、ユーザは「めぼしいものをさっさとチェックしたい」という心理でいるため、画面メモのタイトルを自ら変更することはありません。閲覧しているページのページタイトルがそのまま画面メモのタイトルとなる場合がほとんどです。 従って、携帯サイトを制作する際には「画面メモリストを後から見ても、何のページか分かるようなページタイトルをつける」という配慮が重要です。 例えば、ある賃貸物件検索サイト(仮にサイトの名前を「住宅情報ビービット」とします)では、次のような状況が発生しました。 ユーザは条件を変えながら物件を検索し、その中で、めぼしい物件ページをいくつか画面メ
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
画像一つ使う際にもユーザーが何を感じ取るかを考えよう (ユーザビリティ実践メモ)
今回の実践メモは、2007年10月5日に行われたSimple*Simple（本稿末尾にて紹介）主催「ウェブサービスインターフェース勉強会」における弊社プレゼンテーションの内容をまとめたものです。 サイト運営者としては装飾程度の位置づけで配置した写真・イラストでも、ユーザの行動を変えてしまう大きな影響力を持つ可能性があります。 弊社のユーザビリティテスト（ユーザ行動観察調査）にて、ある住宅ローン紹介サイトを訪問し、内容に興味を持ってお問い合わせページを閲覧したユーザが、ヘッドセットをかけたコールセンターの人物写真を見て、問い合わせ意欲が下がってしまうという行動が観察されました。 理由として、「大きなお金が動く住宅ローンなので、銀行の支店にいるようなローンの専門家が対応してくれるなら問い合わせたいが、コールセンターでは詳しい相談ができないのではないか」という不安を抱いていたことがわかりました。
メーカー直販サイトでの情報提供のコツ (ユーザビリティ実践メモ)
【お詫び】9/3の初出時、誤って以前の記事を公開していました。読者の皆さまにお詫びするとともに、記事を差し替えさせていただきます。 ECサイトを利用するユーザは、必ずしも明確に欲しい製品が決まってからそのサイトを訪れているわけではありません。 このような場合、ユーザは購入するかどうかの判断材料を求めて、ECサイト内や、メーカー自身のサイトで、その製品に関するさらに詳しい情報を探します 。 特に、メーカーが運営している直販サイトの場合、メーカー自身の製品紹介サイトで、正確で詳しい製品情報を入手できることをユーザは期待しています。 ところが、実際のメーカー直販サイトでは、直販サイトと製品紹介サイトの連携が取れておらず、直販サイト内の個別商品購入のページにいるユーザが、改めて製品紹介サイトのトップページにアクセスし、製品を探し始めるという例が、弊社のユーザビリティテスト（ユーザ行動観察調査）で観
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
