ユーザの認知を正しく捉える (ユーザビリティ実践メモ)
複数ブランドを束ねるファッションサイトのリニューアルに際し、テキストリンクのみだった各ブランドへのリンクにロゴを足しました。 すると、あるブランドのクリック率が2倍も伸びたのです。 いったいなぜロゴを足しただけで、CTRが2倍も伸びたのでしょうか？ このブランドの特徴を見てみましょう。 複数の大型駅ビルに店舗を構えていて多くの人が店舗を目にしている ブランド名が長く覚えにくい ブランドカラーとロゴが特徴的 ロゴが目立つショッピングバッグをぶら下げている若者が多い つまり、当ブランドはブランド名よりもロゴで認知されていたのです。 リニューアルでロゴが付与され「あ、このブランド知ってる、ちょっと見てみよう」という行動が促されたと考えられます。 「ロゴが大事」ということをお伝えしたいわけではありません。（現に、他のブランドはロゴを足した後もCTRに大きな変化はありませんでした。） 自社の製品やサ
【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
「ログインフォーム」は慣れが大事 (ユーザビリティ実践メモ)
ユーザビリティを考える上では、ユーザの「慣れ」を考慮する必要があるということは、過去の実践メモでも何度か指摘してきました。 過去記事：「ユーザの慣れや先入観に配慮する」 そうした「慣れ」の代表例として、「ログインフォーム」が挙げられます。 ログインフォームの入力項目や並び順はほとんどのサイトで共通している 入力するID・パスワードも、多くのユーザは同じものを使い回している という特徴から、ログインフォームを利用するユーザは、ほぼ無意識的に行動する傾向が見られます。 特に、ある程度キーボード操作に慣れているユーザの場合、タブキーを利用して、 「ID入力→タブキー→パスワード入力→エンターキー」 という操作が身体に染みついていることがあります。 「他と違う」フォームは、ユーザのエラーにつながりうる とあるECサイトでは、次のようなログインフォームを用意していました。 このログインフォームでは、
謝ったら負け！？ アイコンも使い方次第 (ユーザビリティ実践メモ)
Webサイト上で、ユーザが目的の情報にたどり着きやすくするために、複数の条件での検索機能を提供することがあります。 たとえば、不動産業やCATVなど地域に関連したサービスで、ひとつのフォームから、郵便番号でも町名でも検索ができるような機能を実装しているような場合です。 この検索機能に関して、ユーザ行動観察調査を実施したところ、以下のような行動が見られました。 まず、ユーザは郵便番号を入れて、検索を行いました。 しかし、このユーザが入れた郵便番号が間違っていたため、次のようなエラーが表示されました。 すると、このユーザは即座に「あ、ダメなんだ」とこのサイトを離脱してしまいました。 実際には、正しい郵便番号を入れ直すか、町名を入れることで再度検索が可能なのですが、このユーザに再検索をしてもらうことはできませんでした。 この行動の裏には、以下のような心理の動きがあると考えられます。 アイコンを見
【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)
これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 Geek Trends: 15 Footers with great usability ( pop upon magazine ) 6 Things To Include for a User Friendly Footer ( UXBooth ) Modern Sitemap and Footer ( WebDesignerWall ) Footers (76 examples) ( Smiley Cat Elements of Design ) 例えばTIGERS （http://www.tigers.org.au）のフッター(下図)では、革
その情報、後から見られますか？ (ユーザビリティ実践メモ)
「保険料シミュレーション」や「住宅ローンシミュレーション」など、近年ではウェブ上でシミュレーションや見積りができるサイトも多く見られます。 自分で気軽にシミュレーションができるため、ユーザに好まれるケースが多いようです。 今回は、そうしたシミュレーションや見積りの結果を表示するページについて考えます。 結果ページでのユーザ行動としては、すぐに申込・契約へ進むのではなく、他社の結果と比較して検討するために一旦サイトを離れるケースが多く見られます。 その場合、ユーザは「後から見るために、とりあえずこの情報を手元に置いておきたい」というニーズを持っているため、結果ページでそうしたニーズに応える手段を提供することが、申込・契約へつながる重要なポイントとなります。 その手段として、今回は1.印刷 2お気に入り/ブックマーク 3.メールで送る、という3つについて考えてみます。 1.印刷 じっくりと情報
複数のトップページ画像を切り替える工夫 (ユーザビリティ実践メモ)
ユーザの訪問頻度を考慮したトップページの工夫について、過去の実践メモでは、ニュースサイトを題材に記事の見せ方と本数を取り上げました（ユーザの訪問頻度を考慮したトップページ設計 2008/5/19）。今回は、企業サイトのトップページ画像の切り替え方法の一例を紹介します。 この点については、過去に「Flashでの画像切り替えの盲点」として1つの注意点をご紹介しましたが、ユーザの訪問頻度や滞在時間という観点から、複数の画像を効果的に見せるための別の手法を考えてみることにしましょう。 ある金融関連企業サイトのトップページでは、ユーザに複数のサービスを認知してもらうため、複数種類の画像を切り替えながら見せていくようなFlashアニメーションを設置していました。 ところが、アクセスログ解析データによると、トップページを訪れたユーザのうち、2枚目以降の画像が表示されるまでトップページに滞在しているユーザ
【海外事例に学ぶ】「会員登録はこちら」を用いない会員化シナリオ (ユーザビリティ実践メモ)
今回は、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があることに気付きません。 サイトの共通要素として、問い合わせなどと同様、どのページにも同じ位置に配置すべきですが、それに加えて、コンテンツを
Ajaxによるエラーチェックの注意点 (ユーザビリティ実践メモ)
入力フォームについて、最近ではAjaxを用いることで、「送信」ボタンをクリックする前にエラーチェックをする手法が使われるようになっています。 今回はリアルタイムでフォームのエラーチェックを行う場合の注意点について考えてみます。 あまり良くない例：Remember the Milkの登録画面 http://www.rememberthemilk.com/signup/ ユーザ名を入力する欄では、入力と同時にエラーチェックが行われるため、多くの場合1文字目からエラーが表示されます。 2文字目を入力すると即座にエラーメッセージが更新されます。 ユーザが当初から自分のユーザ名として考えていた「bebittaro」を入力し終えると、利用可能である旨のメッセージが表示されます。 上記は入力に対しリアルタイムでフィードバックを返すことで誤入力を避けようという工夫ですが、ユーザが入力を終える前にエラー表示
検索順位だけではなく、文章表現にも気を遣おう (ユーザビリティ実践メモ)
ウェブサイトへの流入を増やす施策の一つとして注目が高いSEO（検索エンジン最適化）ですが、「SEO＝検索エンジンの上位表示」という認識は正しくないと私たちは考えています。 弊社の過去のユーザビリティテスト（ユーザ行動観察調査）ではこれ加え、青字リンクになっている文章やその下の説明文（特に書き出し）を見てクリックするかどうかを決める様子が観察されています。 実際に、必ずしも検索結果順位が高くないサイトでも、検索結果の文章（サイトのtitle要素。例えば以下で図示したような差別化されたメリットを想起させる文章）に興味を持ちクリックするユーザもいました。 文章表現については、リスティング広告を出稿する場合には気をつけるべきポイントとしてよく言及されますが、SEOの観点では意外と抜けがちな点です。キーワードの突出度や密度だけを気にして文章を構成しているケースが多く見受けられます。 ユーザが検索する
説得不要ユーザを考慮した入口ページ設計 (ユーザビリティ実践メモ)
会員登録やサービス申込などのコンバージョンをゴールとしているウェブサイトのターゲットは、そのゴールの達成までに「説得が必要なユーザ」と、「説得が不要なユーザ」の2タイプに分けて考えることができます。 今回は、後者の「説得が不要なユーザ」について取り上げます。 このサイトには、非会員が利用できるサービスもあるのですが、入口ページで会員登録へのリンクを目にしたユーザが、即座に登録を開始しました。 このユーザは、会員登録へのリンクを見たことで、登録した方が多くの機能を使えるのだろうと予想し、とりあえず登録しておこうと考えたのです。 こうした「説得が不要なユーザ」の存在については、アクセス解析による定量的な事例もあります。 あるサイトで、会員登録のボタンをトップページ右上から左上に移動し、クリエイティブを目立つものに変更しました。 この変更の結果、トップページ流入直後の会員登録率が増加し、同時にサ
そのサイトの「国籍」を明らかに (ユーザビリティ実践メモ)
世界各国でビジネスを展開している企業は、様々な国々でそれぞれサイトを持っていることが珍しくありません。 今回はそうしたグローバル企業で海外サイトのユーザビリティテスト（ユーザ行動観察調査）を行った際の事例について取り上げます。 このアメリカ人ユーザは、途中でそのメーカーサイトで商品購入可能な小売店検索(Where to buy)を使用するまで、使っているサイトがイギリスのサイトであることに気づきませんでした。 言語が英語で特に違和感なく使うことができたことが影響していますが、これはアメリカ、イギリス、オーストラリアやその他英語を共通語として使用している国のサイトでは頻繁に発生します。 特に同じ英語圏のサイトでSEO対策のレベルが国ごとに異なる場合にこの事象は起きやすいです。 グローバル企業といえど、国により販売している商品や提供しているサービスが異なり、また提供している情報にも違いがあると
フォームの離脱を防ぐ心遣い (ユーザビリティ実践メモ)
資料請求や申込みフォームにおけるユーザの離脱を防ぐ方法はこれまでもご紹介しましたが、今日は「入力フォームに遷移する手前」で行う離脱を防ぐ心がけを私の実体験からご紹介したいと思います。 郵便番号、住所、名前と入れ画面をスクロールすると、次の項目に、「お客さま番号」という項目があることを見つけました。 始め、このお客さま番号が何の番号か思い当たらなかったのですが、入力欄の脇にある「お客さま番号とは」というリンクから、毎月届く領収証（「電気ご使用量のお知らせ」）に記載されている番号であることがすぐにわかりました。（このサイトでは、実際の領収証のイメージで説明しており、とてもわかりやすくなっていました） しかし、領収証の保管場所をすぐに思い出せなかった私は、また後日手続きを行おうと思いここで画面を閉じてしまいました。 皆さんはこのような経験をされたことはないでしょうか？ このような状況にユーザが置
タブの制作で注意すべきこと (ユーザビリティ実践メモ)
このエリアで迷ったユーザの典型的な行動例を以下(1)から(4)のステップでご説明します。（下図とあわせてご覧ください。） (1) 初期状態の「タブA」から、「タブB」をクリックした。 (2) 「タブB」内に表示された「リンク４」をクリックし、ページ遷移した。 (3) 遷移先ページを閲覧した後、(2)で見えていた「リンク５」や「リンク６」も気になっていたため、ブラウザの「戻る」ボタンをクリックした。 (4) 戻ったページでは、タブが初期状態の「タブA」になっていたが、ユーザは気付かずに「リンク１」や「リンク２」をクリックしてしまった。 (4)の場面で、ユーザはさきほど選択した「タブB」の内容が表示されていると思っていたため、実際にどのタブが選択されているかということに注意を払っていませんでした。 上記例のような混乱を防ぐためには、切り替えたタブをページ遷移後も記憶するように制作した方が良いで
メールアドレス欄のユーザビリティ (ユーザビリティ実践メモ)
メールアドレス欄のテキストフィールドでIMEをオフとし、かつユーザがIMEオンに変更できないよう制御しているサイトを時々見かけます。 メールアドレスは英数字と記号で成り立っているため、初心者ユーザにとっては煩わしい日本語/英数字入力の切り替えの手間がなくなるというメリットがあるでしょう。 但し、メールアドレスをIMEに単語登録しているユーザが一定数いることを忘れてはいけません。 この「実践メモ」を購読いただいている皆さまも、メールアドレスを単語登録されている方が意外に多いのではないでしょうか？ メールアドレスを単語登録している人にとっては、IMEオフの制御があることにより、メールアドレスをキーボードで手打ちしなければならず、スピード、正確性が損なわれてしまいます。 サイトのターゲットユーザにもよりますが、一般的なサイトでは双方とも一定数存在することが考えられるため、IMEの制御は行わない方
画面メモを意識した携帯サイト制作 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザは、携帯で情報収集を行う際、画面メモを好んで使用します。 (なお、サイトによっては「後で見る」機能が提供されていますが、その場合でも画面メモが優先的に使用される傾向があります。) このとき、ユーザは「めぼしいものをさっさとチェックしたい」という心理でいるため、画面メモのタイトルを自ら変更することはありません。閲覧しているページのページタイトルがそのまま画面メモのタイトルとなる場合がほとんどです。 従って、携帯サイトを制作する際には「画面メモリストを後から見ても、何のページか分かるようなページタイトルをつける」という配慮が重要です。 例えば、ある賃貸物件検索サイト(仮にサイトの名前を「住宅情報ビービット」とします)では、次のような状況が発生しました。 ユーザは条件を変えながら物件を検索し、その中で、めぼしい物件ページをいくつか画面メ
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
複数カテゴリ検索のインターフェース (ユーザビリティ実践メモ)
Webサイトの検索機能で、「テキスト」と「画像」、「ニュース」と「製品情報」など、複数のカテゴリを切り替えて検索できる機能を提供しているものがあります。今回はその切替の方法について考えます。 ある金融情報サイトで、企業名でサイト内検索を行ったところ、「記事」カテゴリでの検索結果が0件と表示されました。 このとき、結果が0件だったことを認識したユーザは、ページ上部のタブをクリックして「株価」に切り替えました。このとき 自分がクリックしたタブが切り替わる（アクティブなタブが濃い色になる） という変化で、ユーザには自分が別のカテゴリに移動したことが伝わりました。 しかし、検索結果部分の見た目に変化がなかったため、ユーザは「どちらのカテゴリにも自分の求める情報がない」と判断して、このサイトを立ち去りました。 このページではタブ切り替えだけでは再検索されず、新しい画面で改めて「検索」ボタンをクリック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
