Media credit: Olivier Reynaud
Layout design is truly inseparable from interaction design in the creation of apps, which is why graphic designers don’t always make good UI designers and vice versa. Whereas graphic designers use color and arrangement to achieve a certain visual balance, UI designers are preoccupied with usability. The presentation layer of an app is the gate between the end-user and the app’s underlying value.
1. The screen is organized into meaningful zones
Help, Sales chat, and in-app documentation panels usually appear on the right. Filter panels and checkboxes usually appear on the left. Generally, across applications, we’ve been trained to associate LEFT with ACTION, and RIGHT with INFO.
Is it okay to break this rule?
It doesn’t really matter how you divide your screen (and the objects within) into meaningful zones. What matters is that the location you choose for a category of interaction is repeatable and predictable.
For example, close buttons usually appear in the upper right. Is it okay to put a close button in the center? Yes, IF that center location works for all objects that use a “close” interaction. Does a central location work for your modals, banners, dialogs, panels, etc.?
Often times cool innovations arise when IX designers push themselves to discover new repeatable, predictable locations for interactive elements.
2. Zones are arranged for accessibility
So many interaction designers end up following convention (such as actions left, info right) because some areas of the screen are more accessible than others.
Consider this defining principle of application design:
An application is so-called because of its application to the user, its central purpose.
In other words, all tools within an application support one central purpose. All features within a tool support its central purpose. All elements presented in a mode support its central purpose. (We’ll get to modes later…)
Good layouts arrange elements such that their role in helping users access to the application’s central purpose aligns with the practical accessibility of their locations on the screen. So, for example, if the central purpose of an application is to upload and manage photos, the photo upload button, which is critical to this purpose, ought to appear “above the fold,” which is the most accessible region of the page because users need not take action (such as scrolling) to see it.
Consider, too, regions of a layout that may become inaccessible. It is generally agreed that no element should live in the footer of a page with infinite scroll, but a “back to top” button has no part to play in the central purpose of any application until the user has found themselves at the bottom of a screen.
3. The layout is multi-dimensional
A one-dimensional layout offers the user no more than what is rendered upon page load. A multi-dimensional layout offers users actions and information as they become relevant. A simple example is a filter panel that only appears when the user clicks the filter button.
“Modes” are a more complex take on this same principle. A mode is a temporary state where the elements presented support the user’s short-term goal. So, for example, when a user selects one or more objects, the possible actions that can be taken against those selections appear in a toolbar. At the same time, other elements might disappear — search and filter, for example — since interacting with those could potentially confuse the user by removing their selections from view.
A clever layout considers these layers of interactive modes and co-locates elements whose displays would interchange.
4. Variation is limited
Variation in size, color, spacing, and position increases cognitive load for users learning an application. Users seek to grasp meaning in variation—Oh. This title is green, not black. What does that mean?
The art of designing visual language is the intentional selection of variation. These variations are implemented in a predicable way, forming patterns.
When it comes to layout, relative units of measure are less variable. For example, a rule like, “All spacing between elements is officially 14pt” would result in much perceived variability. The user would wonder, “Why is that text so cramped and that text so spaced out?” each time your font size changes.
Good web app layouts use 1em (the height of a capital M) as their base unit of measure because regardless of screen resolution, the size of an M probably matches user preference. Consider a user with bad vision and a high-res monitor. They probably set their browser preferences to use large fonts (or they zoomed in).
As with visual design variation, good layout design limits spacing to 1em except where different spacing would add meaning. For example, perhaps a page title is set apart by the generous white space above and below it.
Finally, in selecting spacing variation, consider pleasant fractions, for example, designing on a grid of thirds or quarters. Percentages can be used to break a viewport or parent element into nicely distributed blocks. However, em’s are the best relative unit for spacing: margin, padding, line-height, letter-spacing, etc.
Note: reference W3Schools for more relative unit options.
5. Usable space is maximized
Applications help users perform tasks. Good layouts maximize the space where objects are viewed and manipulated. For example, a table page lends as much real-estate as possible to the tabular data. While the user is engrossed in their task — querying for a specific data set, for example — navigation, help, and other blocks are unimportant. Interactive elements like “scroll to top” buttons give users an easy way to find these things when they are ready to move on to a different task.
Similarly, there are techniques for moving blocks out of the way when the user is a goal-oriented, task mentality. Some of these are controlled by the user, for example, side panels (navigation, help, filters, etc.) that can be collapsed. Others are event-based. For example, if the user scrolls down the page, perhaps everything scrolls out of view except for the action bar containing a query input, since that is the only block, besides the tabular data itself, that is critical to the task at hand.