🙆‍♂️

【機械学習×クラウドソーシング】UIデザイン評価AIを作ってみた

2023/10/17に公開

学部3年の春に授業で作ったものを記録用で残しておきます。

概要

与えられたボタンに対して、そのボタンのデザインが「押したくなる」ようなデザインかどうかを判定するAIを作る。人間による評価結果を学習させることで、ヒューリスティックに基づく判定を行えるようにする。判定にはk近傍法によるクラス分類を用い、教師データの作成にクラウドソーシングを用いる。

ボタン = 下の画像のようなCSSで作ったWEBサイトで表示されるようなボタン

リポジトリ

https://github.com/9re-pe/ui_judge_ai

モチベーション

今日ではUIデザインに関する研究が進み、よりよいUIデザインの基準やデザインフォーマットなどが多数発表されている。しかし、UIデザインの評価方法に関する研究はまだあまり多くなく、その評価基準もユーザからのフィードバッグなどに基づくヒューリスティックな方法ではなく、心理学や認知科学などからの知見による、人間の特性に基づくものが多い。今回の実験では、クラウドソーシングと機械学習を組み合わせることで、ユーザのフィードバックに基づくヒューリスティックなUIデザイン評価システムを実現することを目的としている。

システムの全体像

まず、このシステムでは、評価対象となるボタンは、WEBページなどで用いられるディジタルなボタンを想定しており、CSSによって実装可能なものを扱う。システムの概要は、入力としてボタンを受け取り、「押したい」または「そうでもない」のいずれかを出力するというものだ。ボタンを入力として与える際には、CSSのいくつかのプロパティ値を入力値として与える。対象となるプロパティは後述する。また、「押したい」または「そうでもない」の判定は機械学習によるクラス分類で行われる。
 評価判定の機械学習では教師あり学習を行うため、教師データが必要になる。具体的には、あるボタン(CSSのプロパティ値)に対して、そのボタンが「押したい」ボタンなのか、「そうでもない」ボタンなのかのラベル付けを事前に行っておく必要がある。そのラベル付けはクラウドソーシングによって実現する。詳しいクラウドソーシングの内容や、ラベル付けの方法に関しては後述する。以下はシステムの全体像を図解したものである。

クラウドソーシング

クラウドソーシングの内容とラベル付けの方法

システムの全体像の節でも述べたように、CSSのプロパティ値をもつデータに対して、「押したい」または「そうでもない」のラベル付けをするためにクラウドソーシングを利用する。クラウドソーシングのプラットフォームは「Yahoo!クラウドソーシング」を利用した。クラウドソーシングにおいて、ワーカー達は2つのボタンを提示され、押したくなるほうのボタンを選ぶというタスクを行う(複数回)。以下の画像は、実際のタスク実行画面の様子である。その集計結果をもとに、以下のアルゴリズムで各ボタンに「押したい」または「そうでもない」のラベルを付ける。

step1. 各ボタンは持ち点を持つ (初期値0)
step2. 選ばれたら+1, 選ばれなかったら-1 
step3. step2を繰り返す
step4. 最終的に持ち点が
    0より大きい → 押したい (1)
    0以下 → そうでもない (0)

ただし、提示される2つのボタンの組み合わせはランダムであり、異なるボタン同士のすべての組み合わせが判定を行われるわけではない(提示されないボタンの組み合わせが存在する)。各ボタンは同じ回数ずつワーカーに提示されるように設計されている。

タスク設計とラベル付けアルゴリズムの考察

