« Back to Publications list

Visual Composition of Graphical Elements on Non-Rectangular Displays

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.

https://doi.org/10.1145/3025453.3025677

Marcos Serrano, Anne Roudaut, and Pourang Irani. 2017. Visual Composition of Graphical Elements on Non-Rectangular Displays. In Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems (CHI '17). Association for Computing Machinery, New York, NY, USA, 4405–4416. DOI:https://doi.org/10.1145/3025453.3025677

Bibtext Entry

@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 = {non-rectangular display, visual design guidelines, freeform display},
location = {Denver, Colorado, USA},
series = {CHI '17}
}

Authors

Pourang Irani

Pourang Irani

Professor
Canada Research Chair
at University of British Columbia Okanagan Campus