ユーザインタフェース　第6回 トップページのデザインの難しさ.

Presentation on theme: "ユーザインタフェース　第6回 トップページのデザインの難しさ."— Presentation transcript:

1 ユーザインタフェース　第6回 トップページのデザインの難しさ

2 トップページが揃えるべき構成要素 ー 実は いっぱいある ー
トップページが揃えるべき構成要素 ー　実は　いっぱいある　ー サイトの素性と使命 サイトの階層 コンテンツ（何があるのか？）と機能（何ができるのか？） コンテンツと機能の構成を　ナビゲーション　で表示 検索機能 見どころ紹介 コンテンツの宣伝、機能の宣伝 タイムリーなコンテンツ 多くのユーザを頻繁に訪れさせるには　常に新しい内容 よく使うセクションへのショートカット 登録制の場合のユーザへのサービス 新規なら登録へのリンク、会員なら「ようこそ！○○さん」

3 機能の宣伝 ようこそ！のメッセージ セクションを示すナビゲーション タイムリーな情報

4 トップページが満たすべきゴール ユーザが 捜しているもの を表示する ユーザが 捜していないもの も表示する 利用者に スタート地点 を示す
ユーザが　捜しているもの　を表示する ユーザが　捜していないもの　も表示する セレンディピティ（serendipity）　を与える 何かを探しているときに、探しているものとは別の価値あるものを見つける能力・才能 利用者に　スタート地点　を示す 何から始めれればよいかがユーザにすぐわかる 信頼感　を獲得する トップページを見ただけで去るユーザは多い

5 ここから始めればよい セレンディピティ （これを買いに来たわけではない）

6 制作側からの難しい条件 トップページは 「人気の土地」 船頭が多い だれの好みにも合う 必要がある ユーザが必ず見るのはトップページ
トップページは　「人気の土地」 ユーザが必ず見るのはトップページ 各セクション担当者は自らへのリンクを置きたい スクロールせずに見える　部分に置きたい 船頭が多い トップページのデザインには多くの人が口を出す ときにはCEOも だれの好みにも合う　必要がある サイトを訪れるすべての人に魅力的であるべき

7 最初に犠牲になるもの 多くの条件を満たせないので 妥協が必要 もっともよく見失われるのは 何のサイトか？
多くの条件を満たせないので　妥協が必要 もっともよく見失われるのは　何のサイトか？ ここが何のサイトから知らないユーザが訪れると何が何だか…?（年寄りは、amazonって、何？） サイトの素性と使命が消えている

8 初めての訪問者の疑問に即答できるか このサイトは 何だろうか？ どんなものがあるの ここでどんなことができるの？
このサイトは　何だろうか？ どんなものがあるの コンテンツ　を示すことができているか ここでどんなことができるの？ 提供する　機能　を示すことができているか 他でなく、このサイトでないといけない　理由はあるのだろか？ 実は、もうひとつ、答えるべき疑問がある。

9 トップページの中で２つの重要な場所 タグ・ライン 歓迎の広告 サイトIDに続くスペースにある決まり文句
ユーザは、ここに書かれたフレーズをサイト全体の説明と考える 歓迎の広告 ここでないとダメを印象付ける、このサイトの広告

10 トップページの メッセージを理解してもらうために
十分な領域を使う 伝えるべき情報をしっかり伝える ページが丸ごと説明文 簡潔さ　は保つ 空白や箇条書きを使って見やすく ここが最重要と認識する 部外者　に見せ、トップページの使命が果たされているかをチェック

11 優れたタグライン 明快 で必要な情報を提供 必要にして十分 な長さ 差別化 とわかりやすい 利点 が表示
明快　で必要な情報を提供 世の中の「今」を知る最高の方法です (twitter) 必要にして十分　な長さ Broadcast Yourself ( YouTube ) 差別化　とわかりやすい　利点　が表示 子どもの教育を考えるお母さん、お父さん、そして先生のために役立つ情報をご紹介します。

12 トップページが答えるべき最後の疑問 どこから始めればいいのか ？ ３つの場合のすべてに答えるべき 無関係なものに埋もれてはいけない
どこから始めればいいのか　？ ３つの場合のすべてに答えるべき 検索がしたいなら、ここから始める ブラウズするなら、ここから始める 一番お勧めの内容を見るなら、ここから始める 無関係なものに埋もれてはいけない 「最初はココ」と叫びたてる宣伝に埋もれない 見落とされない工夫 ボタンのような表示、メッセージ、色

13 プルダウンメニューにご注意 省スペースにプルダウンメニューは便利 欠点 すでにリストされる項目が分っていて、そこから選ぶときに便利
クリックしないと見れない ユーザはざっと見れない 斜め読みしにくい すでにリストされる項目が分っていて、そこから選ぶときに便利 [例] 住所で都道府県を選ぶとき

14 鑑定してみよう 対象： Productopia 次のサイトでユーザになったとして、以下の質問に答えられるかを考えよ
このサイトのポイントは何か どこから始めればよいかわかるか 対象：　Productopia ショッピング行為で必要な情報をすべてオンラインにしたサイト 専門家の意見を分析して、お勧め商品やコメントを提示

15 Productopiaが提供する商品情報は丁寧でかつ無駄がない
ディジカメの例 「productopiaはこれをすすめる！」と来る。実に簡潔。 お勧めは、「品質」、「価格」、「スタイル」の３つから評価されていて、自分がどれを重視するかで、もう大体買うものがきまってしまう。 「買うときのコツ」についても情報がまとめてあり、画素数の話からはじまって、バッテリ寿命の話、ズームの話 と続く。 読み終わるころにはそれなりの知識を得てさらに賢い選択ができるようになっている。

16 優れてたトップページ どんなサイトか？ どこから始めるか 問題点と改善案 タグラインに工夫 検索から トップページに各記事の書き出しが記載
すべての内容をスクロールなしに見れない 改善案として、記事の見出しだけにして、すべての記事をスクロールなしに見れるようにする。