クラウドソーシングのタスク内容とラベル付けアルゴリズムをふまえ、以下の3点について考察した。(1)投票において、個人差があること、(2)提示される2つのボタンの組み合わせによっての差があること、(3)機械学習の精度を高めるためには、データ数(ボタンの種類)が多い必要があることの3点である。まず(1)について、どのようなボタンが押したいかという問いに対する回答には、個人的な好みが反映され、個人差が出る可能性が高い。そのような個人差を解消していくためには、同じボタンの組み合わせの設問を、より多くのワーカーに回答してもらう必要がある。これは、「Yahoo!クラウドソーシング」においては「重複設問回数」を増やすことによって実現可能である。次に(2)について、先ほども述べたように、提示されるボタンの組み合わせは網羅されているわけではないので、組み合わせのよって不公平が生まれることが考えられる。例えば、あるボタンについて、もう一方のボタンが良いデザインのボタンであればそのボタンは低い評価を得て、もう一方のボタンが悪いデザインのボタンであればそのボタンは高い評価を得るということになる。このようなボタンの組み合わせによる差を是正するためには、ある1つのボタンがより多くのボタンと組み合わされて設問(2択問題)を形成する必要がある。これから、あるボタンが何種類のボタンと組み合わされて設問を形成するかを「1ボタンあたりの組み合わせ表出現回数」と呼ぶことにする。これは、設問を形成するボタンの組み合わせを表にしたときに、1つのボタンが何種類のボタンと組み合わされて設問を形成するかは、そのボタンが表にいくつ現れるかに等しいためである。そして(3)について、機械学習の精度を高めるためにはやはりある程度大きなデータ数が必要であるため、データ数(ボタンの種類)は多いことが望ましい。以上のことをまとめると、よりよいタスク設計を行うためには「重複設問回数」、「1ボタンあたりの組み合わせ表出現回数」、「ボタンの種類」を増やす必要があるということである。しかし、これら3つと費用などの関係は以下のようになっている。

c : 費用
t : タスク数
k : 設問数
l : 1タスク当たりの設問数
x : 重複設問回数
y : 1ボタン当たりの組み合わせ表出現回数
z : ボタンの種類

Yahoo!クラウドソーシングの規定により
c = 10t
t = k ÷ l * x
であるので
k = 1/10 * c * l ÷ x ...(1)
また
k = 1/2 * x * y * z ...(2)
でもあるので, (1)(2)より
1/5 * c * l = x^2 * y * z ...(3)

(3)式からもわかるように、費用と1タスク当たりの設問数が定数として設定されたとき、「重複設問回数」、「1ボタンあたりの組み合わせ表出現回数」、「ボタンの種類」の3つはトレードオフの関係にあることがわかる。今回の実験では「重複設問回数」を2、「1ボタンあたりの組み合わせ表出現回数」を3、「ボタンの種類」を300としてクラウドソーシングを行った。

クラウドソーシングの結果分析

先ほども述べたように、今回重複設問回数を2に設定しているので、下の図のように、ある1つの設問に対し2人の異なるワーカーが回答を行っているということになる。

そこで、その2人のワーカーの回答の一致率(Agreement Ratio)を分析した。その結果、ワーカー間の回答一致率は 68.0% であった。このことから、ワーカーによる解答の個人差は全くないわけではないが小さいということが考察できる。

クリーニング手法

クラウドソーシングの内容とラベル付けの方法の節で述べたラベル付けアルゴリズムは、クラウドソーシングの結果を多数決に近いアルゴリズムでクリーニングしているといえる。このクリーニングの効果の検証結果は、機械学習の結果と合わせて後述する。

機械学習

機械学習手法

このアプリケーションでは、「押したい」か「そうでもない」かの判定を機械学習で行っている。具体的な機械学習手法はk近傍法によるクラス分類である。実装方法としては、Pythonのscikit-learnというライブラリを用いている。また、データに関しては、先ほど述べた300個のラベル付きデータをランダムに8 : 2で教師データとテストデータに分けて使用する。

アプリケーションの実行結果

アプリケーションを1回実行した結果を以下は図である。矢印の左側に表示されている数字は各ボタンを識別するための番号であり、その番号のボタンを判定した結果が矢印の右である。また、ラベル付きのデータを教師データとテストデータに分けて使用しているので、テストデータにつけられた実際のラベルと、アプリケーションが判定した結果を比較することで認識率を計算することができる。この実行結果はパラメータの値を0~1で正規化済みのデータを用い、k=3(kはk近傍法におけるパラメータ)で実行したときのものである。


最適なパラメータ(k値)の検証

