Flowed Layout Advantages over Boxed

When we design Web Applications it normally starts with drawing boxes and discussing what they will contain. Our mental model is a sort of divide and conquer approach.

Boxed Sketch

We find that the mind seems to orient by following edges. Newspapers are laid out based on a grid concept. It can be hard to read a line of text once it becomes a certain length. So newspapers laid out the text in columns.

Multiplication Tables

When we present information that is related, we often lay it out as tables. Think multiplication tables from calculus at School. It works great for such a lesson. You can make a half filled in table and ask a pupil to fill out the multiplied result. If you wonder which industry to study for, you can look at a table of average salaries for different industries to decide which one best balances prospects of enjoyment and profit.

VisiCalc was the first spreadsheet, but Excel might be the one most people know. Some people use it for a living. So when you discuss with them how to organise information, they will start drawing a grid, mimicking a Spreadsheet.

These examples are made to mean, by most people, that if you have content, it should be broken down into boxes.

Filter Sidebar Example

In one project the initial design called for a sidebar along the results to change the filtering of the list. This makes perfect sense at first, but when you ask, "How much space is used for actual content on a typical screen?", you see the tradeoff.

Multiple Scroll Bars

On a compact display you will need a vertical scroll bar, and on a screen higher than the filters you get wasted space. The texts can be made compact, but the longest phrase determines the width. So you need to accommodate a wide panel if you offer the service in German and French.

Research Filter Sidebar

In this example the site users are Swiss Lawyers. Let me tell you, they have quite set ways about how things should be, and short informal wording is not welcome.

If you think about this screen, the results and the sidebar are essentially tables. Boxes in boxes. Even if you try to rearrange to with the filters above it ends up taking an equal lot of space.

You can move the filters to the top, and at some resolutions get a better use of space. This means that you need two layouts with a Boxed approach.

Boxed Filters

If you instead think of a page in a book or a simple web page. It is text that flows down the page; left to right, top to bottom. Occasionally you break the monotony with a paragraph.

In a book or magazine you know the exact size of the page, so you know the width of the columns. You can fit in a table that uses the space well. On the web the browser can be any size, so the column width can vary a lot. If you try to fit a table in a column on the web, you must sacrifice a lot of empty space to ensure that the content will fit. Free flowing text doesn’t have this problem. You should observe that Digital layout is fundamentally different from physical page layout.

If you create new primitives that flow like text, you can improve the use of space without loosing readability, even at very different browser sizes.

In this solution the filters have been changed from vertical lists to inline flowing versions.

Flowed Filters Filters

This is an extract from what we at The Digital Gap call our Principles Playbook. We think that every project, design system and code base should be governed by principles.