[論文レビュー] Creating User Interface Mock-ups from High-Level Text Descriptions with Deep-Learning Models

Forrest Huang, Gang Li+3 more|arXiv (Cornell University)|Oct 14, 2021

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

ひとこと要約

本稿では、高レベルの自然言語記述から低精細度のUIモックアップを自動で作成するための、3つの新しい深層学習手法——2つのリtrievalベースの手法と1つの生成モデル——を紹介する。提案手法には、テキストからUIを生成する生成モデルと、2つのクロスモダリティリtrieverが含まれ、一貫性があり多様で関連性の高いUIデザインの生成において優れた性能を示しており、ユーザースタディーにより、専門家デザイナーおよび非専門家にとっての実用性が確認されている。

ABSTRACT

The design process of user interfaces (UIs) often begins with articulating high-level design goals. Translating these high-level design goals into concrete design mock-ups, however, requires extensive effort and UI design expertise. To facilitate this process for app designers and developers, we introduce three deep-learning techniques to create low-fidelity UI mock-ups from a natural language phrase that describes the high-level design goal (e.g. "pop up displaying an image and other options"). In particular, we contribute two retrieval-based methods and one generative method, as well as pre-processing and post-processing techniques to ensure the quality of the created UI mock-ups. We quantitatively and qualitatively compare and contrast each method's ability in suggesting coherent, diverse and relevant UI design mock-ups. We further evaluate these methods with 15 professional UI designers and practitioners to understand each method's advantages and disadvantages. The designers responded positively to the potential of these methods for assisting the design process.

研究の動機と目的

• 高レベルのデザイン目標を具体的なUIモックアップに変換する課題に取り組むこと。これは、熟練したデザインスキルを要する時間のかかる作業である。
• 非専門家のアプリ開発者やデザイナーが、自然言語記述のみで使用可能なUIプロトタイプを生成できるようにすること。
• 多様で一貫性があり関連性の高いUI提案を可能にする手法を開発し、手作業によるデザイン作業の負担を軽減し、デザインのコミュニケーションを向上させること。
• 定量的指標とユーザースタディーを通じて、実世界のデザインワークフローにおけるリtrievalベースと生成ベースのアプローチの有効性を評価すること。

提案手法

• UI Generatorを提案する。これは、シーケンス・ツー・シーケンスアーキテクチャを用い、品質フィルタリングのための事後処理を施すことで、テキスト記述からUIモックアップを合成する深層生成モデルである。
• マルチモーダルリtrieverを導入する。これは、テキストとUIの共同埋め込みを学習することで、意味的類似性に基づいて大規模なコーパスから関連するデザインを検索するクロスモダリティリtrieバルモデルである。
• テキストオンリーリtrieバを開発する。これは、テキスト埋め込みのみを用いてテキスト記述とUIを照合するリtrieバル手法であり、高速かつ解釈可能な検索を可能にする。
• レイアウト検証や視覚的品質フィルタリングなどの事後処理技術を適用し、生成されたモックアップの一貫性と使いやすさを向上させる。
• すべてのモデルの事前学習と評価に、大規模なペアドテキスト-UIデータセット（screen2words）を活用し、記述と視覚的出力の整合性を保証する。
• テキストとUIの符号化に、トランスフォーマーに基づくアーキテクチャを活用することで、複雑なデザイン意味論と構造的関係を効果的にモデル化できる。

実験結果

リサーチクエスチョン

• RQ1 深層学習モデルは、高レベルの自然言語記述から、一貫性があり多様な低精細度のUIモックアップをどれほど効果的に生成できるか？
• RQ2 リtrievalベースと生成ベースのアプローチには、関連するUIデザインを提示する際に、それぞれどのような相対的長所と短所があるか？
• RQ3 提案手法は、既存の手法と比較して、多様性、関連性、一貫性の観点でどの程度の性能を示すか？
• RQ4 これらのモデルは、アイデーショネーションから精練までのUIデザインプロセスのさまざまな段階をどの程度支援できるか？
• RQ5 プロフェッショナルなUIデザイナーは、実際のデザインワークフローにおいてAI生成UI提案の有用性と使いやすさをどのように評価するか？

主な発見

• UI Generatorは、温度調整可能なサンプリングベースの生成プロセスにより、テキスト記述から新規で一貫性のあるUIモックアップを効果的に生成できる。
• マルチモーダルリtrieバは、視覚的・テキスト的埋め込みを統合することで、テキストオンリーリtrieバを上回る性能で意味的に関連するデザインを検索できる。
• 15名のプロフェッショナルデザイナーを対象としたユーザースタディーでは、3つの手法すべてに対して強い肯定的なフィードバックが得られ、特にアイデーショネーションや迅速プロトタイピングにおいて有効であると評価された。
• テキストオンリーリtrieバは、その高速性と解釈可能性から、初期段階のデザインインスピレーションに好まれたが、UI Generatorは革新性とバリエーションの多様性で優れた性能を示した。
• 生成モデルは、抽象的または高レベルのデザイン目標に対して、リtrieバルベースのモデルよりも高い多様性を示した。
• すべての手法がベースライン手法に比べて、デザイン提案の質において顕著な向上を示した。特にUI Generatorは、新規性と一貫性の観点で最先端の性能を達成した。