A Call for more sensitivity to hierarchy, space, and scale in user interface design.

Typographers have been organizing complex sets of information for hundreds of years. In that process they rarely rely on boxes to convey hierarchy and organization. Why do interface designers feel a need to draw a box around every element in a user interface? What is it about nested boxes, even three or four levels deep, on one screen? In this article I hope to lay out some basic tools perfected by typographers, that apply to interface design.

// Spacing

It’s a given that real estate on screens is precious. There simply isn’t that much to go around. Web designers are pressured to avoid horrific page reloads by packing everything onto one screen and it’s only compounded by the pressure to keep it all “above the fold”. For mobile designers with tiny screens the challenge is even more stark. Yet still, the temptation is to pack everything onto the idle screen of a device experience — “bubbling up” content from every app on the device. Desktop designers are pushed to keep every option in front of users at all times (button bars anyone?).

Print designers have faced similar pressures since forever. It’s expensive to chop down trees, mash them up, print stuff on it and truck it around. Even so, typographers talk about “white space” as a tool. They use it to establish hierarchies, where more important things get more space. They use it to separate individual elements. Sometimes a separating space doesn’t have to be any larger than the dividing line that another bounding box would add.

Mobile designers are rediscovering the value of space as touch screens enforce larger elements, and generous space in response to the physical limitation of human fingers. In the process they are discovering that a little space can be useful to communicate meaning.

Space is commonly used in typography: leading (the space between lines), indentation, letter spacing (giving words more impact by spacing our their letters). Other less obvious examples might be starting the text half way down the page at the start of a chapter or even blank pages at the beginning of books.

A little space can go a long way to creating a clear and uncluttered screen.

// Punctuation

How often do we draw another box, when a simple colon or pair of parenthesis would suffice? Ironically, the first boxes drawn around computer interface elements were drawn with punctuation on text-only screens.

Imagine the common problem of indicating that there are new messages available to view. Typographers might use punctuation, perhaps an asterisk or a number in parenthesis to indicate the related information. Interface designers often draw a box, perhaps inset with faux dimensionality into the box that contains the list item (which is contained by the box that is inexplicably drawn around the list that fills the entire screen).

Another example might be the the cursor in text only interfaces. The cursor is a typographic solution to indicate focus.

// The Grid

You don’t have to talk to a typographer about layout very long before “the grid” comes up. Looking at the design, however, you might not see evidence of any grid at all. The typography may appear to be haphazardly placed, with varied column widths and wide variation in placement from page to page. Somehow, magically, it all feels like it fits together though. Then the typographer reveals the mystery. They pull out a page showing a complicated mesh of squares, sometimes evenly spaced, sometimes not. At a second look, everything in the publication lines up with this invisible grid. Columns of text, headlines, lists, callouts all derive their structure from this consistent pattern that sits invisibly under the design.

Interfaces are seldom so disciplined. Sure, certain areas may be designated for specific purposes (a title bar, for example), but they get boring, never moving from screen to screen. This creates problems when attempting to differentiate and communicate a sense of place as users move between screens. (This often causes interaction designers to suggest color coding to solve the problem … yuck!) What’s more, size relationships between elements are haphazard, with each item shrink wrapped in their boxes to take just enough space. This can make for a messy screen layout, but gets even worse as different screen types are needed. There is no underlying system to order the chaos.

Typographers often use an even more rigorous structure called a baseline grid. This tricky beast requires that each line of type within a design align to an tightly spaced horizontal grid. Imagine a page of blue lined notebook paper in the background where all type sits on one of the blue lines.

While at first it may seem that the limitations of a grid would make designs more difficult, in reality it enables a kind of internal consistency that brings a design together. Because a consistent structure has been achieved, the designer is able to create greater extremes in other parts of the design system without throwing away its cohesion.

// The Typographer’s Scale

Graphic designers often use a “typographer’s scale.”. It’s basically a limited collection of sizes to be used in a design system. A common collection of sizes might be 9, 12, 18 and 36. You might recognize the sizes from font menus on computers, which drew their inspiration from these scales. The idea is that there can only be so many levels of size hierarchy before things get messy, undoing the purpose of the hierarchy in the first place.

Type systems created for interfaces are often arbitrary, depending on what will most easily fit the information. A small screen may have 7 or 8 different sizes and styles of type, which confuses the system. Alternatively, many devices only use one size and type style, making for a very unstructured layout, that then needs to be saved by drawing different colored boxes around everything to establish relationships.

The moral of the story? Use different type sizes, but not too many. It may not seem necessary to apply this type of rigor across an entire system. A type system that uses a limited number of sizes across all screens can create continuity that is not possible in a per screen approach.

// Indentation

Indentation is simple. It uses little space, yet it clearly communicates a break in text. A simple deviation from the left alignment might be used to indicate focus in a directional five key system.

// Weight / Italics

Bold and italic type variations are used by the most novice computer users to indicate differences in priority and meaning. Be careful about using too many different type styles on a single line or even on a single screen, though. Like with size and space, too many levels of hierarchy just make a mess.

// Type families

While the selection of specific type faces is extremely important, choosing the types is only a small part of the practice of typography. Good typesetters can make very bad fonts look passable and can make good fonts look amazing. Likewise, poor typography can ruin an otherwise fantastic face.

Here is a quick rule for picking a type face. Ask the question, “What does this type mean?” If you can’t answer the question, find out before you use it. Typographers learn to understand the subtleties of style and cultural context before they choose a face.

Good interface designers learn to ask similar questions about their work. Subtle changes in structure, rendering and motion may contain stylistic and cultural meaning.

Technical and usability considerations should also be taken into account when choosing a type. Does readability become a problem? Does the type perform well at the specific sizes where it will be used? Does it have the appropriate range of characters, sizes and weights for what is needed?

Another consideration is variety in type families. Often a combination of types can be more interesting than a single face. Be very careful here. More than two types in a system can cause problems. If you are using a second or third type, make sure that you weigh the impacts to the structure of the screens. Is it making relationships more clear, or is it just making a mess?

// Rules

Sometimes the page does need a little extra structural help beyond what the type can provide by itself. It might be that each line has many types of information, and things are starting to look messy. Before you draw another box, consider using a typographer’s rule. Try using a horizontal rule (a thin line) that does not go edge to edge. Also, don’t forget the possibility of a vertical rule.

// A Challenge

Here is a challenge for interaction designers: draw your wireframes without the frames today, excepting the frame around the screen. See if you can communicate the information through typography (scale, space, weight). And for visual designers: present a direction in your next review where there are no boxes around key elements. See if you can communicate your system on an open page, using typography instead of boxes to solve the problem.

Add this to digg, del.icio.us, etc.

Trackback URI | Comments RSS