AI生成UIデザインの測定と改善

私の彼女はコードを一行も書いたことがないが、ある朝目覚めて、予約が難しいResyの予約を確保するボットを構築した。ボットはうまく動いたが、彼女の最初の不満はUIが見苦しいことだった。まさにAIが生成した感じだった。

彼女だけではない。ある人は「AIスロップ」と呼び、別の人はモデルに「センスがない」と言う。ソフトウェア作成は民主化されたが、これまでのところ、良いUIデザインは民主化されていないようだ。

私は同じ問いに行き着く：エージェントにもっと良いUIデザインの仕事をさせて、自分でやらなくて済むようにできないか？

これは難しい問題であり、解決したとは言えないが、いくつかの進展があった。以下はその過程で学んだことである。

AIデザインの品質測定

ほとんどの人はデザインを主観的なものと捉えるが、私はそれ以上に測定可能だと思う。良いデザインはユーザーとビジネスが目標を達成するのに役立つ。機能の目的を理解すれば、デザインを判断することは可能である。

Uberで取り組んだ例を挙げる。当時Uberは、ライダーにUber Eats、グロサリー、予約乗車などの他のサービスをクロスセルしようとしていた。そこで、それらのサービスを強調するためにホームページのデザインを変更した：

これは「良い」デザイン変更か？それは、より多くのユーザーがUber Eatsを試すかどうか、地図上の車の情報が不確実になることで乗車リクエストが減るかどうかに依存する。ユーザーとビジネスの目標の制約を考慮すれば、デザインが「より良い」かどうかを推測することは可能である。

これが最初の大きな課題だった。ユーザーとビジネスのコンテキストを理解した上で、さまざまなAI生成デザイン変更を大量に作成し、デザイン出力を正しく判断するにはどうすればよいか？

そのために、私はオープンソースアプリを取り上げ、追加したい新機能を作成した。

手動で数百の新機能を生成しレビューした。発見したデザイン問題に注釈を付け、LLMに問題を要約させた。大多数の問題は以下のカテゴリに分類された：

• 優先順位付け：優れたデザイナーはUXにおいて徹底的に優先順位を付ける。核となる情報のみ表示され、製品を通る核となるパスが非常に明瞭で、それ以外はユーザーの邪魔にならない。モデルはすべてのユーザーアクションが等しく重要だと考えているようで、結果としてユーザーは乱雑さに直面する。

• タイポグラフィ、スペーシング、色：モデルは色を多用し、一貫したスペーシングなしにUIを乱雑にする。これらはすべて#1に関連する。優れたデザイナーは色、フォント、スペーシングを使って特定のユーザーアクションに注意を引く。モデルはどのアクションが重要かを優先順位付けしていない。

• UIの「バグ」：人間のデザイナーが決して間違えないような単純なこと（コンポーネントの配置がずれる、テキストの折り返しで奇妙な見た目になるなど）。

• デザインシステムの遵守：異なるコンポーネント、ボタンの角丸、フォントなどを導入すると、統一感のない体験になる。

改善されたデザインを生成するためのテスト

コーディングエージェントのデザイン出力を改善するために、20以上の異なるエージェント設定を試した。その後、同じオープンソース機能作成テストでそれらのエージェント設定を実行し、デザインが改善されたか手動で評価した。これにより500以上の画面のレビューが必要となり、同じデザイン変更に対する異なるエージェントの出力を迅速に比較・スコアリングする評価ツールを作成した。

最も効果的だったのは：

• 自己改善ループ：モデルが自身のUIを「見る」ことでデザインを改善できる。モデルに生成したUIを表示し、問題を修正するよう依頼することで、有意義な向上が見られた。驚くことではないが、最大のレバーだった。

• 一般的な問題に基づくルーブリック：自己改善ループにおいて、AIデザインで頻発する問題に基づくルーブリックが出力を改善した。最初に機能を生成した際に特定した共通の欠点を共有することが、レビュールーブリックで最も役立った。

• 優れたデザインの例の注入：以前、StripeやAirbnbなどの優れたデザインのアプリから50万以上の画面のコーパスを構築した。ルーブリックにそれらの例をモデルに示すことで、出力がさらに改善された。

驚くことに効果がなかったもの：

• 「一般的なデザインのベストプラクティス」に基づくルーブリック：これはあまり役に立たなかった。おそらくモデルはすでにそれらをトレーニングデータに含んでいる。本当の利益は、AIデザインで気づいた一般的な欠点を特定し、ルーブリックで強調したときに得られた。

• 古典的なAIデザイン「スロップ」の否定的な例（紫色のグラデーション、特大の角丸カード、絵文字の箇条書き機能リストなど）：AIデザインの一般的なパターンを示してもあまり役に立たなかった。「良いデザイン」の画像を示す方が、「AIデザイン」の悪い典型的なシグナルを示すよりも生産的だった。

注意点

注意すべき点：このすべての作業の潜在的な欠点は、「改善された出力」が私の人間による評価に基づいていることだ。私が確実に言えるのは、上記のレバーが私の目にはデザインを良くしたということだけである。

最近、このエージェントをパッケージ化し、いくつかの企業と共有した。企業によって異なるが、チームはUI PRの約70%でエージェントの提案を承認した。これにより、私の評価が有効であるという確信が得られた。しかし、それでも欠陥のあるシグナルかもしれない。エンジニアは重要な提案よりも「簡単な」提案をより簡単に受け入れるかもしれない。その測定部分はまだ模索中である。

次のステップ：レイテンシとコスト

測定された改善は、より多くの時間とトークンを費やすことで得られた。エージェントはデザイン変更を行い、デザイン変更を確認し、判断し、改善する。これは素晴らしいが、変更を行うのに時間がかかり、より多くのトークンを消費する。

次の課題は、このプロセスを高速化し、よりトークン効率的にすることである。エージェントは当初、設計された機能あたり平均約30分、約50ドルかかっていた。両方を約50%削減した。まだ取り組んでおり、実験の方法と結果については別の記事で報告する予定である。