📄

グラフィックデザインにおける各要素の重要性を可視化 – Learning Visual Importance for Graphic Designs and Data Visualizations

Entry

グラフィックデザインにおける各要素の重要性を可視化 – Learning Visual Importance for Graphic Designs and Data Visualizations

Simple Title

グラフィックデザインにおける各要素の重要性を可視化 – Learning Visual Importance for Graphic Designs and Data Visualizations

Description

グラフィックデザインにおける各要素の重要性を可視化

Type
Paper
Year

2017

Posted at
August 8, 2017
Tags
image
image

Overview

グラフィックデザインやデータビジュアライゼーションを見るときに、人はどこに注目するのか. クラウドソーシングで集めたデータなどから、画面上の各要素の注目度を予測するモデルをつくったというものです。

Abstract

Knowing where people look and click on visual designs can provide clues about how the designs are perceived, and where the most important or relevant content lies. The most important content of a visual design can be used for effective summarization or to facilitate retrieval from a database. We present automated models that predict the relative importance of different elements in data visualizations and graphic designs. Our models are neural networks trained on human clicks and importance annotations on hundreds of designs. We collected a new dataset of crowdsourced importance, and analyzed the predictions of our models with respect to ground truth importance and human eye movements. We demonstrate how such predictions of importance can be used for automatic design retargeting and thumbnailing. User studies with hundreds of MTurk participants validate that, with limited post-processing, our importance-driven applications are on par with, or outperform, current state-of-the-art methods, including natural image saliency. We also provide a demonstration of how our importance predictions can be built into interactive design tools to offer immediate feedback during the design process.

Architecture

インタラクティブにテキストや画像といった要素を足していって、それぞれの重要度がどのように変わるのかを見ることができるのも面白いですね。 モデルにはFully Convolutional Neural Network (FCN)が使われています。

Results

ちなみに自分のWebサイトで試したところ、こんな結果に。左のメニューが見事に見落とされています。メニューが見にくいのは前から気になっていたのですが、見事にその直感が裏付けされた形です。

image

Further Thoughts

Webやアプリ用に、わかりやすいUIを作りたい!といった場合に参考になりそうですが、ここで挙げられているのはあくまでも「セオリー」ですよね。AIが伝えるセオリーの通りにデザインするのか、それともあえてそれを破るのか。デザイナー側の意思決定が求められることになりそうです。

Links