ユーザインタフェース 第 5 回 パンくず. パンくずリスト ユーザがサイト内のどこにいるか を示す もの – 家への帰り道を示すためにパンくずをヘンゼル が道に落としながら歩いた寓話.

Presentation on theme: "ユーザインタフェース 第 5 回 パンくず. パンくずリスト ユーザがサイト内のどこにいるか を示す もの – 家への帰り道を示すためにパンくずをヘンゼル が道に落としながら歩いた寓話."— Presentation transcript:

1 ユーザインタフェース 第 5 回 パンくず

2 パンくずリスト ユーザがサイト内のどこにいるか を示す もの – 家への帰り道を示すためにパンくずをヘンゼル が道に落としながら歩いた寓話

3 利点と欠点 利点 スペースを取らない 一目瞭然 よく使う動作のための便利な機能を提供 「上位に戻る」 と 「トップページに移動」 欠点 ナビゲーションには不十分 – 来た道を戻れる だけ

4 ベスト・プラクティス（最良の 事例） 「パンくずリスト」は 一番上 に 小さい文字を使用する – 単なる付属品の印象を与える。（ 目立っては ダメ ） 階層と階層の間に 「＞」 を使用する – 階層を 上から下に移動する イメージを表現 「現在地」と表示 最後の項目を太字にする – 最後の項目＝「現在地」を目立たせる 「パンくずリスト」をページ名の代わりに使 わない

5 タブ ソーシャルニュースサイト digg.com の場合

6 物理的なメタファー メタファー： 比喩 タブ – 分厚い資料を章ごとに区分け。 – 各章の最初にタブが突起した仕切り紙 – ダビンチが発明したといわれる。 タブ以外のメタファーの例 – 不要なファイルを「 ゴミ箱 」にドラッグし て捨てる – Xerox 社の Palo Alto 研究所 で発想 – Apple 社が一般に広めた

7 タブが優れている理由 自明である – コンピュータ音痴にも理解できる 見落とされることがほとんどない – ボタンバー は見落としても タブ は見落とさな い 巧妙な手段である。 – ページサイズ を増やさずに、見た目も使い勝手もよ くなる。 リアルな空間の雰囲気を醸し出している。 – タブを押すと、選択ページが 最前面に来た 錯覚を 覚える

8 タブをタブとして見せる工夫 No.1 ー 正しい 錯覚 に基づき作成 ー 選択されているタブ が他のタブの前面に 来ているような錯覚 タブの下に続くス ペースとつながって いるような錯覚 タブの形状をしてい ないものでタブを作 らない ×○×○

9 タブをタブとして見せる工夫 No.2 ー カラーコーティング を使う － 選ばれたタブが 前に飛び出して くる感 じ 鮮明な 濃い色 を用いて見逃されないよ うに 文字は、淡い色を用いた 白抜き にする。

10 官能評価法 ユーザインタフェースの評価

11 感性工学 より多くの人にとって印象が良いものは、よ り売れる商品となる 「いい感じ」といった感性を定量化する インタフェースの研究を行う人は，必ず反応 時間などの他覚評価だけではなく、主観評価 を行う 刺激を人間に合わせる指標となる 参考文献 – 『人間工学ガイド感性を科学する方法』 – 福田忠彦監修・福田忠彦研究室編 – サイエンティスト社

12 ２つの評価法 他覚評価法（客観評価法） – 非言語的な手段により得られた被験者本人の生 理反応を解析する手法 – たとえば，発汗，心拍，眼球運動などのセンサ を使う 主観評価法（主観評価法） – 言語的手段により得られた被験者本人の主観的 な評価（心理反応）を解析する手法 – 被験者の主観による評価を言語で表現してもら う – 官能評価とも呼ばれる

13 正規化順位法 v.s. 一対比較法 ともに，人間にとってよりよく感じるものはどれかを 比べ、数量化してあらわし、それぞれの刺激間の順位 付けとその関連性を調べる 1 本の数直線上に刺激を配列 正規化順位法 – 同時に呈示して並び替え比較 – 刺激が多くなっても被験者の負担が小さい – 使用できる刺激は視覚的なものに限られ，精度はやや低い 一対比較法： – 2 つずつ，対にして比較 – 使用できる刺激に制限が少なく，精度も高い – 刺激が多くなると，被験者の負荷が高い

14 商品購入に参考になる順にページ を並べ替えよ （正規化順位法）

15 多数の被験者がつけた順次を点数 化 同じ幅になるように順位に点数をつける ( 例 ) 1 位を 90 点， 2 位を 70 点， 3 位を 50 点， 4 位を 30 点， 5 位を 10 点 対象が正規分布に従っているとして，偏 差率を正規分布表から調べる – 各点数の人は，平均 μ から標準偏差 σ の何倍離 れたところにいるか 90 点の人は，上位 10 ％の人と考え，これらの人が μ から σ の 1.282 倍離れたところにいることを突き止 める 70 点の人は，上位 30 ％の人と考え，偏差率は 0.524 30 点の人は，下位 30 ％の人と考え，偏差率は - 0.524

16 偏差率による得点化 偏差率を，その人が与えた点と考える． 各ページの得点 S : 評価者一人あたりの得 点 Σ 偏差率 × その点を与えた人数） S = 全評価者数

17 一人あたりの得点を直線上に表示 00.51.0 -0.5 Amazon 楽天 Google 読書メータ どの差が優位な差であるかを，検定する 一対評価法は，すべてを並べるのではなくて，対で比較 これを総当りで実施する

18 トランクテスト ナビゲーションの主要な要素がすべて 揃っているかを与えられたサイトでテス トする。 ナビゲーションの目的 – ユーザが行きたいところに連れて行く – どこにいるか をユーザに知らせるもの トランクテストで両方を満たしているか を検査

19 テスト項目 これはなんというサイトか （ サイト ID ） 何というページか （ ページ名 ） このサイトの主要なセクションは何か （ 各セクション ） このページで選択できるものは何か （ ローカル・ナビゲーショ ン ） いま、どの位置にいるか （ 現在位 置 ） どうすれば検索できるか （ 検索ボタ ン ）

20 問題 Ubuntu Linux の ダウンロードページ http://www.ubuntulinux.jp/products/GetUbuntu

21 このページに対して、以下の項目 を 表している部分を番号で答えよ 番号は ① から ⑨ の中から１つ選ぶこと ただし、 ⑨ は該当する部分がページにな い場合に選ぶこと

22 第 1 問 サイト ID ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

23 第２問 ページ名 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

24 第３問 セクションの表示 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

25 第４問 ローカルナビゲーション ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

26 第５問 現在位置 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

27 第６問 検索する方法 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

28 レポート ナビゲーションの観点で次のサイトを評価せ よ http://www.de.is.ritsumei.ac.jp/ – ６つの項目を指摘すること – 利点と欠点をあげ、欠点には理由と改善案をつ けよ – 図を用いた説明をすると加点する。 – 期限： 次々回の授業日 午後６時３０分 – 提出： 学びステーション 受付

29 では、解答用紙を集めて 正解は … ？

30 第 1 問 サイト ID ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

31 第２問 ページ名 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

32 第３問 セクションの表示 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

33 第４問 ローカルナビゲーション ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

34 第５問 現在位置 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

35 第６問 検索する方法 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ここにはな い

36 改善点 内容が豊富なので、ローカルナビゲー ションを入れたほうがよい。 ページ名がわかりにくいので、もっと大 きくする。