Transcript ⑨ ここにはない
ユーザインタフェース 第5回 パンくず パンくずリスト • ユーザがサイト内のどこにいるか を示すもの – 家への帰り道を示すためにパンくずをヘンゼルが 道に落としながら歩いた寓話 利点と欠点 利点 •スペースを取らない •一目瞭然 •よく使う動作のための便利な機能を提供 「上位に戻る」 と 「トップページに移動」 欠点 •ナビゲーションには不十分 –来た道を戻れる だけ ベスト・プラクティス（最良の事例） • 「パンくずリスト」は 一番上 に • 小さい文字を使用する – 単なる付属品の印象を与える。（ 目立ってはダメ ） • 階層と階層の間に 「＞」 を使用する – 階層を 上から下に移動する イメージを表現 • 「現在地」と表示 • 最後の項目を太字にする – 最後の項目＝「現在地」を目立たせる • 「パンくずリスト」をページ名の代わりに使わない タブ ソーシャルニュースサイト digg.com の場合 物理的なメタファー • メタファー： 比喩 • タブ – 分厚い資料を章ごとに区分け。 – 各章の最初にタブが突起した仕切り紙 – ダビンチが発明したといわれる。 • タブ以外のメタファーの例 – 不要なファイルを「 ゴミ箱 」にドラッグして捨てる – Xerox社の Palo Alto研究所 で発想 – Apple社が一般に広めた タブが優れている理由 • 自明である – コンピュータ音痴にも理解できる • 見落とされることがほとんどない – ボタンバー は見落としても タブ は見落とさない • 巧妙な手段である。 – ページサイズ を増やさずに、見た目も使い勝手もよくなる。 • リアルな空間の雰囲気を醸し出している。 – タブを押すと、選択ページが 最前面に来た 錯覚を覚える タブをタブとして見せる工夫 No.1 ー 正しい 錯覚 に基づき作成 ー • 選択されているタブが 他のタブの前面に来 ているような錯覚 • タブの下に続くスペー スとつながっているよ うな錯覚 • タブの形状をしていな いものでタブを作らな い × ○ タブをタブとして見せる工夫 No.2 ー カラーコーティング を使う － • 選ばれたタブが 前に飛び出して くる感じ • 鮮明な 濃い色 を用いて見逃されないように • 文字は、淡い色を用いた 白抜き にする。 官能評価法 ユーザインタフェースの評価 感性工学 • より多くの人にとって印象が良いものは、より売 れる商品となる • 「いい感じ」といった感性を定量化する • インタフェースの研究を行う人は，必ず反応時間 などの他覚評価だけではなく、主観評価を行う • 刺激を人間に合わせる指標となる • 参考文献 – 『人間工学ガイド感性を科学する方法』 – 福田忠彦監修・福田忠彦研究室編 – サイエンティスト社 ２つの評価法 • 他覚評価法（客観評価法） – 非言語的な手段により得られた被験者本人の生理 反応を解析する手法 – たとえば，発汗，心拍，眼球運動などのセンサを使 う • 主観評価法（主観評価法） – 言語的手段により得られた被験者本人の主観的な 評価（心理反応）を解析する手法 – 被験者の主観による評価を言語で表現してもらう – 官能評価とも呼ばれる 正規化順位法 v.s.一対比較法 • ともに，人間にとってよりよく感じるものはどれかを比べ、 数量化してあらわし、それぞれの刺激間の順位付けとそ の関連性を調べる • 1本の数直線上に刺激を配列 • 正規化順位法 – 同時に呈示して並び替え比較 – 刺激が多くなっても被験者の負担が小さい – 使用できる刺激は視覚的なものに限られ，精度はやや低い • 一対比較法： – 2つずつ，対にして比較 – 使用できる刺激に制限が少なく，精度も高い – 刺激が多くなると，被験者の負荷が高い 商品購入に参考になる順にページを 並べ替えよ （正規化順位法） 多数の被験者がつけた順次を点数化 • 同じ幅になるように順位に点数をつける (例) 1位を90点，2位を70点，3位を50点，4位を30点， 5位を10点 • 対象が正規分布に従っているとして，偏差率 を正規分布表から調べる – 各点数の人は，平均μから標準偏差σの何倍離 れたところにいるか •90点の人は，上位10％の人と考え，これらの人がμか らσの1.282倍離れたところにいることを突き止める •70点の人は，上位30％の人と考え，偏差率は0.524 • 30点の人は，下位30％の人と考え，偏差率は -0.524 偏差率による得点化 • 偏差率を，その人が与えた点と考える． • 各ページの得点S : 評価者一人あたりの得点 Σ 偏差率×その点を与えた人数） S= 全評価者数 一人あたりの得点を直線上に表示 楽天 -1.0 読書メータ Google -0.5 0 0.5 Amazon 1.0 どの差が優位な差であるかを，検定する • 一対評価法は，すべてを並べるのではなくて，対で比較 • これを総当りで実施する トランクテスト • ナビゲーションの主要な要素がすべて揃って いるかを与えられたサイトでテストする。 • ナビゲーションの目的 – ユーザが行きたいところに連れて行く – どこにいるか をユーザに知らせるもの • トランクテストで両方を満たしているかを検査 テスト項目 • これはなんというサイトか （ サイトID ） • 何というページか （ ページ名 ） • このサイトの主要なセクションは何か （ 各セクション ） • このページで選択できるものは何か （ ローカル・ナビゲーション ） • いま、どの位置にいるか （ 現在位置 ） • どうすれば検索できるか （ 検索ボタン ） 問題 Ubuntu Linux の ダウンロードページ • http://www.ubuntulinux.jp/products/GetUbuntu このページに対して、以下の項目を 表している部分を番号で答えよ • 番号は①から⑨の中から１つ選ぶこと • ただし、⑨は該当する部分がページにない場 合に選ぶこと 第1問 サイトID ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第２問 ページ名 ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第３問 セクションの表示 ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第４問 ローカルナビゲーション ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第５問 現在位置 ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第６問 検索する方法 ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない レポート • ナビゲーションの観点で次のサイトを評価せよ http://www.de.is.ritsumei.ac.jp/ – ６つの項目を指摘すること – 利点と欠点をあげ、欠点には理由と改善案をつけよ – 図を用いた説明をすると加点する。 – 期限： 次々回の授業日 午後６時３０分 – 提出： 学びステーション 受付 では、解答用紙を集めて • 正解は…？ 第1問 サイトID ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第２問 ページ名 ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第３問 セクションの表示 ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第４問 ローカルナビゲーション ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第５問 現在位置 ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 第６問 検索する方法 ① ⑥ ⑦ ② ④ ③ ⑤ ⑧ ⑨ ここにはない 改善点 • 内容が豊富なので、ローカルナビゲーション を入れたほうがよい。 • ページ名がわかりにくいので、もっと大きくす る。