リニアメニューにおける 開閉ボタンの位置が探索に与える影響 塩出研史 宮下芳明 （明治⼤学） 1 2019.01.21 第181回HCI研究会

2 背景 多くのアプリケーションではリニアメニューが⽤いられている

3 背景 多くのアプリケーションではリニアメニューが⽤いられている

4 背景 多くのアプリケーションではリニアメニューが⽤いられている プルダウンメニュー 上から下⽅向に探索される傾向

5 背景 多くのアプリケーションではリニアメニューが⽤いられている

6 背景 多くのアプリケーションではリニアメニューが⽤いられている 詳細に調査されていない

7 背景 クリックするために 開閉ボタンを注視︖

8 背景 上⽅向︖ 下⽅向︖ 多様な探索戦略が 想定される

9 ⽬的 リニアメニューにおける開閉ボタンの位置が 探索に与える影響を調査 ユーザの探索⾏動に関して理解を深め， リニアメニューのデザインに貢献

10 関連研究 プルダウンメニューの探索の分析・パフォーマンスの数式モデル化 [1][2][3] [1] Cockburn, A., Gutwin, C. and Greenberg, S. A Predictive Model of Menu Performance. Proc. CHI’07, 2007, 627-636. [2] Bailly, G., Oulasvirta A., Brumby, D. and Howes, A. Model of Visual Search and Selection Time in Linear Menus. Proc. CHI’14, 2014, 3865-3874. [3] Byrne, M., Anderson, J., Douglass, S. and Matessa, M. Eye Tracking the Visual Search of Click-Down Menus. Proc. CHI’99, 1999, 402-409. ターゲットの位置が下に⾏くほど 平均探索時間が⻑くなる線形関数

11 関連研究 Web画像検索時の視線探索⾏動の分析[4] [4] Xie, X., Liu, Y., Wang, X., Wang, M., Wu, Z. and Wu, Y. Investigating Examination Behavior of Image Search Users. Proc. IR’17, 2017, 275-284. 上から下の⽅向で探索 ⽔平中央が先に探索される傾向 First arrival time

12 実験 開閉ボタンの位置がリニアメニューの探索時間・視線の動きに与える影響について調べるため ⽬的 参加者 19〜24歳の学⽣10⼈（全員右利き） 実験デザイン ● ユーザが配置を全く記憶していない初めて利⽤するメニューで探索する状況を想定 ● マウスカーソルでターゲットを選択する前提での探索⾏動について調査 ➡ マウスでターゲットのクリックまで⾏う

13 実験環境 ディスプレイ 65cm 21.5ピクセル 計測精度 0.5度 固視微動 0.017度 0.7ピクセル 視線計測装置 Tobii T60 （60Hzで動作・計測精度0.5度） ディスプレイ 17インチ・1280×1024ピクセル メニューのアイテム1個の⾼さ 26ピクセル（約0.68cm）

14 実験⼿順 ボタンをクリック

15 実験⼿順 east kind rose face pain bath iron leaf quiz gate hand aunt mail リニアメニュー表⽰（毎回ランダムに並び替え）

east kind rose face pain bath iron leaf quiz gate hand aunt mail 16 実験⼿順 aunt ターゲットを⾒つけたらスペースキーを押す 探索中カーソルは ⾃由に動かしてOK

east kind rose face pain bath iron leaf quiz gate hand aunt mail 17 実験⼿順 ターゲットをクリック

18 実験条件 本番 780回 : ターゲット位置（9+13+17=39）× ボタン位置5か所 × 4セット 練習 30回 上部 上中央部 中央部 下中央部 下部 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 2 3 4 5 6 7 8 9 10 11 12 13 ●9個 ●13個 ●17個

19 実験結果 最初に注視された位置の⽐率 全てのボタンの位置の場合について， ボタンの位置が40％以上の⽐率で注視される 0 0.1 0.2 0.3 0.4 0.5 0.6 0 1 2 3 4 5 6 7 8 9 10 ⽐率 アイテムの位置 0 0.1 0.2 0.3 0.4 0.5 0.6 0 1 2 3 4 5 6 7 8 9 10 ⽐率 アイテムの位置 0 0.1 0.2 0.3 0.4 0.5 0.6 0 1 2 3 4 5 6 7 8 9 10 ⽐率 アイテムの位置 0 0.1 0.2 0.3 0.4 0.5 0.6 0 1 2 3 4 5 6 7 8 9 10 ⽐率 アイテムの位置 0 0.1 0.2 0.3 0.4 0.5 0.6 0 1 2 3 4 5 6 7 8 9 10 ⽐率 アイテムの位置 アイテム数13・17個の場合も同様 ● アイテム数 9個の場合

