ウェブサイト設計の時に役立つ７つのテクニック／【その7】他サイトでの慣習 (ユーザビリティ実践メモ)
実際にウェブサイトを作っていくときに役立つ7つのテクニック、最終回のテーマは「他サイトでの慣習」です。 「ユーザ中心のデザイン」について書かれた『誰のためのデザイン？』（D.A.ノーマン）の中で、著者はデザインの6つの原則を述べた上で、7つめの原則として「すべての原則を適用がうまくいかないときには標準化をする」と言っています。わかりやすく、使いやすいサイトにするためには、標準化されたレイアウト＝他サイトでの慣習を利用するのも有効な方法となります。 そこで今回は、ウェブサイトの一般的な慣習や業界リーダーのサイトで使われているテクニックを踏襲することで、ユーザにとって使いやすいサイトにできる例をご紹介します。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 ←今回のテーマ 利用すべき2つの慣習 一般的な慣習を利用する 業界リーダーのサイト
ウェブサイト設計の時に役立つ7つのテクニック／【その3】具体性 (ユーザビリティ実践メモ)
前々回から連載しているウェブサイト作成時に役立つ7つのテクニック、第3回のテーマは「具体性」です。「見て欲しいページへのリンクがなかなかクリックされない…」。そんな悩みを解決するためのコツを取り上げます。 ファーストビュー 関連性 具体性 ←今回のテーマ ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 ウェブサイトではページ間の移動は基本的にリンクによって行われます。しかし、一般的に言われているリンクのクリック率は高い場合でも10％程度。リンクがクリックされなければ、どんなにユーザの関心を引くページやコンテンツを用意しても、まったく見られないまま終わってしまう危険性があります。 まとめの第３回では「具体性」をキーワードに、伝えたいメッセージをウェブサイト上で確実に伝えるための２つのポイントをお伝えします。 「具体性」に関わる2つのポイント リンク先にある情報のイメージ
ウェブサイト設計の時に役立つ7つのテクニック／【その2】関連性 (ユーザビリティ実践メモ)
実際にウェブサイトを作っていくときに役立つ7つのテクニック、第2回のテーマは「関連性」です。関連性の強い情報の見せ方について、実例や犯しやすいミスを交えて解説していきます。 ファーストビュー 関連性 ←今回のテーマ 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第2回は「関連性」についてです。ユーザに2つの要素の関連性を認識してもらうには、1つの「まとまり」に見えることが必要です。人がどのようにまとまりを感じるかについては、ゲシュタルト心理学などの分野で議論されてきました。その中で、ウェブサイトを作る上で重要なのは、以下の2点です。 近接 閉合 1.近接 近接とは、簡単に言えば近いということです。例として、以下の図を見てください。 図1 上の図を見たときに、下の図のように右上の2つ、左下の1つをまとまりとして感じたのではないでしょうか。このように、人
ウェブサイト設計の時に役立つ７つのテクニック／【その1】ファーストビュー設計のポイント (ユーザビリティ実践メモ)
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？ 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計／4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
ユーザの認知を正しく捉える (ユーザビリティ実践メモ)
複数ブランドを束ねるファッションサイトのリニューアルに際し、テキストリンクのみだった各ブランドへのリンクにロゴを足しました。 すると、あるブランドのクリック率が2倍も伸びたのです。 いったいなぜロゴを足しただけで、CTRが2倍も伸びたのでしょうか？ このブランドの特徴を見てみましょう。 複数の大型駅ビルに店舗を構えていて多くの人が店舗を目にしている ブランド名が長く覚えにくい ブランドカラーとロゴが特徴的 ロゴが目立つショッピングバッグをぶら下げている若者が多い つまり、当ブランドはブランド名よりもロゴで認知されていたのです。 リニューアルでロゴが付与され「あ、このブランド知ってる、ちょっと見てみよう」という行動が促されたと考えられます。 「ロゴが大事」ということをお伝えしたいわけではありません。（現に、他のブランドはロゴを足した後もCTRに大きな変化はありませんでした。） 自社の製品やサ
タブ使用時の注意点 (ユーザビリティ実践メモ)
タブによる表示切り替えは、様々なサイトで利用されている便利な機能です。さて、皆さんはタブの使い方が大きく2種類あることにお気づきでしょうか？ タブは便利であると同時に、背後のタブが見られない危険性が伴います。今回は、タブの2種類の使い方にそって、タブ利用時の注意点について考えてみたいと思います。なお、どちらの使い方か明確に分けられない場合は、両方の注意点を参考にするのがおすすめです。 ※タブを利用する際の注意点は過去の実践メモでも取り上げています。 （参考） 「困った時のタブ頼み」（ユーザビリティ実践メモ） まず、一つ目の使い方は、「多数の情報をカテゴリごとに整理して提示する」というものです。 例えば、ニュースサイトでは多数のニュース記事を「総合」「経済」「エンタメ」「スポーツ」というタブを使って分かり易く分類しているのをよく見かけます（図1）。あるいは、衣料品を扱うＥＣサイトでは「レディ
iPhoneサイトで気をつける3つのポイント (ユーザビリティ実践メモ)
スマートフォン利用者の増加に伴い、スマートフォン、特にiPhone対応サイトを用意する企業が増えてきましたが、必ずしもデバイスの特徴を考慮したサイトとなっていないケースが見られます。今回は弊社の調査で見られたユーザ行動を元に、iPhoneサイトで気をつけるべきポイントをご紹介します。 従来の携帯では下ボタンで画面をスクロールさせる際リンクに順番にフォーカスがあたるため、テキストリンクでもユーザの視線が止まりやすい傾向があります。一方iPhoneでは指で画面をスクロールさせるため、リンクにフォーカスはあたりません。テキストリンクがアイキャッチとなりにくく、携帯と比較して文字情報がまとめて読み飛ばされるケースがみられます。ユーザの目線を止めるには、アイキャッチ用の画像を配置するなどの工夫が必要です。 【ポイント2】細かな操作はさせない iPhoneはタッチパネルを指で操作するため、画面上の1点
探しやすい一覧のコツ (ユーザビリティ実践メモ)
コンテンツ量の多いサイトでは、情報を一覧にすることで、ユーザが欲しい情報を見つけやすくするという手法がよく使われます。今回は表形式で情報を整理する際の考え方を、ユーザ行動観察調査の事例を元にご紹介しましょう。 図1は、ある旅行情報サイトでの情報一覧ページです。次の休暇にお得なパッケージツアーを検討しているユーザは、どのようにこのページを使うと思いますか？ 弊社のユーザ行動観察調査の結果、ユーザの視線は下の図のように左右に大きく動き、かなり時間をかけて表を見ていく様子が観察されました。 このページを見る際のユーザの関心事は、第一に「予算の範囲内で一番お得なツアーは何か」であり、さらにいえば「同じ価格ならできるだけ魅力的なところに行きたい」ということでした。 したがって、ユーザは各パッケージツアーの「価格」と「割引率」に注目しています。この表では二つの情報が離れた場所にあるため、視線があちこち
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
