【○×】Q.ユーザが画像をざっと見て良し悪しを判断する商品の詳細ページでは、「左：画像、右：文章」、その下は「左：文章、右：画像」と、画像と文章を交互に配置したレイアウトとする方が、そうでない場合に比べて文章にも目を通してもらえる可能性が高い。○か×か？: beBit.Q
【解説】写真画像で良し悪しを判断しようと考えているユーザの視線は、自然と画像と画像をつなぐ形で流れます。画像と文章を交互に配置することでユーザの視線が散らばり、スクロール速度も遅くなりやすいため、比較的文章にも目を通してもらいやすいレイアウトとなります。 解説詳細 例えば、セオリー通り情報が整理されたきれいなレイアウトを達成しようとすると、以下のようになります。 この場合ユーザは、気になる画像があれば横にある文章にも目を移しますが、基本的にはすーっと下に向かって画像だけを眺めてスクロールするといった行動をとりがちです。 また、単調なレイアウトであるためにユーザのスクロール速度も速くなりがちです。 一方、画像と文章を交互に配置したレイアウトでは、ユーザの視線は以下のように散らばってくれる可能性が高くなります。 この場合はユーザが画像から画像に視線を移すタイミングで自然と文章が視野に飛び込んで
初心者でも使えるサポートページの作り方 (ユーザビリティ実践メモ)
お問い合わせコストを節約するため、ウェブサイトに「よくあるご質問」や「アフターサービス情報」等を豊富に掲載して、ユーザの自己解決を促すケースが多くなってきています。 一方で、インターネットに不慣れなユーザ（以下：初心者）が利用するにはハードルが高いサポートページも多く存在します。 今回は、特に初心者向けにサポート情報を提供する際のポイントをご紹介します。 サポート情報を提供する上で最も重要なことは、ユーザが目的の情報にスムーズにアクセスできるようにすることです。そこでサポートページでは、「一本道で目的の情報にたどり着ける」ように導線設計をすることが重要です。 一般的には、「商品カテゴリから探す」、「型番から探す」、「よくあるご質問から探す」など、色々な探し方が出来たほうが、ユーザビリティーが高い傾向があります。しかしこの一般則は、初心者がサポートページを利用する場合には必ずしも当てはまりま
携帯サイトで成果を出すためのアクションボタン配置 (ユーザビリティ実践メモ)
携帯オンリーユーザであろうと、PCと携帯を使い分けている両用ユーザであろうと、携帯サイトを利用している状況下では多くのユーザは急いでサイトを利用していると言えます。 例えば携帯オンリーユーザは、早いスクロール・手入力が習慣化しているため、駆け抜けるようにサイトを利用します。 また、両用ユーザがわざわざ携帯サイトを利用している状況は、家に帰ってPCサイトを開くまで待てないほど急がなければならない事情や心情があることを物語っています。 以上のことから、どれだけ急いでいても確実にアクションを起こせるサイトこそ成果の出せる携帯サイトであると言えるでしょう。 よって今回は、急いでいるユーザにアクションを起こしてもらうためにはどこにアクションボタンを配置すべきかについてご説明します。 あなたがとても急いでいる状況でこのページを開いたら、どこにアクションボタンが配置されていて欲しいでしょうか。 例1は問
ユーザがつい読んでしまう表現方法とは？ (ユーザビリティ実践メモ)
これまで実践メモでは、ウェブライティングの基礎など、ユーザにとって読みやすい文章表現についていくつか考察してきました。 ウェブライティングの記事一覧 今回は、訴求ポイントをFAQ形式で表現することで、ユーザに内容まで読まれやすくする方法をご紹介します。 このサービスでは、ただ子どもを預かるだけでなく、子どもの発達を考えたサービスを行っています。しかし、こうしたこだわりの説明文をコンパクトにすることは難しく、見出しでも曖昧な表現になってしまいがちです。 このページの場合、改善前はユーザは見出し以下の文章まで読まず、独自のサービスを訴求できませんでした。 そこで、特長の説明をQA形式にしたところ、ユーザは文章部分まで読むようになり、他社と違うサービス内容を理解するようになりました。 こういった、QA形式の文章がよく読まれるという行動は、弊社のユーザ行動観察調査の中で多く確認されています。 この
文章を見やすくする5つの工夫 (ユーザビリティ実践メモ)
ウェブサイトを制作していると、どうしても長い文章を掲載しなければいけない場面に遭遇します。 今回は、文章を読みやすくする「見せ方」の方法を、例を元にご紹介いたします。 ウェブライティングをご覧ください。 方法１．文字サイズを大きくする 最も基本的な方法ですが、最も効果的です。文字サイズを大きくするだけでも「見やすさ」は格段に向上します。 方法２．行間・改行・インデントを適切に取る 方法１．と同じく基本的な手法ですが、こちらも効果的な手法です。方法１．と組み合わせることで、ほとんどのサイトでは問題がないレベルにまで「見やすさ」は向上するでしょう。 方法３．キーワードを目立たせる 文中で重要なキーワードを太字にしたり、文字色をつけることで文章にメリハリをつけて見やすくすることができます。 キーワードを装飾することで、単に目立たせて読み手に意識させるだけでなく、一行を読み終えたユーザが視線を右か
返信しやすいメールのフォーマットを考える (ユーザビリティ実践メモ)
メールを使ったBtoCコミュニケーションとして、多くのユーザに対して認知・集客を目的とするメールマガジンが一般的に挙げられます。 一方、比較的、対象人数が少ないセミナー・説明会の応募受付や面接など1対1のコミュニケーションの場合、企業側から送付したメールに対してユーザに「メールで返信を求める」形が考えられます。 今回は、弊社のユーザビリティテスト（ユーザ行動観察）から得られた知見から、「より返信しやすいメール」の作り方を考えてみましょう。 ある企業では、自社サイトからエントリーした採用希望者に対し、個別にメールを送り、１次面接のスケジュール調整を行っていました。 そこで、それに近い状況をテストするため、複数のパターンのメールを用意し、就職活動の中でユーザがそれらのメールを受け取ったという想定で行動観察を行いました。 まず、「メールを開封するかどうか」という場面では、本連載でも以前ご紹介した
ユーザビリティ実践メモ
スマートフォンとともにタブレット端末の普及率はますます上昇し、最近では街中や電車などでタブレット端末を利用している人を多く見かけるようになりました。 この記事の続きを読む
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
