Visual Composition of Graphical Elements on Non-Rectangular Displays

2017. Marcos Serrano, Anne Roudaut & Pourang Irani
CHI '17: Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems.

Abstract

Graphical user interfaces are composed of varying elements (text, images, etc.) whose visual arrangement has been relatively well established in the context of rectangular interfaces. The advent of non-rectangular displays questions this knowledge. In this paper we study how traditional content layouts can be adapted to fit different non-rectangular displays. We performed a first qualitative study where graphic designers fitted text and images into different non-rectangular displays. From the analysis of their output we generalize and adapt ten composition principles that have been proposed in the literature for rectangular displays. We evaluate the revised principles through a paired comparison questionnaire where 57 participants compared pairs of layouts. Using the Bradley-Terry-Luce model to analyze our data we show that some results contradict current conventions on visual design for rectangular displays. We then extracted the most interesting cases and conducted a follow up study with additional shapes to investigate how the principles generalize. From these results we propose a set of guidelines for designing visual content for non-rectangular displays.

Read the full paper here ›

Citation

Serrano, M., Roudaut, A., & Irani, P. (2017). Visual composition of graphical elements on non-rectangular displays. Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems (pp. 4405–4416). New York, NY, USA: Association for Computing Machinery. URL: https://doi.org/10.1145/3025453.3025677, doi:10.1145/3025453.3025677

BibTeX

@inproceedings{10.1145/3025453.3025677,
author = {Serrano, Marcos and Roudaut, Anne and Irani, Pourang},
title = {Visual Composition of Graphical Elements on Non-Rectangular Displays},
year = {2017},
isbn = {9781450346559},
publisher = {Association for Computing Machinery},
address = {New York, NY, USA},
url = {https://doi.org/10.1145/3025453.3025677},
doi = {10.1145/3025453.3025677},
abstract = {Graphical user interfaces are composed of varying elements (text, images, etc.) whose visual arrangement has been relatively well established in the context of rectangular interfaces. The advent of non-rectangular displays questions this knowledge. In this paper we study how traditional content layouts can be adapted to fit different non-rectangular displays. We performed a first qualitative study where graphic designers fitted text and images into different non-rectangular displays. From the analysis of their output we generalize and adapt ten composition principles that have been proposed in the literature for rectangular displays. We evaluate the revised principles through a paired comparison questionnaire where 57 participants compared pairs of layouts. Using the Bradley-Terry-Luce model to analyze our data we show that some results contradict current conventions on visual design for rectangular displays. We then extracted the most interesting cases and conducted a follow up study with additional shapes to investigate how the principles generalize. From these results we propose a set of guidelines for designing visual content for non-rectangular displays.},
booktitle = {Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems},
pages = {4405–4416},
numpages = {12},
keywords = {freeform display, non-rectangular display, visual design guidelines},
location = {Denver, Colorado, USA},
series = {CHI '17}
}