フォームの離脱を防ぐ心遣い (ユーザビリティ実践メモ)
資料請求や申込みフォームにおけるユーザの離脱を防ぐ方法はこれまでもご紹介しましたが、今日は「入力フォームに遷移する手前」で行う離脱を防ぐ心がけを私の実体験からご紹介したいと思います。 郵便番号、住所、名前と入れ画面をスクロールすると、次の項目に、「お客さま番号」という項目があることを見つけました。 始め、このお客さま番号が何の番号か思い当たらなかったのですが、入力欄の脇にある「お客さま番号とは」というリンクから、毎月届く領収証（「電気ご使用量のお知らせ」）に記載されている番号であることがすぐにわかりました。（このサイトでは、実際の領収証のイメージで説明しており、とてもわかりやすくなっていました） しかし、領収証の保管場所をすぐに思い出せなかった私は、また後日手続きを行おうと思いここで画面を閉じてしまいました。 皆さんはこのような経験をされたことはないでしょうか？ このような状況にユーザが置
マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ)
しかし、プルダウンでの項目選択を行う入力フォームにおいては、この便利さが逆効果になる場合があります。弊社のユーザビリティテスト（ユーザ行動観察調査）で観察された例をご紹介しましょう。 1ページの入力項目が多く、何度かスクロールしなければ「次へ」のボタンまでたどり着けない入力フォームを使うという作業で、ほとんどのユーザはホイールを使いながら入力を進めて行きました。 その中で、あるユーザがプルダウンの項目を選択し終え、ページをスクロールして次の項目へ入力を進めようとホイールを操作したところ、直前に入力したプルダウンにまだフォーカス（ハイライト）が当たった状態であったため、選択項目が別のものに変わりました。つまり、ホイール操作がページのスクロールではなく、プルダウン内の選択項目の移動に使われたということです。 ユーザはページがスクロールしないことにすぐ気づき、ページ内の空白部分をクリックしてプル
説得不要ユーザを考慮した入口ページ設計 (ユーザビリティ実践メモ)
会員登録やサービス申込などのコンバージョンをゴールとしているウェブサイトのターゲットは、そのゴールの達成までに「説得が必要なユーザ」と、「説得が不要なユーザ」の2タイプに分けて考えることができます。 今回は、後者の「説得が不要なユーザ」について取り上げます。 このサイトには、非会員が利用できるサービスもあるのですが、入口ページで会員登録へのリンクを目にしたユーザが、即座に登録を開始しました。 このユーザは、会員登録へのリンクを見たことで、登録した方が多くの機能を使えるのだろうと予想し、とりあえず登録しておこうと考えたのです。 こうした「説得が不要なユーザ」の存在については、アクセス解析による定量的な事例もあります。 あるサイトで、会員登録のボタンをトップページ右上から左上に移動し、クリエイティブを目立つものに変更しました。 この変更の結果、トップページ流入直後の会員登録率が増加し、同時にサ
リンクは青字下線？ (ユーザビリティ実践メモ)
テキストリンクは青字下線で表すことが一般的ですが、最近では、デザイン性を重視して敢えて青字下線を使用しないサイトも増えてきています。 そこで今回は、リンクの見せ方について検討してみたいと思います。 具体的には、青色以外のリンク色を用いる場合は、 下線をつける サイトの背景色や他のテキストに埋没してしまう色にしない という配慮がなされていれば、ある程度自由な色であってもユーザビリティに影響はないということが観察されています。 下線を使わない場合は、リンク色は青色のままの方が望ましいようです。加えて、「オンマウスで下線表示、または色反転する」といった何らかのフィードバックを演出すると、リンクであることがより明確に伝わるようになります。 リンクの見せ方の注意点としては、他にも サイトの中で一貫性を持たせる(例：ページごとに下線があったりなかったりするのは原則NG) 一般的なルールから逸脱しない(
検索順位だけではなく、文章表現にも気を遣おう (ユーザビリティ実践メモ)
ウェブサイトへの流入を増やす施策の一つとして注目が高いSEO（検索エンジン最適化）ですが、「SEO＝検索エンジンの上位表示」という認識は正しくないと私たちは考えています。 弊社の過去のユーザビリティテスト（ユーザ行動観察調査）ではこれ加え、青字リンクになっている文章やその下の説明文（特に書き出し）を見てクリックするかどうかを決める様子が観察されています。 実際に、必ずしも検索結果順位が高くないサイトでも、検索結果の文章（サイトのtitle要素。例えば以下で図示したような差別化されたメリットを想起させる文章）に興味を持ちクリックするユーザもいました。 文章表現については、リスティング広告を出稿する場合には気をつけるべきポイントとしてよく言及されますが、SEOの観点では意外と抜けがちな点です。キーワードの突出度や密度だけを気にして文章を構成しているケースが多く見受けられます。 ユーザが検索する
ユーザの商品探索プロセスとサイト上の注意点 (ユーザビリティ実践メモ)
家具、日用品などを扱うECサイトでは、ユーザがサイトに訪れてからどの商品を購入するかを検討する行動が多く見られます。このようなサイトでは、ユーザがいかに目的とするものにスムーズに辿り着けるかが特に重要となります。 こうした問題に対処していく場合、次のようなユーザの行動特性を踏まえる必要があります。 ユーザは最初に、探しているものの形状、大きさなどの大まかな特徴を含んだ表象(注)を形成します。 （「リビングに置くための低めのテーブルが欲しいなあ」といった漠然としたイメージを思い描いています。） (注)表象・・・ある存在に対する頭の中の対応物。イメージ。 イメージがあいまいで直接具体的な商品が引き出せないため、一旦像を抽象化します。 （一般名詞としての「机」を想起します） 外部の視覚的刺激を受けて探しているものが属するカテゴリを同定します。 （画像やカテゴリ名を頼りに、探しているものが「ローテ
Flashでの画像切り替えの盲点 (ユーザビリティ実践メモ)
トップページを中心に、Flashを用いて複数の画像を同一エリア内で切り替えるパターンのものが増えてきています。スペースを増やすことなく、複数のプロモーションを掲示できるメリットが大きいとの判断からでしょう。 今回はそのうち、該当箇所をマウスオーバするとグラフィックが切り替わるものの注意点について、取り上げます。 図1のように、プロモーションエリアの一部を使用して、他のプロモーション情報を表示している場合、ユーザが意図せず切り替え、混乱を招いてしまうケースがあります。 具体的には、図2のようにページ中央部のコンテンツを見ていたユーザが、プロモーションエリアの内容に気づき、興味を持ってクリックしようとするケースです。 あるユーザビリティテスト（ユーザ行動観察調査）では、ユーザがマウスカーソルを下から上に移動したところ、クリックする瞬間にFlashが切り替わり、そのままメインエリアをクリックして
【海外事例に学ぶ】入力フォームにおける、ヘルプテキストの効果的な表示方法 (ユーザビリティ実践メモ)
今回は、Uxmatters掲載のLuke Wroblewski氏による記事、“Dynamic Help in Web Forms”をご紹介いたします。 Wrobrewski氏は、現在Yahoo! IncのSenior Principal of Product Ideation & Designをされている方です。 しかし、そのようなヘルプテキストは極力少なくしたいものです。 説明文だらけの入力フォームは、かえってユーザの入力意欲を減退させてしまい、入力完遂(コンバージョン)への弊害となる可能性があるからです。 では、そのような悪影響がないよう配慮しつつ、ヘルプテキストをうまく提示するにはどうすればよいでしょうか。 解決方法の一つとして、ヘルプテキストを動的に表示することが考えられるでしょう。Wroblewski氏はそのなかで3つのパターンを示しています。 a.自動挿入型 b.ユーザクリック
メールアドレス欄のユーザビリティ (ユーザビリティ実践メモ)
メールアドレス欄のテキストフィールドでIMEをオフとし、かつユーザがIMEオンに変更できないよう制御しているサイトを時々見かけます。 メールアドレスは英数字と記号で成り立っているため、初心者ユーザにとっては煩わしい日本語/英数字入力の切り替えの手間がなくなるというメリットがあるでしょう。 但し、メールアドレスをIMEに単語登録しているユーザが一定数いることを忘れてはいけません。 この「実践メモ」を購読いただいている皆さまも、メールアドレスを単語登録されている方が意外に多いのではないでしょうか？ メールアドレスを単語登録している人にとっては、IMEオフの制御があることにより、メールアドレスをキーボードで手打ちしなければならず、スピード、正確性が損なわれてしまいます。 サイトのターゲットユーザにもよりますが、一般的なサイトでは双方とも一定数存在することが考えられるため、IMEの制御は行わない方
ソフトウェア紹介ページでの画像の使い方 (ユーザビリティ実践メモ)
ECサイトで、商品写真を積極的に使ってユーザの購買意欲を高める手法について、これまで何回か取り上げてきました。 実際の大きさがイメージできる商品写真を置こう写真で魅せる商品紹介 今回は、ソフトウェアやWebサービスなど、形のない商品を紹介するページにおいてユーザの意欲を高める方法を考えます。 通常このようなページでは、商品・サービスのメリットやしくみ（操作手順）を以下のような方法で訴求することになります。 文章のみで説明図＋文章で説明実際の操作画面のキャプチャを表示 弊社のユーザ行動観察調査で、上記の３パターンのページを見せ、反応を観察したところ、 文章のみ→ほとんど読まれない（スクロールもせずに別のページに移ってしまう） 図＋文章→視線が止まり、図の表す意味について考え始める。場合によってはそこで閲覧を止めてしまう 画面キャプチャ→画像を確認しつつ、次々と読み進めていく という傾向が見ら
心理的なコントラスト効果 (ユーザビリティ実践メモ)
非常に高価なA商品を見た後に、それよりは安価なB商品を見ると、普段なら手が出ないB商品が安く感じられることがあります。 ウェブ上でもこのコントラスト効果を上手く利用することで、ユーザをビジネスゴールへと効果的に誘導できる場合があります。 例えば、「お問い合わせ」と「資料請求」という2つのボタンを並列に並べると、「資料請求」ボタン単体の場合に比べて「資料請求」ボタンがクリックされやすくなることが弊社のユーザビリティテスト（ユーザ行動観察調査）でも観察されています。 この場合、「お問い合わせはちょっと面倒だけど、資料請求だけならまあいいか」といった考えがユーザの心の中で働くようです。つまり、「お問い合わせ」との対比で「資料請求」が簡単に感じられるのです。 ユーザをビジネスゴールへと誘導していくための一手段としてコントラスト効果も考慮にいれると良いでしょう。 ただ、このコントラスト効果をユーザを
動画配信をする時の留意点 (ユーザビリティ実践メモ)
ただし、動画を配信するうえでは、以下のような点を留意する必要があります。 クリックして表示する前に、どのような内容なのか推測できるように、動画内容を説明するテキストを配置する どのくらいの時間がかかるか把握できるように、動画の再生時間をタイトルの近くに記述する さまざまな回線速度のユーザに対応できるよう、ナローバンド用とブロードバンド用の選択肢を用意する 動画表示に必要なプラグインがインストールされていないユーザも閲覧できるように、プラグインをダウンロード出来るようにする ブロードバンドが普及したことにより、作り手としてはファイルサイズの大きさや、ユーザ遷移の数に対する配慮を怠ってしまうことがあります。しかしながら、回線速度が速くなった現在だからこそ、ユーザは目的の情報を最短時間で入手したいと考えています。 動画の内容が的外れであったり、表示時間がユーザの予測よりも冗長であったりすると、途
「お客様の声」を読んでもらうコツ (ユーザビリティ実践メモ)
5月28日の記事では「お客様の声」を掲載する場合は、インターネットの媒体特性を理解して掲載内容を吟味する必要がある、という考え方をご紹介しました。 詳細はこちら 「お客様の声」掲載時の注意点 今回は続編として、「お客様の声」をユーザに読んでもらうための具体的な方法を取り上げたいと思います。 ユーザは、自分と近い立場の「声」を探して読む傾向があります。お客様の属性情報を見てユーザが「自分に近いかどうか」を判断できるようにしましょう。 記載する属性は、BtoBサイトなら業種、部署、担当業務、会社規模が重要です。BtoCサイトでは、年齢、性別を基本とし、それぞれの業界特性に応じた要素を付け加えましょう。金融なら年収・貯蓄額、人材なら職種・スキル・・・などが挙げられます。 ■Tips2：「声」の筋立ては、商品・サービスの利用効果が分かるようにする 時系列に、 商品・サービスを使用する前(何らかの課
ユーザ心理を動かす文言 (ユーザビリティ実践メモ)
商品やサービスには自信があるのに、なかなかウェブサイト経由の売上が伸びない。 そう感じているウェブマスターの方は多いのではないでしょうか。 実は同じ商品・サービスでも、ちょっとした見せ方の工夫で売上が大きく左右されるケースが弊社のユーザビリティ調査で確認されています。 今回はほんの一例ですが、ウェブサイト設計をする上で知っておくと役に立つ文言をご紹介します。 ■心理的障壁を下げる文言 ・安心 ・かんたん ・はじめての? ・お試し ■クリック意欲を高める文言 ・お得 ・無料 ・期間限定、ネット限定 ・おすすめ ■強く注意を喚起する文言 ・重要 ・極秘 ・デメリット 当たり前のように感じる例かもしれませんが、改めて自社のウェブサイトを見直してみると、意外に使われておらず、ユーザが読み飛ばしてしまうキャッチコピーになっているものです。 （※ただし、今回紹介したような文言を安易に多用してしまうと、
最後まで見てもらえる動画、4つのコツ (ユーザビリティ実践メモ)
一般家庭へのブロードバンドの普及、映像配信技術の発展から、近年、動画を用いるサイトが急増しています。 そこで今回は、ニュースや商品紹介・手順紹介など「解説系動画」において、ユーザに最後まで見てもらうためのコツをご紹介します。 動画の再生時間は約2分以内に収める 様々な動画でユーザビリティテスト（ユーザ行動観察調査）を行った結果、大半のユーザが1分半から2分の時点で停止ボタンをクリックしました。 動画は、文章のように斜め読みをして自分のペースで見ていくことができないという特徴があります。ですので、余り長く続くとユーザが飽き、関心が他に移ってしまいます。メッセージは簡潔にまとめるようにしましょう。 最初の3秒が命運を決める 一般的にユーザには「情報を効率的に収集したい」というニーズがあり、動画についても同様に、再生が始まった瞬間に「これを見るか否か」を判断しています。 よって、本題から始めるこ
コラム一覧 ｜ - エクスペリエンス・デザイン・パートナー
本コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 本コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し
ユーザビリティ実践メモ
スマートフォンとともにタブレット端末の普及率はますます上昇し、最近では街中や電車などでタブレット端末を利用している人を多く見かけるようになりました。 この記事の続きを読む
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ビービット ユーザビリティに特化したウェブコンサルティング