スマートフォンのセンサ情報によるUI評価手法の検討

1K Views

May 17, 19

スライド概要

hcs2019

profile-image

明治大学 総合数理学部 先端メディアサイエンス学科 中村聡史研究室

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

スマートフォンのセンサ情報による UI評価手法の検討 梶田美帆 杉本知佳(明治大学3年) 中村聡史 阿部和樹(明治大学) 山中祥太(ヤフー株式会社)

2.

多機能なスマートフォン

3.

多機能なスマートフォン なんでもできる!

4.

アプリ・サービス提供の戦争 • 膨大なユーザを如何にして獲得するか? • 様々な広告戦略など • 獲得したユーザを如何にして逃さないか? • そのアプリ・サービスの使いやすさが重要 • 操作しづらいUIを放置するとユーザは離れていく

5.

操作しづらい見た目 見た目重視の結果 →装飾が多すぎる&重い

6.

操作しづらいサイト 情報が多すぎる 検索ボタンを見つけにくい

7.

使いづらい操作 遠い場所(左上のボタン)のタップ 左上から右下のタップ

8.

使いづらい操作 タグが大量にある場合の正確な操作

9.

問題のあるUIが登場する理由 • 開発者は熟練しており問題に気づきにくい • 使いづらさを評価するのは容易ではない • デバイスの種類(ディスプレイのサイズなど)が多すぎて すべてのディスプレイ用のUI設計は不可能 (Androidは24000個のサイズが…) • 手の大きさによっても使いやすさが異なる

10.

使いづらくても無理やり操作すると… • スマートフォンを落として割ってしまうことも!! • アメリカでは2018年に5000万枚以上のスマホの画面が 割れている(1時間当たり5761枚割れている!) http://news.livedoor.com/article/detail/15636422/

11.

研究の対象 スマホ上のアプリやサービスの 操作のしづらさ を推定する

12.

操作しやすさに関する研究 スマホの形状やターゲット配置による 「手の使い方」を分析した研究 「Understanging Grip Shifts: How Form Factors Impact Hand Movements on Mobile Phones」 [Rachel 2017]

13.

操作しやすさに関する研究 携帯デバイスの持ち方と親指の使い方に 関する研究 「The Fat Thumb: Using the Thumb’s Contact Size for Single-handed Mobile Interaction」 [Boring 2012]

14.

操作しやすさのための研究 携帯デバイスの持ち方と親指の使い方に関 する研究 Boringら 「The Fat Thumb: Using the Thumb’s Contact Size for Single-handed Mobile Interaction」 操作しづらさに関する 機械的な判定はできない

15.

研究の目的 スマートフォンのUIの操作しづらさを 機械的に推定する手法の実現 アプローチ 使いやすい操作・使いづらい操作を膨大に集め、 そのときの手の動きと機械学習をもとに、操作のし やすさ・しづらさを推定する

16.

データセット構築

17.

自動判定に有用な情報 • 操作位置 • 動作 • タスク間にかかる時間 • 正確さ・操作ミス

18.

データセット収集システム モグラたたきタスク • 画面をまんべんなく操作 してもらえる • 画面上で起こるモグラの動作に 対して即座に反応できる • 淡白な実験ではないため 飽きがこず、実験がたのしい

19.

モグラ叩き • モグラは1匹ずつ登場し、叩かないと消えず、次の モグラも出てこない • モグラは正面向き、右向き、左向き3種類 Swipe Right

20.

実際の操作動画

21.

データセット収集のための設計 • 使いやすい操作・使いづらい操作を集める上での 仮説 • 左右両端は、中央に比べて操作しづらい • ディスプレイが大きくなると操作しづらくなるため、操作 対象範囲が広がると上下操作の難易度が上昇 • 4×6マスのタスクと4×7マスのタスクを用意 • 操作は1マスあたり3方向のため、4×6マスは 72回、4×7マスは84回で1セット • 本実験では10セットを休憩をはさみつつ実施

