ウェブサイト設計の時に役立つ７つのテクニック／【その6】目線の操作 (ユーザビリティ実践メモ)
今回のテーマは「目線の操作」です。ユーザの視線を集める要素と遠ざける要素をうまく使い分けることで、意図通りにユーザにメッセージを伝達するためのコツをご紹介します。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 ←今回のテーマ 他サイトでの慣習 「目線の操作」を構成する3つの要素 視線の開始位置 視線を集める要素 視線を遠ざける要素 1. 視線の開始位置 例えば、以下は弊社のHPですが、このサイトを見るときどこから見ますか？「徹底した顧客心理分析により・・・」というブランドパネルか、その下の「コンサルティング事例・実績」ではないでしょうか？ 弊社HPの例 ビービットのサイトには、「ビービットは何をやっているんだろう？どのような会社なんだろう？」ということを漠然と思いながら来訪する方が多いため、その疑問に直接答えられるようメインメッセージや実績エリアに目
ウェブサイト設計の時に役立つ7つのテクニック／【その2】関連性 (ユーザビリティ実践メモ)
実際にウェブサイトを作っていくときに役立つ7つのテクニック、第2回のテーマは「関連性」です。関連性の強い情報の見せ方について、実例や犯しやすいミスを交えて解説していきます。 ファーストビュー 関連性 ←今回のテーマ 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第2回は「関連性」についてです。ユーザに2つの要素の関連性を認識してもらうには、1つの「まとまり」に見えることが必要です。人がどのようにまとまりを感じるかについては、ゲシュタルト心理学などの分野で議論されてきました。その中で、ウェブサイトを作る上で重要なのは、以下の2点です。 近接 閉合 1.近接 近接とは、簡単に言えば近いということです。例として、以下の図を見てください。 図1 上の図を見たときに、下の図のように右上の2つ、左下の1つをまとまりとして感じたのではないでしょうか。このように、人
ウェブサイト設計の時に役立つ７つのテクニック／【その1】ファーストビュー設計のポイント (ユーザビリティ実践メモ)
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？ 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計／4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
ユーザに自分ゴト化してもらうための3つの方法 (ユーザビリティ実践メモ)
今回の実践メモでは、WEBサイト上でユーザの購買意欲を喚起するための方法についてご紹介します。 WEBサイトを見ているユーザの購買意欲を喚起するためには、ユーザに商品の購入を『自分ゴト化』してもらうことが重要であることが、これまでの弊社のユーザ行動観察調査から明らかになっています。 本稿では、WEBサイト上での情報提供で、ユーザに『自分ゴト化』してもらうための3つ紹介いたします。 (1)「こんな人にオススメ」という情報を示す 例えば、以下の表現を比べてみてください。 上の例だと、これらの商品が自分に合っているのかどうかをユーザは判断することができません。 しかし、下のように「こんな人にオススメ」という情報を提示すれば、ユーザに「この商品は自分の状況に合っている」と認識させることができ、自分ゴト化してもらうことができます。 (2)商品価格をユーザに実感させる いくら自分の状況に合った商品があ
タブ使用時の注意点 (ユーザビリティ実践メモ)
タブによる表示切り替えは、様々なサイトで利用されている便利な機能です。さて、皆さんはタブの使い方が大きく2種類あることにお気づきでしょうか？ タブは便利であると同時に、背後のタブが見られない危険性が伴います。今回は、タブの2種類の使い方にそって、タブ利用時の注意点について考えてみたいと思います。なお、どちらの使い方か明確に分けられない場合は、両方の注意点を参考にするのがおすすめです。 ※タブを利用する際の注意点は過去の実践メモでも取り上げています。 （参考） 「困った時のタブ頼み」（ユーザビリティ実践メモ） まず、一つ目の使い方は、「多数の情報をカテゴリごとに整理して提示する」というものです。 例えば、ニュースサイトでは多数のニュース記事を「総合」「経済」「エンタメ」「スポーツ」というタブを使って分かり易く分類しているのをよく見かけます（図1）。あるいは、衣料品を扱うＥＣサイトでは「レディ
ページ内リンクを使用する際の注意点 (ユーザビリティ実践メモ)
しかし、ユーザはリンクをクリックする際、そのリンクが「別ページへの移動」なのか「同一ページ内でのリンク」なのかは事前に把握していません。弊社のユーザ行動観察調査では、ページ内リンクをクリックしたユーザが、クリックした先のコンテンツをスクロールしながら閲覧する途中で、自分がクリックの前と同じページにいる（ページ内リンクだった）ことを知って混乱する行動が多く見られます。 これは、自分がページ内の移動をしていることや、現在自分がいる位置について充分なフィードバックを得ないままユーザが行動することで起こる混乱と考えられます。 ページ内リンクの利点を活かしつつ、ユーザに「現在自分がどういう状態にいるのか」を伝え、混乱を最小限に抑える方法としては以下のようなものがあります。 【クリック前】 リンクのすぐそばに、上下の動きを示すアイコンを置くことによって、そのリンクが同一ページ内での移動であることを伝え
わかりにくい1クリックよりも、わかりやすい2クリック (ユーザビリティ実践メモ)
トップページに多くの要素を盛り込まねばならず、情報の整理に悩んでいる方も多いのではないでしょうか。そんな時、ユーザの文脈を考慮することで情報整理方法が見えてきます。 上の画面例はBtoB向け製品を主に扱っているメーカーサイトのトップページです。各製品カテゴリへのテキストリンクがトップページに配置されており、弊社のユーザ行動観察調査では、はじめてこのサイトを訪れるユーザが「何かごちゃごちゃしている」と言いながら、どこをクリックすべきか迷う傾向が見られました。 そこで、 トップページでは大まかに振り分け、次の階層で各製品カテゴリを選ばせるという図2のような画面に変更したところ、ユーザは目的の製品ページへスムーズに到達できるようになりました。 改善後の画面 目的のページに達するまでのクリック数は少ないほうがよいと言われますが、クリックを減らすことが目的になってユーザを迷わせてしまっては本末転倒で
左ナビと右ナビはどっちが良い？ (ユーザビリティ実践メモ)
ウェブサイトを設計する際に、ナビゲーションメニューを左右のどちらに設置するかで悩んだ経験はありませんか？ 弊社でウェブサイトを設計する際には、「コンテンツ」と「ナビゲーションによる誘導」のいずれが大事かによって設置位置を判断しています。 ■ナビゲーションによる誘導が重要な場合はナビゲーションを左に 例えばアマゾンなどの巨大ECサイトではナビゲーションによる誘導が重要であるため、ナビゲーションが画面から切れてしまうことのないよう、左側にナビゲーション設置しています。 上記のほかの考え方として、ユーザがそのサイトと同時に利用する競合サイトと同じ位置にナビゲーションを設置する、という考え方もあります（ユーザの慣れや先入観に配慮する）。 ナビゲーション設置時には「コンテンツ」と「誘導」のいずれが大事なのかによって設置位置を調整するようにしましょう。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
