Layout

Information Design Theory

How can we apply Information Theory to layout and design? Making sure it looks good on larger displays as well as on handhelds. Here we propose 6 general rules to follow that encapsulates a lot of what CSS tries to "get at" by reducing design concepts down to a line:

1. Drip & Flow. Information is 1 dimensional, it flows in an infinite line. Humans are lazy and don't want to turn their head or follow a line, so it is good UX for a line to wrap its information to fit within a single view without scrolling. Flow determines the direction, such as English's left-to-right (>) and top-to-bottom (v), while drip describes whether it the information comes from the center (0) of the line, opposite the flow (-1), or flows with it (1). Text should be a comfortable size (~) for people to read (preferably they have chosen it, not you, since every person is different).

2. Min & Max Size. On very wide devices, consider wrapping at 48 letters long so that way it is still easy for eyes to find the next line. For text, don't let anything become smaller than 12 letters long.

3. Focus & Divide. So now you need to decide, for each "view", whether you want a central focus or if you want to divide that into multiple points. Even if you do divide it, on hand helds there won't be enough room to fit all the columns, so each one should be able to have focus on its own and still make sense. Alternating between graphics and informational text keeps attention, and looks good in both orientations.

4. Leak & Hold. On larger displays, you might want graphics to "leak" out from the layout. For instance, a graphic that is designed to fit within limits, but has extra effects that extend beyond if there is extra space.

5. Align & Center. This is simple, whether text should be aligned left, center, etc., whether hanging columns should be in the middle or on one side, and where graphics should be centered such that if they leak out they go in a certain direction.

6. Zoom & Detail. Finally, consider how everything you have created might fit inside another design. What details are the most important, and if it is viewed from afar, does it still look recognizable? Details actually describe the shape or structure of something, its geometry, etc.

A common mistake is to put graphics behind text, this is good in theory but no part of the image which contains information should overlap with the text, or it could make the text become unreadable or make the design look messy on smaller devices. So any text on top of graphics should still follow the Focus & Divide rule, where it is just the unnecessary parts of the graphic that leak behind the text, such that at any orientation or angle, things are still readable. If you are dealing with dynamic graphics and cannot predict how it will leak, then a decent solution is to create high contrast by darkening or lightening the graphic such that any text ontop is still readable.

These 6 rules should allow us to create very fluid and delightful experiences. Right now I have CSS classes that approximates them for helping making HTML prototypes rapidly, but ideally I'd like to see a fresh UI layout engine and menu system be implemented from scratch for this in WebGL. Up for helping with this? Join our game!