22.

データセット収集協力者 • 4×6マス 大学生19人(男性10人、女性9人) • 4×7マス 大学生28人(男性11人、女性17人)

23.

協力者への注意点 • 固定された椅子に座る • 右手の親指のみで操作 • 肘をつかないように

24.

操作性に関するアンケート調査 • 4×6、 4×7の各領域について、タップ、右スワイプ、 左スワイプの操作性を調査 • 使いづらい操作は7、使いやすい操作は1、の7段階評価

25.

操作性に関するアンケート分析

26.

仮説(確認) • ディスプレイサイズが大きいほど操作が難しい • 画面の端は操作が難しい

27.

アンケート分析の傾向 ①中心部は操作しやすい

28.

アンケート分析の傾向 ②左側は操作しづらいと感じている人が多い

29.

アンケート分析の傾向 ③上下に操作位置が伸びたとき、長い画面の下のほう が操作しづらいと感じる人が多い 4×6マスのタスク 4×7マスのタスク

30.

アンケートまとめ • 左端・右端と中央に差が生じる • 上下端はディスプレイサイズが大きくなると難度が 上がる

31.

機械学習による判定

32.

仮説 • 操作が難しいとスマートフォンが傾く • タスク間の操作までの時間は長くなる

33.

傾きと使いづらさ • 操作しづらいとスマホが傾く 手から目的の場所が遠いとスマホを動かして 解決しようとする

34.

操作までの時間 • 操作しづらいと動き出しが遅くなる • 手の動きと密接な関係がある 動き出すまで 操作しやすい 操作しづらい

35.

仮説 • 操作が難しいとスマートフォンが傾く • タスク間の操作までの時間は長くなる これらの情報を用いれば 主観評価に近い判定が できるのではないか

36.

特徴量 hard easy 操作の前後0.5秒におけるセンサ情報 (3軸加速度・角速度)の平均値・最大値・最小値

37.

特徴量 X軸加速度 [m/s^2] 操作時点 時間[s]

38.

特徴量 X軸加速度 [m/s^2] 操作時点 最大値 時間[s]

39.

特徴量 X軸加速度 [m/s^2] 操作時点 最大値 最小値 時間[s]

40.

特徴量 X軸加速度 [m/s^2] 操作時点 最大値 平均値 最小値 時間[s]

41.

センサ情報の分割 操作前後0.5秒のセンサ情報をどのような条件で 分析するのがよいか?

42.

センサ情報の分割 操作前後0.5秒のセンサ情報をどのような条件で 分析するのがよいか? 4-split 0.4s-0.1s-0.1s-0.4s

43.

センサ情報の分割 操作前後0.5秒のセンサ情報をどのような条件で 分析するのがよいか? ①操作前0.5s~0.1s モグラの出現から、指を モグラの場所までもっていく 動作 4-split 0.4s-0.1s-0.1s-0.4s ①

44.

センサ情報の分割 操作前後0.5秒のセンサ情報をどのような条件で 分析するのがよいか? ②操作前0.1s ~操作時点 指をモグラに対して 振り下ろす動作 4-split 0.4s-0.1s-0.1s-0.4s ②

45.

センサ情報の分割 操作前後0.5秒のセンサ情報をどのような条件で 分析するのがよいか? ③操作時点 ~操作後0.1s 振り下ろした指を 振り上げる動作 4-split 0.4s-0.1s-0.1s-0.4s ③

46.

センサ情報の分割 操作前後0.5秒のセンサ情報をどのような条件で 分析するのがよいか? ④操作後0.1s~0.5s 4-split 0.4s-0.1s-0.1s-0.4s 次のモグラ出現までの 予備動作 ④

47.

センサ情報の分割 All 1.0s Half 0.5s-0.5s 3-split 0.4s-0.2s-0.4s 4-split 0.4s-0.1s-0.1s-0.4s

48.

左右判定 操作しやすい状態(easy)と操作しづらい状態(hard) の二値分類 hard easy hard easy

