【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
ユーザに情報を届けるテクニック - 数と順序を明示する (ユーザビリティ実践メモ)
自分が作ったサイト内のページにおいて、ユーザがどのように情報を見ているかは、誰もが気になるところかと思います。今回は、ユーザに届けたい情報を、きちんと届けるためのテクニックを1つ、ご紹介します。 弊社では、ユーザ行動観察調査を行う際、ユーザがどこを見ているのかを分析できるアイトラッキングシステムを利用しています。 あるユーザ行動観察調査で、以下のような2カラム構成の画面をユーザに使ってもらったところ、ユーザに右側の情報を見てもらえない（情報に気付いてもらえない）まま、ユーザの視線がページ下部まで流れてしまうという現象が見られました。 一般的に、ユーザの視線は画像に集中する傾向があります。図1のプロトタイプの場合、左側に配置した訴求ポイントが最もユーザに届けたい情報であったため、エリアを大きく取り、大きな画像を用いて説明を行っていました。 しかし、そのために、右側に配置した訴求ポイントをユー
オーバーレイ表示を行う際の注意点 (ユーザビリティ実践メモ)
1ページでは載せきれない補足情報などを提示する際、元のページの上に重ねて表示する方法がしばしば用いられます（オーバーレイ表示と呼ばれています）。 今回は、オーバーレイ表示を行う際にどのような点に注意すべきかについてお伝えしたいと思います。 前提としてオーバーレイ表示には、下記のような利点があると考えられます。 ・ ページ遷移を挟まずに情報を提示できるため離脱されづらい ・ 情報に触れてもらえる確度が高い 一方で、この表示方法が抱えるリスクも存在します。 特にモーダルダイアログ（オーバーレイで表示されたダイアログを閉じるまで、他の部分が操作できないタイプのもの）を用いる場合にはかなり致命的なリスクが存在することが弊社のユーザ行動観察調査で発見されました。 実は調査の中で、オーバーレイで表示されたコンテンツ（下図B-2）を見終えたユーザが、ブラウザの「戻る」ボタンを押してしまうシーンが何度も見
ページ内リンクを使用する際の注意点 (ユーザビリティ実践メモ)
しかし、ユーザはリンクをクリックする際、そのリンクが「別ページへの移動」なのか「同一ページ内でのリンク」なのかは事前に把握していません。弊社のユーザ行動観察調査では、ページ内リンクをクリックしたユーザが、クリックした先のコンテンツをスクロールしながら閲覧する途中で、自分がクリックの前と同じページにいる（ページ内リンクだった）ことを知って混乱する行動が多く見られます。 これは、自分がページ内の移動をしていることや、現在自分がいる位置について充分なフィードバックを得ないままユーザが行動することで起こる混乱と考えられます。 ページ内リンクの利点を活かしつつ、ユーザに「現在自分がどういう状態にいるのか」を伝え、混乱を最小限に抑える方法としては以下のようなものがあります。 【クリック前】 リンクのすぐそばに、上下の動きを示すアイコンを置くことによって、そのリンクが同一ページ内での移動であることを伝え
オプトインメールの承諾画面をユーザ視点でチェックする (ユーザビリティ実践メモ)
平成20年6月に成立した「特定商取引に関する法律及び割賦販売法の一部を改正する法律」では、宣伝や広告を目的としたメールを送信する際には、ユーザから事前に承諾を取ること（オプトイン方式）が必要と定められました。きちんとした承諾を取らずに広告や宣伝メールを配信した場合行政処分の対象となる場合もあります。今回は事前の承諾の取り方について、経済産業省のガイドラインを元に考えてみたいと思います。 1）デフォルト・オン方式 （広告メール送信希望のチェックが入っている） 2）デフォルト・オフ方式 （広告メール送信希望のチェックが入っていない） 推奨は「2）デフォルト・オフ方式」とされていますが、ユーザが認識しやすい形であれば「1）デフォルト・オン方式」も認められています。ただし、その場合は、ユーザが「容易に認識できる表示」とすることが必要です。 経済産業省のガイドラインではユーザが「容易に認識できる表示
「自由にカスタマイズ」の落とし穴 (ユーザビリティ実践メモ)
「一人一人のニーズに合わせてカスタマイズできる」ことを売りにした製品やサービスは、近年よく目にします。 例えば、 ・個々の保障内容を自由に組み合わせられる自動車保険 ・各パーツのスペックやオプションを自由に選んで注文できるパソコン などはその代表的な例といえるでしょう。 そのため、何のヒントもない状態で「何でも自由にカスタマイズできますよ」と言われても、ユーザは却って戸惑ってしまいます。 そのため、以下のような工夫が考えられます。 工夫１：代表的なプラン例を提示するあらかじめ、スタンダードな内容で構成したプラン例を用意した上でカスタマイズ可能であることを伝える、というのは代表的な工夫の１つです。 例えば自動車保険のオンライン見積りを提供している三井ダイレクト損保では、「プラン1-3」まで3つのプランを提示しています。 工夫２：カスタマイズ可能な項目に、判断材料を提供する もう一つの工夫とし
驚くほど伝わらない、サービスのメリット (ユーザビリティ実践メモ)
ユーザ行動観察調査を実施すると、全力で訴求しているはずのメリットや強みが、驚くほどユーザに伝わらないケースが多く見られます。 伝わらない理由は様々ですが、今回は具体性が足りないために他社サービスとの違いが伝わらない、という例をご紹介します。 一方で、料金などはユーザにとって非常に具体的で他社と比較しやすい情報となります。ユーザ行動観察調査でも「サービス内容は大体同じ」という思いを強めたユーザが、料金だけで比較検討をする行動が多く見られました。 具体性のある情報を提供することが重要 類似サービスが多く存在する中で、自社サービスのメリットをユーザに伝えるためには、情報の具体性が必要です。「講師の質が高いです」という例の場合、下記のような改善が考えられます。 例えば講師の質を訴求したい場合には、質とは何を指しているのか、なぜ質が違うと言えるのかを具体的に書く必要があります。パーセンテージや年数な
テキストリンクは「ユーザにわかる言葉」で (ユーザビリティ実践メモ)
アンカーテキストによるリンクは、様々なリンク形式の中で最も古く、最も簡単で、最も慣れ親しまれているものと言えるでしょう。今回はそのテキストリンクの使い方について考えてみます。 いかがでしょう？ どれをクリックしたいと思いましたか？ ユーザ行動観察調査でよくあるパターンとしては、「とりあえず上から順番にクリックしてみる」か「一切クリックしない」です。 ユーザは、リンクには気づいても（アイトラッキングをすると確実に視線は届いています）、クリックした先に何があるかが想像できないため、当てずっぽうの行動をするか、離脱してしまいます。 自社の製品に独自のネーミングを施して、他社との差別化を図るということ自体はよいのですが、その製品が何なのかが伝わらなければ意味がありません。 では、これではどうでしょうか？ それぞれがどんな製品かを示すテキストを添えることで、ユーザの理解が進みそうな気がしますが、残念
【海外事例に学ぶ】フォーム入力におけるリアルタイムエラー表示のポイント (ユーザビリティ実践メモ)
今回は、A List Apart掲載のルーク・ウロブレウスキ氏(※)による記事、“Inline Validation in Web Forms”をご紹介します。当記事のテーマは、フォーム入力中のリアルタイムエラー表示（インライン・バリデーション）方法の最適化についてです。 まずはフォーム入力におけるリアルタイムエラー表示がどのようなものか、以下のデモをご覧ください。 【動画】�：フォーム入力におけるリアルタイムエラー判定デモ 上記のようなリアルタイムエラー判定のできるフォームについて、ウロブレウスキ氏は21歳から49歳の22人の被験者でユーザ調査を実施しました。 すると、通常の入力フォームと比べ、入力の成功率が22%向上し、エラー率が22%減少、入力時間も42%減少したとのことです。さらに、調査結果からは次のような2つの知見が得られています。
コンバージョン直前のユーザがつまずきやすいポイント (ユーザビリティ実践メモ)
コンバージョン率向上を考えた場合、エントリーフォーム最適化（EFO）など、フォーム内の改善に意識が向きがちですが、実はフォームに入る前の段階にも改善すべき点が残されている場合があります。 今回はフォームに入る前のページでよくみられる、ユーザのつまずきやすいポイントをご説明します。 ウェブサイトを訪問しているユーザにとって、個人情報の入力などの手続き行為は主目的ではありません。商品を購入したり、申し込み後にサービスを利用することが本当の目的です。その目的に早く到達するため、手続き行為にはできるだけ手間をかけず、手早く終わらせようとする傾向が見られます。 ここで、注意が必要なのが手続きの途中に会員登録のステップがあるケースです。 ECサイトでは「購入」の手続きの途中で「既存/新規ユーザ」の振り分けが行われる場合がありますが、ユーザは手続きのステップとして「会員登録」が必要あることを必ずしも事前
コラム一覧｜ビービット(beBit)- エクスペリエンス・デザイン・パートナー
本コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 本コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
「お待たせしない」Webサイトでの接客 (ユーザビリティ実践メモ)
1990年代、電話回線やISDNを使ったダイヤルアップ接続（低速・時間課金）でインターネットに接続することが一般的だった頃は、Webサイトの利用は「時間との勝負」という側面がありました。そのためWebサイトを制作する際も、htmlファイルや画像などを含めたページ当たりのサイズを小さくしてページの表示速度を高め、ユーザを待たせないことが重要視されていました。 ■人間の思考とシステムの反応速度 人間の操作に対するシステムの反応速度については、一般的に次のような関係が見られると言われています。 （参考：「Response Times: The Three Important Limits」 Useit.com（英語）、「10の累乗： ユーザーエクスペリエンスにおける時間スケール」 Jakob NielsenのAlertbox（日本語）） 0.1秒：ユーザは、自分がシステムを「直接」操作していると
情報を確実に伝える「近接」テクニック (ユーザビリティ実践メモ)
ウェブサイトに十分な情報を載せているのに、なぜかユーザに正しく情報が伝わらない、そんなケースは多いのではないでしょうか。今回は、実際の事例をもとに、「情報の関連性」を使ったテクニックをご紹介します。 今回取り上げるサイトでは、ウェブや電話では契約の新規申し込みはできないにも関わらず、「契約までの流れが理解されず、申し込みの電話がきてしまう」という課題がありました。対策として、お問い合わせページ内に「契約までの流れ」を記載していました（図1)が、ユーザは全く気付かず電話をしてしまう状況でした。 皆さんなら、どのような改善案を考えますか？（制約条件として、「商品説明」ページなどは修正ができないものとします） ユーザは「探している情報」しか目に入らない ありがちな対策として、「契約までの流れを画面上部に配置し、とにかく情報を見せる」という案があります（図2）。しかしこの案は、あまり効果的とは言え
入力フォームのコンプライアンス文言はどう配置する？ (ユーザビリティ実践メモ)
会員登録フォームや資料請求フォームでの入力作業は、多くのユーザにとって面倒で煩わしい作業です。フォームをできるだけ「簡単そう」、「手軽そう」な印象にすることは、ユーザの心理的負担を軽減するうえで重要です。 ただ、ユーザに対して丁寧に注意文言を提示すればするほど、まとめて無視されてしまったり、「簡単そう」な印象から離れて威圧感のあるページとなってしまうなど、適切にユーザに情報を伝えるという本来の意図から外れてしまいます。 今回はユーザの心理的障壁を高めることなく、コンプライアンス文言を適切に配置する方法を考えてみたいと思います。 1）注意文言をリンクにする 情報量の多い注意文言はリンクにすると必要なスペースが少なくて済むため、見た目の威圧感を低減するとともに、まとめて無視されてしまうリスクも低減します。また、必ずしも全ユーザに確認してもらう必要のない重要度の低い注意文言に関しては、まとめてペ
ユーザがつい読んでしまう表現方法とは？ (ユーザビリティ実践メモ)
これまで実践メモでは、ウェブライティングの基礎など、ユーザにとって読みやすい文章表現についていくつか考察してきました。 ウェブライティングの記事一覧 今回は、訴求ポイントをFAQ形式で表現することで、ユーザに内容まで読まれやすくする方法をご紹介します。 このサービスでは、ただ子どもを預かるだけでなく、子どもの発達を考えたサービスを行っています。しかし、こうしたこだわりの説明文をコンパクトにすることは難しく、見出しでも曖昧な表現になってしまいがちです。 このページの場合、改善前はユーザは見出し以下の文章まで読まず、独自のサービスを訴求できませんでした。 そこで、特長の説明をQA形式にしたところ、ユーザは文章部分まで読むようになり、他社と違うサービス内容を理解するようになりました。 こういった、QA形式の文章がよく読まれるという行動は、弊社のユーザ行動観察調査の中で多く確認されています。 この
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
