サイトID（ページ左上の会社ロゴ）のリンク先はどうあるべき？ (ユーザビリティ実践メモ)
サイトIDとは、「何のサイトか」「誰が運営しているサイトか」を表現する企業やブランドのロゴマークのことで、ページ左上に設置されるのが一般的です。 「サイトの顔」とも言えるサイトIDは、ユーザが「サイトの基点（多くの場合トップページ）に戻りたい」と思うときクリックすることが多いですが、サイトによってはユーザの予期しないリンク先が設定されており、ユーザが困惑してしまうことがあります。 今回は、サイトIDの最適なリンク先について検討したいと思います。 ビービットのアメリカ現地法人、ビービットアメリカの情報が掲載されているサイトです。このサイトでは、全社共通の企業ロゴ（赤枠）と現地法人名（青枠）がサイトIDとして表示されています。サイトIDのリンク先としては、以下の3パターンが考えられますが、どのリンク先が最もふさわしいでしょうか。 1. 全社共通の企業ロゴ（赤枠）はビービット本社トップページへ、
英語圏ユーザの行動の特徴 (ユーザビリティ実践メモ)
今回は、弊社で実施した英語でのユーザビリティテスト（ユーザ行動観察調査）から、日本人ユーザと英語ネイティブユーザの行動の違いをいくつかご紹介します。 検索サイトの利用行動の特徴として、日本人に比べ比較的検索語が長い、という点が挙げられます。 例えば、あるメーカーの製品を比較検討している場合、 compare Product A to B （＝製品AとBを比較する） Product A where to buy（＝製品Aをどこで買うべきか） のように、ほとんど文章に近い複数語を使って検索する例が多く見られました。 また、目的のサイトにたどり着いた後でも、製品カテゴリをたどるのではなく、複数語を使ってのサイト内検索を多用する傾向が見られました。 これには、 キーボード利用の文化があり、日本人に比べキーボードへの抵抗感が少ない 変換の手間がない分、日本語よりも入力が楽 などの理由から、より短時間
「メッセージ」を利用した訴求方法 (ユーザビリティ実践メモ)
自社サイトの会員に対し、「キャンペーンの告知」、「新製品の訴求」や「おすすめサービスの宣伝」を行いたいという状況はよくあると思います。 しかしバナーなどによる訴求ではユーザに無視されてしまい、思うように成果が上がらないというケースも多いのではないでしょうか。 弊社が行ったユーザビリティテスト(ユーザ行動観察調査)において上記のような「メッセージ」による訴求方法を試したところ、多くのユーザが自分にどのようなメッセージがあるのかと、確認する動きが見られました。 これはユーザの名前を表示し、メッセージという形をとったことで、「自分に関連のあるもの」がその先にあるという意識がユーザに働いたためだと思われます。 その結果、バナーなどでは認知されなかった「訴求したいもの」がユーザに認知されたのです。 「訴求したいものがユーザになかなか気付いてもらえない」とお悩みのサイト運営者の方は、「メッセージ」によ
ユーザ心理を捉えてリスティング広告を改善する (ユーザビリティ実践メモ)
多くのサイトがリスティング広告を出稿していますが、過去に色々なキーワードで出稿してみたが、「獲得効率が悪い」「コンバージョンしない」などの理由で、現在は獲得単価の安い企業名やサービス名のいわゆる「指名買いキーワード」のみ出稿し、その他の関連キーワード（複合語）は出稿していないというお話を伺うことがあります。 しかし、関連キーワードの出稿は本当に停止すべきなのでしょうか？ ここでは、ある大手インターネットサービス企業での改善事例をご紹介します。 この業界には多数の競合サービスが存在しており、多くのユーザがサービスの利用を検討する際に価格.comなどでサービスの比較を行います。 実際に、検索されているキーワードでも、「●●（サービス名） 比較」「●●（サービス名） ランキング」など、サービスを比べようとしていると考えられるキーワードが多数見られます。 この企業のサービスは、単純に価格だけで比べ
振り分け画面でユーザを逃していませんか？ (ユーザビリティ実践メモ)
会員・非会員など、ユーザの状況によってウェブサイトに複数の入り口がある場合、振り分けが必要となります。今回は、そのような振り分け画面での要素の配置についてのコツを紹介します。 この画面を訪れたユーザは、すでにサービスに入会している方でしたが、少し迷った末、一番上の「○○プランお申し込み」（新規入会者用のリンク）をクリックしてしまい、かなり先に進むまで自分が間違えていることに気づきませんでした。 そこで、上の画面を、次のように変えてみたところ、ユーザはスムーズに自分の状況に適したリンクを選択することができるようになりました。 この画面で問題が解消された最大のポイントは、振り分けの要素を左右に並べたことです。 人は左右に並んでいる要素に対しては「対等な要素」、あるいは「対比されている要素」だと認識する傾向があります。したがって、左右に要素を並べられると、無意識的に「2者を比較しよう」というモー
あと１％離脱を減らすフォームのテクニック (ユーザビリティ実践メモ)
資料請求や申し込みフォームにおけるユーザの離脱を防ぐ方法はこれまでにもご紹介してきましたが、今回は「さらに一歩」改善するためのテクニックをご紹介いたします。 例えばECサイトのフォームでは支払い方法や配送方法など、ユーザに様々なオプションを選ばせることがよくあります。選択肢が多いことは利便性にも繋がりますが、一方でそれが離脱の原因になっている可能性もあります。 ユーザはフォームが縦に長かったり入力欄が多く見えると、「入力が面倒そう」と思い離脱の可能性が増えます。 以下は改善例です。支払い方法を選択するラジオボタンをクリックしてみてください。 選択したオプションに関連した情報だけを出す、言い換えると「要らないものは隠してしまう」のです。 クレジット決済をしたいと思っているユーザには、銀行振り込みや代金引換の注意書きは不要ですから、余計な情報を隠すことでフォームが簡単に見え、離脱を減らすことが
見出しは冒頭15文字が勝負 (ユーザビリティ実践メモ)
ニュースサイトや一部のブログなど、日常的に数多くの情報を扱うニュース系のサイトでは、見出しの配置や優劣がユーザの行動に大きな影響を与えます。 商品の比較や購買のためにECサイトを訪れるようなユーザと大きく異なり、ニュース系サイトのユーザは以下のような行動特性を示します。 特定の目的を持たずにサイトを訪れ、興味を引く情報を探す見出しを流し読みし、興味があるものだけクリックして詳細を見る短時間に、必要最低限の情報を得ようとする 弊社のユーザビリティテスト（ユーザ行動観察調査）では、こういった流し読みの際にユーザに認識されるのは、冒頭の15文字程度であることがわかっています。アイトラッキングによる観察では、ひとつひとつの見出しを読むのではなく、ほぼ一直線に視線を進めていきます。 【参考ページ】 アイトラッキング分析 つまり、この15文字の中に、リンク先の内容が想像できて、なおかつ興味を引く言葉を
【海外事例に学ぶ】「会員登録はこちら」を用いない会員化シナリオ (ユーザビリティ実践メモ)
今回は、A List Apart.掲載のLuke Wroblewski氏による記事、"Sign Up Forms Must Die"をご紹介します。 ユーザにウェブサービスを提供する上で、まずは「会員登録」を求めることはよくあることだと思いますが、今回は、「まずは会員登録」から始めずユーザの会員化を実現する方法についての記事です。 旧来の「まずは会員登録」の事例： 動画共有サイトの一つ、 Google Video( http://video.google.com/)を例にとります。ユーザはGoogle Videoに訪問し、色々な動画を見ていく中で、自分もウェブ上に動画を公開してみたいと思います。そこで、「ビデオをアップロードする(Upload Video)」を押すと、その機能を利用するためのアカウント作成を初めに求められ、以下の会員登録ページにたどり着いてフォームへの情報入力を求められます
FAQの隠れた役割 (ユーザビリティ実践メモ)
ユーザから頻繁に問い合わせを受ける質問に対応するため、多くのサイトでは、「Q&A」や「よくあるご質問」といったFAQ（Frequently Asked Questions）コンテンツを用意しています。 今回はFAQを効果的に活用する見せ方について考えていきます。 FAQはユーザが持つ疑問の解決につながりますが、ユーザはサイトを利用するなかで、FAQをそれほど意識して探しにはいかないことに注意が必要です。 では、FAQはページのどこに配置するのがよいでしょうか。 ヘッダーエリアか、左右のナビゲーションにFAQのリンクが配置されているパターンを思い浮かべる方が多いでしょう。（図１） ユーザは、コンテンツエリアを中心に見ていくため、意識的に探さないとFAQがあることに気付きません。 サイトの共通要素として、問い合わせなどと同様、どのページにも同じ位置に配置すべきですが、それに加えて、コンテンツを
携帯サイトのフォーム設計のコツ (ユーザビリティ実践メモ)
PC向けサイトの資料請求ページなどでは、入力フォームに近接して入力例を置くことで入力形式の違いによるエラーを防ぐことができます。 しかし携帯サイトの場合、入力フォームの周りに入力例を表示したとしても、パソコンとは違い実際にユーザが入力する際には入力画面に切り替わってしまうため、ユーザが例を見ながら入力することができません。 入力フォームについてもう1点注意することがあります。 例えば上記にて、年月日の入力フォームを縦に並べてしまうと、スクロールのしかたによっては携帯サイトの画面に月日の入力フォームが表示領域外に隠れて見えなくなるケースが発生し、ユーザが誤って年のフォームに月日も同時に入力してしまう可能性があります。 入力フォームは横並びにする、入力フォームに文字数制限を設けることが有効です。 同じ役割を持つ画面でも、PCと携帯という物理的な環境やユーザの使用環境の違いを考慮すると違った設計
色や模様が購入の決め手となる商品の見せ方 (ユーザビリティ実践メモ)
ECサイトでの商品画像の出し方についてはこれまでも何度か取り上げてきました。今回は衣料品やアクセサリーなど、同じ形状であっても色や模様によって購入意欲が変わってしまう商品の見せ方について考えます。 図1：商品一覧画面と商品詳細画面 上記のサイトを訪れたユーザは、商品一覧画面を見てBのシャツの形状は気に入ったのですが、灰色ではなく水色のシャツが欲しかったので、Bのシャツの商品詳細を閲覧しようとはしませんでした。その後、しばらく一覧画面を閲覧した末、別の商品を探しに他のサイトに行ってしまいました。 実はBのシャツには水色の商品もあったのですが、ユーザは一覧画面の写真だけで判断してしまったため、水色のシャツの存在に気がつかなかったのです。 衣料品やアクセサリーのような商品は色違いや模様違いというだけでユーザには全く別の商品だと認識されてしまいます。そのため、同じタイプで三色を展開しているものであ
すぐ、その場で修正できる確認画面 (ユーザビリティ実践メモ)
ECサイトの購入フォームや、会員サービスの入会申し込みフォームでは、ユーザが名前や住所など多くの項目を入力しなければなりません。
可読性の大切さ、見直してみませんか？ (ユーザビリティ実践メモ)
アメリカのIT関連調査会社フォレスター・リサーチの調査結果(※1)によると、「ウェブサイトの失敗項目で最も多いものは、文字の可読性である」ということが指摘されています。確かに文字の可読性はユーザビリティの基本事項ですが、実際のところ、可読性はユーザ行動にどの程度影響を与えるのでしょうか？実例を交えてご紹介します。 弊社でユーザビリティテスト（ユーザ行動観察調査）を実施したところ、図1のパターンでは、ユーザは1ページ目の画面を一瞥しただけで閲覧をやめてしまいました。コンテンツの冒頭を読んでから判断したのではなく、全く読みもしなかったのです。その理由として、ほとんどのユーザが「なんとなく暗い感じがして、読む気がしないから」と回答しました。 背景色そのものにも原因はあったでしょう。しかし、ユーザに敢えてコンテンツを読んでもらったところ、「内容はとても面白い、商品に魅力を感じた」との回答が得られた
Googleの「サイトリンク」を活用する (ユーザビリティ実践メモ)
Googleで企業名、団体名、サイト名などを入力して検索すると、最上位の検索結果に、トップページへのリンクだけではなく、サイト内のカテゴリ別のトップページなどが表示されます。 Googleのヘルプでは、 サイトリンクは、ユーザーの役に立つと Google が判断した検索結果についてのみ表示します。 サイトの構造が原因で Google のアルゴリズムが適切なサイトリンクを見つけることができない場合や、サイトリンクとユーザーのクエリとに関連性がないと思われる場合、サイトリンクは表示されません。 という説明がされています。 弊社のユーザビリティテスト（ユーザ行動観察調査）では、このサイトリンクが頻繁に利用されている様子が観察されています。 たとえば「住宅ローンを探す」という設定下では 銀行名で検索 その銀行のトップページ＋サイトリンクが最上位に表示される サイトリンクの中に「住宅ローン」という文
タブの制作で注意すべきこと (ユーザビリティ実践メモ)
このエリアで迷ったユーザの典型的な行動例を以下(1)から(4)のステップでご説明します。（下図とあわせてご覧ください。） (1) 初期状態の「タブA」から、「タブB」をクリックした。 (2) 「タブB」内に表示された「リンク４」をクリックし、ページ遷移した。 (3) 遷移先ページを閲覧した後、(2)で見えていた「リンク５」や「リンク６」も気になっていたため、ブラウザの「戻る」ボタンをクリックした。 (4) 戻ったページでは、タブが初期状態の「タブA」になっていたが、ユーザは気付かずに「リンク１」や「リンク２」をクリックしてしまった。 (4)の場面で、ユーザはさきほど選択した「タブB」の内容が表示されていると思っていたため、実際にどのタブが選択されているかということに注意を払っていませんでした。 上記例のような混乱を防ぐためには、切り替えたタブをページ遷移後も記憶するように制作した方が良いで
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
ユーザの目だけではなく心も捉えよう (ユーザビリティ実践メモ)
今回の実践メモは、2007年10月5日に行われたSimple*Simple（本稿末尾にて紹介）主催「ウェブサービスインターフェース勉強会」における弊社プレゼンテーションの内容をまとめたものです。 勿論、それも重要なポイントの一つですが、例えユーザの視界に入ったとしても、ユーザの興味がない内容であればアクションへとつなぐことはできません。 ある料理レシピ共有サイトでは、無料登録利用者を有料会員登録へと誘導するために、会員画面でバナー画像を用いて有料会員のメリットを整理して提示していました。 弊社はより効果を高める方法として、レシピ検索の検索結果表示画面の中に「レシピを人気順に並び替えできます」という文言のテキストリンクを用意し、有料会員登録へと誘導することを提案いたしました。 バナー画像はとても綺麗でわかりやすかったのですが、その画像を表示するタイミングに改善の余地があると考えたのです。 そ
携帯サイトのフリーワード検索ボックス配置のコツ (ユーザビリティ実践メモ)
「インターネット＝携帯電話」ユーザ（PCをほぼ/全く利用しないユーザ）の特徴として、フリーワード検索を好んで利用する傾向があります。 しかし、サイト内のフリーワード検索を利用した場合、ユーザは期待するページにたどり着けない可能性があります。 例えば、ある求人携帯サイトでのユーザビリティテスト（ユーザ行動観察調査）では、次のようなことが起こりました。 高校生のユーザが「高校生歓迎」のアルバイトを探そうと思い、フリーワード検索ボックスに「高校生」と入力して検索を行いました。 ところが検索結果では、「高校生歓迎」の案件以外に同じ「高校生」というキーワードを含む「高校生不可」の案件も表示されました。 その結果、ユーザは自分にマッチするアルバイトが少ないと感じて離脱してしまったのです。 実はそのサイトは、高校生歓迎の案件に誘導するリンクを用意していたのですが、フリーワード検索ボックスより下に配置して
音声付きコンテンツの落とし穴 (ユーザビリティ実践メモ)
しかし「再生する」というユーザの明確な意思表示なしに、音声付コンテンツを再生することには注意が必要です。 弊社のユーザビリティテスト（ユーザ行動観察調査）では、たまたま開いたウェブサイトから突然音声が流れることに強い拒否反応を示すケースがありました。 ユーザはウェブサイトを必ずしも一人で閲覧するとは限りません。 職場のように周りに人がいる状況でサイトを開くこともあります。「意図せずに周りの迷惑になってしまうのが怖い」というのは多くのユーザに共通の意識ではないでしょうか。 ユーザにそのような不快な思いをさせないためには、ユーザ自身に音声の「ON」 「OFF」を選択してもらうことが考えられます。 【 具体的対応策 】 ■1. 「音声OFF」をデフォルト設定とし、音声の「ON」はユーザが選択 ■2. コンテンツを再生時にユーザが音声の「ON」「OFF」を選択 音声付コンテンツはそれ自体の魅力が大
検索条件の入力画面で配慮したいインターフェース例
今回は「ユーザが混乱してしまうインターフェースとその解決法」の1パターンを、会員登録をして使うECサイトを例にしてご紹介します。 それでは、上記の状況をどのようなインターフェースで表現すれば良いでしょうか。一例を挙げてみます。 2通りのお届け先のいずれかを、ラジオボタンで選択させる形式です。 図1の場合、弊社のユーザビリティ調査では、お届け先を変更したいユーザがラジオボタンのチェックを忘れ「お届け先の変更」ボタンをクリックしてしまう様子が観察されました。さらに、ラジオボタンと「変更」ボタンのどちらをクリックすれば良いか分からない、と困惑するユーザもいました。 問題の原因は下記の2点が考えられます。 原因 1: 「別のお届け先に送る」と「お届け先の変更」という、同じアクションを想起させる文言が近接している 原因 2: 「変更」ボタンのアフォーダンスが高く、ユーザの行動はボタンのクリックに誘導
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