49.

上下判定 (4×6、4×7) 操作しやすい状態(easy)と操作しづらい状態(hard) の二値分類 easy hard easy hard

50.

分析設定 • 学習データ • 左右判定:4310件 • 上下判定:1876件 • 学習方法:ランダムフォレスト • 学習データの75%で作成した判定モデルで、残りの 25%のデータを正しく判定できていた割合を求める • 期待値:50% • 取得したデータを4種類の時間分割で分析した

51.

結果:左右判定(4×6マス) All タップ 左スワイプ 右スワイプ 74.2% 74.9% 73.4% All タップ 左スワイプ 右スワイプ 59.5% 60.2% 65.0% Half 3-split 4-split 76.6% 77.5% 78.5% 77.9% 79.9% 77.7% 76.0% 82.1% 80.1% Half 3-split 4-split 68.0% 65.1% 65.8% 66.4% 68.3% 72.9% 68.0% 69.3% 78.0%

52.

結果:左右判定(4×7マス) All タップ 左スワイプ 右スワイプ 73.0% 74.6% 71.1% All タップ 左スワイプ 右スワイプ 59.5% 61.2% 60.6% Half 3-split 4-split 74.4% 76.6% 78.2% 76.6% 77.2% 75.9% 77.0% 79.9% 78.6% Half 3-split 4-split 66.7% 64.8% 66.0% 65.3% 66.4% 68.4% 67.7% 68.5% 73.1%

53.

結果:上下判定 上 タップ 左スワイプ 右スワイプ 下 タップ 左スワイプ 右スワイプ All Half 3-split 4-split 77.3% 78.6% 78.6% 79.7% 79.8% 81.3% 80.9% 82.4% 76.5% 75.4% 79.1% 79.5% All Half 3-split 4-split 80.6% 81.4% 82.1% 83.8% 78.1% 78.6% 80.9% 82.0% 77.3% 79.1% 80.2% 80.6%

54.

考察:左右判定、上下判定 4-split(0.4s-0.1s-0.1s-0.4s)の精度が良い • 左右判定 • 最高:82.1% • 最高精度の平均:75.0% • 上下判定 • 最高:82.4% • 最高精度の平均:81.3%

55.

考察:左右判定 4×6 タップ 左スワイプ 右スワイプ 平均 左 右 76.0% 82.1% 80.1% 79.4% 68.0% 69.3% 78.0% 71.8% 4×7 タップ 左スワイプ 右スワイプ 平均 左 右 77.0% 79.9% 78.6% 78.5% 67.7% 68.5% 73.1% 69.8%

56.

考察:左右判定 4×6 タップ 左スワイプ 右スワイプ 平均 左 右 76.0% 82.1% 80.1% 79.4% 68.0% 69.3% 78.0% 71.8% 4×7 タップ 左スワイプ 右スワイプ 平均 左 右 77.0% 79.9% 78.6% 78.5% 67.7% 68.5% 73.1% 69.8% 右側操作と比較して左側操作の方が精度が高い

57.

考察:左右判定 4×6 タップ 左スワイプ 右スワイプ 平均 左 右 76.0% 82.1% 80.1% 79.4% 68.0% 69.3% 78.0% 71.8% 4×7 タップ 左スワイプ 右スワイプ 平均 左 右 77.0% 79.9% 78.6% 78.5% 67.7% 68.5% 73.1% 69.8% 右側操作と比較して左側操作の方が精度が低い • 操作は右手で行った

58.

考察:左右判定 4×6 タップ 左スワイプ 右スワイプ 平均 左 右 76.0% 82.1% 80.1% 79.4% 68.0% 69.3% 78.0% 71.8% 左 右 77.0% 79.9% 78.6% 78.5% 67.7% 68.5% 73.1% 69.8% 4×7 タップ 左スワイプ 右スワイプ 平均 右側操作と比較して左側操作の方が精度が低い • 操作は右手で行った • 操作軸から遠い操作が判定しやすい?

