サイト外でのユーザ心理を利用する3つのポイント【前半】 (ユーザビリティ実践メモ)
今回から数回にわたり、「サイト外のユーザ行動も踏まえたコミュニケーション設計」というテーマで実践的なノウハウをご紹介します。 ユーザ行動観察調査を実施していると、企業サイトで製品・サービスの概要を理解した後、他社サイトや口コミサイトを確認するという行動が非常によく見られます。 そこで、企業サイト以外での情報収集によってユーザが陥りがちな3つの心理と、それに対応する方法を考えてみます（今回は【前半】として、初めの2つをご紹介します）。 「企業のサイトは（自社に）いいことしか書いていないので、悪い評判や自分が気づいていないデメリットがないかを知りたいからです」 インターネットは比較メディアとも呼ばれ、このような行動は老若男女問わず、ほとんどのユーザで見られます。「悪い評判を見つけるまで、しつこく探します」と、検索結果を何ページも見ていくユーザもいます。 企業サイトはこのようなユーザの行動と、そ
【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
スマートフォン対応しただけで、安心してはいけない理由 (ユーザビリティ実践メモ)
前回に引き続き、スマートフォン対応サイトを制作する場合に気をつけるべきポイントとして、「PCサイトへの誘導の必要性」についてご紹介します。 スマートフォン対応サイトでも、PCサイトへの誘導を残しておこう スマートフォン対応をしているサイトの中には、PCサイトへのリンクが用意されている場合があります。せっかくスマートフォンから利用しやすいユーザインタフェースを用意しているのに、どうしてPCサイトへと誘導する必要があるのでしょうか？ 今回は、PCサイトへのリンクが必要な2つの理由についてご説明します。 スマートフォンはPCと比べると画面サイズも小さいため、最適化したサイトを作るために機能を絞ったり、情報量を減らしてサイトを構成するケースがよくあります。このような場合には、忘れずにPCサイトへのリンクを用意しておくことが必要です。 amazon.co.jpのiPhoneサイトを例に見てみると、ト
会社概要 ｜ 株式会社ビービット
社名 株式会社ビービット 英文社名 beBit,Inc. 代表取締役 遠藤 直紀 社員数 271名（連結）、185名（単体） ※2024年6月末時点 設立 2000年（平成12年）3月15日 事業内容 コンサルティング事業 UX＆ビジネスコンサルティング UXを重視した事業戦略の立案、D2C/OMO/プラットフォームビジネスなどの事業変革施策の策定、業務プロセス/組織変革の支援など UXデザインコンサルティング 新規事業のユーザ受容性検証、新規デジタルサービス（アプリ/Webサイトなど）のUXデザイン、画面設計支援、カスタマージャーニーの現状把握・改善方針策定、ユーザ調査、既存デジタルサービスのリニューアルなど UXグロースコンサルティング（※） UX改善のKPI設計、業務プロセス設計、チーム組成支援、成果創出のための伴走支援、既存デジタルサービスの改善方針策定など ソフトウェア事業 US
「関連リンク」の幻? 意図した誘導を行うための導線設計 (ユーザビリティ実践メモ)
あるコンテンツを見たユーザに対して「次にここを見て欲しい」という制作側の意図に反して、中々思い通りに見てもらえないといった話をお伺いすることがよくあります。 例えば、記事系のコンテンツで、記事を閲覧したユーザに対して関連記事や関連する製品ページへと誘導する場合、記事の下部に「関連リンク」のエリアを設け、その中に意図した誘導先のリンクを配置しているケースがよく見受けられます。 上記のような方法で、果たして意図通りにユーザを誘導することができるでしょうか？今回は「ユーザがこのページ以上の情報を積極的には求めていない」ケースについて考えてみました。 弊社の実施したユーザ行動観察調査においては、多くのユーザが価格まで閲覧した後にページの上部に戻り、そのまま見るのをやめてしまうという行動が見られました。 ここで、このような行動に至った原因を考えてみましょう。 アイトラッキングによる分析やユーザへのヒ
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
診断ツールにおける選択肢の作り方 (ユーザビリティ実践メモ)
ウェブサイトにおいてユーザにいくつかの質問に答えてもらい、その結果として当該サイトが提供するサービスを紹介する「診断ツール」が存在します。旅行会社サイトで好みのツアーを診断したり、証券会社サイトで適切な投資スタイルを診断するなど、様々な場面で用いられています。 今回はこの診断ツールで、ユーザに回答してもらう質問について考えてみたいと思います。 先程述べたツアー診断など、ユーザの好みが強く表れる診断ではこの点が特に問題になることがあります。ここでは、同じくユーザの好みが強く表れる分野として、ブライダルでの例をご紹介します。 弊社が、とある結婚式場紹介サイトで行ったユーザ行動観察調査でのことです。ユーザの好みにあった結婚式プランを診断するサービスを設計するために、質問に対する選択肢として下記の2種類を用意しました。 その結果、Aに比べてBの選択肢に好印象をもったユーザが見受けられました。具体的
プルダウンメニューのページ遷移は自動？手動？ (ユーザビリティ実践メモ)
プルダウンメニューで項目を選択して、ページ遷移（表示変化）を待っているが何も起きない。ユーザ行動観察調査ではこんな光景がよく見られます。 今回は、ページ遷移を伴うプルダウンメニューでよく見かける「ユーザのイメージと異なる挙動をする」設計について考えてみたいと思います。 プルダウンメニューで項目を選択し、次のページへ遷移するのを待っているが何も起きないプルダウンメニューで項目を選択すると、勝手に次のページへ遷移してしまい、違和感を感じた 特に日常的に使用されるサイトでは、ユーザの期待を裏切らない挙動が求められます。以下の例を参考に、ユーザ心理への配慮について考えてみたいと思います。 ページ遷移を伴うプルダウンメニューは、「Go」ボタンなどを設置し、ユーザに手動でページ遷移を行ってもらうのが一般的です。これは、ユーザが誤った項目を選択してしまった場合に、意図しないページに遷移してしまうことを防
【○×】Q.ユーザが画像をざっと見て良し悪しを判断する商品の詳細ページでは、「左：画像、右：文章」、その下は「左：文章、右：画像」と、画像と文章を交互に配置したレイアウトとする方が、そうでない場合に比べて文章にも目を通してもらえる可能性が高い。○か×か？: beBit.Q
【解説】写真画像で良し悪しを判断しようと考えているユーザの視線は、自然と画像と画像をつなぐ形で流れます。画像と文章を交互に配置することでユーザの視線が散らばり、スクロール速度も遅くなりやすいため、比較的文章にも目を通してもらいやすいレイアウトとなります。 解説詳細 例えば、セオリー通り情報が整理されたきれいなレイアウトを達成しようとすると、以下のようになります。 この場合ユーザは、気になる画像があれば横にある文章にも目を移しますが、基本的にはすーっと下に向かって画像だけを眺めてスクロールするといった行動をとりがちです。 また、単調なレイアウトであるためにユーザのスクロール速度も速くなりがちです。 一方、画像と文章を交互に配置したレイアウトでは、ユーザの視線は以下のように散らばってくれる可能性が高くなります。 この場合はユーザが画像から画像に視線を移すタイミングで自然と文章が視野に飛び込んで
なぜその見出しはユーザに気づいてもらえないのか (ユーザビリティ実践メモ)
「あ、そこに書いてあったんですね。探していたんですけど気づきませんでした。」 ユーザ行動観察調査を行っていると、時々ユーザの口からこんな言葉を聞くことがあります。 その原因の一つに、見出し文字が画像要素と判断されて無視されていることが挙げられます。これは例えば、以下のような場合に起こりやすい現象です。 １．画像に画像文字が同化している場合 特に「目的にあった文字・文章を探すモード」となっているユーザは、本文のみを追っているため、画像を見飛ばしてしまいがちです。上図のように見出し文字が白抜きになっているケースでは、さらにそのリスクは高まります。 多くの場合、本文の文字フォントは黒系統か青字（リンク）であるため、ユーザの頭の中に「黒や青い文字を追っていれば…」といった思い込みが生じ、白っぽい要素は文字として認識されづらくなってしまいます。 よって、ユーザが文字や文章を追って情報探索を行うであろ
【変則○×】Q.どんなサイトであったとしても、フルFlashのコンテンツはユーザにストレスを与えてしまう可能性が高いため控えるべきである。○か×か？（×と思う場合は、可能なら良い例を示してください。）: beBit.Q
【解説】ターゲットユーザや利用状況が限定される場合は、フルFlashコンテンツを用意することでより効果的なユーザ体験を提供できます。動きのあるコンテンツが表示されることを事前に想定しているユーザが対象のサイトでは、ストレスを与える可能性もグッと低くなります。 解説詳細 では、どのようなユーザに向けたサイトであればフルFlashが効果的だといえるでしょうか。 例として以下２つのケースをご紹介します。 １．ゲームソフトのプロモーションサイト サイトを訪問するユーザの多くは、対象ゲームに興味を持っている上、ゲームという商材の特性上、表現豊かな体感に訴えるコンテンツが求められているケースがほとんどです。 この場合、コンテンツをフルFlashとして提供することはユーザの期待に応える形となるためにストレスにはつながりづらい上、文字と画像のみで構成されるコンテンツと比べてより効果的にユーザの気持ちを盛り
「お待たせしない」Webサイトでの接客 (ユーザビリティ実践メモ)
1990年代、電話回線やISDNを使ったダイヤルアップ接続（低速・時間課金）でインターネットに接続することが一般的だった頃は、Webサイトの利用は「時間との勝負」という側面がありました。そのためWebサイトを制作する際も、htmlファイルや画像などを含めたページ当たりのサイズを小さくしてページの表示速度を高め、ユーザを待たせないことが重要視されていました。 ■人間の思考とシステムの反応速度 人間の操作に対するシステムの反応速度については、一般的に次のような関係が見られると言われています。 （参考：「Response Times: The Three Important Limits」 Useit.com（英語）、「10の累乗： ユーザーエクスペリエンスにおける時間スケール」 Jakob NielsenのAlertbox（日本語）） 0.1秒：ユーザは、自分がシステムを「直接」操作していると
コラム一覧｜ビービット(beBit)- エクスペリエンス・デザイン・パートナー
本コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 本コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し
テキストと画像、どのように使い分けていますか？ (ユーザビリティ実践メモ)
ウェブサイトは、テキスト、画像、動画など様々な要素で構成されています。皆さんはそれらをどのように使い分けているでしょうか？今回は、ユーザがサイトを訪問する際の目的意識の強弱による使い分けのヒントをご紹介します。 弊社ではユーザ行動観察調査にアイトラッキングを用い、サイト利用時の視線の動きを調査していますが、そこで頻繁に見られる興味深い現象をご紹介しましょう。 あるメーカーサイトを題材として行った調査では、特定の情報を求めて訪問するケース（以下、探索モード）と、サイトのファンなど定期的にサイトを訪問しており、特に強い目的がないケース（以下、回遊モード）でユーザの目線の動きに明確な違いが見られました。（下図参照） 探索モード（図の左側）では、主にテキストリンクを中心に目的のコンテンツへのリンクを探す傾向があるのに対して、回遊モード（図の右側）では、バナーなどの画像を中心に見ていく傾向が強いこと
案内地図はGoogleマップだけで大丈夫？ (ユーザビリティ実践メモ)
Googleマップは無料で利用でき、組み込みも簡単なため、会社への案内地図として利用しているサイトも多いのではないでしょうか。ただし、条件によっては、Googleマップだけでは不十分なケースがあります。 1）全てのユーザがGoogleマップを使いこなせるわけではない 来訪するユーザは必ずしもGoogleマップの操作に習熟しているわけではありません。Googleマップはユーザが地図の表示範囲を移動したり、縮尺を変更できる点が魅力ですが、縮尺変更の操作はインターネットリテラシーの低いユーザにとっては難易度が高いため、ユーザに操作させることを前提とすることは避けるべきです。 来社するユーザの特性（周辺の地理に明るい地元の人/地理に疎い遠方の人など）や利用する交通手段（電車、徒歩、自家用車、バスなど）によっては異なる縮尺の地図を提示する必要がありますが、その場合は広域地図と周辺地図を分けて提示する
心理的なコントラスト効果 (ユーザビリティ実践メモ)
非常に高価なA商品を見た後に、それよりは安価なB商品を見ると、普段なら手が出ないB商品が安く感じられることがあります。 ウェブ上でもこのコントラスト効果を上手く利用することで、ユーザをビジネスゴールへと効果的に誘導できる場合があります。 例えば、「お問い合わせ」と「資料請求」という2つのボタンを並列に並べると、「資料請求」ボタン単体の場合に比べて「資料請求」ボタンがクリックされやすくなることが弊社のユーザビリティテスト（ユーザ行動観察調査）でも観察されています。 この場合、「お問い合わせはちょっと面倒だけど、資料請求だけならまあいいか」といった考えがユーザの心の中で働くようです。つまり、「お問い合わせ」との対比で「資料請求」が簡単に感じられるのです。 ユーザをビジネスゴールへと誘導していくための一手段としてコントラスト効果も考慮にいれると良いでしょう。 ただ、このコントラスト効果をユーザを
ネットブックやスマートフォン利用者に配慮したサイト作り (ユーザビリティ実践メモ)
最近ネットブックとスマートフォンの利用者が増えているように感じます。 電子情報技術産業協会の調査結果によると、第一四半期国内PC出荷数の2割弱はネットブックとなっています。 スマートフォンの国内出荷台数を正確に知ることは難しいですが、docomoのGoogle携帯HT-03Aが流通し始めた点や、7月の日本の携帯売上でソフトバンクのiPhone３GSが1位になった点から考えるに、今後ますます利用者が増えると予想されます。 私たちとしては、このような状況下でPC向けサイトを制作する際に、ユーザビリティの観点から注意すべき点が大きく3点あると考えます。 近年、家庭用PCのスペックや回線環境が整い、Flashなどを用いたリッチなコンテンツも快適に利用してもらえる可能性が高くなっていますが、一方でネットブックやスマートフォンの多くはそれほど快適なスペック、回線環境が整っているとはいえません。 たとえ
「システム視点」で機能を作っていませんか？ (ユーザビリティ実践メモ)
不動産情報サイトや転職情報サイトなど、多くの情報を掲載しているサイトでは、ユーザが複数の条件を指定して検索する、という機能が非常に重要になっています。 そのサイトで紹介している各情報の属性は、 個人、法人のいずれも募集している 個人だけ募集している 法人だけ募集している の三通りがあります。 それを反映して、サイトでの検索条件指定画面では、次のような項目となっています。 さて、この検索機能をユーザの視点から見てみましょう。 この情報検索サイトのターゲットユーザは、大きく個人ユーザか法人ユーザのどちらかです。 例えば個人ユーザであれば、「個人を募集している情報を見たい」というニーズを持っているわけです。 それでは、個人ユーザが上記のプルダウンを見たときには、何を選べばいいのでしょうか？ 「個人・法人」？ それとも「個人」？ 弊社で実施したユーザ行動観察調査では、ユーザが「自分は個人だから」と
謝ったら負け！？ アイコンも使い方次第 (ユーザビリティ実践メモ)
Webサイト上で、ユーザが目的の情報にたどり着きやすくするために、複数の条件での検索機能を提供することがあります。 たとえば、不動産業やCATVなど地域に関連したサービスで、ひとつのフォームから、郵便番号でも町名でも検索ができるような機能を実装しているような場合です。 この検索機能に関して、ユーザ行動観察調査を実施したところ、以下のような行動が見られました。 まず、ユーザは郵便番号を入れて、検索を行いました。 しかし、このユーザが入れた郵便番号が間違っていたため、次のようなエラーが表示されました。 すると、このユーザは即座に「あ、ダメなんだ」とこのサイトを離脱してしまいました。 実際には、正しい郵便番号を入れ直すか、町名を入れることで再度検索が可能なのですが、このユーザに再検索をしてもらうことはできませんでした。 この行動の裏には、以下のような心理の動きがあると考えられます。 アイコンを見
FLASHユーザビリティ3原則 (ユーザビリティ実践メモ)
FLASHによるWebコンテンツは、ビジュアルでの表現力が高く、最近はサイト全体をFLASHで構築する例もかなり多くなってきました。しかし、通常のHTMLと比べてインターフェース作成の自由度が高いため、非常に使いにくいサイトになってしまう可能性もあります。 今回は、FLASHコンテンツを設計する上で気をつけたいユーザビリティ上の3つの原則をご紹介します。 ユーザがウェブサイトを利用する上で最も頻繁に利用するブラウザの機能が「戻る」です。 弊社で実施したユーザ行動観察調査では、FLASHコンテンツの場合でも一つ前の表示画面へと戻そうとする場合、ブラウザの「戻る」ボタンを押すケースが非常に多く見られます。これは、FLASH画面内に「戻る」ボタンが設置されていても同様でした。 この問題への対策として、「表示画面ごとにURLを設定する」ことが効果的です。ブラウザはURLでページを管理しているので、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
