【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
ECサイトの落とし穴：「よくあるパターン」で安心していませんか？ (ユーザビリティ実践メモ)
ECサイトにおいては、「商品を探す」、「商品を見る」、「カートに入れる」、「購入する」といった基本的な作法は概ね共通化されてきていますが、商品ごとの特性やユーザ心理によっては定型的な情報提供では不十分なケースがあります。 下記のような商品紹介ページでユーザ行動観察調査を行った際、この商品を使用したことのないユーザは、商品特徴や価格を確認した後で「分量」や「目安の日数」を探し回るという行動が見られました。 健康食品は継続して利用するものであり、かつ商品によって1回に使用する分量が異なるため、価格情報だけでは「お得」なのかどうか判断できなかったためです。ところが、商品の分量は商品名に含まれており、なおかつ一回の使用量は商品説明の中に埋もれてしまっており、いずれも価格から離れた位置にあったために気づかれませんでした。 ECサイトの商品ページで提供されている情報については、「価格」、「送料」、「配
カードを使って簡単にユーザニーズを探る方法 (ユーザビリティ実践メモ)
「サイトの画面設計やデザイン性はそれなりに良いのだが、肝心の中身、コンテンツが足りていないので強化したい。けれどどんなコンテンツがユーザから求められているのか分からない…。」 今回はそんな時に役立つ調査手法の1つとして、「カードソーティング」をご紹介します。 メリット この手法の最大のメリットは、実際に物を作る前であっても、ユーザの行動観察ができることです。 カードという刺激物を与えて、それに対してユーザがどのように行動するかを見ることができるため、「どんなものが見たいですか？」、「○○というコンテンツがあったら見たいですか？」といったインタビューよりもはるかに意味のある検証が可能です。 また、ユーザと面しているため、仕分け結果の理由をすぐに尋ねることができるのもメリットです。具体的にどのようなものを期待したのか、なぜ見たくないのかなどを尋ねられるため、その場で疑問を解消し、さらに深掘りす
新卒採用ページ、本当に学生視点ですか？ (ユーザビリティ実践メモ)
2011年の新卒採用活動に向けて、採用ページをリニューアルしたり、コンテンツを拡充したりする企業サイトが多くなっています。今回は、新卒採用ページを「学生視点」で作るためのポイントについて考えたいと思います。 ただその場合でも、掲載コンテンツを本当に有効なものとするには、学生の目線に立っているかどうかをチェックしてみる必要があります。 例えば、職種の紹介として、以下のような例があった場合、どちらがイメージしやすいでしょうか？ 例Aに関しては、その職種に関する業務知識がないと、内容をイメージすることは難しいですが、例Bについては、1日の流れをイメージできたのではないでしょうか。 学生は業務経験がなく、社会人にとっては常識的な業務知識もないことがほとんどです。そのため、業務知識がないユーザも理解できるような配慮が求められます。（上記では「タイムスケジュールにする」、「解説をつける」、「画像で補足
【携帯サイト】もう1ページ先に進んでもらうための６つのテクニック (ユーザビリティ実践メモ)
せっかくコンテンツを作っても、リンクがユーザにクリックされず、内容を見てもらえない、という悩みをお持ちのWEBマスターの方は多いのではないでしょうか。 今回は、携帯サイトでユーザを次ページに導くためのテクニックをご紹介します。 筆者がユーザビリティテスト（ユーザ行動観察調査）を通して得た実感として、携帯サイトの方がパソコンサイトよりも次ページへの誘導が難しいという印象があります。ある携帯の有料会員制サイトでは、「ユーザはいつも利用しているリンク以外はほとんどクリックしない」というユーザ行動が見られました。 理由として、携帯サイトは 読み込みが遅い隙間時間に利用される場合が多く、利用時間が短いパケット代がかかる などが考えられます。 そのため、携帯サイトでユーザを次ページに誘導するためには、パソコンサイト以上に誘導方法を意識する必要があります。以下、ユーザビリティテスト（ユーザ行動観察調査）
左ナビと右ナビはどっちが良い？ (ユーザビリティ実践メモ)
ウェブサイトを設計する際に、ナビゲーションメニューを左右のどちらに設置するかで悩んだ経験はありませんか？ 弊社でウェブサイトを設計する際には、「コンテンツ」と「ナビゲーションによる誘導」のいずれが大事かによって設置位置を判断しています。 ■ナビゲーションによる誘導が重要な場合はナビゲーションを左に 例えばアマゾンなどの巨大ECサイトではナビゲーションによる誘導が重要であるため、ナビゲーションが画面から切れてしまうことのないよう、左側にナビゲーション設置しています。 上記のほかの考え方として、ユーザがそのサイトと同時に利用する競合サイトと同じ位置にナビゲーションを設置する、という考え方もあります（ユーザの慣れや先入観に配慮する）。 ナビゲーション設置時には「コンテンツ」と「誘導」のいずれが大事なのかによって設置位置を調整するようにしましょう。
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
ユーザがつい読んでしまう表現方法とは？ (ユーザビリティ実践メモ)
これまで実践メモでは、ウェブライティングの基礎など、ユーザにとって読みやすい文章表現についていくつか考察してきました。 ウェブライティングの記事一覧 今回は、訴求ポイントをFAQ形式で表現することで、ユーザに内容まで読まれやすくする方法をご紹介します。 このサービスでは、ただ子どもを預かるだけでなく、子どもの発達を考えたサービスを行っています。しかし、こうしたこだわりの説明文をコンパクトにすることは難しく、見出しでも曖昧な表現になってしまいがちです。 このページの場合、改善前はユーザは見出し以下の文章まで読まず、独自のサービスを訴求できませんでした。 そこで、特長の説明をQA形式にしたところ、ユーザは文章部分まで読むようになり、他社と違うサービス内容を理解するようになりました。 こういった、QA形式の文章がよく読まれるという行動は、弊社のユーザ行動観察調査の中で多く確認されています。 この
振り分け画面でユーザを逃していませんか？ (ユーザビリティ実践メモ)
会員・非会員など、ユーザの状況によってウェブサイトに複数の入り口がある場合、振り分けが必要となります。今回は、そのような振り分け画面での要素の配置についてのコツを紹介します。 この画面を訪れたユーザは、すでにサービスに入会している方でしたが、少し迷った末、一番上の「○○プランお申し込み」（新規入会者用のリンク）をクリックしてしまい、かなり先に進むまで自分が間違えていることに気づきませんでした。 そこで、上の画面を、次のように変えてみたところ、ユーザはスムーズに自分の状況に適したリンクを選択することができるようになりました。 この画面で問題が解消された最大のポイントは、振り分けの要素を左右に並べたことです。 人は左右に並んでいる要素に対しては「対等な要素」、あるいは「対比されている要素」だと認識する傾向があります。したがって、左右に要素を並べられると、無意識的に「2者を比較しよう」というモー
あと１％離脱を減らすフォームのテクニック (ユーザビリティ実践メモ)
資料請求や申し込みフォームにおけるユーザの離脱を防ぐ方法はこれまでにもご紹介してきましたが、今回は「さらに一歩」改善するためのテクニックをご紹介いたします。 例えばECサイトのフォームでは支払い方法や配送方法など、ユーザに様々なオプションを選ばせることがよくあります。選択肢が多いことは利便性にも繋がりますが、一方でそれが離脱の原因になっている可能性もあります。 ユーザはフォームが縦に長かったり入力欄が多く見えると、「入力が面倒そう」と思い離脱の可能性が増えます。 以下は改善例です。支払い方法を選択するラジオボタンをクリックしてみてください。 選択したオプションに関連した情報だけを出す、言い換えると「要らないものは隠してしまう」のです。 クレジット決済をしたいと思っているユーザには、銀行振り込みや代金引換の注意書きは不要ですから、余計な情報を隠すことでフォームが簡単に見え、離脱を減らすことが
【海外事例に学ぶ】「会員登録はこちら」を用いない会員化シナリオ (ユーザビリティ実践メモ)
今回は、A List Apart.掲載のLuke Wroblewski氏による記事、"Sign Up Forms Must Die"をご紹介します。 ユーザにウェブサービスを提供する上で、まずは「会員登録」を求めることはよくあることだと思いますが、今回は、「まずは会員登録」から始めずユーザの会員化を実現する方法についての記事です。 旧来の「まずは会員登録」の事例： 動画共有サイトの一つ、 Google Video( http://video.google.com/)を例にとります。ユーザはGoogle Videoに訪問し、色々な動画を見ていく中で、自分もウェブ上に動画を公開してみたいと思います。そこで、「ビデオをアップロードする(Upload Video)」を押すと、その機能を利用するためのアカウント作成を初めに求められ、以下の会員登録ページにたどり着いてフォームへの情報入力を求められます
携帯サイトではメール受信設定への対応が重要 (ユーザビリティ実践メモ)
携帯サイトでの会員登録で、メールアドレス確認のためにユーザが入力したメールアドレスに仮登録メールを送信し、メールに書かれたURLから本登録をさせるフローにすることがあります。 弊社で行ったユーザビリティテスト（ユーザ行動観察調査）では、携帯サイトでの会員登録の途中で、自分の携帯電話に仮登録メールが届かず、ユーザが混乱して登録をあきらめてしまうケースが多数見られました。 このサイトでは、会員登録フローの画面上でメール受信設定についての記述がなかったため、メール受信設定をしていたユーザは、仮登録メールを受信するにはドメインを新たに追加する必要があることに気づきませんでした。 このような事態を防ぐために、携帯サイトではメール受信設定についてきちんと記述し、ユーザが自社のドメイン/メールアドレスを確実に追加できるようにしておくことが重要です。 この時に気をつけるポイントは2つあります。 1つ目は、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