59.

考察:上下判定 タップ 左スワイプ 右スワイプ 平均 上 下 79.7% 82.4% 79.5% 80.5% 83.8% 82.0% 80.6% 82.1%

60.

考察:上下判定 タップ 左スワイプ 右スワイプ 平均 上 下 79.7% 82.4% 79.5% 80.5% 83.8% 82.0% 80.6% 82.1% 下段操作の方が上段操作より精度が高い

61.

考察:上下判定 タップ 左スワイプ 右スワイプ 平均 上 下 79.7% 82.4% 79.5% 80.5% 83.8% 82.0% 80.6% 82.1% 下段操作の方が上段操作より精度が高い • 手元に近い位置での操作が判定しやすい?

62.

考察:左右判定・上下判定 • 分析の条件 • 4-split(0.4s-0.1s-0.1s-0.4s)の精度が良い • この手法が今回の実験の分析に対して有用か?

63.

考察:左右判定・上下判定 • 分析の条件 • 4-split(0.4s-0.1s-0.1s-0.4s)の精度が良い • この手法が今回の実験の分析に対して有用か? • 右側操作の方が左側操作より精度が高い • 操作軸から遠い操作が判定しやすい? • 下段操作の方が上段操作より精度が高い • 手元に近い操作が判定しやすい?

64.

考察:左右判定・上下判定 • 分析の条件 • 4-split(0.4s-0.1s-0.1s-0.4s)の精度が良い • この手法が今回の実験の分析に対して有用か? • 右側操作の方が左側操作より精度が高い • 操作軸から遠い操作が判定しやすい? • 下段操作の方が上段操作より精度が高い • 手元に近い操作が判定しやすい?

65.

考察:左右判定・上下判定 • 分析の条件 • 4-split(0.4s-0.1s-0.1s-0.4s)の精度が良い • この手法が今回の実験の分析に対して有用か? • 右側操作の方が左側操作より精度が高い • 操作軸から遠い操作が判定しやすい? • 下段操作の方が上段操作より精度が高い • 手元に近い操作が判定しやすい? これらの結果は操作しづらさが出たものなのか?

66.

これまでの判定 操作しやすい状態(easy)と操作しづらい状態(hard) の二値分類 easy hard easy hard

67.

中央判定:設定(4×6マス) 操作しやすい状態(easy)と操作しづらい状態(hard)、 操作しやすい状態(easy1,easy2)の二値分類 easy easy easy1 hard easy2 hard

68.

中央判定:設定(4×6マス) 操作しやすい状態(easy)と操作しづらい状態(hard)、 操作しやすい状態(hard, easy)の二値分類 easy easy hard hard easy hard

69.

中央判定:設定(4×6マス) 操作しやすい状態(easy)と操作しづらい状態(hard)、 操作しやすい状態(easy1,easy2)の二値分類 easyを仮にhardとしたものと、 easy easy easyの判定精度が低ければ・・・ easy2 =操作しづらい場所と操作しやすい場所が easy1 hard 正しく判定できている! hard

70.

結果:中央判定 4×6 左 中央 右 タップ 76.1% 82.1% 80.1% 73.1% 70.7% 72.9% 68.0% 79.3% 78.0% 4×7 左 中央 右 タップ 77.0% 79.9% 78.6% 74.1% 73.6% 76.1% 67.7% 73.1% 68.5% 左スワイプ 右スワイプ 左スワイプ 右スワイプ

71.

結果:中央判定 4×6 左 中央 右 タップ 76.1% 82.1% 80.1% 73.1% 70.7% 72.9% 68.0% 79.3% 78.0% 4×7 左 中央 右 タップ 77.0% 79.9% 78.6% 74.1% 73.6% 76.1% 67.7% 73.1% 68.5% 左スワイプ 右スワイプ 左スワイプ 右スワイプ

72.

