Layout

Layout is the mechanics by which screen elements are positioned and sized so that they can be viewed, navigated, and interacted with by users. A layout’s primary purpose is to mediate the relationship between the limited screen space available to display elements, and the UI elements that need to be displayed, though they may also confer some kind of relationship between elements through positioning and size. Most UI frameworks come with a set of built in layouts such that elements may be positioned with limited configuration and no new layout code. Some of these layout may be found in many UI frameworks under different names, like the vbox, while others are unique, like the CSS flexbox. They all operate under the same general principles, however, which I will enumerate here.

The vast majority of layout systems in use today are rectangular—their elements have a horizontal and vertical position, along with a width and a height. They are also often based on a tree of parent-child relationships between elements with ordered siblings, though this may change as in the case of a table. In a rectangular layout, each element has a left, right, top, and bottom position, which is as simple as a number, and the layout must decide where to place the walls of each elements rectangle.

There are two conflicting needs, however. The first is that elements meant to convey information to the user need enough space to be legible, and pressable (click or tap) elements need enough space to provide easy targets for a mouse or finger. I refer to this as Legible and Tangible space. The second conflicting need is to fit these elements into the limited screen space of the computer monitor. The two primary methods to satisfy both these needs are to either scroll elements or squeeze elements.

Scrolling is particularly common in user interfaces, so much so that the functionality is built into the mouse. Scrolling works by cropping the child contents size to fit into the afforded screen space. This, of course, causes some elements to be hidden, but they can be brought back by repositioning them such that they are within the crop. Scrolling uses positioning rather than resizing to fit child elements into a parent which is too small for them.

Squeezing is less aparent in user interfaces as it doesn’t require custom hardware or on screen elements to accomidate, but it is no less common. Squeezing involves resizing the child elements to fit within the bounds of the parent. Where scrolling adjusted the position of child element to fit them in the screen, squeezing adjusts the size of child elements to fit them in the screen. Squeezing requires that child elements can afford to lose space, however, and so it does not work with all elements, and often only up to a certain minimum size.

It is also possible for a screen or a parent element to have a surplus of space for the UI elements that must be displayed there, leaving the layout to decide how best to fill up the space with what elements it was provided. For this, we introduce two general layouts which mirror that of dealing with limited screen space. We either have to stretch elements or align them.

Stretching elements is the analogue to squeezing, but is used to allocate a surplus of space rather then ration a deficit. Stretching increases the size of child elements so as to fill out the screen or the alloted space of a parent element. These layouts are so similar to squeezing that the two are often the same layout with similar configuration, the only difference being that squeezing will occur when there is not enough space to accomidate the elements, and stretching will occur when there are not enough elements to fill the space. Stretching assumes that the child elements will be capable of growing to accomidate their assigned size, which tends to only be true for tangible space. A click target, like a button, can grow to any size, whereas scaling text to fill up a portion of the screen is awkward and unappealing. When an element containing text is stretched, it will usually just lead to a change in alignment of the text.

Aligning elements is the analgoue to scrolling, though the differences are more aparent than with stretching and squeezing. Aligned elements are assigned a position inside the afforded screen space, with the remaining space left empty. The aligned elements are then left with only the screen space that they need to display their contents, just as with scrolling. Aligning elements works best with the allocation of legible space, as with text or icons, where a change in side might confer some unintended meaning.