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

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

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

    kkeisuke
    kkeisuke 2010/08/03
  • 【海外事例に学ぶ】フォーム入力におけるリアルタイムエラー表示のポイント (ユーザビリティ実践メモ)

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

    kkeisuke
    kkeisuke 2010/03/01
  • コンバージョン直前のユーザがつまずきやすいポイント (ユーザビリティ実践メモ)

    コンバージョン率向上を考えた場合、エントリーフォーム最適化(EFO)など、フォーム内の改善に意識が向きがちですが、実はフォームに入る前の段階にも改善すべき点が残されている場合があります。 今回はフォームに入る前のページでよくみられる、ユーザのつまずきやすいポイントをご説明します。 ウェブサイトを訪問しているユーザにとって、個人情報の入力などの手続き行為は主目的ではありません。商品を購入したり、申し込み後にサービスを利用することが当の目的です。その目的に早く到達するため、手続き行為にはできるだけ手間をかけず、手早く終わらせようとする傾向が見られます。 ここで、注意が必要なのが手続きの途中に会員登録のステップがあるケースです。 ECサイトでは「購入」の手続きの途中で「既存/新規ユーザ」の振り分けが行われる場合がありますが、ユーザは手続きのステップとして「会員登録」が必要あることを必ずしも事前

    kkeisuke
    kkeisuke 2010/02/15
  • 「お待たせしない」Webサイトでの接客 (ユーザビリティ実践メモ)

    1990年代、電話回線やISDNを使ったダイヤルアップ接続(低速・時間課金)でインターネットに接続することが一般的だった頃は、Webサイトの利用は「時間との勝負」という側面がありました。そのためWebサイトを制作する際も、htmlファイルや画像などを含めたページ当たりのサイズを小さくしてページの表示速度を高め、ユーザを待たせないことが重要視されていました。 ■人間の思考とシステムの反応速度 人間の操作に対するシステムの反応速度については、一般的に次のような関係が見られると言われています。 (参考:「Response Times: The Three Important Limits」 Useit.com(英語)、「10の累乗: ユーザーエクスペリエンスにおける時間スケール」 Jakob NielsenのAlertbox(日語)) 0.1秒:ユーザは、自分がシステムを「直接」操作していると

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

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

    kkeisuke
    kkeisuke 2009/11/03
  • テキストメールを作成する際の注意点 (ユーザビリティ実践メモ)

    メールマガジンは新製品・サービスの案内やキャンペーン告知など、ユーザとの長期的な関係性を構築する重要なチャネルとして重要視されています。 今回はテキストメールを配信する際に注意すべき事項を3点紹介いたします。 1.「タイトル」や「リンクへの誘導文言」にユーザへのメリットを明示する 1日に何通ものメールを受信するユーザは、1つ1つのメールにかける時間を短縮するため、メールの中で目立つ「タイトル」や「リンク部分」のみを閲覧し、それ以外の部分は飛ばし読みする傾向があります。 そのためユーザに伝えたいことは、必ず「タイトル」や「リンク部分」にも盛り込むことが重要になります。 2. 1行を全角35文字以内に収める 多くのメールソフトにおいて、横幅のデフォルト設定は36~38文字となっています。それ以上に横幅が長いメールを配信すると、表示が崩れてしまいますので、メール文面において1行は全角35文字以内

    kkeisuke
    kkeisuke 2009/11/03
  • 新卒採用ページ、本当に学生視点ですか? (ユーザビリティ実践メモ)

    2011年の新卒採用活動に向けて、採用ページをリニューアルしたり、コンテンツを拡充したりする企業サイトが多くなっています。今回は、新卒採用ページを「学生視点」で作るためのポイントについて考えたいと思います。 ただその場合でも、掲載コンテンツを当に有効なものとするには、学生の目線に立っているかどうかをチェックしてみる必要があります。 例えば、職種の紹介として、以下のような例があった場合、どちらがイメージしやすいでしょうか? 例Aに関しては、その職種に関する業務知識がないと、内容をイメージすることは難しいですが、例Bについては、1日の流れをイメージできたのではないでしょうか。 学生は業務経験がなく、社会人にとっては常識的な業務知識もないことがほとんどです。そのため、業務知識がないユーザも理解できるような配慮が求められます。(上記では「タイムスケジュールにする」、「解説をつける」、「画像で補足

    kkeisuke
    kkeisuke 2009/10/20
  • 初心者でも使えるサポートページの作り方 (ユーザビリティ実践メモ)

    お問い合わせコストを節約するため、ウェブサイトに「よくあるご質問」や「アフターサービス情報」等を豊富に掲載して、ユーザの自己解決を促すケースが多くなってきています。 一方で、インターネットに不慣れなユーザ(以下:初心者)が利用するにはハードルが高いサポートページも多く存在します。 今回は、特に初心者向けにサポート情報を提供する際のポイントをご紹介します。 サポート情報を提供する上で最も重要なことは、ユーザが目的の情報にスムーズにアクセスできるようにすることです。そこでサポートページでは、「一道で目的の情報にたどり着ける」ように導線設計をすることが重要です。 一般的には、「商品カテゴリから探す」、「型番から探す」、「よくあるご質問から探す」など、色々な探し方が出来たほうが、ユーザビリティーが高い傾向があります。しかしこの一般則は、初心者がサポートページを利用する場合には必ずしも当てはまりま

    kkeisuke
    kkeisuke 2009/10/15
  • テキストと画像、どのように使い分けていますか? (ユーザビリティ実践メモ)

    ウェブサイトは、テキスト、画像、動画など様々な要素で構成されています。皆さんはそれらをどのように使い分けているでしょうか?今回は、ユーザがサイトを訪問する際の目的意識の強弱による使い分けのヒントをご紹介します。 弊社ではユーザ行動観察調査にアイトラッキングを用い、サイト利用時の視線の動きを調査していますが、そこで頻繁に見られる興味深い現象をご紹介しましょう。 あるメーカーサイトを題材として行った調査では、特定の情報を求めて訪問するケース(以下、探索モード)と、サイトのファンなど定期的にサイトを訪問しており、特に強い目的がないケース(以下、回遊モード)でユーザの目線の動きに明確な違いが見られました。(下図参照) 探索モード(図の左側)では、主にテキストリンクを中心に目的のコンテンツへのリンクを探す傾向があるのに対して、回遊モード(図の右側)では、バナーなどの画像を中心に見ていく傾向が強いこと

    kkeisuke
    kkeisuke 2009/10/08
  • 情報を確実に伝える「近接」テクニック (ユーザビリティ実践メモ)

    ウェブサイトに十分な情報を載せているのに、なぜかユーザに正しく情報が伝わらない、そんなケースは多いのではないでしょうか。今回は、実際の事例をもとに、「情報の関連性」を使ったテクニックをご紹介します。 今回取り上げるサイトでは、ウェブや電話では契約の新規申し込みはできないにも関わらず、「契約までの流れが理解されず、申し込みの電話がきてしまう」という課題がありました。対策として、お問い合わせページ内に「契約までの流れ」を記載していました(図1)が、ユーザは全く気付かず電話をしてしまう状況でした。 皆さんなら、どのような改善案を考えますか?(制約条件として、「商品説明」ページなどは修正ができないものとします) ユーザは「探している情報」しか目に入らない ありがちな対策として、「契約までの流れを画面上部に配置し、とにかく情報を見せる」という案があります(図2)。しかしこの案は、あまり効果的とは言え

    kkeisuke
    kkeisuke 2009/09/18
  • ネットブックやスマートフォン利用者に配慮したサイト作り (ユーザビリティ実践メモ)

    最近ネットブックとスマートフォンの利用者が増えているように感じます。 電子情報技術産業協会の調査結果によると、第一四半期国内PC出荷数の2割弱はネットブックとなっています。 スマートフォンの国内出荷台数を正確に知ることは難しいですが、docomoのGoogle携帯HT-03Aが流通し始めた点や、7月の日の携帯売上でソフトバンクのiPhone3GSが1位になった点から考えるに、今後ますます利用者が増えると予想されます。 私たちとしては、このような状況下でPC向けサイトを制作する際に、ユーザビリティの観点から注意すべき点が大きく3点あると考えます。 近年、家庭用PCのスペックや回線環境が整い、Flashなどを用いたリッチなコンテンツも快適に利用してもらえる可能性が高くなっていますが、一方でネットブックやスマートフォンの多くはそれほど快適なスペック、回線環境が整っているとはいえません。 たとえ

    kkeisuke
    kkeisuke 2009/09/10
  • 入力フォームのコンプライアンス文言はどう配置する? (ユーザビリティ実践メモ)

    会員登録フォームや資料請求フォームでの入力作業は、多くのユーザにとって面倒で煩わしい作業です。フォームをできるだけ「簡単そう」、「手軽そう」な印象にすることは、ユーザの心理的負担を軽減するうえで重要です。 ただ、ユーザに対して丁寧に注意文言を提示すればするほど、まとめて無視されてしまったり、「簡単そう」な印象から離れて威圧感のあるページとなってしまうなど、適切にユーザに情報を伝えるという来の意図から外れてしまいます。 今回はユーザの心理的障壁を高めることなく、コンプライアンス文言を適切に配置する方法を考えてみたいと思います。 1)注意文言をリンクにする 情報量の多い注意文言はリンクにすると必要なスペースが少なくて済むため、見た目の威圧感を低減するとともに、まとめて無視されてしまうリスクも低減します。また、必ずしも全ユーザに確認してもらう必要のない重要度の低い注意文言に関しては、まとめてペ

    kkeisuke
    kkeisuke 2009/09/03
  • 成果につながるフォーム最適化 - シナリオの重要性 (ユーザビリティ実践メモ)

    また、サイトのコラムや実践メモでも、フォームの最適化については何度も述べてきました。 【ユーザビリティコラム】登録フォームのユーザビリティ 【ユーザビリティ実践メモ】フォームに関する記事一覧 フォームはユーザがアクションを行うために通過が必要な最後の砦であり、非常に重要な領域です。しかしながら、サイトはフォームが全てではありません。 あるサイトのフォームは、ユーザビリティは十分高いと思われるにもかかわらず、リスティング広告から入ってきたユーザのフォーム通過率は10%以下という状況でした。 そこで、ユーザがフォームに至るまでの過程を調べると、次のような課題が発見されました。 課題1. サイトに入ってくるユーザ全員に対して、同じ受け方を行っていた あらゆるリスティングのキーワードに対して、同じページを受けページとして設定していたのですが、実際にはキーワードによって、ユーザの状況は下記のように

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

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

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

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

    kkeisuke
    kkeisuke 2009/07/27
  • サイト間連携時に陥りがちなミス (ユーザビリティ実践メモ)

    自社内の組織の構造をウェブサイトに反映させている企業は少なくないのではないでしょうか?今回の実践メモではそうしたサイトを利用したユーザの反応と、対処方法をご紹介します。 サイト利用中の行動を観察していると、ユーザが衣料品サイトにログインをしようとしたところ、唐突に料品サイトでのログインを求められたため、フォームに何を入力してよいのかを理解できず困惑する様子が確認されました。 フォーム上部の文言で料品サイトのID・パスワードの入力が必要な点を説明することで、上記のような状況を一定程度回避することが可能だと考えられます。しかし、問題発生の真の原因は、同一企業のサイトであれば何を入力すべきかをユーザはなんとなく理解できるであろうという企業側の期待です。 当然のことながら、ユーザはサイト運営企業のシステム事情などは知りません。 そのため、サイト間の連携をとる際には、提供者側が分かりきっている内

    kkeisuke
    kkeisuke 2009/07/21
  • ネットリサーチを正しく利用するための3つのポイント (ユーザビリティ実践メモ)

    ネットリサーチは従来のアンケートと比較して低コストかつ短期間で定量データを獲得できる有益な手段のひとつです。 しかし、その手軽さが逆に誤った結果を導き出してしまう危険性があることには注意が必要です。 ネットリサーチでは、インタビュー調査のように質問者が同席していないため、回答時の態度が見えず、無責任に回答しやすいという特徴があります。 また、調査会社に登録したモニターを対象にアンケートを行う場合、ユーザ(モニター)はアンケートに回答するだけでポイントや謝礼を獲得できるので、アンケートに「正しく」回答するインセンティブが小さく、適当に回答してしまうことがあるようです。 今回はネットリサーチにおいて回答の正確性を高める方法を3つ紹介します。 対応策1. ダミーの回答項目を用意する 選択肢の中に現実には有り得ない項目を紛れ込ませ、その項目をチェックしたユーザを排除する方法です。下の例をご覧くださ

    kkeisuke
    kkeisuke 2009/07/14
  • 謝ったら負け!? アイコンも使い方次第 (ユーザビリティ実践メモ)

    Webサイト上で、ユーザが目的の情報にたどり着きやすくするために、複数の条件での検索機能を提供することがあります。 たとえば、不動産業やCATVなど地域に関連したサービスで、ひとつのフォームから、郵便番号でも町名でも検索ができるような機能を実装しているような場合です。 この検索機能に関して、ユーザ行動観察調査を実施したところ、以下のような行動が見られました。 まず、ユーザは郵便番号を入れて、検索を行いました。 しかし、このユーザが入れた郵便番号が間違っていたため、次のようなエラーが表示されました。 すると、このユーザは即座に「あ、ダメなんだ」とこのサイトを離脱してしまいました。 実際には、正しい郵便番号を入れ直すか、町名を入れることで再度検索が可能なのですが、このユーザに再検索をしてもらうことはできませんでした。 この行動の裏には、以下のような心理の動きがあると考えられます。 アイコンを見

    kkeisuke
    kkeisuke 2009/07/01
  • 【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)

    これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 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)のフッター(下図)では、革

    kkeisuke
    kkeisuke 2009/06/24
  • FLASHユーザビリティ3原則 (ユーザビリティ実践メモ)

    FLASHによるWebコンテンツは、ビジュアルでの表現力が高く、最近はサイト全体をFLASHで構築する例もかなり多くなってきました。しかし、通常のHTMLと比べてインターフェース作成の自由度が高いため、非常に使いにくいサイトになってしまう可能性もあります。 今回は、FLASHコンテンツを設計する上で気をつけたいユーザビリティ上の3つの原則をご紹介します。 ユーザがウェブサイトを利用する上で最も頻繁に利用するブラウザの機能が「戻る」です。 弊社で実施したユーザ行動観察調査では、FLASHコンテンツの場合でも一つ前の表示画面へと戻そうとする場合、ブラウザの「戻る」ボタンを押すケースが非常に多く見られます。これは、FLASH画面内に「戻る」ボタンが設置されていても同様でした。 この問題への対策として、「表示画面ごとにURLを設定する」ことが効果的です。ブラウザはURLでページを管理しているので、

    kkeisuke
    kkeisuke 2009/06/16