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

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

多機能なスマートフォン

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

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

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

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

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

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

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

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

• http://news.livedoor.com/article/detail/15636422/

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

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

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

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

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

データセット構築

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

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

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

実際の操作動画

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

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

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

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

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

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

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

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

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

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

機械学習による判定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

センサ情報の分割 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

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

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

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

結果：左右判定(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%

結果：左右判定(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%

結果：上下判定 上 タップ 左スワイプ 右スワイプ 下 タップ 左スワイプ 右スワイプ 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%

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

考察：左右判定 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%

考察：左右判定 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% 右側操作と比較して左側操作の方が精度が高い

考察：左右判定 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% 右側操作と比較して左側操作の方が精度が低い • 操作は右手で行った

考察：左右判定 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 タップ 左スワイプ 右スワイプ 平均 右側操作と比較して左側操作の方が精度が低い • 操作は右手で行った • 操作軸から遠い操作が判定しやすい？

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

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

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

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

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

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

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

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

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

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

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

結果：中央判定 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% 左スワイプ 右スワイプ 左スワイプ 右スワイプ

結果：中央判定 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% 左スワイプ 右スワイプ 左スワイプ 右スワイプ

結果：中央判定 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% 左スワイプ 右スワイプ 左スワイプ 右スワイプ

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

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

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

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

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

中央判定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%

中央判定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%

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

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

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

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

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

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

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