k近傍法における最適なkの値を検証した。kの1~100で変化させながら、機械学習を100回繰り返して、認識率の平均を計算した。また、繰り返しの際には1回ごとに教師データとテストデータの割り当てをシャッフルしている。パラメータの値を0~1で正規化済みのデータで検証を行ったところ、結果は以下の図が示すように、kは 20≤k≤50 程度の値が最適であることがわかる。

クリーニング・正規化の効果の検証

クリーニング手法の節でも述べたように、このシステムではクラウドソーシングの結果を多数決に近いアルゴリズムでクリーニングしているといえる。このクリーニングの効果を検証する。クラウドソーシングの内容とラベル付けの方法の節で述べたラベル付けアルゴリズムに再び注目されたい。このアルゴリズムでの各ボタンの持ち点というのは、クラウドソーシングの直接の結果に等価で、それを0より大きいか否かで「押したい」か「そうでもない」という2種類のクラスに変換するという多数決に近いクリーニングを行っている。そこで、このクリーニングの結果を検証するために、アプリケーションに「押したい」か「そうでもない」ではなく、持ち点を直接出力させるようにして、認識率を調べた。ただし、各ボタンの持ち点 -6~6 を0~12に変換して出力するようにしている。

また、パラメータの正規化の効果についても検証した。パラメータである各プロパティ値を0~1で正規化せずに機械学習を行い、その結果を正規化ありの機械学習の結果と比較した。クリーニング・正規化の有無による機械学習の認識率の結果は以下の表のようになった。ただし、この検証においても、1回ごとに教師データとテストデータの割り当てをシャッフルしながら機械学習を100回繰り返して、認識率の平均を計算した。kの値は最適なパラメータ(k値)の検証の節での結果に基づきk = 40 とした。

この結果からわかるように、クリーニングなしの場合は平均認識率が非常に低くなっているため、クリーニングは有効であったといえる。しかし、正規化は行っても行わなくてもほとんど結果が変わらなかったため、今回の条件においては、有効性は認められなかった。正規化が有効でなかった要因としては、今回の4つのパラメータのうち、ある一部のパラメータが、押したいかどうかの判定結果に偏って大きな影響を与えているなどということが考えられるであろう。

結論と課題

今回作った機械学習による押したくなるボタンデザインの判定アプリケーションは70%以上の高い認識率で判定を行うことができる点において、有用であるといえるであろう。また、UIデザインを評価するうえで、心理学や認知科学などの人間特性ではなく、ユーザのフィードバックに基づくヒューリスティックな評価方法をとっているという点、デザイン評価をクラウドソーシングや機械学習を利用して行っているという点などにおいてもほかのUIデザイン評価システムとは差別化ができていると考えられる。特に、クラウドソーシングの利用に関しては、ヒューリスティックな評価システムを構築する際には非常に役に立ち、UIデザイン以外の分野や評価システム以外の技術にも応用が可能なのではないかと思われる。
 ただ、今回作ったアプリケーションの最大の課題は、評価結果が得られるだけで、どのようなパラメータが評価結果に大きな影響を与えるのかといったことがわからない、すなわち、どうしてこのボタンは押したくなる(または押したくならない)のか、押したくなるボタンのデザインとはどのようなものなのかということがわからないということである。この課題に関しては機械学習の手法を変えるなどの対応をしなければならないと考えられる。また、クラウドソーシングによって得られる大衆のUIデザイン評価基準や感覚をうまくコンピュータで処理可能にするようなタスク設計も求められるであろう。

参考文献

[1] 【情報検索】Learning to Rank の基礎
https://fisproject.jp/2019/02/introduction-to-learning-to-rank/

[2] Multi-Class Metrics Made Simple, Part III: the Kappa Score (aka Cohen’s Kappa Coefficient)
https://towardsdatascience.com/multi-class-metrics-made-simple-the-kappa-score-aka-cohens-kappa-coefficient-bdea137af09c

[3] 機械学習入門!クラス分類の解説とPythonによるk-nnの実装
https://www.sejuku.net/blog/60536

[4] CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!
https://jajaaan.co.jp/css/button/

GitHubで編集を提案

Discussion