Little Springs Design. 2001 – 2010.

The various articles and posts complaining about (or offering suggestions to fix) the state of design and typography on the iPad, iPhone and other devices are pretty spot on. But they tend to skip rather too lightly over one key issue: that there is a baseline understanding of readability, layout, type and design.

Design is not new

This is a key problem I've been complaining about for at least ten years. Interactive design is not something totally new, that should be judged on its own merits, or for which we need to develop all new principles of design.

And I haven't just been complaining. I spread information about, among my teams and in general periodically. This introduction to typography (also here) just as one example, is a complete revelation to everyone not raised as a print designer.

For too long, interactive designers have been taught that it's a totally unique practice with unique needs and they are going to have to cast about for vague analogies, and develop new principles of design, and discuss the merits of each others' job titles and whether we should develop a certification program.

Interactive design is not unique

The reason for this seems to be that interactive is something totally new. Like the way to digital age changed everything. Well, while it's full of neat stuff, I still don't fly my jet pack to work every day.

Sure, I think a certain percentage of the readership of those articles I quoted above are on the same page as me here. They are design nerds, and went to school and read up on it. But people who are purely interactive, or HCI-based, or who haven't gone to any school at all, don't have that baseline understanding of design, and aren't getting the same understanding out of these discussions. Look at some of the comments on those posts and see how many people don't understand why design is even important.

