Interactive Layout Transfer

Niraj Dayama; Simo Santala; Lukas Brückner; Kashyap Todi; Jingzhou Du; Antti Oulasvirta

doi:10.1145/3397481.3450652

Interactive Layout Transfer

Niraj Dayama^*, Simo Santala, Lukas Brückner, Kashyap Todi, Jingzhou Du, Antti Oulasvirta

^*Corresponding author for this work

Huawei Technologies Co., Ltd.

Research output: Chapter in Book/Report/Conference proceeding › Conference article in proceedings › Scientific › peer-review

12 Citations (Scopus)

144 Downloads (Pure)

Abstract

During the design of graphical user interfaces (GUIs), one typical objective is to ensure compliance with pertinent style guides, ongoing design practices, and design systems. However, designing compliant layouts is challenging, time-consuming, and can distract creative thinking in design. This paper presents a method for interactive layout transfer, where the layout of a source design – typically an initial rough working draft – is transferred automatically using a selected reference/template layout while complying with relevant guidelines. Our integer programming (IP) method extends previous work in two ways: first, by showing how to transform a rough draft into the final target layout using a reference template and, second, by extending IP-based approaches to adhere to guidelines. We demonstrate how to integrate the method into a real-time interactive GUI sketching tool. Evaluation results are presented from a case study and from an online experiment where the perceived quality of layouts was assessed.

Original language	English
Title of host publication	Proceeding of 26th International Conference on Intelligent User Interfaces (IUI 2021)
Publisher	ACM
Pages	70-80
Number of pages	11
ISBN (Electronic)	9781450380171
DOIs	https://doi.org/10.1145/3397481.3450652
Publication status	Published - 14 Apr 2021
MoE publication type	A4 Conference publication
Event	International Conference on Intelligent User Interfaces - Virtual, Online, College Station, United States Duration: 13 Apr 2021 → 17 Apr 2021 Conference number: 26

Conference

Conference	International Conference on Intelligent User Interfaces
Abbreviated title	IUI
Country/Territory	United States
City	College Station
Period	13/04/2021 → 17/04/2021

Keywords

User Interface Design
Computational Methods
MILP
Optimisation
Style Transfer

Access to Document

10.1145/3397481.3450652

ELEC_Dayama_etal_Interactive_Layout_Transfer_IUI_2021Final published version, 5.99 MB

Cite this

@inproceedings{88e67f6e95cc4ac9947786239f200de5,

title = "Interactive Layout Transfer",

abstract = "During the design of graphical user interfaces (GUIs), one typical objective is to ensure compliance with pertinent style guides, ongoing design practices, and design systems. However, designing compliant layouts is challenging, time-consuming, and can distract creative thinking in design. This paper presents a method for interactive layout transfer, where the layout of a source design – typically an initial rough working draft – is transferred automatically using a selected reference/template layout while complying with relevant guidelines. Our integer programming (IP) method extends previous work in two ways: first, by showing how to transform a rough draft into the final target layout using a reference template and, second, by extending IP-based approaches to adhere to guidelines. We demonstrate how to integrate the method into a real-time interactive GUI sketching tool. Evaluation results are presented from a case study and from an online experiment where the perceived quality of layouts was assessed.",

keywords = "User Interface Design, Computational Methods, MILP, Optimisation, Style Transfer",

author = "Niraj Dayama and Simo Santala and Lukas Br{\"u}ckner and Kashyap Todi and Jingzhou Du and Antti Oulasvirta",

year = "2021",

month = apr,

day = "14",

doi = "10.1145/3397481.3450652",

language = "English",

pages = "70--80",

booktitle = "Proceeding of 26th International Conference on Intelligent User Interfaces (IUI 2021)",

publisher = "ACM",

address = "United States",

note = "International Conference on Intelligent User Interfaces, IUI ; Conference date: 13-04-2021 Through 17-04-2021",

}

TY - GEN

T1 - Interactive Layout Transfer

AU - Dayama, Niraj

AU - Santala, Simo

AU - Brückner, Lukas

AU - Todi, Kashyap

AU - Du, Jingzhou

AU - Oulasvirta, Antti

N1 - Conference code: 26

PY - 2021/4/14

Y1 - 2021/4/14

N2 - During the design of graphical user interfaces (GUIs), one typical objective is to ensure compliance with pertinent style guides, ongoing design practices, and design systems. However, designing compliant layouts is challenging, time-consuming, and can distract creative thinking in design. This paper presents a method for interactive layout transfer, where the layout of a source design – typically an initial rough working draft – is transferred automatically using a selected reference/template layout while complying with relevant guidelines. Our integer programming (IP) method extends previous work in two ways: first, by showing how to transform a rough draft into the final target layout using a reference template and, second, by extending IP-based approaches to adhere to guidelines. We demonstrate how to integrate the method into a real-time interactive GUI sketching tool. Evaluation results are presented from a case study and from an online experiment where the perceived quality of layouts was assessed.

AB - During the design of graphical user interfaces (GUIs), one typical objective is to ensure compliance with pertinent style guides, ongoing design practices, and design systems. However, designing compliant layouts is challenging, time-consuming, and can distract creative thinking in design. This paper presents a method for interactive layout transfer, where the layout of a source design – typically an initial rough working draft – is transferred automatically using a selected reference/template layout while complying with relevant guidelines. Our integer programming (IP) method extends previous work in two ways: first, by showing how to transform a rough draft into the final target layout using a reference template and, second, by extending IP-based approaches to adhere to guidelines. We demonstrate how to integrate the method into a real-time interactive GUI sketching tool. Evaluation results are presented from a case study and from an online experiment where the perceived quality of layouts was assessed.

KW - User Interface Design

KW - Computational Methods

KW - MILP

KW - Optimisation

KW - Style Transfer

UR - https://www.scopus.com/pages/publications/85104517314

U2 - 10.1145/3397481.3450652

DO - 10.1145/3397481.3450652

M3 - Conference article in proceedings

SP - 70

EP - 80

BT - Proceeding of 26th International Conference on Intelligent User Interfaces (IUI 2021)

PB - ACM

T2 - International Conference on Intelligent User Interfaces

Y2 - 13 April 2021 through 17 April 2021

ER -

Interactive Layout Transfer

Abstract

Conference

Keywords

Access to Document

Other files and links

Fingerprint

Human Automata: Simulator-based Methods for Collaborative AI

-: Bayesian Artefact Design

Cite this

Interactive Layout Transfer

Abstract

Conference

Keywords

Access to Document

Other files and links

Fingerprint

Projects

Human Automata: Simulator-based Methods for Collaborative AI

-: Bayesian Artefact Design

Cite this