この記事は Yang Li による Google AI Blog の記事 "Using Deep Learning to Improve Usability on Mobile Devices" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
投稿者: Google AI リサーチ サイエンティスト、Yang Li
モバイルのインターフェースで最もよく使われるジェスチャーはタップです。アプリの起動からテキストの入力まで、あらゆる種類の操作を呼び出すために使われます。従来の PC の
グラフィック ユーザー インターフェースでは、クリック可能な要素（例: ボタン）のスタイルはある程度決まっていました。しかし、モバイルのインターフェースには実に多様なスタイルがあるので、タップできる要素とタップできない要素を見分けるのは難しくなっています。その難しさは、
間違ったアフォーダンス（例: ボタンと間違われるような表現）や機能の見つけにくさにつながり、さらにはユーザーの不満や不安、間違いにつながる可能性があります。インターフェースのデザイナーは、これを避けるために調査したり、視覚的な意味合いを調べるためのテストを行ったりして、インターフェース上の項目がタップできるかどうかをわかりやすくしようとしています。しかし、そのような調査には時間がかかり、そこで判明した事実も特定のアプリやインターフェースのデザインに限定されます。
私たちの
CHI'19 の論文「
Modeling Mobile Interface Tappability Using Crowdsourcing and Deep Learning」（クラウドソーシングとディープ ラーニングを使ってモバイル インターフェースのタップ可能性をモデリングする）では、モバイル インターフェースのユーザビリティを大規模にモデリングするアプローチについて紹介しています。まず、さまざまなモバイルアプリの UI 要素を調査し、ユーザーがタップできると感じるかどうかを測定する作業をクラウドソーシングしました。モデルによる予測は、最大 90% のレベルでユーザーグループの予測と一致しました。この結果は、費用も時間もかかるユーザーによるテストを行わなくても、機械学習モデルを使ってデザイン内のインターフェース要素の感覚的なタップ可能性を効率的に推定できることを示しています。
ディープ ラーニングでタップ可能性を予測する
多くの場合、デザイナーはインターフェースが操作できることを表すために、要素の色や立体感などの視覚特性を使います。
青字で下線の付いたリンクはその一例です。こういったよく使われる表現は便利ですが、特定のデザインの中で利用した場合、常にわかりやすいものになるとは限りません。さらに、デザインのトレンドの進化とともに、従来からの表現方法も常に変化し刷新されるので、不確実さや間違いの原因になる可能性もあります。
ユーザーがこの変化する環境をどのように知覚するかを理解するため、実際のモバイルアプリのタップ可能性に影響しうる表現方法について分析しました。具体的には、要素の
種類（例: チェックボックス、テキスト ボックスなど）、
場所、
大きさ、
色、
文字です。最初に行ったのは、最大 3,500 個のアプリから抽出した最大 2 万個の重複しないインターフェース要素について、タップできると感じるかどうかをクラウドソーシングのボランティアにラベル付けしてもらうことでした。テキスト ボックスを除けば、ユーザーは
種類による表現をほぼ確実にタップできるものと考えました。
場所による表現とは、要素の画面上の場所のことです。この情報は、モバイルアプリの一般的なレイアウト デザインから得ることができます。下の図をご覧ください。
 |
| 場所ごとにタップできる要素とタップできない要素の精度を表したヒートマップ。赤くなるほど精度が高い。要素をタップできないとラベル付けしたユーザーの精度は、インターフェースの上中央に近づくほど上がる。要素をタップできるとラベル付けしたユーザーの精度は、インターフェースの下中央に近づくほど上がる。 |
要素の
大きさによる影響はかなり少ないものの、タップできない大きな要素があると混乱を生む可能性があることがわかりました。ユーザーは、
色が明るく
文字数が少ないほどタップできる要素ととらえる傾向を示しましたが、
文字の意味合いもタップできるかどうかの判断に大きな影響を与えていました。
これらのラベルを利用して、簡単な
ディープ ニューラル ネットワークをトレーニングしました。このネットワークは、ユーザーがインターフェース要素をタップできると感じるかタップできないと感じるかの可能性を予測するものです。このモデルは、インターフェースのある要素に対して、画面上の要素の空間的状況（
場所）、要素の意味や機能（
文字や
種類）、見た目（
大きさやピクセルの生データ）などのさまざまな特徴を使います。ニューラル ネットワーク モデルは、ピクセルの生データから特徴を抽出するために
畳み込みニューラル ネットワーク（CNN）を利用し、テキストの内容や要素の特性を表現するために要素の意味について学習させた埋め込み（embedding）を使います。その後、これらの特徴を組み合わせたものを全結合ネットワーク層に入力し、その出力として、要素がタップできるかを表す二値分類を生成します。
モデルの評価
このモデルを使うと、各インターフェース要素がタップできるかどうかについて、デベロッパーやデザイナーが指定した実際の（または意図した）要素の状態が、ユーザーの感覚（モデルの予測結果）とずれている部分を自動的に診断できます。次の例では、モデルは 73% の確率でユーザーが "Followers" や "Following" などのラベルをタップできると考えると予測しています。しかし実際は、これらのインターフェース要素はタップできるようにプログラムされていません。
人間のユーザーと比べた際のモデルの動作について、とりわけ人間の判断があいまいになる場合について理解するため、2,000 個の重複しないインターフェース要素がタップできると感じるかどうかをクラウドソーシングで 290 人のボランティアにラベル付けしてもらい、もう 1 つの独立したデータセットを作成しました。ここでは、1 つの要素を、5 人のユーザーがそれぞれラベル付けしました。その結果、サンプルの 40% 以上の要素に異なるラベルが付いたことがわかりました。次の図に示すように、この不確定性の部分でも、モデルと人間の感覚はかなり一致しています。
 |
| 同じデータセットの各要素について、モデルが予測したタップできる可能性（Y 軸）と、人間のユーザーによるラベルの一致度合い（X 軸）でプロットした散布図。 |
要素がタップできるかどうかについてユーザーの意見が一致している場合、モデルも明確な答えを出す傾向にあります。つまり、ユーザーがタップできると判断したものは 1 に近い確率を、タップできないと判断したものは 0 に近い確率を出すことが多くなっています。人間の意見が一致していない要素（X 軸の真ん中に近いもの）は、モデルの判断も不確かになります。全体では、タップできる UI 要素を特定することにおいて、モデルは人間の感覚にかなり近い精度を実現できました。具体的には、平均の
精度は 90.2% で、
再現率は 87.0% でした。
タップ可能性の予測は、ユーザー インターフェースのユーザビリティの問題を解決するために機械学習を使ってできることの一例に過ぎません。インタラクションのデザインやユーザー エクスペリエンスの研究には、多くの難題があります。ディープ ラーニングのモデルは、ユーザー エクスペリエンスに関する大規模で多様なデータセットを精製し、インタラクションの動作について科学的な理解を進める手段を提供してくれます。
謝辞
この研究は、Google の夏季インターンである Amanda Swangson 氏と、ディープ ラーニングおよびヒューマン コンピュータ インタラクションのリサーチ サイエンティストである Yang Li 氏が共同で行いました。
Reviewed by
Hak Matsuda - Developer Relations Team