【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
「次へ」ボタンの誘惑 (ユーザビリティ実践メモ)
自社商品の強みを伝えるために、頑張ってコンテンツを作ったけれど、なかなか最後まで見てもらえない…という悩みを持つウェブマスターの方は多いのではないでしょうか。 ユーザに「もう1ページ先」を読んでもらうためのちょっとした工夫として、「次へ」というテキストリンクの活用があります。 ベッドなどの家具を販売している会社の事例をご紹介します。 （実際の事例では別の商材ですが、内容は同じです） この会社では、自社商品の強みを自然に伝えるため、「マットレスの選び方」「掛け布団の選び方」というコンテンツを用意しています。 「寝心地のいいベッドがほしい」と思って探しているユーザがこのサイトに訪れた際に、「マットレスの選び方」というコンテンツに気づいて興味を持ってページを見てみたとします。 ページの最後まで読んだユーザは、「掛け布団は今回は買うつもりはないから見なくていい」と思い、次ページには進まず、戻ってし
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
【○×】Q.ユーザが画像をざっと見て良し悪しを判断する商品の詳細ページでは、「左：画像、右：文章」、その下は「左：文章、右：画像」と、画像と文章を交互に配置したレイアウトとする方が、そうでない場合に比べて文章にも目を通してもらえる可能性が高い。○か×か？: beBit.Q
【解説】写真画像で良し悪しを判断しようと考えているユーザの視線は、自然と画像と画像をつなぐ形で流れます。画像と文章を交互に配置することでユーザの視線が散らばり、スクロール速度も遅くなりやすいため、比較的文章にも目を通してもらいやすいレイアウトとなります。 解説詳細 例えば、セオリー通り情報が整理されたきれいなレイアウトを達成しようとすると、以下のようになります。 この場合ユーザは、気になる画像があれば横にある文章にも目を移しますが、基本的にはすーっと下に向かって画像だけを眺めてスクロールするといった行動をとりがちです。 また、単調なレイアウトであるためにユーザのスクロール速度も速くなりがちです。 一方、画像と文章を交互に配置したレイアウトでは、ユーザの視線は以下のように散らばってくれる可能性が高くなります。 この場合はユーザが画像から画像に視線を移すタイミングで自然と文章が視野に飛び込んで
【携帯サイト】もう1ページ先に進んでもらうための６つのテクニック (ユーザビリティ実践メモ)
せっかくコンテンツを作っても、リンクがユーザにクリックされず、内容を見てもらえない、という悩みをお持ちのWEBマスターの方は多いのではないでしょうか。 今回は、携帯サイトでユーザを次ページに導くためのテクニックをご紹介します。 筆者がユーザビリティテスト（ユーザ行動観察調査）を通して得た実感として、携帯サイトの方がパソコンサイトよりも次ページへの誘導が難しいという印象があります。ある携帯の有料会員制サイトでは、「ユーザはいつも利用しているリンク以外はほとんどクリックしない」というユーザ行動が見られました。 理由として、携帯サイトは 読み込みが遅い隙間時間に利用される場合が多く、利用時間が短いパケット代がかかる などが考えられます。 そのため、携帯サイトでユーザを次ページに誘導するためには、パソコンサイト以上に誘導方法を意識する必要があります。以下、ユーザビリティテスト（ユーザ行動観察調査）
携帯サイトで会員登録を阻害する4つのハードル (ユーザビリティ実践メモ)
携帯向けサイトを運営する中で、アクセス数はそれなりにあるのになかなか会員登録に結びつかずに歯がゆい思いをされた経験のある方も多いのではないでしょうか？ 安易に広告投下費用を増やす前に、もう一度原因を考えてみましょう。 不要なメールマガジンが届くのが嫌だ 個人情報を登録することに抵抗がある 情報を入力するのが面倒 あえて登録する必要性が感じられない これらのハードルを乗り越えるためのポイントを整理しました。 1.メールマガジンは配信頻度を明記する これまでに何らかの無料サイトに登録した結果、大量のメールが届くようになったという苦い経験をしているユーザは意外と多いものです。 メールマガジンの受信が必須のサイトの場合でも、あらかじめどの程度の頻度でメールを送付するのかを明示しておくことで、一定程度ハードルを下げる効果が期待できます。 2. 個人情報を登録させる場合には理由を明記する ショッピング
携帯サイトで成果を出すためのアクションボタン配置 (ユーザビリティ実践メモ)
携帯オンリーユーザであろうと、PCと携帯を使い分けている両用ユーザであろうと、携帯サイトを利用している状況下では多くのユーザは急いでサイトを利用していると言えます。 例えば携帯オンリーユーザは、早いスクロール・手入力が習慣化しているため、駆け抜けるようにサイトを利用します。 また、両用ユーザがわざわざ携帯サイトを利用している状況は、家に帰ってPCサイトを開くまで待てないほど急がなければならない事情や心情があることを物語っています。 以上のことから、どれだけ急いでいても確実にアクションを起こせるサイトこそ成果の出せる携帯サイトであると言えるでしょう。 よって今回は、急いでいるユーザにアクションを起こしてもらうためにはどこにアクションボタンを配置すべきかについてご説明します。 あなたがとても急いでいる状況でこのページを開いたら、どこにアクションボタンが配置されていて欲しいでしょうか。 例1は問
その表現、ユーザに分かりやすいですか？ (ユーザビリティ実践メモ)
ユーザにとって分かりやすい文言・説明はウェブコンテンツ制作の基本です。 専門用語は思った以上にユーザに理解されていませんし、会社固有の名称・モデル名なども説明がなければユーザには何のことか分かりません。 最も個別製品ページへ進みたいと思うページはどれでしょうか。 例Aのように専門的な説明文章の場合はどうでしょうか。 専門用語が多く、各製品の違いを簡単には理解できません。 例Bでは、製品モデル名や型番のリンクのみを展開しています。 これではそれぞれの製品の違いが分からず、どの製品を見るべきかユーザはわからないため、ここで離脱してしまう可能性があります。 例Cが最も個別製品を選択しやすいのではないでしょうか。 価格、形、馬力といった大まかな情報があるため、各製品の違いが端的に分かり、詳細を確認するステップに進みやすくなります。 製品一覧ページに限らず、ユーザ（製品やサービスに詳しくない人）にと
左ナビと右ナビはどっちが良い？ (ユーザビリティ実践メモ)
ウェブサイトを設計する際に、ナビゲーションメニューを左右のどちらに設置するかで悩んだ経験はありませんか？ 弊社でウェブサイトを設計する際には、「コンテンツ」と「ナビゲーションによる誘導」のいずれが大事かによって設置位置を判断しています。 ■ナビゲーションによる誘導が重要な場合はナビゲーションを左に 例えばアマゾンなどの巨大ECサイトではナビゲーションによる誘導が重要であるため、ナビゲーションが画面から切れてしまうことのないよう、左側にナビゲーション設置しています。 上記のほかの考え方として、ユーザがそのサイトと同時に利用する競合サイトと同じ位置にナビゲーションを設置する、という考え方もあります（ユーザの慣れや先入観に配慮する）。 ナビゲーション設置時には「コンテンツ」と「誘導」のいずれが大事なのかによって設置位置を調整するようにしましょう。
成果を上げる携帯サイトのフォーム設計 (ユーザビリティ実践メモ)
離脱されない携帯サイトのフォーム作成術 携帯サイトのフォーム設計のコツ 個人プロフィールからの引用を考慮した携帯サイトフォーム設計 さて、携帯サイトのフォームの入力効率を上げる（完遂率を上げる）には、まず項目数を少なくして入力負荷を減らすことが第一です。 しかしビジネス上の要件から、項目数を減らすことにも限界があります。そこで、入力時のボタン操作など、「ユーザの操作面の負担を少なくする」ことを考えましょう。 1. 入力文字種を指定する テキストエリアの属性としてistyleを指定することで、入力文字種の「全角かな」「半角カナ」「英文字」「数字」をページ側で指定することができます。 携帯電話では文字入力モードを変更するために、2-3回（十字キーを使う場合はもっと多くなります）ボタンを押さなければなりませんので、この指定だけでもユーザの負担は大きく減ります。 ※タグや属性の詳細な仕様に関しては
ユーザの視線に配慮したページ作り：「表」編 (ユーザビリティ実践メモ)
弊社のユーザ行動観察調査では、アイトラッキング（ユーザの視線分析）を利用していますが、ある程度ユーザ理解があれば、「認知的ウォークスルー」（ユーザになりきってそのサイトを検証する）という手法でも、視線の流れを意識したサイト評価・設計ができるようになります。 今回はWebページ内の表のつくり方を例に、「視線を意識したサイト設計」のヒントをご紹介しましょう。 このニュース一覧は、ぱっと見はきれいなのですが、実際にはユーザの情報収集を妨げています。その理由がわかるでしょうか？ この例の場合、ユーザはまず文頭を見て自分に必要な情報を探すのに対し、文章が中央ぞろえになっているため、視線を左右に動かす必要があり、情報収集の効率を下げています。 そこで、文頭を左寄せにすることで視線がスムーズに流れ、表が読みやすくなります。 ただし、左寄せが万能なわけではありません。次の例をご覧ください。 いかがでしょう
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
完了ページやログアウト画面の効果的な使い方 (ユーザビリティ実践メモ)
サイトを訪問したユーザに対して「キャンペーンの告知」や「新製品の訴求」、「おすすめサービスの宣伝」のように、サイト訪問目的と違う何かを伝えたいということはよくあるのではないでしょうか。 そういった場合に利用できるのが、完了画面やログアウト画面で訴求したいものを表示するという方法です。 目的遂行後に表示される完了ページやログアウト画面では、ユーザに「次は■■■■をする」といった明確な意思がないことが多く、サイトが訴求したいものを受け入れてくれることがあります。 以下は弊社が行ったユーザー行動観察調査で見られたユーザの行動例です。 あるECサイトでは新しく販売した製品をユーザに認知して欲しいという希望があり、トップページなど多くの画面で新製品を訴求していました。ただし、ユーザは自分が欲しいものの買い物に一生懸命なため、新製品の訴求に一向に気付きません。 そこで試してみたのが購入完了ページでの新
【海外事例に学ぶ】「会員登録はこちら」を用いない会員化シナリオ (ユーザビリティ実践メモ)
今回は、A List Apart.掲載のLuke Wroblewski氏による記事、"Sign Up Forms Must Die"をご紹介します。 ユーザにウェブサービスを提供する上で、まずは「会員登録」を求めることはよくあることだと思いますが、今回は、「まずは会員登録」から始めずユーザの会員化を実現する方法についての記事です。 旧来の「まずは会員登録」の事例： 動画共有サイトの一つ、 Google Video( http://video.google.com/)を例にとります。ユーザはGoogle Videoに訪問し、色々な動画を見ていく中で、自分もウェブ上に動画を公開してみたいと思います。そこで、「ビデオをアップロードする(Upload Video)」を押すと、その機能を利用するためのアカウント作成を初めに求められ、以下の会員登録ページにたどり着いてフォームへの情報入力を求められます
携帯サイトでのユーザナビゲーションのコツ (ユーザビリティ実践メモ)
携帯サイトのユーザビリティはPCサイトと異なる部分が多く、携帯サイト特有のtipsが存在します。今回は、携帯サイトでのページ分割と、ページ内リンクの活用についてご紹介します。 従って、同じ量の情報を伝えるにあたって、 ページを複数に分割し、ページ遷移させる(ロードが必要) 1ページに情報をまとめ、ページ内リンクでコンテンツ間を移動させる(ロードが不要) という2種類の方法では、後者の方が「携帯電話=PCの代替」ユーザに好まれ、より多くの情報に接してもらうことができます。 実際、ページを複数に分割した場合、弊社のユーザビリティテスト（ユーザ行動観察調査）では図1のような行動が観察されています。 インデックスページへ戻ることを繰り返し、「面倒だ」と感じた時点でそのサイトへの興味を失い、閲覧を止めてしまうのです。 一方、1ページに情報をまとめ、ページ内リンクで誘導した場合の行動は図2のようになり
携帯サイトのフォーム設計のコツ (ユーザビリティ実践メモ)
PC向けサイトの資料請求ページなどでは、入力フォームに近接して入力例を置くことで入力形式の違いによるエラーを防ぐことができます。 しかし携帯サイトの場合、入力フォームの周りに入力例を表示したとしても、パソコンとは違い実際にユーザが入力する際には入力画面に切り替わってしまうため、ユーザが例を見ながら入力することができません。 入力フォームについてもう1点注意することがあります。 例えば上記にて、年月日の入力フォームを縦に並べてしまうと、スクロールのしかたによっては携帯サイトの画面に月日の入力フォームが表示領域外に隠れて見えなくなるケースが発生し、ユーザが誤って年のフォームに月日も同時に入力してしまう可能性があります。 入力フォームは横並びにする、入力フォームに文字数制限を設けることが有効です。 同じ役割を持つ画面でも、PCと携帯という物理的な環境やユーザの使用環境の違いを考慮すると違った設計
Ajaxによるエラーチェックの注意点 (ユーザビリティ実践メモ)
入力フォームについて、最近ではAjaxを用いることで、「送信」ボタンをクリックする前にエラーチェックをする手法が使われるようになっています。 今回はリアルタイムでフォームのエラーチェックを行う場合の注意点について考えてみます。 あまり良くない例：Remember the Milkの登録画面 http://www.rememberthemilk.com/signup/ ユーザ名を入力する欄では、入力と同時にエラーチェックが行われるため、多くの場合1文字目からエラーが表示されます。 2文字目を入力すると即座にエラーメッセージが更新されます。 ユーザが当初から自分のユーザ名として考えていた「bebittaro」を入力し終えると、利用可能である旨のメッセージが表示されます。 上記は入力に対しリアルタイムでフィードバックを返すことで誤入力を避けようという工夫ですが、ユーザが入力を終える前にエラー表示
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