結果:中央判定 4×6 左 中央 右 タップ 76.1% 82.1% 80.1% 73.1% 70.7% 72.9% 68.0% 79.3% 78.0% 4×7 左 中央 右 タップ 77.0% 79.9% 78.6% 74.1% 73.6% 76.1% 67.7% 73.1% 68.5% 左スワイプ 右スワイプ 左スワイプ 右スワイプ

73.

中央判定:考察 予想 操作しやすいところで精度が高く、操作しづらいとこ ろで精度が低い =「操作しづらさ」の判定ができている! 実際 操作しやすい・操作しづらいところの精度に差がない =「操作位置」の判定が行われた可能性

74.

中央判定:考察 • easy同士の判定:明らかに操作位置が異なる

75.

中央判定:考察 • easy同士の判定:明らかに操作位置が異なる • 「操作位置の違い」を条件から排除するには?

76.

中央判定2:設定 左列・右列をhard、 中央2列をeasy として学習させる easy easy easy1 easy2 hard hard

77.

中央判定2:設定 左列・右列をhard、 中央2列をeasy easy、hardの判定精度がある程度高く、 として学習させる easy同士の判定精度が低ければ・・・ =操作しづらい場所と操作しやすい場所が easy easy 正しく判定できている! easy1 easy2 hard hard

78.

中央判定2:結果 タップ 左スワイプ 右スワイプ タップ 左スワイプ 右スワイプ 全体 左中央 右中央 中央 70.1% 71.9% 76.2% 75.4% 79.9% 79.7% 65.7% 64.0% 72.8% 50.9% 46.7% 46.7% 全体 左中央 右中央 中央 68.8% 73.8% 76.5% 74.9% 78.8% 77.2% 62.8% 68.7% 75.8% 47.5% 49.1% 51.7%

79.

中央判定2:結果 タップ 左スワイプ 右スワイプ タップ 左スワイプ 右スワイプ 全体 左中央 右中央 中央 70.1% 71.9% 76.2% 75.4% 79.9% 79.7% 65.7% 64.0% 72.8% 50.9% 46.7% 46.7% 全体 左中央 右中央 中央 68.8% 73.8% 76.5% 74.9% 78.8% 77.2% 62.8% 68.7% 75.8% 47.5% 49.1% 51.7%

80.

中央判定2:考察 • easy, hardの判定精度 • 最大:79.7% • easy, easyの判定精度 • 最大:51.7%

81.

中央判定2:考察 • easy, hardの判定精度 • 最大:79.7% • easy, easyの判定精度 • 最大:51.7% easy、hardの判定精度がある程度高く、 easy同士の判定精度が低い

82.

中央判定2:考察 • easy, hardの判定精度 • 最大:79.7% • easy, easyの判定精度 • 最大:51.7% easy、hardの判定精度がある程度高く、 easy同士の判定精度が低い 操作しづらさの分析ができている!

83.

考察 • 左右判定 • easy, hardの判定が最大で82.1% • 上下判定 • easy, hardの判定が最大で82.4% • 中央判定2 • easy, hardは判定しやすく、 easy同士は判定しにくい 高い精度で操作しづらさの判定ができている

84.

今後の展望 • 操作位置以外の基準で使いづらさを定義し、 判定 可能かについて検討 • 操作ミスの箇所から定義 • 個人差に対するアプローチの検討

85.

今後の展望 • 操作位置以外の基準で使いづらさを定義し、 判定 可能かについて検討 • 操作ミスの箇所から定義 • 個人差に対するアプローチの検討 ユーザの操作から、ユーザインタフェース自体の 使いやすさを判定する手法の実現

86.

まとめ • 背景:UIの使いやすさを定量化するニーズがある • 目的:センサ情報からUIの使いづらさを判定 • 実験:モグラ叩きタスクにより、スマートフォンのセンサ情報 を取得し分析 • 結果:今回検討した手法により最高80%以上の精度で 操作のしづらさを判定できた • 考察:今回の手法をより精査することでUIの使いづらさを 判定できるのでは