I went to art school. Not design school, but art (and aero engineering for a while also, but that's another story). I took design classes, and have worked as a graphic designer and print art director for a while. Art taught precisely the same principles of color, space, line, organization, the way the viewer's eye interacts with the work and so on as design did. While design tended towards principles founded in scientific understanding, artistic principles are based on centuries of trial and error and tradition.

But the same principles apply in the end. Which leads me to: paper is an interactive experience. You flip pages, have to understand where you are in the system, and where you want to go to next (not always the next page). There has to be an information hierarchy expressed via size, shape, position, color and weight. If there's more to be found on another page, it has to be clear that this is true, and how to find the rest of it. And so forth.

Except for learning technology, and some more about cognitive psychology, and some changes in user expectations, my work is rooted in the same stuff I have been doing for 25 years. (And if you are doing the math, yes, I was doing graphics for real clients for real money by the time I was 15). I have gotten on very well hiring print designers and letting them learn the ways of interactive design... actually, generally better than hiring interactive people and teaching them design fundamentals.

Some principles of interaction, for paper, pixels or come what may

As interactive designers, we don't need to guess, and flail about wildly for ideas or analogies or new understandings of the way humans read or pick things up.

Oh, sure, the Devil is in the details. But I also say Hell is in the fundamentals. If you don't get the basics down pat you are just as doomed. Here at Little Springs we've put a fair number of basics regarding mobile interaction down in a pattern wiki (if you have ideas, add them... it's a wiki). But I am sometimes worried that we don't have enough basics of design.

I am then concerned that it's not my job to define these basics. I mean, they are fundamentals of design. But since interactive designers keep missing them, here's a relatively random list (with brief discussion) of them:

• Multi-column text is not to meet some design style, but to restrict line length. And line lengths are not based on fixed sizes, or even percentages of page width, but on character count. You can try this yourself with some fluid-layout website (a sadly large number of news sites). Make it narrow and read half an article. Then make it wide and read the rest. Long lines are harder to read. Anything over about 60-65 characters (averaged) is the maximum length you want to use. Too short depends on how many long words you have. For technical documents, a minimum column is much wider than a traditional newspaper. Try it out, and see how things break.
• Lay out elements with a design hierarchy. There are optional versions, and some interactive types insist time is another component, but for simplicity I say it's: Position > Size > Shape > Contrast > Color > Form. The most important items are larger, higher, brighter, and so on. For more detail on what these mean, read my book.
• Grids do not have to be like graph paper, with an over-ordered regularity which seems to be in vogue now. Any set of vertical and horizontal lines will do, and then elements hang off these. Columns and margins and gutters are defined by this. Grids are not some new web-design thing; they have been around for around at least 700 years.
• The term false bottom, or false top, is interactive design specific, and refers to users thinking they are at the end of the content and not continuing to scroll. But it's a fundamental problem from print design as well. If text flows from one column to the next, or one page to the next, it must be designed so the relationship between them is clear. Much the same design hierarchy applies, and the use of grids help this. "Continued on page 86" is all but a hyperlink from the past, which has been inherited by interactive; "read the rest of this blog post" is basically the same thing.
  
  Interactive systems have an additional challenge in that the page might be larger than the screen (or viewport as we often call it). But only the parts related to this exact problem are really new. Everything else can use some variation on print design principles.
• Wayfinding is really rooted in real-world navigation, like getting around town, or finding the right room in a building. But navigating within a magazine, catalog or website still requires understanding of location within the system. Page numbers, titles, headers and footers, tabs, and more provide a lot of help that we've inherited almost as a whole for interactive design.
• Alignment of type is used as a design tool, and to make the text fit appropriately. And "alignment" is the right word. Left-align, right-align, center. Justification is a single entity (well, there are subtle variations in the method of handling the last line, but ignore it for now) with type adjusted to be straight on both the left and right sides. This is more readable on small columns, but less readable on longer columns, where "ragged right" or left-aligned type is better.

Some other stuff, like type, is discussed below, where they are more relevant. And as I said, I am by no means alone in this. For a good baseline about information presentation, whether paper or digital, read up on Edward Tufte or actually go to one of his seminars. And if you are wondering, yes the books are worth the price.

Some misconceptions about resolution and ink

Just the other day one of the interns presented some useful information about resolution and pixel density. But he finished with something totally, totally wrong comparing pixels and ink. It's not his fault, as it's oft-repeated on the internet.

The key misconception is comparing print vs. screen display and that pixels are wonderous, magical things. They are single elements that can be any color of the rainbow, unlike printed "pixels" which are only one color. Well, both are wrong. First, go to your grandma's with a magnifying glass and look at the TV. CRTs have pixel groups, with individual red, green and blue pixels.

Each of which can be on or off to generate the range of colors needed. It gets worse. Even flat panels, like the TFT displays used pretty much everywhere, are also composed of tiny color elements adjacent to each other, forming grouped pixels that appear to be of one color, because our eyes are easily fooled and as we get closer to the screens the pixels (and sub-pixels) get smaller.

On to print. Which is actually what my degree is in, so I'll try not to bore you all too much. Print is as resolution-dependent as any display technology, though it's largely based on paper, and details of mask-making and is basically fuzzy and vague and depends a lot on the situation and skill of the printer. Newsprint can only support so much detail before the coarse fibers get soaked. Process dots can only be so small before ink doesn't adhere anymore (or gaps get clogged).

Letterpress is the last time there was true resolution independence but that's even older than me; it took a long time to even find a letterpress book in my house to use as an example.

This is the original (mass) printing technology. Raised letters are cut or cast out of metal, then (once in appropriate matrices to be words and pages) inked and pressed into the paper. Slightly indented, totally sold and sharp-edged letterforms are made. Similar technologies on metal are used for printing graphics and even photos, but usually not identical which is why there were "color plates" and so on, in older books.

Resolution here is theoretically to the atomic level, clearly just to the quality of the letter-cutter and of casting technology and practically to the quality of the paper, speed, drying time and type of ink used.

Offset is how pretty much everything is printed now. I'll even argue that laser printers are fundamentally offset machines, though the specific technology is different. A flat image is made on a flat plate. The chemical difference between the image and the plate lets ink stick to it. Then this is transferred (offset) to the paper.

Halftone printing lets you move from solids to dots in order to print tones or tints (partial percentages..."half" here means "partial" not "1/2") of black.

Or of whichever color you need. Process takes offset (for our purposes) and extends it to multiple plates. Much like RGB display technologies combine the three key light colors to make every color (within the gamut), cyan, magenta, yellow and black are combined to make every print color you are likely to need (we're gonna ignore hexachrome and spot color, so don't bring it up).

This is what most printing is today. The important part here is to understand that dots are not pixels. DPI is a measure of the center-to-center grid distance between dots (average distance between them for stochastic screens) and the dots are of variable size. Oh, and different colors are on angles, so they overlap interestingly and sorta like how display pixels are made of sub-units, there is again no such thing as a pixel.

Print also has the neat advantage of inks being translucent. You can print things like "rich blacks," which are black with colors under them. Check out that photo again and look close. It's pretty neat. And something display technology cannot do not, or in any lab, so is not even on the horizon.

Incidentally, if anyone thinks ePaper is closer to actual paper because of their regular marketing hype about the little balls of color floating stochastically around in a fluid matrix... sorta. Oh, sure, the little balls are there. But who cares? They are controlled by... TFT backplanes. There are other technologies, but you end up with the same effect. Square pixels at the conventional display resolution, made up of tiny little sub-elements.

Typography & typesetting

What this pixel discussion really means is that even down to that detail, much of what we know about type in print – with all that historical knowledge – can be applied to electronic display technologies.

Traditional text sizes can be used for things read at traditional distances, in traditional lighting. An ideal ePaper device (or maybe even the iPad) can pretend it's a magazine, and use 11 pt text, 18 pt titles and so on. Note that a lot of professional graphics programs (like InDesign) have preset type sizes in a pulldown. These are traditional sizes for printed matter, and have useful relations to each other. For smaller display (business cards, mobile phone,...) or larger (things on TVs, road signs,...) do angular resolution calculations to make it the same apparent size to the end user for the typical viewing distance. Hint: small things are held closer to the face.

Serifs increase readability, so should be used for smaller text, like body copy. Display faces are designed for titles, so should be allowed to do that job; don't just use body text really big.

You can't use tiny type with serifs on low-res printing or terrible paper, just like you can't use them on ePaper and shouldn't on iPads and phones. I like square serifs for a lot of this, and there are other types designed for small and poor-resolution display or print technology. Use them.

Larger leading can often increase readability in poor conditions, such as low light or in motion, but too much can make it impossible to understand that two lines are related to each other. Kerning (or tracking) is the space between letters. Ideally, this is automatically generated and follows well-established principles laid out by the type designer. When you justify type there will be changes to the kerning, between words and between letters, and if this is poorly done then the type becomes difficult to read. Fix this with wider columns, or tweaking the hyphenation rules.

As resolution increases, I await the "discovery" of ink traps and other technologies already well-established for print, to account for the shortcomings of display technologies instead. Some of this has been apparently discovered, but is rather more protected by IP (and is easier to hide than physical technology, therefore). Which could be another key takeaway: trust experts and pay them to be clever for you.

One last note – units of measure

After a brief belief that pixels-are-all, everyone is back to suddenly believing in real, physical units of measure. Luckily.

Physical sizes, and the expected distance from the user, are key. And yes, this is the same thing as print. Business cards are designed differently from billboards.

While markup (e.g. html) and programming languages seem to mess these up a lot, all our design programs support these well so a brief outline of some of the key units:

• Points and picas – I was raised with a specific version of the printer's point, which was almost (but not quite) 72 / inch. That got fixed with Postscript, and now it's exact. A pica is 12 points. So, 6 picas per inch. Notation style matters, and is respected by programs like InDesign: p is for pica. The abbreviation pt is for point. But both are just when they are used alone.
  
  Subsets of picas are points, written with the p acting sort of as the decimal. 3 picas, 6 points is written as 4p6.
• Em – This is another that goes back to old timey print technology. An em is the height of the whole piece of cast metal. This is taller than the printed letterform of course. The name comes from an accident of sizing; the width of an M is the same as the height of the piece of metal type. There is a similar concept of a letter area bigger than the letterform in digital typography; as a guideline, it's close to the old metal type, so the default line-height (no leading) is 1 em. Which is great for a lot of purposes like spacing in html. 1 em extra space is one more line, essentially. Ususally. Unless the typographers messed up their font.
  By the way, they are spelled with a preceeding "e" but pronounced like the last letter. "Em" is pronounced just "m," and so on.
• En – Simple. Just half an em. Used mostly as a horizontal space, or length of a shorter dash. Use an en dash instead of a hyphen unless, well, hyphenating things. The name is the same as em; in theory a piece of metal type with an N on it is half as wide as it is tall.
• twip – A twentieth of an inch point, maybe. I mean, it's a 20th of a point, sure, but It's not clear if that's what it stands for. I never knew. A very tiny unit used for things like trapping (don't ask). In the old days, I never used decimal points, but fractions (halves and quarters) were there, and smaller units were in twips. It's being used now for certain programming language sizing (like S60).

Further reading

If you want to read more on any of this, you are in luck. You can fill a good size building with books on design alone. But to make it easy, I've pulled every link from above, and added a bunch more here so you can go off to see the definition (lots of love to Wikipedia) or other useful discussions.

Feel free to post more ideas in comments

• Better Screen, Same Typography by Khoi Vinh.
• WIRED on iPad: Just like a Paper Tiger… and Designing for iPad: Reality Check from iA, though I am not clear who the author of each is, not that I looked that hard. And while we're at iA, a great critique of very contemporary print in the modern age Links in Print: Story of a Beautiful Failure
• The iPad is not a Magazine by Milind Alvares at Smoking Apples.
• My introduction to typography , leaning towards mobile stuff a bit. But if you want info on serifs and stuff, read this as an intro. The same entry is also posted at Forum Nokia, if you prefer those guys.
• The Design for Mobile pattern wiki which is mostly so far contributed to only by Little Springs Design. Please add your own ideas if you have any. Please.
• Some good articles about grids but a bit heavy on web, and some broken image links and stuff. When it works, great place.
• How to Use Visual Hierarchy in Web Design by Joshua Johnson at Designshack. Someone had a discussion of time and space as design elements, but I cannot find it. If anyone does, tell me and I'll link it.
• http://acquia.com/blog/10-usability-guidelines#comment-12214 which I put in here for a false-bottom discussion. Hard to find a good, full discussion of this.
• Information Architecture and Wayfinding a part of a lecture series I guess, from the Raffles Design Institute in Shanghai.
• Alignment via Wikipedia. Note they say "flush left" and so on. I do not. It's a style or regional difference I suspect.
• Edward Tufte is a legendary proponent of good design in all sorts of cases, and is generally known (i.e. not just to the design community) for his critiques of Powerpoint, and how bad presenting all but caused the Challenger accident. His books are pricey, but wonderfully printed, and worth keeping. Buy at least one.
• A Pixel is Not a Pixel a really interesting article from Quirksblog. Read it.
• LCD display via Wikipedia, and Chipcenter.
• ePaper Central which has all you want to know about it. Check out their Reference Guide for more than you can possibly care about.
• Letterpress printing, offset printing, laser printers, halftone, and process color all from Wikipedia.
• Rich Black vs. Plain Black comparing print and display technologies.
• Type and optical sizing from Adobe.
• Kerning from I Love Typography, which is a great blog about type in general. Subscribe.
• Font hinting and you'll be happy to see sub-pixel display images. This is why type looks good on monitors today. They know all this stuff.
• Bitstream Font Fusion sadly a marketing page, because like I said they all consider it secret IP. But if you want to get good type on your small screen (or TV, or whatever) call them up.
• Ink traps are so nerdy they aren't well discussed. This will do as a definition though. Mentioned in some other articles at iLT, if you want to search.
• CSS units of measure from the W3C.
• Em, en, point, pica, twip, all from Wikipedia.

This entry was posted on Thursday, June 10th, 2010 at 3:11 pm and is filed under Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.