ユーザインタフェース 第 2 回 ユーザ行動の分析と「看板」のデザ イン ー まずは市場（ユーザ）を知り、 市場が望む商品を提供す る ー.

Presentation on theme: "ユーザインタフェース 第 2 回 ユーザ行動の分析と「看板」のデザ イン ー まずは市場（ユーザ）を知り、 市場が望む商品を提供す る ー."— Presentation transcript:

1 ユーザインタフェース 第 2 回 ユーザ行動の分析と「看板」のデザ イン ー まずは市場（ユーザ）を知り、 市場が望む商品を提供す る ー

2 Web ページは 斜め読み され る ユーザはページの内容を読んで選ぶリンクをしっかり考え ると、 Web ページの製作者は思いがち 実際には、気になる単語だけを見て、リンクを押し、ユー ザはすぐにそのページを立ち去る – 時速 100 キロで走る車から見える 看板 のようなもの これには３つの理由がある。

3 理由その 1 ：人はページを読まない。 ざっと見る (scan) のみ たいてい、急いでいるから すべてを読む必要がないことを知っているか ら ざっと見るのが得意だから 航空会社の ホームページ チケット購入へのリンク マイルチェックへのリン ク

4 理由その 2 ：最良のものを選択する よりも、満足できるものを選ぶ たいてい利用者は、最初に目についた、そこ そこ満足できるものを選ぶ – 満足化（ satisficing ） ＝ satisfying + sufficing H.Simon, Models of Man: Social and Rational, Wiley, 1957 – 人間はどのように意思決定しているのか G.Klein, Source of Power: How People Make Decisions, MIT Press, 1998 消防隊の指揮官を調査 時間制約のため二者択一程度で意思決定していると想 定 実際には、最初に思いついたプラン を問題ないか チェック 問題なければそれを選択。

5 我々が「満足化」で満足しているのはな ぜ？ Web を使うときに、そこそこ、満足できるも の でいいのは 見当違いをしたって 厳しい罰 を与えら れない – 消防士ですら最良の選択肢を検討していない 選択肢を比較検討 しても、結果はあま り かわらない 推測して見当をつけることのほうが 楽し い

6 理由その 3 ：人は仕組みを理解せず、 どうにか切り抜けるものである 家電品を買っても説明書をじっくり読まない とにかく使ってみて なんとか使えるように なる。 その使い方が間違っていても 気にしない – Google や Yahoo の検索ボックスに URL を書く

7 誤った使い方を気にしないのは 仕組みを知らなくても、問題はないから – 使えている限りは正しい使い方をしらなくても よい うまくいくとわかったら、それに 固執す る から

8 「看板」ユーザインタフェース 入門 Web ページはしょせん、ざっとしか見られ ない、誤った使い方に耐え抜くべき「看 板」か？ – Web デザイナは苦労しても、報われないのか？ – ユーザインタフェースなんて研究する必要ない の？ りっぱな看板 をつくる必要 → ５つ の原則 1. 各ページの階層をわかりやすくする 2. 「慣習」を守る 3. ページをエリアに分ける 4. クリックできるものをはっきりさせる 5. ノイズは最小限に抑える

9 原則１：各ページの階層をわかりや すく 短時間で内容を理解させるには、ページ 上の項目が visual ( 一目瞭然 ) な階層を もつべき ３つのポイント より重要なものが、より目立つ – 最重要項目は、大きいフォントで、太字で、 目立つ色で、余白を使い、ページの top の近く にある 論理的な関連物が、 visual 上も同じ層に – 同じ見出しの下、同じスタイル、同じエリア にある 何がどれを含むかを示すのに入れ子を使 う

10 階層構造の例 より重要なものが、 より目立つ 論理的な関連物が、 visual 上も同じ層 に 何がどれを含むか を示すのに入れ子 を使う

11 慣例を守る デザイナは自分だけのページを作りたがる どれが何か, 何がどこにあるかがわかる Web にも慣例 ( カテゴリ、探索ボックス、 etc)

12 エリアに分ける 商品の写真 商品の情報 関連商品 余白が多い ので、エリア分けがよくわ かる

13 クリックできるものをはっきりさせる Amazon でどれをクリックできるか一目瞭然 か？ 答えは Yes 下線で青字 も しくは ボタン 下の検索ボックスで、どこを押して検索す る？ SEARCH ×○×○

14 ノイズを最小限に ケバケバしすぎるもの – すべてが大きいフォント – すべてがドぎつい色 – どこもがブリンク 背景がうるさいもの – 不必要なアニメーション – 枠が太い、濃い 大切な検索ボタンの枠が薄く、 「オークション」の枠は濃い

15 ME （ Magnitude Estimation ）法 Stevens によって提唱 刺激量 S に対する人間の心理量 R は次式に従う R = k S n k, n: 定数 [ 例 ] – Web ページの空白部分の比率を変える．比率が小さい ものから大きいものへと徐々に変化させ，それぞれの 比率がエリア切分けの明確さをユーザに与えるかを調 べる． – 果物ジュースの果肉の割合を変化させ，それを飲む人 間がどのような「飲みごたえ」を感じているかを調べ る．

16 ジュースの例 刺激量 50 を堺に，感覚量の変化が鈍くなっている． 50 以上の刺激を与えても，同じ感覚しか得ていない． 果肉を 50 程度に抑えれば，少ないコストで大きな効果 Web ページの空白についても同じ手法を用いることができるはず．

17 k と n を求める実験 いろいろな刺激（空白の割合）を，多くの 被験者（最低でも 20 人）に見せ，エリアご との区切りの明確さを 200 点満点でつけて もらう．

18 中央値をとる 各刺激に対して，すべての被験者が答えた区 切りの明確さの中央値をとる． – 突拍子もない反応をする被験者の影響を除去する – 中央値 データが奇数のとき，小さい順に並べたとき中央に位 置する値 偶数のとき，中央に近い 2 つの値の算術平均 – 平均でもよいが，平均では大外れの値に影響され る恐れあり 刺激 順に並べると 50,90, 90, 130 なので， 90 が中央値

19 反応 R と刺激 S の対数をとる 等式 R = k S n k, n: 定数 ( １ ) の両辺の対数をとると log R = log k +n ･ log S (2) ここで， y=log R, a=n, x=log S, b=log k とおくと y=a ･ x + b R と S に各被験者の値を代入し， a と b の値を求めれば， k, n の値が求まり，式 ( １ ) の式を同定することができる．

20 回帰直線を求める 実験値を式 (2) に代入し， グラフにプロット． グラフにプロットされる すべての点からの距離の 和が最小の直線を求める 最小二乗法 – 誤差の和は a, b の 2 次式 – これを a, b で偏微分し，と もに 0 となるとき，最小 – n=a, k =10 b だから R = k S n が確定