ウェブサイト設計の時に役立つ７つのテクニック／【その1】ファーストビュー設計のポイント (ユーザビリティ実践メモ)
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？ 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計／4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
「ログインフォーム」は慣れが大事 (ユーザビリティ実践メモ)
ユーザビリティを考える上では、ユーザの「慣れ」を考慮する必要があるということは、過去の実践メモでも何度か指摘してきました。 過去記事：「ユーザの慣れや先入観に配慮する」 そうした「慣れ」の代表例として、「ログインフォーム」が挙げられます。 ログインフォームの入力項目や並び順はほとんどのサイトで共通している 入力するID・パスワードも、多くのユーザは同じものを使い回している という特徴から、ログインフォームを利用するユーザは、ほぼ無意識的に行動する傾向が見られます。 特に、ある程度キーボード操作に慣れているユーザの場合、タブキーを利用して、 「ID入力→タブキー→パスワード入力→エンターキー」 という操作が身体に染みついていることがあります。 「他と違う」フォームは、ユーザのエラーにつながりうる とあるECサイトでは、次のようなログインフォームを用意していました。 このログインフォームでは、
コラム一覧｜ビービット(beBit)- エクスペリエンス・デザイン・パートナー
本コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 本コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し
「お待たせしない」Webサイトでの接客 (ユーザビリティ実践メモ)
1990年代、電話回線やISDNを使ったダイヤルアップ接続（低速・時間課金）でインターネットに接続することが一般的だった頃は、Webサイトの利用は「時間との勝負」という側面がありました。そのためWebサイトを制作する際も、htmlファイルや画像などを含めたページ当たりのサイズを小さくしてページの表示速度を高め、ユーザを待たせないことが重要視されていました。 ■人間の思考とシステムの反応速度 人間の操作に対するシステムの反応速度については、一般的に次のような関係が見られると言われています。 （参考：「Response Times: The Three Important Limits」 Useit.com（英語）、「10の累乗： ユーザーエクスペリエンスにおける時間スケール」 Jakob NielsenのAlertbox（日本語）） 0.1秒：ユーザは、自分がシステムを「直接」操作していると
Webページの情報を共有してもらうための３つのポイント (ユーザビリティ実践メモ)
複数の人が関わるシナリオを意識しよう Webサイトを訪れたユーザが、商品・サービスの購入など何らかの意志決定を行う際、自分ひとりだけの判断で決めず、他の人と相談してから決めるという場合は、実はかなり多いものです。 弊社のユーザ行動観察調査では、以下のような例が見られました。 幹事役の数名が、各自で会場候補を検索各自が自分の選んだいくつかの候補を持ち寄り、どの会場にするか相談決定 【例2．企業におけるIT製品の導入】 部門の担当者が、おおまかな要求仕様を決め、メーカーサイトや販売店サイトを検索性能や価格などを一覧できる比較表を作り、IT管理者などに相談（IT管理者がWebサイトを閲覧する場合もあります）絞り込んだ候補について決裁文書を作り、上司に相談決定 【例3．住宅ローンの借り換え】 妻が金融機関サイトや比較サイトで情報収集夫に相談して候補を絞り込む絞り込んだ金融機関の店舗を夫婦で訪れ、担
「ランディングページ」の盲点 (ユーザビリティ実践メモ)
■1ページ完結型「ランディングページ」はコンバージョンまでに詳細な検討を要する商材に弱い 近年、広告をクリックした際に表示されるページとして、コンバージョンへのリンク以外を極力張らず、1ページ内で訴求を完結させる、いわゆる「ランディングページ」が普及しています。 この1ページ完結型の「ランディングページ」には、他ページへの離脱を防ぐというメリットがあり、基本的には１回の訪問で直接コンバージョンさせることを狙っています。 しかし、この1ページ完結型の「ランディングページ」が全ての商材に有効だとは限りません。まずは、この「ランディングページ」が有効な商材と、有効ではない商材の例を以下に整理しました。 ＜有効な商材＞ ・直感的にコンバージョンしやすい商材 （例）コスメ・食品等の消耗品、キャッシングなど シンプルな比較軸で選べる商材や、衝動買いしやすい商材など、１ページの情報量でコンバージョン可能
B to Bサイトでのビジネスリード獲得方法 (ユーザビリティ実践メモ)
B to B向けの製品・サービス紹介サイトでは資料請求・問合せをビジネスゴールに設定しているケースが少なくありません。 今回はB to B向けサイトで資料請求数を効果的に増やす方法として以下の2つを紹介します。 （1）全てのページで資料請求への導線を設置する （2）ユーザの求める情報を具体的に提示する しかしB to BサイトはB to Cと比べて、訪問ユーザは製品・サービスに対して一定の興味を持っているため、そうした懸念は杞憂であると考えられます。逆に全てのページに資料請求への導線を設置していない場合、ユーザが何のアクションも起こさないままサイトから立ち去るリスクが高まります。 弊社の調査でも、あるページで欲しい情報を獲得したあと、そのページに資料請求への導線がなかったため、そのままサイトから立ち去るというユーザ行動が確認されています。 （2）ユーザの求める情報を具体的に提示する B t
画面横幅を900px以上にするメリットとデメリット。右端が欠けることに注意 (ユーザビリティ実践メモ)
Yahoo! JAPANの画面横幅が950pxになって以降、サイトの画面横幅を770pxから900px以上に拡大するサイトが増えています。 今回は画面横幅を900px以上に拡大することのメリット・デメリットから、画面サイズを広げる際に注意すべきポイントをご紹介します。 【メリット１】 ファーストビューで表示できる情報が増える メディアサイトなど広告収入を目的としているサイトの場合、ファーストビューに表示できる広告の量が増えますので、売上増加に直接結びつきます。 【メリット２】 デザインが映える トップページのブランドパネル等の横幅が広くなり、迫力のあるデザインを表現できます。 一方、デメリットとして、大きく下記の3点が挙げられます。 【デメリット１】 右端が欠けて見られなくなるケースがある（特にお気に入り常駐時） 画面右エリアに重要なボタン（購入ボタン、申込ボタンなど）や重要なリンク(メイ
英語圏ユーザの行動の特徴 (ユーザビリティ実践メモ)
今回は、弊社で実施した英語でのユーザビリティテスト（ユーザ行動観察調査）から、日本人ユーザと英語ネイティブユーザの行動の違いをいくつかご紹介します。 検索サイトの利用行動の特徴として、日本人に比べ比較的検索語が長い、という点が挙げられます。 例えば、あるメーカーの製品を比較検討している場合、 compare Product A to B （＝製品AとBを比較する） Product A where to buy（＝製品Aをどこで買うべきか） のように、ほとんど文章に近い複数語を使って検索する例が多く見られました。 また、目的のサイトにたどり着いた後でも、製品カテゴリをたどるのではなく、複数語を使ってのサイト内検索を多用する傾向が見られました。 これには、 キーボード利用の文化があり、日本人に比べキーボードへの抵抗感が少ない 変換の手間がない分、日本語よりも入力が楽 などの理由から、より短時間
フォームの離脱を防ぐ心遣い (ユーザビリティ実践メモ)
資料請求や申込みフォームにおけるユーザの離脱を防ぐ方法はこれまでもご紹介しましたが、今日は「入力フォームに遷移する手前」で行う離脱を防ぐ心がけを私の実体験からご紹介したいと思います。 郵便番号、住所、名前と入れ画面をスクロールすると、次の項目に、「お客さま番号」という項目があることを見つけました。 始め、このお客さま番号が何の番号か思い当たらなかったのですが、入力欄の脇にある「お客さま番号とは」というリンクから、毎月届く領収証（「電気ご使用量のお知らせ」）に記載されている番号であることがすぐにわかりました。（このサイトでは、実際の領収証のイメージで説明しており、とてもわかりやすくなっていました） しかし、領収証の保管場所をすぐに思い出せなかった私は、また後日手続きを行おうと思いここで画面を閉じてしまいました。 皆さんはこのような経験をされたことはないでしょうか？ このような状況にユーザが置
リンクは青字下線？ (ユーザビリティ実践メモ)
テキストリンクは青字下線で表すことが一般的ですが、最近では、デザイン性を重視して敢えて青字下線を使用しないサイトも増えてきています。 そこで今回は、リンクの見せ方について検討してみたいと思います。 具体的には、青色以外のリンク色を用いる場合は、 下線をつける サイトの背景色や他のテキストに埋没してしまう色にしない という配慮がなされていれば、ある程度自由な色であってもユーザビリティに影響はないということが観察されています。 下線を使わない場合は、リンク色は青色のままの方が望ましいようです。加えて、「オンマウスで下線表示、または色反転する」といった何らかのフィードバックを演出すると、リンクであることがより明確に伝わるようになります。 リンクの見せ方の注意点としては、他にも サイトの中で一貫性を持たせる(例：ページごとに下線があったりなかったりするのは原則NG) 一般的なルールから逸脱しない(
世の中の関心事を踏まえて対応する (ユーザビリティ実践メモ)
インターネットの浸透の高まりに伴って、マスメディアの影響力の低下が取り上げられることが増えています。 ただ現在でも、マスメディアの報道等によってユーザの心理が影響されることは少なくないと考えられます。 例を挙げて考えてみましょう。 今年1月に明らかになった中国製ギョーザの中毒問題は、マスコミで連日大きく取り上げられてきました。 現在でも加工冷凍商品の売上げが落ち込んでいるなど、食品や健康関連の商品の原材料や製造国に対するユーザの意識は、事件以降変化していると考えられます。 こうした変化を踏まえると、仮に国産であることが自社商品のアピールポイントではなかったとしても、その商品が国内で生産・産出したものであれば、「国産」であることを積極的に示した方が、それを意識しているユーザの不安を払拭することに繋がります。 実際、弊社のユーザビリティテスト（ユーザ行動観察調査）では、ある健康関連の商品を紹介
可読性の大切さ、見直してみませんか？ (ユーザビリティ実践メモ)
アメリカのIT関連調査会社フォレスター・リサーチの調査結果(※1)によると、「ウェブサイトの失敗項目で最も多いものは、文字の可読性である」ということが指摘されています。確かに文字の可読性はユーザビリティの基本事項ですが、実際のところ、可読性はユーザ行動にどの程度影響を与えるのでしょうか？実例を交えてご紹介します。 弊社でユーザビリティテスト（ユーザ行動観察調査）を実施したところ、図1のパターンでは、ユーザは1ページ目の画面を一瞥しただけで閲覧をやめてしまいました。コンテンツの冒頭を読んでから判断したのではなく、全く読みもしなかったのです。その理由として、ほとんどのユーザが「なんとなく暗い感じがして、読む気がしないから」と回答しました。 背景色そのものにも原因はあったでしょう。しかし、ユーザに敢えてコンテンツを読んでもらったところ、「内容はとても面白い、商品に魅力を感じた」との回答が得られた
すぐ、その場で修正できる確認画面 (ユーザビリティ実践メモ)
ECサイトの購入フォームや、会員サービスの入会申し込みフォームでは、ユーザが名前や住所など多くの項目を入力しなければなりません。
色や模様が購入の決め手となる商品の見せ方 (ユーザビリティ実践メモ)
ECサイトでの商品画像の出し方についてはこれまでも何度か取り上げてきました。今回は衣料品やアクセサリーなど、同じ形状であっても色や模様によって購入意欲が変わってしまう商品の見せ方について考えます。 図1：商品一覧画面と商品詳細画面 上記のサイトを訪れたユーザは、商品一覧画面を見てBのシャツの形状は気に入ったのですが、灰色ではなく水色のシャツが欲しかったので、Bのシャツの商品詳細を閲覧しようとはしませんでした。その後、しばらく一覧画面を閲覧した末、別の商品を探しに他のサイトに行ってしまいました。 実はBのシャツには水色の商品もあったのですが、ユーザは一覧画面の写真だけで判断してしまったため、水色のシャツの存在に気がつかなかったのです。 衣料品やアクセサリーのような商品は色違いや模様違いというだけでユーザには全く別の商品だと認識されてしまいます。そのため、同じタイプで三色を展開しているものであ
【海外事例に学ぶ】「会員登録はこちら」を用いない会員化シナリオ (ユーザビリティ実践メモ)
今回は、A List Apart.掲載のLuke Wroblewski氏による記事、"Sign Up Forms Must Die"をご紹介します。 ユーザにウェブサービスを提供する上で、まずは「会員登録」を求めることはよくあることだと思いますが、今回は、「まずは会員登録」から始めずユーザの会員化を実現する方法についての記事です。 旧来の「まずは会員登録」の事例： 動画共有サイトの一つ、 Google Video( http://video.google.com/)を例にとります。ユーザはGoogle Videoに訪問し、色々な動画を見ていく中で、自分もウェブ上に動画を公開してみたいと思います。そこで、「ビデオをアップロードする(Upload Video)」を押すと、その機能を利用するためのアカウント作成を初めに求められ、以下の会員登録ページにたどり着いてフォームへの情報入力を求められます
ユーザの商品探索プロセスとサイト上の注意点 (ユーザビリティ実践メモ)
家具、日用品などを扱うECサイトでは、ユーザがサイトに訪れてからどの商品を購入するかを検討する行動が多く見られます。このようなサイトでは、ユーザがいかに目的とするものにスムーズに辿り着けるかが特に重要となります。 こうした問題に対処していく場合、次のようなユーザの行動特性を踏まえる必要があります。 ユーザは最初に、探しているものの形状、大きさなどの大まかな特徴を含んだ表象(注)を形成します。 （「リビングに置くための低めのテーブルが欲しいなあ」といった漠然としたイメージを思い描いています。） (注)表象・・・ある存在に対する頭の中の対応物。イメージ。 イメージがあいまいで直接具体的な商品が引き出せないため、一旦像を抽象化します。 （一般名詞としての「机」を想起します） 外部の視覚的刺激を受けて探しているものが属するカテゴリを同定します。 （画像やカテゴリ名を頼りに、探しているものが「ローテ
フォームの離脱率を下げるには (ユーザビリティ実践メモ)
フォームに入った段階で、多くのユーザは商品の購入や、会員の登録など、目的達成のために行動します。 しかし、他に気になる情報が呈示されていると、そこから離脱してしまい、スムーズに目的を達成できない場合があります。 グローバルナビゲーションのようにフォームから画面遷移するリンクは、可能な限りなくした方が良いと思われます。 しかし、フォーム入力中に、ユーザが疑問に思ったことに回答するヘルプなど、情報提示が必要不可欠な場合もあるでしょう。 そうした場合には、フォームから画面遷移することなく、フォームの中で情報提示することが望ましいと思われます。 例えば、フォーム内でのヘルプの見せ方として、javascriptを用いて動的に表示する方法があります。 ヘルプリンクをクリックすると、吹き出しが表示され、その中に情報を提示します。 以上のように、フォームから画面遷移するリンクを排除し、必要な情報はフォーム
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
