[論文レビュー] BlackBox Toolkit: Intelligent Assistance to UI Design

Vinoth Pandian Sermuga Pandian, Sarah Suleri|arXiv (Cornell University)|Apr 4, 2020

Innovative Human-Technology Interaction参考文献 4被引用数 8

ひとこと要約

本論文では、UIデザイナーが反復的作業を自動化しながらも創造的意思決定を人間が保持できるように支援する2段階のAIシステム、BlackBox Toolkitを紹介する。MetaMorphは微調整されたRetinaNetを用いて低精細度のスケッチ内のUI要素を検出する（mAP 63.5%を達成）。Bluは再アノテートされたRICOデータセットを用いた深層学習により、UIスクリーンショットを構造的なブループrintに変換し、自動レイアウト再構築とデザインの開発者への引き継ぎを可能にする。

ABSTRACT

User Interface (UI) design is an creative process that involves considerable reiteration and rework. Designers go through multiple iterations of different prototyping fidelities to create a UI design. In this research, we propose to modify the UI design process by assisting it with artificial intelligence (AI). We propose to enable AI to perform repetitive tasks for the designer while allowing the designer to take command of the creative process. This approach makes the machine act as a black box that intelligently assists the designers in creating UI design. We believe this approach would greatly benefit designers in co-creating design solutions with AI.

研究の動機と目的

• AIを知的アシスタントとして統合することで、UIデザインにおける精神的負担と反復的作業を軽減すること。
• 低レベルの反復的作業を自動化しながらも、デザイナーが創造的意思決定を保持できるようにすること。
• AI駆動の変換により、低精細度のスケッチと高精細度のプロトタイプの間のギャップを埋めること。
• 視覚的なUIスクリーンショットから機械可読の設計ブループrintを生成し、開発者への引き継ぎを改善すること。
• AI支援の共同創造を探索し、AIをルネサンス期の見習いに似た「ブラックボックス」アシスタントとしてモデル化すること。

提案手法

• MetaMorphは、低精細度スケッチ内の19種類のUI要素カテゴリを特定・局所化するため、微調整されたRetinaNet深層ニューラルネットワークを用いたオブジェクト検出を実装する。
• MetaMorphのトレーニングデータを強化するために、UISketchデータセットのUI要素をランダムに配置して生成した合成データセットSyn（125,000枚の画像）が作成された。
• Bluは、再アノテートされたRICOデータセットのサブセットを用いて、Android UIスクリーンショットからUI要素カテゴリ、位置、グループ化、レイアウト構造を深層学習で検出する。
• レイアウト検出プロセスでは、ゲシュタルト心理学の原則を統合し、UI要素の整列やグループ化をアルゴリズム的に推論する。
• 両ツールは、スケッチから中間精細度への変換、および高精細度のAndroid XMLコード生成を可能にするプロトタイピングワークベンチ（Eve）に統合されている。
• 本システムは「ブラックボックス」アシスタントとして設計されており、AIが反復的作業（例：要素検出、レイアウト再構築）を処理する一方で、デザイナーはスタイリングや創造的意思決定を保持する。

実験結果

リサーチクエスチョン

• RQ1 AIを用いて反復的作業を自動化する際、デザイナーの創造的意思決定に対する制御を失うことなく、どのように実現できるか？
• RQ2 深層学習モデルは、下流のプロトタイピングを可能にする十分な精度で、低精細度スケッチ内のUI要素を検出できるか？
• RQ3 ゲシュタルト原理と深層学習を組み合わせることで、UIスクリーンショットからレイアウト構造をどの程度自動的に推論できるか？
• RQ4 AI支援ツールは、再作業を減らし、UIデザインと開発者への引き継ぎの効率をどのように向上させられるか？
• RQ5 デザイナーが創造的意思決定の主導的役割を保持する中で、AIはUIデザインの共同創造においてどのような役割を果たせるか？

主な発見

• MetaMorphは、微調整されたRetinaNetモデルを用いて、低精細度スケッチ内の19種類のUI要素カテゴリを検出する際、平均平均精度（mAP）63.5%を達成した。
• 125,000枚の生成されたローファイスケッチを含む合成データセットSynは、MetaMorphモデルの頑健性と一般化性能を顕著に向上させた。
• Bluは、再アノテートされたRICOデータセットのサブセットを用いて、スクリーンショットからUIブループrintとレイアウトツリーを成功裏に再構築し、構造的な設計表現を可能にした。
• RICOのUI要素の階層構造とレイアウト情報の再アノテーションにより、自動アノテーションによる誤標記が是正され、モデルの信頼性が向上した。
• MetaMorphとBluをEveプロトタイピングワークベンチに統合することで、スケッチから高精細度のAndroid XMLコードへのエンドツーエンド変換が可能になり、各段階でデザイナーの制御が維持された。
• BlackBox Toolkitは、AIがUIデザインにおいて「ブラックボックス」アシスタントとして機能でき、反復的作業を自動化しながらも人間の創造性と制御を保持できることを示している。