20 実験結果 平均探索時間 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 ● ボタンの位置が上部の場合 ( = プルダウンメニュー） ボタンの位置 先⾏研究と同様の結果 ターゲットがボタンの位置から離れるほど平均探索時間が⻑くなる傾向 アイテム数 9 アイテム数 13 アイテム数 17

0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 探索時間（ミリ秒） ターゲットの位置 21 実験結果 平均探索時間 ● ボタンの位置が上中央部の場合 ボタンから近いにも関わらず，平均探索時間が最も⻑い位置が存在 ボタンの位置 アイテム数 9 アイテム数 13 アイテム数 17

0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 探索時間（ミリ秒） ターゲットの位置 22 実験結果 平均探索時間 ● ボタンの位置が中央部の場合 ボタンの位置 アイテム数 9 アイテム数 13 アイテム数 17

0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 23 実験結果 平均探索時間 ● ボタンの位置が下中央部の場合 ボタンの位置 アイテム数 9 アイテム数 13 アイテム数 17

0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 探索時間（ミリ秒） ターゲットの位置 24 実験結果 平均探索時間 ● ボタンの位置が下部の場合 ボタンの位置 アイテム数 9 アイテム数 13 アイテム数 17

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 視線の位置 時間 25 実験結果 探索戦略アンケート ● 6⼈「ボタンの位置から上⽅向に探索し，その後下⽅向に探索した． 」 ボタンの位置 視線

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 視線の位置 時間 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 4000 5000 視線の位置 時間 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 4000 5000 視線の位置 時間 26 実験結果 探索戦略アンケート ● 2⼈「ボタンの位置からアイテム数が少ない⽅向に探索し，その後逆⽅向に探索した． ● 2⼈「ボタンの位置が中央の場合には，ボタンの位置から上⽅向に探索し，その後下⽅向に探索した．」 ボタンの位置 視線

27 実験結果 探索戦略アンケート ● 1⼈「ボタンの位置付近を探した後，上端または下端のアイテムを探し，その後逆⽅向に探索した．」 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 4000 視線の位置 時間 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 4000 視線の位置 時間 ボタンの位置 視線

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 視線の位置 時間 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 視線の位置 時間 28 実験結果 探索戦略アンケート ● 1⼈「ボタンの位置から上⽅向に探索し，その後下⽅向に探索することもあれば，下⽅向に探索し， ● 1⼈「その後上⽅向に探索することもあった．どちらの⽅向を最初に選択するかは，特に考えていなかった．」 ボタンの位置 視線

考察 ボタン付近の平均探索時間の⻑い位置 29 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 アイテム数 13 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 アイテム数 17 ● ボタンの位置が上中央部の場合 ボタン ターゲット ボタン ターゲット

考察 ボタン付近の平均探索時間の⻑い位置 30 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 アイテム数 13 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 アイテム数 17 ● ボタンの位置が上中央部の場合 ボタン ターゲット ボタン ターゲット 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 4000 5000 6000 視線の位置 時間（ミリ秒） ボタンの位置 ターゲットの位置 探索時間の⻑い試⾏でよく⾒られるパターン

考察 ボタン付近の平均探索時間の⻑い位置 31 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 アイテム数 13 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 アイテム数 17 ● ボタンの位置が上中央部の場合 ボタン ターゲット ボタン ターゲット 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 4000 5000 6000 視線の位置 時間（ミリ秒） ボタンの位置 ターゲットの位置 上⽅向に探索 探索時間の⻑い試⾏でよく⾒られるパターン

考察 ボタン付近の平均探索時間の⻑い位置 32 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 探索時間（ミリ秒） ターゲットの位置 アイテム数 13 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 4200 4400 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 アイテム数 17 ● ボタンの位置が上中央部の場合 ボタン ターゲット ボタン ターゲット 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 0 1000 2000 3000 4000 5000 6000 視線の位置 時間（ミリ秒） ボタンの位置 ターゲットの位置 探索時間の⻑い試⾏でよく⾒られるパターン ボタン付近は探索済みと 考えてジャンプ

考察 探索戦略 33 10⼈中 6⼈ 「ボタンの位置から上⽅向に探索し，その後下⽅向に探索した」 10⼈中 2⼈ 「 ボタンの位置からアイテム数が少ない⽅向に探索し，その後逆⽅向に探索した． ボタンの位置が中央の場合には，ボタンの位置から上⽅向に探索し，その後下⽅向に探索した．」 ユーザ全体の傾向として，最初にボタンの位置から上⽅向に 探索することを好んでいると推測される

考察 探索戦略 34 10⼈中 6⼈ 「ボタンの位置から上⽅向に探索し，その後下⽅向に探索した」 10⼈中 2⼈ 「 ボタンの位置からアイテム数が少ない⽅向に探索し，その後逆⽅向に探索した． ボタンの位置が中央の場合には，ボタンの位置から上⽅向に探索し，その後下⽅向に探索した．」 ユーザ全体の傾向として，最初にボタンの位置から上⽅向に 探索することを好んでいると推測される この内2⼈について， アイテム数17個・ボタンの位置中央（位置9）における ターゲットの位置ごとの平均探索時間を⽐較

考察 探索戦略 35 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 A B ボタンの位置 「ボタンの位置から上⽅向に探索し，その後下⽅向に探索した」と回答した実験参加者2⼈のデータ

考察 探索戦略 36 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 A B ボタンの位置 「ボタンの位置から上⽅向に探索し，その後下⽅向に探索した」と回答した実験参加者2⼈のデータ 下側 上側

考察 探索戦略 37 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 A B ボタンの位置 「ボタンの位置から上⽅向に探索し，その後下⽅向に探索した」と回答した実験参加者2⼈のデータ 実験参加者Bにとって スキップしやすい部分

考察 探索戦略 38 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 A B ボタンの位置 「ボタンの位置から上⽅向に探索し，その後下⽅向に探索した」と回答した実験参加者2⼈のデータ 1個ずつ探索するか・スキップしながら探索するか に応じてターゲットの位置ごとの平均探索時間は⼤きく異なる ➡ アンケート結果以上に多くの探索⾏動が存在

考察 探索戦略まとめ 39 ● ボタンの位置が上部の場合 最初の探索は⼀⽅向のみ︕ 下まで探したら， 既に探索した範囲を ⾒返すのみ︕ ● ボタンの位置が中央部の場合 最初の探索⽅向を決定する必要あり 端まで探したら， まだ探索していない範囲に 視線をジャンプする必要あり ● 視線スキップ ユーザによって異なる要素 ユーザによって異なる要素 ● 視線スキップ ● 探索⽅向 ● 視線ジャンプ位置

考察 リニアメニューのデザイン 40 ボタンの位置が上部（プルダウンメニュー）の場合 ➡ ユーザ全員に対して同じメニューの配置 ボタンの位置が中央部の場合 ➡ ユーザ個⼈の探索戦略に応じてメニューの配置をパーソナライズ 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 A ボタンの位置 下側 上側 0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400 3600 3800 4000 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 探索時間（ミリ秒） ターゲットの位置 B

今後の課題 41 ● 本研究の実験は，リニアメニュー内にターゲットが存在する前提 ➡ メニュー内にターゲットが存在しないことを確認するタスク ● 本研究の実験は，初めて利⽤するリニアメニューにおける探索の調査 ➡ 繰り返し同じメニューを利⽤する場合の配置記憶を考慮したタスク ● 本研究の実験は，ランダムな順番でアイテムが並べられていた ➡ アルファベット順やカテゴリ順で並べられたメニューでの探索タスク

まとめ 42 リニアメニューにおける開閉ボタンの位置が探索に与える影響について調査 ● ボタンの位置が最初に注視される傾向にある（40%以上） ● ボタンから近いにも関わらず， 平均探索時間が⻑くなってしまうターゲットの位置も存在 ➡ ボタン付近は探索済みと考えて，スキップしてしまったことが原因と考えられる ● 「ボタンの位置から上⽅向に探索し，その後下⽅向に探索した」 とアンケートで回答した実験参加者が10⼈中6⼈と最も多かった ➡ ⼀⽅で，アンケートの回答が同じ参加者のデータを⽐較しても， スキップしながら探索するか1個ずつ探索するかによって平均探索時間が⼤きく異なる