タグ

ブックマーク / www.bebit.co.jp (19)

  • 「お客様の声」を読んでもらうコツ (ユーザビリティ実践メモ)

    5月28日の記事では「お客様の声」を掲載する場合は、インターネットの媒体特性を理解して掲載内容を吟味する必要がある、という考え方をご紹介しました。 詳細はこちら 「お客様の声」掲載時の注意点 今回は続編として、「お客様の声」をユーザに読んでもらうための具体的な方法を取り上げたいと思います。 ユーザは、自分と近い立場の「声」を探して読む傾向があります。お客様の属性情報を見てユーザが「自分に近いかどうか」を判断できるようにしましょう。 記載する属性は、BtoBサイトなら業種、部署、担当業務、会社規模が重要です。BtoCサイトでは、年齢、性別を基とし、それぞれの業界特性に応じた要素を付け加えましょう。金融なら年収・貯蓄額、人材なら職種・スキル・・・などが挙げられます。 ■Tips2:「声」の筋立ては、商品・サービスの利用効果が分かるようにする 時系列に、 商品・サービスを使用する前(何らかの課

  • ウェブサイト設計の時に役立つ7つのテクニック/【その6】目線の操作 (ユーザビリティ実践メモ)

    今回のテーマは「目線の操作」です。ユーザの視線を集める要素と遠ざける要素をうまく使い分けることで、意図通りにユーザにメッセージを伝達するためのコツをご紹介します。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 ←今回のテーマ 他サイトでの慣習 「目線の操作」を構成する3つの要素 視線の開始位置 視線を集める要素 視線を遠ざける要素 1. 視線の開始位置 例えば、以下は弊社のHPですが、このサイトを見るときどこから見ますか?「徹底した顧客心理分析により・・・」というブランドパネルか、その下の「コンサルティング事例・実績」ではないでしょうか? 弊社HPの例 ビービットのサイトには、「ビービットは何をやっているんだろう?どのような会社なんだろう?」ということを漠然と思いながら来訪する方が多いため、その疑問に直接答えられるようメインメッセージや実績エリアに目

  • スマートフォン対応しただけで、安心してはいけない理由 (ユーザビリティ実践メモ)

    前回に引き続き、スマートフォン対応サイトを制作する場合に気をつけるべきポイントとして、「PCサイトへの誘導の必要性」についてご紹介します。 スマートフォン対応サイトでも、PCサイトへの誘導を残しておこう スマートフォン対応をしているサイトの中には、PCサイトへのリンクが用意されている場合があります。せっかくスマートフォンから利用しやすいユーザインタフェースを用意しているのに、どうしてPCサイトへと誘導する必要があるのでしょうか? 今回は、PCサイトへのリンクが必要な2つの理由についてご説明します。 スマートフォンはPCと比べると画面サイズも小さいため、最適化したサイトを作るために機能を絞ったり、情報量を減らしてサイトを構成するケースがよくあります。このような場合には、忘れずにPCサイトへのリンクを用意しておくことが必要です。 amazon.co.jpのiPhoneサイトを例に見てみると、ト

  • iPhoneサイトで気をつける3つのポイント (ユーザビリティ実践メモ)

    スマートフォン利用者の増加に伴い、スマートフォン、特にiPhone対応サイトを用意する企業が増えてきましたが、必ずしもデバイスの特徴を考慮したサイトとなっていないケースが見られます。今回は弊社の調査で見られたユーザ行動を元に、iPhoneサイトで気をつけるべきポイントをご紹介します。 従来の携帯では下ボタンで画面をスクロールさせる際リンクに順番にフォーカスがあたるため、テキストリンクでもユーザの視線が止まりやすい傾向があります。一方iPhoneでは指で画面をスクロールさせるため、リンクにフォーカスはあたりません。テキストリンクがアイキャッチとなりにくく、携帯と比較して文字情報がまとめて読み飛ばされるケースがみられます。ユーザの目線を止めるには、アイキャッチ用の画像を配置するなどの工夫が必要です。 【ポイント2】細かな操作はさせない iPhoneはタッチパネルを指で操作するため、画面上の1点

    mattarin
    mattarin 2010/08/03
    iPhoneサイトと言いつつ例がiPhoneアプリなんだけどまぁあまり違いはないか。。
  • 「関連リンク」の幻? 意図した誘導を行うための導線設計 (ユーザビリティ実践メモ)

    あるコンテンツを見たユーザに対して「次にここを見て欲しい」という制作側の意図に反して、中々思い通りに見てもらえないといった話をお伺いすることがよくあります。 例えば、記事系のコンテンツで、記事を閲覧したユーザに対して関連記事や関連する製品ページへと誘導する場合、記事の下部に「関連リンク」のエリアを設け、その中に意図した誘導先のリンクを配置しているケースがよく見受けられます。 上記のような方法で、果たして意図通りにユーザを誘導することができるでしょうか?今回は「ユーザがこのページ以上の情報を積極的には求めていない」ケースについて考えてみました。 弊社の実施したユーザ行動観察調査においては、多くのユーザが価格まで閲覧した後にページの上部に戻り、そのまま見るのをやめてしまうという行動が見られました。 ここで、このような行動に至った原因を考えてみましょう。 アイトラッキングによる分析やユーザへのヒ

    mattarin
    mattarin 2010/07/26
    なるほどー
  • テキストリンクは「ユーザにわかる言葉」で (ユーザビリティ実践メモ)

    アンカーテキストによるリンクは、様々なリンク形式の中で最も古く、最も簡単で、最も慣れ親しまれているものと言えるでしょう。今回はそのテキストリンクの使い方について考えてみます。 いかがでしょう? どれをクリックしたいと思いましたか? ユーザ行動観察調査でよくあるパターンとしては、「とりあえず上から順番にクリックしてみる」か「一切クリックしない」です。 ユーザは、リンクには気づいても(アイトラッキングをすると確実に視線は届いています)、クリックした先に何があるかが想像できないため、当てずっぽうの行動をするか、離脱してしまいます。 自社の製品に独自のネーミングを施して、他社との差別化を図るということ自体はよいのですが、その製品が何なのかが伝わらなければ意味がありません。 では、これではどうでしょうか? それぞれがどんな製品かを示すテキストを添えることで、ユーザの理解が進みそうな気がしますが、残念

    mattarin
    mattarin 2010/03/02
    この例だと濃い色のほうに目がいってしまう気が
  • 【海外事例に学ぶ】フォーム入力におけるリアルタイムエラー表示のポイント (ユーザビリティ実践メモ)

    今回は、A List Apart掲載のルーク・ウロブレウスキ氏(※)による記事、“Inline Validation in Web Forms”をご紹介します。当記事のテーマは、フォーム入力中のリアルタイムエラー表示(インライン・バリデーション)方法の最適化についてです。 まずはフォーム入力におけるリアルタイムエラー表示がどのようなものか、以下のデモをご覧ください。 【動画】�:フォーム入力におけるリアルタイムエラー判定デモ 上記のようなリアルタイムエラー判定のできるフォームについて、ウロブレウスキ氏は21歳から49歳の22人の被験者でユーザ調査を実施しました。 すると、通常の入力フォームと比べ、入力の成功率が22%向上し、エラー率が22%減少、入力時間も42%減少したとのことです。さらに、調査結果からは次のような2つの知見が得られています。

  • 入力フォームでの「郵便番号」の意外な盲点 (ユーザビリティ実践メモ)

    登録や申し込みページの入力フォームにおいて、郵便番号を入力すると住所欄が自動入力される機能は、ユーザの入力負荷を軽減する便利な機能です。実はこの機能、正しく郵便番号を入力してもある条件下ではエラーとなってしまうことがあることをご存知でしょうか。今回は入力フォームでの「郵便番号」の意外な盲点についてご紹介します。 ただ、「会社」で用いられている郵便番号は一般的な郵便番号と異なる場合があります。 郵便番号は、特定の企業(1日の配達量が一定量を超えるような事業所)に対して「大口事業所個別番号」という事業者向けの郵便番号を割り当てており、該当する企業はこの割り当てられた郵便番号を使用しています。 しかし、郵便番号から「住所を自動入力する機能」が参照している郵便番号は必ずしもこの「大口事業所個別番号」に対応しているわけではありません。入力された郵便番号が対応していない「大口事業所個別番号」であった場

    mattarin
    mattarin 2009/12/10
    そんなものがあるのかぁ
  • 【○×】Q.ユーザが画像をざっと見て良し悪しを判断する商品の詳細ページでは、「左:画像、右:文章」、その下は「左:文章、右:画像」と、画像と文章を交互に配置したレイアウトとする方が、そうでない場合に比べて文章にも目を通してもらえる可能性が高い。○か×か?: beBit.Q

    【解説】写真画像で良し悪しを判断しようと考えているユーザの視線は、自然と画像と画像をつなぐ形で流れます。画像と文章を交互に配置することでユーザの視線が散らばり、スクロール速度も遅くなりやすいため、比較的文章にも目を通してもらいやすいレイアウトとなります。 解説詳細 例えば、セオリー通り情報が整理されたきれいなレイアウトを達成しようとすると、以下のようになります。 この場合ユーザは、気になる画像があれば横にある文章にも目を移しますが、基的にはすーっと下に向かって画像だけを眺めてスクロールするといった行動をとりがちです。 また、単調なレイアウトであるためにユーザのスクロール速度も速くなりがちです。 一方、画像と文章を交互に配置したレイアウトでは、ユーザの視線は以下のように散らばってくれる可能性が高くなります。 この場合はユーザが画像から画像に視線を移すタイミングで自然と文章が視野に飛び込んで

  • カードを使って簡単にユーザニーズを探る方法 (ユーザビリティ実践メモ)

    「サイトの画面設計やデザイン性はそれなりに良いのだが、肝心の中身、コンテンツが足りていないので強化したい。けれどどんなコンテンツがユーザから求められているのか分からない…。」 今回はそんな時に役立つ調査手法の1つとして、「カードソーティング」をご紹介します。 メリット この手法の最大のメリットは、実際に物を作る前であっても、ユーザの行動観察ができることです。 カードという刺激物を与えて、それに対してユーザがどのように行動するかを見ることができるため、「どんなものが見たいですか?」、「○○というコンテンツがあったら見たいですか?」といったインタビューよりもはるかに意味のある検証が可能です。 また、ユーザと面しているため、仕分け結果の理由をすぐに尋ねることができるのもメリットです。具体的にどのようなものを期待したのか、なぜ見たくないのかなどを尋ねられるため、その場で疑問を解消し、さらに深掘りす

  • 結果をただ比較するABテストよりも (ユーザビリティ実践メモ)

    サイトページやクリエイティブ変更の効果を測定する手法であるABテストは、広告・サイト運営にひろく取り入れられています。 ですが、ただ結果を比較して「Aの方がよかった」「Bの方がよかった」と言っているだけでは、次につながりにくくもったいない状態です。 仮説検証のインプットとしてABテストを利用することで、ABテストは長期的改善につながる手法となります。 下図のような、A:作り手の写真 と B:お菓子の写真とでABテストを実施する場合、テストの計画段階と分析段階で仮説検証を意識することで、得られるインプットがどう変わるか考えてみます。 <テスト1:ただ比較する場合> ■テストの計画段階 「お菓子のサイトでは、作り手やお菓子の写真を使用しているところが多いな。どちらが売上げがよくなるだろう」 ■分析段階 「お菓子の方がよかったから、お菓子をメインビジュアルで採用しよう」 単純なクリエイティブのテ

  • 「システム視点」で機能を作っていませんか? (ユーザビリティ実践メモ)

    不動産情報サイトや転職情報サイトなど、多くの情報を掲載しているサイトでは、ユーザが複数の条件を指定して検索する、という機能が非常に重要になっています。 そのサイトで紹介している各情報の属性は、 個人、法人のいずれも募集している 個人だけ募集している 法人だけ募集している の三通りがあります。 それを反映して、サイトでの検索条件指定画面では、次のような項目となっています。 さて、この検索機能をユーザの視点から見てみましょう。 この情報検索サイトのターゲットユーザは、大きく個人ユーザか法人ユーザのどちらかです。 例えば個人ユーザであれば、「個人を募集している情報を見たい」というニーズを持っているわけです。 それでは、個人ユーザが上記のプルダウンを見たときには、何を選べばいいのでしょうか? 「個人・法人」? それとも「個人」? 弊社で実施したユーザ行動観察調査では、ユーザが「自分は個人だから」と

    mattarin
    mattarin 2009/08/17
    大事
  • 【携帯サイト】もう1ページ先に進んでもらうための6つのテクニック (ユーザビリティ実践メモ)

    せっかくコンテンツを作っても、リンクがユーザにクリックされず、内容を見てもらえない、という悩みをお持ちのWEBマスターの方は多いのではないでしょうか。 今回は、携帯サイトでユーザを次ページに導くためのテクニックをご紹介します。 筆者がユーザビリティテスト(ユーザ行動観察調査)を通して得た実感として、携帯サイトの方がパソコンサイトよりも次ページへの誘導が難しいという印象があります。ある携帯の有料会員制サイトでは、「ユーザはいつも利用しているリンク以外はほとんどクリックしない」というユーザ行動が見られました。 理由として、携帯サイトは 読み込みが遅い隙間時間に利用される場合が多く、利用時間が短いパケット代がかかる などが考えられます。 そのため、携帯サイトでユーザを次ページに誘導するためには、パソコンサイト以上に誘導方法を意識する必要があります。以下、ユーザビリティテスト(ユーザ行動観察調査)

  • Gmailから見るユーザビリティ ~ リンク文言や記号をユーザ視点で考える (ユーザビリティ実践メモ)

    今回は、ウェブメールを題材として、ちょっとした工夫でウェブサイトのユーザビリティをあげるためのコツを取り上げます。 このとき、見ているメールよりも古いメールを読みたいのにも関わらず、「前」をクリックしてしまい、新しいメールへページを送ってしまうのです。もちろん、すぐに気づいて読みたいメールへ移動するのですが、ウェブサイト上ではこのような小さいストレスでも、ユーザの離脱を招きかねません。 この画面の場合、以下の工夫を行うことで、利用の際のストレスを軽減できるでしょう。 1.適切なリンク文言を利用する 2.ユーザの心理状況に応じたメタファー(記号)を利用する ■1点目:適切なリンク文言を利用する 「前」か「次」という文言は、一瞬では古いメール、新しいメールのどちらに移動するのかがわかりません。 ここで、同じGmailの英語版の表現を見てみましょう。(図2参照) 英語版では「newer」、「ol

  • ユーザの慣れや先入観に配慮する (ユーザビリティ実践メモ)

    インターネットの普及が進みユーザのウェブサイト利用経験が増えるにつれ、ユーザにある種の慣れや先入観が発生していることがあります。ウェブサイトやページを設計していく上では、この慣れや先入観を加味して構成を検討することが重要です。 今回はこのようなユーザの慣れ・先入観について、弊社である企業サイトのユーザビリティテスト(ユーザ行動観察調査)を行った際の事例をご紹介します。 しかし、調査においてユーザに企業情報コンテンツを探してもらったところ、ほとんどのユーザはメインコンテンツエリアに置いたリンクを見つけることができませんでした。 これらのユーザの行動をアイトラッキングで確認したところ、トップページを訪れたユーザは、メインコンテンツにほとんど視線を移すことなく画面下部のフッターを注視し、企業情報へのリンクを探そうとしていましたが見つからず、ついで画面上部に戻り、ヘッダーを探したもののやはり発見で

  • IDを指定してもらうタイミング (ユーザビリティ実践メモ)

    会員登録手続き等、入力フォームにおいてユーザに好きなIDを指定してもらう場合、ID入力フィールドの画面設計に注意が必要です。 弊社で行った同様の入力フォームの調査では、何のIDを入力してよいかが分からず「ここには何を入力すればいいの?」と困惑するユーザが確認されました。 こうしたケースでは、ユーザに運営者側の意図を伝えられているかどうか、忘れずにチェックを行いましょう。 IDの入力フィールド付近に「ご希望のIDを指定してください」といった文言を添え、ユーザにIDを指定してもらうことを明確にする冒頭にあるID・パスワードの入力フィールドは、所有ID・パスワードの入力と誤解されやすいため、できる限り冒頭に設置しない (但し、その前の文脈から、ユーザがIDを新しく取得する意思を持ってこのページに来ているとすれば、この限りではありません) 上記の工夫を施したフォームでユーザビリティテスト(ユーザ行

  • 英語表記のタイトルは要注意 (ユーザビリティ実践メモ)

    検索エンジンを使って目的のサイトを探すユーザが多い今日、サイトのタイトルの付け方は重要な要素となっています。 そんなサイトのタイトルが英語で表記されているケースが見受けられることがあります。サイト設計者やデザイナは見た目の良さから英語表記を使用しがちですが、ユーザは正しく理解しているでしょうか? 弊社によるユーザビリティテストでは、ほとんどのユーザが検索結果一覧の中から英語表記のリンクを避けて、違うサイトのリンクをクリックをしていました。検索結果上位に表示されていて、ユーザの視界に入っていても、クリックされなかったのです。 英語表記のサイトタイトルがクリックされなかった理由として以下が考えられます。 ユーザ自身が探しているサイトではないと勘違いしてしまう リンク先ページ内容が瞬間的に理解しづらい リンク先ページは英語サイトであると勘違いしてしまう ユーザは、検索結果ページにてサイト

  • コラム一覧 | - エクスペリエンス・デザイン・パートナー

    コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し

    コラム一覧 | - エクスペリエンス・デザイン・パートナー
  • ビービット

    ビービット、Google Analytics 4 データインポート機能をUX分析・改善SaaS「USERGRAM」に追加

    ビービット
  • 1