[論文レビュー] InfoColorizer: Interactive Recommendation of Color Palettes for Infographics

Lin-Ping Yuan, Ziqi Zhou+4 more|arXiv (Cornell University)|Feb 3, 2021

Color perception and design参考文献 66被引用数 9

ひとこと要約

InfoColorizer は、ユーザーの好みと要素の空間的配置を組み込むために深層学習を用いる、データ駆動型でインタラクティブなツールであり、インフォグラフィックスのカラーパレットを推薦する。VAEAC（任意の条件付き変分オートエンコーダ）を活用して、多様で文脈に配慮したパレットを生成し、手動または事前定義されたアプローチと比較して、デザイン作業の負担を著しく軽減するとともに、美観性と可読性を向上させる。

ABSTRACT

When designing infographics, general users usually struggle with getting desired color palettes using existing infographic authoring tools, which sometimes sacrifice customizability, require design expertise, or neglect the influence of elements' spatial arrangement. We propose a data-driven method that provides flexibility by considering users' preferences, lowers the expertise barrier via automation, and tailors suggested palettes to the spatial layout of elements. We build a recommendation engine by utilizing deep learning techniques to characterize good color design practices from data, and further develop InfoColorizer, a tool that allows users to obtain color palettes for their infographics in an interactive and dynamic manner. To validate our method, we conducted a comprehensive four-part evaluation, including case studies, a controlled user study, a survey study, and an interview study. The results indicate that InfoColorizer can provide compelling palette recommendations with adequate flexibility, allowing users to effectively obtain high-quality color design for input infographics with low effort.

研究の動機と目的

• 専門知識のないユーザーが、既存の作成ツールに制限がある中でインフォグラフィックスのカラーパレット設計に直面する課題に対処すること。
• ユーザーの色の好みを指定できる柔軟性を保ちつつ、パレット生成を自動化することで、デザインの障壁を低減すること。
• 学習プロセスにインフォグラフィックス要素の空間的配置情報を統合することで、パレット推薦の質を向上させること。
• 制御されたユーザーテストと専門家インタビューを含む複数の研究を通じて、システムの有効性を評価すること。
• ユーザーの入力をもとに段階的なデザインの最適化を支援する、インタラクティブで動的なパレット生成を可能にすること。

提案手法

• システムは、インフォグラフィックスの概念的モデルを用いて、要素の位置関係や関係性を含む構造的・空間的特徴を抽出する。
• デザイナーが作成したインフォグラフィックスの大規模データセットを用いて、VAEAC（任意の条件付き変分オートエンコーダ）に基づく深層生成モデルを学習させ、カラーデザインの実践を習得する。
• ユーザーの好み（正確な色制約や曖昧な色制約など）を、VAEACモデルの条件付き入力として用い、パーソナライズされたパレットを生成する。
• 潜在表現に空間的配置特徴を組み込むことで、推奨されるパレットが視覚的階層やコントラスト要件を尊重することを保証する。
• インタラクティブ編集をサポートし、ユーザーがレイアウトを変更してもリアルタイムでパレット推薦を受け取れる。
• ケーススタディ、制御されたユーザースタディ、アンケート、専門家インタビューを組み合わせて評価することで、使いやすさと有効性を検証する。

Figure 1: InfoColorizer consists of a recommendation engine and a visual interface. The recommendation engine is constructed by first extracting structure and color information from inforgraphics and then training a deep learning model, VAEAC, to characterize good color design practices. The visual

実験結果

リサーチクエスチョン

• RQ1 インタラクティブでデータ駆動型のシステムは、非専門家のインフォグラフィックス作成者にとって、美観的で機能的に読みやすいパレットを効果的に推薦できるか？
• RQ2 空間的配置情報を統合することで、パレット推薦の質と関連性はどの程度向上するか？
• RQ3 手動によるパレット作成や事前定義されたパレットと比較して、InfoColorizerはユーザーの作業効率、創造的支援、およびパレットの質の認識において優れているか？
• RQ4 デザイン経験がほとんどないユーザーが、認知的・技術的負担を低く抑えながら、高品質なインフォグラフィックスをInfoColorizerで生成できるか？
• RQ5 プロのデザイナーは、実際のデザインワークフローを支援するという点で、このシステムの能力をどのように評価するか？

主な発見

• 24名の初心者を対象とした制御されたユーザースタディでは、InfoColorizerを使用した参加者は、オンラインリソースを用いた手動パレット作成と比較して、タスク完了時間が短く、創造的支援の満足度も高かった。
• 102名のユーザーを対象としたアンケートスタディでは、InfoColorizerが推薦するパレットは、ランダムに生成されたものやベースラインで作成されたパレットと比較して、美観性と可読性の両面で有意に高いスコアを獲得したが、アーティストが手作業で設計したパレットよりはわずかに低かった。
• 専門家インタビューでは、デザイナーがInfoColorizerの機能を新規的かつ効果的と評価し、数回の操作で説得力のあるインフォグラフィックスを生成できるようになったと述べた。
• ケーススタディでは、InfoColorizerが、ワイヤーフレームの塗りつぶしや、異なるカラースキームを組み合わせたインフォグラフィックスの作成など、多様なタスクを文脈に配慮した推薦で効果的に支援したことが示された。
• VAEACの使用により、多様で関連性のあるパレット生成が可能になり、ユーザーの好みの多様性を反映しながらも、デザインの一貫性を維持できた。
• 評価結果から、モデルに空間的配置特徴を統合することで、特にコントラストや視覚的階層の確保において、パレットの関連性が向上することが確認された。

Figure 2: (a) Artistic elements, graphical data elements, visual groups, and visual information flow (VIF) & backbone in an infographic. (b) The conceptual tree model. Some branches are omitted for simplicity.