【スマートフォン】 図解！今すぐ直せる、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サイトを例に見てみると、ト
「関連リンク」の幻? 意図した誘導を行うための導線設計 (ユーザビリティ実践メモ)
あるコンテンツを見たユーザに対して「次にここを見て欲しい」という制作側の意図に反して、中々思い通りに見てもらえないといった話をお伺いすることがよくあります。 例えば、記事系のコンテンツで、記事を閲覧したユーザに対して関連記事や関連する製品ページへと誘導する場合、記事の下部に「関連リンク」のエリアを設け、その中に意図した誘導先のリンクを配置しているケースがよく見受けられます。 上記のような方法で、果たして意図通りにユーザを誘導することができるでしょうか？今回は「ユーザがこのページ以上の情報を積極的には求めていない」ケースについて考えてみました。 弊社の実施したユーザ行動観察調査においては、多くのユーザが価格まで閲覧した後にページの上部に戻り、そのまま見るのをやめてしまうという行動が見られました。 ここで、このような行動に至った原因を考えてみましょう。 アイトラッキングによる分析やユーザへのヒ
全てのIT・Web関係者に見つめなおして欲しい「Don’t Make Me Think」 - Feel Like A Fallinstar
”Don't Make Me Think” 訳すと、「いちいち私に考えさせるな！ボケ！」といったところでしょうか。 これは、2001年にSteve Krugが出した書籍の名前なのですが、この「ユーザにいちいち考えさせない」ことを忘れているか、いないかがソフトウェア・Webサイトの勝負を分ける最も大きな分岐点の1つです。 人間は日々の生活の中で、いちいち物を操作したり情報を見るたびにあれこれ考えたくなんてありません。 ユーザをつまらない操作やナビゲーションで考えされればさせるほどストレスは増大し、企業への信用は急激に失われます。 今日は、この”Don't Make Me Think”について、 如何にユーザが考えることを嫌うか 「考えさせない」とはどういうことか を、これまで見てきたユーザ検証の結果なども交えて、少しばかり書いてみようと思います。 あらゆる「無駄な」思考が、ユーザを苛立たせ、
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの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秒：ユーザは、自分がシステムを「直接」操作していると
テキストと画像、どのように使い分けていますか？ (ユーザビリティ実践メモ)
ウェブサイトは、テキスト、画像、動画など様々な要素で構成されています。皆さんはそれらをどのように使い分けているでしょうか？今回は、ユーザがサイトを訪問する際の目的意識の強弱による使い分けのヒントをご紹介します。 弊社ではユーザ行動観察調査にアイトラッキングを用い、サイト利用時の視線の動きを調査していますが、そこで頻繁に見られる興味深い現象をご紹介しましょう。 あるメーカーサイトを題材として行った調査では、特定の情報を求めて訪問するケース（以下、探索モード）と、サイトのファンなど定期的にサイトを訪問しており、特に強い目的がないケース（以下、回遊モード）でユーザの目線の動きに明確な違いが見られました。（下図参照） 探索モード（図の左側）では、主にテキストリンクを中心に目的のコンテンツへのリンクを探す傾向があるのに対して、回遊モード（図の右側）では、バナーなどの画像を中心に見ていく傾向が強いこと
案内地図はGoogleマップだけで大丈夫？ (ユーザビリティ実践メモ)
Googleマップは無料で利用でき、組み込みも簡単なため、会社への案内地図として利用しているサイトも多いのではないでしょうか。ただし、条件によっては、Googleマップだけでは不十分なケースがあります。 1）全てのユーザがGoogleマップを使いこなせるわけではない 来訪するユーザは必ずしもGoogleマップの操作に習熟しているわけではありません。Googleマップはユーザが地図の表示範囲を移動したり、縮尺を変更できる点が魅力ですが、縮尺変更の操作はインターネットリテラシーの低いユーザにとっては難易度が高いため、ユーザに操作させることを前提とすることは避けるべきです。 来社するユーザの特性（周辺の地理に明るい地元の人/地理に疎い遠方の人など）や利用する交通手段（電車、徒歩、自家用車、バスなど）によっては異なる縮尺の地図を提示する必要がありますが、その場合は広域地図と周辺地図を分けて提示する
謝ったら負け！？ アイコンも使い方次第 (ユーザビリティ実践メモ)
Webサイト上で、ユーザが目的の情報にたどり着きやすくするために、複数の条件での検索機能を提供することがあります。 たとえば、不動産業やCATVなど地域に関連したサービスで、ひとつのフォームから、郵便番号でも町名でも検索ができるような機能を実装しているような場合です。 この検索機能に関して、ユーザ行動観察調査を実施したところ、以下のような行動が見られました。 まず、ユーザは郵便番号を入れて、検索を行いました。 しかし、このユーザが入れた郵便番号が間違っていたため、次のようなエラーが表示されました。 すると、このユーザは即座に「あ、ダメなんだ」とこのサイトを離脱してしまいました。 実際には、正しい郵便番号を入れ直すか、町名を入れることで再度検索が可能なのですが、このユーザに再検索をしてもらうことはできませんでした。 この行動の裏には、以下のような心理の動きがあると考えられます。 アイコンを見
FLASHユーザビリティ3原則 (ユーザビリティ実践メモ)
FLASHによるWebコンテンツは、ビジュアルでの表現力が高く、最近はサイト全体をFLASHで構築する例もかなり多くなってきました。しかし、通常のHTMLと比べてインターフェース作成の自由度が高いため、非常に使いにくいサイトになってしまう可能性もあります。 今回は、FLASHコンテンツを設計する上で気をつけたいユーザビリティ上の3つの原則をご紹介します。 ユーザがウェブサイトを利用する上で最も頻繁に利用するブラウザの機能が「戻る」です。 弊社で実施したユーザ行動観察調査では、FLASHコンテンツの場合でも一つ前の表示画面へと戻そうとする場合、ブラウザの「戻る」ボタンを押すケースが非常に多く見られます。これは、FLASH画面内に「戻る」ボタンが設置されていても同様でした。 この問題への対策として、「表示画面ごとにURLを設定する」ことが効果的です。ブラウザはURLでページを管理しているので、
Webページの情報を共有してもらうための３つのポイント (ユーザビリティ実践メモ)
複数の人が関わるシナリオを意識しよう Webサイトを訪れたユーザが、商品・サービスの購入など何らかの意志決定を行う際、自分ひとりだけの判断で決めず、他の人と相談してから決めるという場合は、実はかなり多いものです。 弊社のユーザ行動観察調査では、以下のような例が見られました。 幹事役の数名が、各自で会場候補を検索各自が自分の選んだいくつかの候補を持ち寄り、どの会場にするか相談決定 【例2．企業におけるIT製品の導入】 部門の担当者が、おおまかな要求仕様を決め、メーカーサイトや販売店サイトを検索性能や価格などを一覧できる比較表を作り、IT管理者などに相談（IT管理者がWebサイトを閲覧する場合もあります）絞り込んだ候補について決裁文書を作り、上司に相談決定 【例3．住宅ローンの借り換え】 妻が金融機関サイトや比較サイトで情報収集夫に相談して候補を絞り込む絞り込んだ金融機関の店舗を夫婦で訪れ、担
成果を上げる！ユーザー中心ウェブサイト戦略――ビービット 遠藤直紀氏／WAISレポート | Web担当者Forum
ビービット代表取締役の遠藤氏は、成果を上げるユーザー中心のWebサイト戦略について講演。インターネットはセルフサービスチャネルの1つであるとし、「対面で日々対応していればチューニング、改善はできるがWebではやりづらい。しっかりとしたサービスをするには、対面よりもターゲットユーザーを認識しておく必要がある」と、ユーザーの姿が見えないWebでこそ、ユーザーを深く理解して情報提供することが必要であることを解説した。 また、「質の時代、個の時代にマーケティングスタイルが変化し、ニーズが多様化した現代では、自分が良いだろうと思ったものが通用しなくなっている」とした。さらに、あるビール工場では、30年前は数種類しかなかったビールを今では30種類以上作っていることを例にあげ、Webに限らずユーザー中心アプローチが必要であると指摘し、ユーザーが主役の時代ではユーザーに選ばれる企業がビジネス成果を掴むとし
ユーザビリティを高めるためのシャドウ（影）活用 - Feel Like A Fallinstar
久しぶりに純インターフェースのお話です。 メニューやウィンドウなどを表示するときに、ちょっとした工夫でぐっと見易さがアップすることがあります。 例えばこんな画面があるとします。 これは、「CITY GUIDE」のメニューを表示しているわけですが、この部分にちょこっとシャドウを施すと、大分印象が代わります。 いかがでしょうか？ 背景（他の情報）と今表示しているメニューとの領域の違いが明確になり、明らかに可読性がアップしているのが分かります。 この方法が有効な原因は2つあって 今見ている領域と、それ以外の領域の間の「敷居」が明確になる それ以外の領域部分にシャドウを掛けることで、結果的にそれらが背景であるとユーザに認識させることが可能 といったことが主なポイントです。 このようなシャドウの効用は主に以下の用途で活用できるでしょう。 ダイナミックHTMLによるメニュー表示 ポップアップ的にJav
ユーザビリティ活用例？悪用例？～ とても広告には見えないAdsenseのデザイン集 - Feel Like A Fallinstar
「これがAdsense？」と思ってしまうほどウェブサイトに馴染んでしまっている広告ユニットを紹介します。 単純に、背景に馴染ませるものから、見出しをつけたものまで色んなデザイン上の工夫が満載です。 それでは、まずはいきなり本命です。 日経BPオンライン http://www.nikkeibp.co.jp/style/biz/topics/c-gov/080415_6th/ 図はマウスオーバーしたときのものです。 Adsenseは、一定以上のPVになるとカスタマイズの自由が利くようになるのですが、それを最大限に利用しています。 マウスオーバーで領域全体が反転するのに加え、領域全体がリンクになっているのも実にせこい巧み。 ちなみに、同じページにある直売の広告ユニットはもっと強烈。 ここまでやってしまっていいのか？と思うほど、もはや広告かどうか全く分かりません・・・・ はてなダイアリー（キーワー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ビービットが提供するプロのユーザビリティ改善プロセスを体験―勝手にユーザビリティ診断 | Web担当者Forum
