Timoni West is a web designer in San Francisco.
This is her blog.

How to make your session my favorite session

Although conferences are fabulous for many reasons—the afterparties, the hobnobbing, the glorious hotel sheets— my favorite reason to go is to learn new and exciting things. But I always have a hard time deciding on sessions: I find it almost impossible to figure out which are worth going to, whether or not they’ll be a disappointment, and sometimes, frankly, what they’re about. Here’s a few tips to make your session my favorite session of the conference.

Make sure your title and description match your content

All too often I’ve sat impatiently in a session, wondering if I was in the wrong room or read the wrong description. Help a girl out and give me a real sense of what your session will be about. Here’s some simple guidelines:

• If your session is a general introduction to a topic, say “introduction” somewhere in your title. It can be difficult to differentiate the complexity of a talk by the description, and it’s frustrating to waste an entire session slot hearing things I already know.
• If your title has the words “applying” or “examples,” include detailed, practical applications or examples. I’m continually surprised by the lack of concrete examples and anecdotes during sessions. Don’t be vague: I’ll likely find a million products that use the principals you’re talking about when the conference is over. Your session is my chance to hear how things happened.
• Make sure your title and description are accurate. I just sat through a talk whose title included the words “[adjective noun]” and whose session did not include a single [adjective noun]. When somebody politely inquired, during the q&a, about an example [adjective noun], the speaker admitted that the field wasn’t so far advanced as he thought, and he hadn’t been able to find a single [adjective noun]. If this happens to you, contact the conference organizers and ask them to change your session information.
• If your talk is broad and conceptual, not practical, make that very clear. Concepts are generally widely discussed, taught in schools, and disseminated over the internet, and if you’re just recapping for those out of the loop, make this clear in your title and description. Use words like “overview” or “general thoughts,” and avoid words like “applying,” or “examples”.

Assume I’ve done my homework

Unless you’re introducing something very new, it’s doubtful that you’ll be covering any subject so obscure that I need more than a quick refresher, especially at conferences designed for my profession. If worst comes to worst, I’ll scan a few intro articles online while you’re talking. I’m here to find out things that I can’t learn anywhere else, so please don’t spend more than a few minutes on the basics. This isn’t to say that I don’t like hearing small product-specific trivia. Today I found out that there’s only eleven inches of comfortable viewing space if you’re standing arm-length from a very large touch screen, and that equates to only about 220px. Fascinating, right? Even better, the speaker didn’t force us to sit through a ten-minute overview of the history of touchscreen interfaces first.

Assume I don’t care about industry politics

Discussions about industry politics should not be included as part of my paid conference content unless it’s something that effects me on a practical level. In most cases, we’ve got very active listservs, blogs, and status updates for that kind of discussion, and that’s where it should stay. Conferences are pricey, and industry politics are fluff.

Give me something I can take back to my company

I’m here to learn about new things that I can apply to my work—in my case, specifically so that I can improve Scribd. At worst, I’ll hope for a single story, anecdote or idea I can use in my work, but hopefully the entire session is chock-full of useful content. And I think that sums it up. I know you’re smart, capable and great at your job—that’s why I’ve come to hear you speak. Help me out.

—Timoni

Obama 08!, or (inline) style versus class

If you’re like me, you’re always interested in other people’s markup, and it’s especially fun to see how the big news sites choose to style major announcements. Sure, most of them have clunky, hard-to-customize CMSs, and everybody uses inline styling sometimes (myself included!) but we can still take a cold hard look at how the sites rated in terms of best practices during the historic election results of 2008 and judge them accordingly.

Inline styles and other bad practices shall be measured in indignant tsks, and hoorays shall be doled out as we see fit. Without further ado, let the analyzing begin.

The Washington Post

No special formatting announced the new President-elect at the Post. For top stories, they have a standard h2 with a surrounding div that has inline styling, increasing the font size and added centering and padding.

Tsk rating: tsk tsk tsk. If you’re going to use inline styling, why not just put it on the H2?

The New York Times

The New York Times was excited; they had two specially styled headlines, both with inline properties for the font size (in pixels) and the text alignment. But there’s no particular reason they’d need a text-align=left on that first H2; maybe the CMS decided to play it safe.

Tsk rating: just one tsk. The similarities between the inline styles indicate their CMS is an opinionated beast.

Slate

Slate uses always images for their top stories; here, they announced the presidency in their standard Meta Black with an outer glow and mild gradient.

Tsk rating: tsk. They use alt tags properly, but don’t add their (interesting) subheads in the title tags. It’s a niggling point, but we’re going for best practices here—and anyway I can never truly approve of images as text.

The Times (UK)

The Times used their standard headline. They’ve got a lovely typography stylesheet and their grid is formidable—notice the padding-bottom-5 class; now that is thorough. Surprisingly, they still resorted to inline span styling for the red “Latest”.

Tsk rating: Ts-, as in half a tsk, or perhaps just a slight wag of the finger for the inline style.

CNN

CNN rather appallingly used a confusingly-named div and an anchor with inline styling (color: black and text-decoration: none, natch) to announce the election results. But it’s not surprising; on their homepage one may find anything from h2 anchors to divs replacing headlines to non-clickable “click here” prompts followed by anchors surrounding divs surrounding subheads. Phew.

Tsk rating: Dangerously high. They use hierarchical elements elsewhere on the site, but clearly don’t have a consistent structure in place, and their feature boxes are a hot mess. (Here’s an example.)

Fox News

Like Slate, Fox News uses images for some of their top features, although their major headlines and blurbs are usually text. In this case they shifted the layout, moving the (text) top stories down, to allow for a larger image.

Tsk rating: tsk tsk. There was no alt or title tag, and I want to give them a nudge in the ribs for that hard shadow.

The Chicago Tribune

Firebug shows a nice clean slate for the Chicago Tribune’s homepage. Bravo. Their lovely treatment of the announcement deserves special notice because, of the sites I’ve analyzed, they alone combined both images and HTML text. (Do you see how they do that, Slate, Fox News and the Washington Times?)

Tsk rating: Hooray!—although ironically, if you check out the site right now, you’ll see buckets of inline styles.

The Christian Science Monitor

The Christian Science Monitor used their regular top-story treatment (H1 inside a sensible div). What’s worth noting, however, is the number of stylesheets they use; on the homepage, I counted at least three, with lots of duplicate tags and properties.

Tsk rating: Hooray!, but a raise of the eyebrow about those curious duplicate properties.

The Wall Street Journal

Like the New York Times, the Wall Street Journal also pulled out the big headlines on Tuesday, using an an h1 inside a div with both formatting and layout-specific classes.

Tsk rating: Hooray!

The Washington Times

The Washington Times has a “cube” flash interface on their homepage announcing the top stories, all of which have the same large font size and gold color. Not suprisingly, there was no special treatment for Obama.

Tsk rating: tsk to the nth power. Even within the laissez-faire world of flash design, the Times has created an unusually fancy feature interface. Unlike the New York Times, which generally saves flash for interactive information and graphics, the Washington Times “cube” just serves up the news. Possibly for that reason, they’ve found it necessary to include a video tutorial teaching the less web-savvy “how to flip the cube,” but oddly, the example interface doesn’t quite work like the real-life version.

MSNBC

MSNBC gets the admiring slow clap. Not only did they use percentages for font sizes, they had useful class names and, apparently, a font-size: 500% h1 at the ready.

Tsk rating: Hooray!

—Timoni

On the Atlantic Rebranding

New Work: The Atlantic, from Pentagram

My coworkers and I spent some time yesterday talking about this redesign. Nobody liked it, and even though I’m often underwhelmed by Pentagram’s rebrandings, the ketchup-and-mustard sample cover was so scattered and cluttered as to be a Wolff Olins-sized disaster. What, I wondered, was Pentagram thinking? They have some of the top designers in the world; how could they sign off on that? In fact how did anybody come up with it in the first place? But then I saw these initial concepts. I love them. They’re bold, polished, and unabashedly stylish, all the qualities the final product lacks. Visually, they made perfect sense, which starkly illustrates the quality of the initial design offerings versus the final product. It’s clear Pentagram must have been dealing with a huge amount of client interference. You can see hints of both concepts in the final design: the left column is sort of a relic from the Believer/Harper’s hybrid, and the big headline list is just a dumbed-down version of the Swiss International option. Even the typefaces the Atlantic chose are compromises on the stronger initial offerings; both Titling Gothic and Mercury Text are modern, watery options designed to be ignored. It’s true that some of the interior layouts in the new design are bold and interesting, but it’s clear that, overall, the Atlantic missed out. At least Pentagram gets the satisfaction of seeing their concepts applauded in the blogosphere. (My personal favorite is the Believer/Harper’s hybrid, though most people, unsurprisingly, like the modernist Swiss Universal style.)

—Timoni

Notes on “An Insurgence of Quality”

Last Tuesday I went to see Alan Cooper speak at at IxDA SF’s monthly meetup. His talk was a repeat of the keynote he gave at IxDA Interaction 08, “An Insurgence of Quality,” and deals with the trials of making high-quality software nowadays. According to Cooper, interaction designers are the ones to “lead the way out of the chaotic world of misdirected, misdesigned, and mismanaged products to a world where high quality and high tech go hand in hand.” Strong words, but if you’re frustrated with the quality of the software being produced at your office, you’ll find the situations he describes familiar— and his solution inspiring. The talk got a lot of buzz during and after the conference, and I was excited to see Cooper in the flesh. He didn’t disappoint. Here’s the notes I took on the talk. If you find them interesting, I highly recommend watching the video of the keynote; he’s a good speaker, and it’s easier to follow his points during his presentation.

The Key Differences of the Post-Industrial Product Environment

• Best to market trumps first to market.
• Quality is more important than efficiency. (Compare earlier, innovative hard-disk MP3 players versus the iPod. See also the Newton versus the Palm Pilot.)
• It’s not what your software does, but how it *behaves* that relates to quality. Innovation is thus given a lower priority.
• In this field, with resources otherwise being plentiful, we have nothing but time to get the product right.
• The industrial world lowered production costs to make money. The post-industrial world raises quality to make money.
• Conventional methods of business accounting aren’t applicable to software. The days of quantifiable accounting are over.

A Little Bit About Programmers and Software

• Programmers are craftsmen. As craftsmen, they work to a quality line, NOT a deadline.
• Software is not industrial. It is not a product that has a direct correlation between quantity and value.
• Because it is both a craft and a replicatable product, software has both elements of pre-industrial (ie craftsmanship) and post-industrial products.
• Programmers do not respect authority, only ability.
• There is programmer calculus: “We have two different opinions. You have one vote. I, being smarter and more well-informed, have two votes.”
• Programmers are quick to adapt when it makes sense.

A Little about Business Types

• Managers are trained to focus on efficiency, product goals, and deadlines: these are byproducts of the industrial era.
• …Unfortunately for everyone, really, none of these benchmarks can be accurately applied to software development.
• Senior executives are essentially in denial about the fact that software can’t be mapped to industrial benchmarks. Mid-level executives are generally just trying to cope.
• It is essentially useless to try explain this to business people. Much like programmers are a specific type of person, so too the type of person who does business stuff is…well, a business person.

How Business Types Are At Odds with Quality Software Production

• Business types have an artificial sense of urgency, which leads to wastefulness. Cooper specifically mentioned it “drives him nuts” to see products that are pushed to market as soon as possible with the idea in mind that that flaws will be fixed later:

“Once you build a hack company, you’re going to get a hacked products from then on. It’s impossible to ask people to hack together something and then reevaluate the product immediately after with a fresh set of eyes.”

• In the production of physical products, the material used to design the concept product is different than the materials used to make the final product. It’s easy to differentiate between a clay model of a car and a final, metal-and-glass version. But software is code whether it’s in the design stage or the final stage. This is confusing to executives.
• Management is focused on the production of the software as opposed to the potential revenue. The question is continually, “How can we maximize cost effectiveness now?” versus “How will the quality of our product increase revenue later?”
• It’s genuinely impossible to answer a lot of simple business questions when it comes to software. For example, with estimating deadlines: “Writing software is like walking through a minefield. It’s really fast to get through…as long as you don’t step on any mines.”
• Executives are focused on putting out new features quickly, because “tech moves fast.” However, user goals change very slowly. There’s not really a need to “move fast.”

What can be done to right a wrong?

• Forget trying to wait on executives. Change can only come through a bottom-up battle.
• Use an interaction designer and a program designer to ease the gap between executives and quality.
• It is the responsibility of the IX designer and the program designer to free up the programmer to create quality products:
  • IX designers should have a detailed, written plan (this is effectively the “clay model car”) to show executives and make things clear for programmers.
  • IX designers need to have educated reasons for everything they outline. If they don’t, programmers won’t agree to it (see the “programmer’s calculus” below).
  • IX designers need to have outlined everything completely from the beginning to the end of the project. If they don’t, the result will be lost time and wasted code.
  • Program designers are the ones to take that extra day to estimate how long it will genuinely take to create something.
• IX designers should try to enlist the programmers to create quality products without the consent of management. “You have the power to make quality products, even though you may not have the power to get approval.”

Other Fun Tidbits

• As programmers, it’s your job to create successful products, not necessarily to innovate. This is because innovation comes naturally to the field. It’s the byproduct, not the goal.
• It’s a classic programming conceit to “plan to throw one away.” Keep in mind that business types have changed this to mean “the first, crappy 1.0 version is the one we’ll throw away.”
• “Companies can be achieving stellar results in efficiency while otherwise failing completely.”
• “We are the ones to lead the insurgency, and the time is now.”

—Timoni

On Design Versus Customization

I saw three panels yesterday that all touched on the definition of design–always a tricky subject. Whether by design or simply because the ideas are in the ether, they complimented each other in a very pleasant way.

The first panel was Jared Spool’s “Magic and Mental Models: Using Illusion to Simplify Designs”. Spool has no angst about the meaning of design; his focus was on ways to keep the user engaged, and, in his words, “delighted.” The second was the panel “Designing for Freedom,” in which Anil Dash, Brent Simmons, Braden Kowitz, Michael Lopp and David Warner outlined various formulas for creating designs that allow for (or can simply withstand) user customization.

The final panel, the one that brought it all together, was “Does Tomorrow’s World Need Designers?” It seems like a reasonable question, what with the ever-growing trend of product customization and crowdsourcing design, that in the end a professional designer might well be a redundant field.

There were a few different opinions: David Merkoski’s final word was that a world without designers was something the average brain can’t yet conceive–but it might happen–in fact, “right now there is too much design, and too many problems being solved.” Alonzo Canada’s view was simply that anybody can be a designer, and so the design profession would simply be absorbed by the creative, technologically empowered public. Johanna Blakley went so far as to say that “everybody has the ability to make what they need.” With all the evidence at hand, is the design profession endangered?

It’s clear that one can only seriously consider the question if “design” and “customization” are used simultaneously, and indeed they were throughout the panel. But there’s a clear difference: just because things are customizable doesn’t mean they weren’t designed first. I can picked out the colors of my Nikes, request extra pockets on my courier bag, or even make my own scarf/table/house, but in every case I’ll be working off designs someone else created. In fact, “Designing for Freedom” specifically dealt with the problems of user customization: how much freedom should users get? do you give them a limited set of colors? Constrain their options in other ways? Or just let things be a free-for-all, MySpace-style?

In a similar vein, most of the crafty, small-production amateur work one sees on Etsy and at craft fairs is not so much designed as simply decorated; fun, and often beautiful, but mostly the customization of familiar products. It’s a subtle distinction sometimes: compare these printed tea cozies or, more famously, user-submitted t-shirt illustrations with Lorena Barrezueta’s beautiful and clever series of ceramic pots and pans.. The former are simply pre-designed blank spaces for illustrations and decorations; the latter was a designed composite of a familiar object and an unlikely material. So much for “everyone being able to design anything.” And in the case of the hobbyist gadgeteer (like the MAKE crew), large-scale adoption will simply open more doors for interested designer partnerships.

The internet is partly to blame for the blurred lines between professional design and user personalization. I routinely say I “designed” this blog, but it’s understood that I didn’t design the whole thing so much as tweak the components Wordpress gave me. The most accurate description is that I customized my blog. In casual conversation, this distinction is unnecessary–but when there is so much confusion about designing a thing versus customizing a thing that the very profession of design is called into question, it’s time to start being as specific as possible.

As Jared Spool touched on in his panel, designers will always be necessary to create those things that are “delightful”–those things that Spool cautions are soon familiar, and eventually expected. And then, of course, users and consumers will customize on top of those great designs. In other words: rest easy, designers: you’re still needed.

—Timoni

On Finer Points in the Spacing and Arrangement of Type

I have a confession to make: I have never managed to get more than fifty pages into Robert Bringhurst’s The Elements of Typographic Style, aka the typographer’s bible. I’m not sure why; the writing is fine and the subject matter is fascinating, but for some reason I pick up the book and never manage to finish. By contrast, I received Goeffrey Dowding’s Finer Points in the Spacing & Arrangement of Type as a Christmas gift and read the whole thing in double-quick time. It is neither a well-known nor particularly lauded book on typography; there are only six reviews on Amazon (versus Element’s seventy-six), most of which are written with the caveat that Finer Points really is just the finer points, possibly a worthy addendum to your design library but then again, maybe not.

image via typography.com

I disagree. Finer Points is picky, stodgy, snobbish and inadvertently hilarious, probably one of the most entertaining books you could read on the subject of typographic composition. Unfortunately for everybody, the current (used!) running price is $80, a rather prohibitive dollar a page. Accordingly, I’ve transcribed a few quotable gems from Dowding to tide you over until the next printing. (The headlines are mine, but italics are his—Dowding was rather fond of italics.)

On the importance of letter-spacing in creating an even texture in body type

‘The colour, or degree of blackness of a line is improved tremendously by close word-spacing. A carefully composed text page appears as an orderly series of strips of black separated by horizontal channels of white space. Conversely, in a slovenly setting the tendency is for the page to appear as a grey & muddled pattern of isolated spots, this effect being caused by the over-widely separated words…But whenever word-spacing is increased beyond the thin space care must be taken not to increase it to the point where the line ceases to be a unit.’

On those pesky Modern fonts

‘In faces of this modern group (Bodoni, Walbaum, etc.), the extreme contrast between thick and thin strokes, and the weakness of their hairlines and unbracketed serifs tend to dazzle and tire the eye. Neither these, nor the sans serifs, are really suitable as designs for continuous reading…Even when the short pieces of copy are set in faces the greatest care must be exercised in arranging the settings—measures must not be too wide and the lines must always be leaded generously.’

On hyphenation, and why it is to be embraced

‘Many books have been set without the division of a single word. But it is obvious that consistently close and even spacing cannot be achieved—except in the most unusual circumstances—if the typesetter has resolved never to divide words. Such works would rarely, if ever, be of any typographic distinction…It is a most unfortunate fact that many apprentice compositors are still being taught that to have more than two successive line breaks, i.e. lines ending with a divided word, is bad practice. This kind of training encourages the easy, slovenly solution: it is infinitely preferable to have a number of break lines succeeding each other than to have widely-word spaced lines.’

On the ampersand in body text, and why it is to be embraced

‘In hand-composition the use of the short ‘and’, as in this sign (&) is sometimes called, is completely justified in all cases where the considerations of good setting demand it, that is, when the spacing of the line, and consequently of the panel, column, or page, is improved by its use. By setting an ampersand in place of ‘and’ a little more than the width of a normal letter is saved, and this apparently small saving often makes it possible for another word or part of a word to be accommodated in a line. Frequently in ephemeral printing the use of an ampersand saves the copywriter from being asked to alter his copy in order to tighten the spacing of a gappily spaced line, or to avoid an awkward word division.’***

On those pesky quotation marks

‘The use of quotation marks never improves a text setting. Whenever the meaning is clear without them they should be omitted…If their absence is likely to cause confusion then use single quotes only, never double ones, except when a quotation appears within a quotation…Double quotation marks introduce an excessive amount of whitespace into the lines however carefully they are set and so destroy the even color of the lines, and, if there are many of them, of the page.’

On altering awkward punctuation

‘But as type bodies increase in size, the number of punctuation marks that it is necessary to watch multiplies. Beware of using over-large quotation marks, e.g. those designed for use with Gill Extra Bold or Ultra Bodoni. They are gross, and like most gross things, ugly. If quotation marks must appear in these settings in these types they should generally be set two sizes smaller than the body size of the words they enclose…Often it is possible to omit quotation marks altogether in headlines without any obscuration of sense & with an immense improvement in the appearance of the setting. This improvement is especially notable in fonts with extremely ugly quotation marks, e.g. in Rockwell & other members of the Egyptian family of faces.’

On underlining

‘Underlining as a method of emphasizing a word or phrase in a displayed setting is a crude relic of Victorian typography.’

It is worth noting that a lot of what Dowding recommends is virtually impossible with even the most advanced layout programs (e.g., you cannot usually automatically set letterspacing only within a word), much less CSS (for an overview of the sad state of hyphenation, you can visit The Elements of Typographic Style Applied to the Web). This does not mean that these rules are not worth knowing, only that to replicate them will take at least as much time and care on the part of the digital compositor as the physical.

A few things are genuinely impossible, such as maintaining font fidelity on web pages to the point that one can reasonably expect when an ampersand substitution would be warranted. But this is what technology is for; and as it improves and digital typography comes into its own, we can hope that such arrangements will be automatically accounted for.

* Most.**

**Okay all. Every single person.

***If you are like me, you are probably reading this bit with some incredulity. How on earth is the ampersand to be read comfortably in body text? However I only noticed the ampersands for about the first five pages, and after that read them as smoothly as any other word.

—Timoni

On Seeing Tufte

Today I went to a course by Edward Tufte, the Yale professor and information organizer extraordinaire, at the Grand Hyatt in downtown San Francisco. Despite the prohibitive price tag ($380 for six hours), I was really excited: he has beautiful work, and you get fine hard-cover editions of most of his publications besides. I knew some of his work, but had never read the books. They are gorgeous and worth every penny.

Tufte is lean and small and academic, with pleated slacks and wire-rimmed glasses. The only jarring things were the massive rings on his fingers (six: four on his right hand, two on his left) and his occasional bursts of irritation at the current administration—otherwise, the whole day turned out to be a plain ol’ college lecture, where we calmly got out our books and turned to this-or-that-a-page and patiently took notes on pads provided by the hotel. Odd sidenote for the techie bunch: I turned check about three times, but never saw a laptop open in the crowd. One person unfortunate enough to be checking his phone after lunch was duly chastened: “Don’t look at your cell phone right now—we’re talking about Galileo. Geez.”

The lecture started off with a nice visual representation of one of Chopin’s lullabies, while Tufte gave an equally nice overview of the levels of information being described: time (past, present, future), spacial representation of tone, color, and so on. Thereafter my notes usually devolved into quotes, which reflect his general themes of data quality, credibility, and simplicity.

When you start to strip detail from your presentation, you lose credibility.

To clarify, add detail.

Document your stuff, and provide reasons to believe.

You’re trying to evoke a content response, not a design review.

Tufte had a passionate aside about “chart junk” and how you should question the intent, nay, the integrity of the organization who would present data with bright blue gradients. On a practical level, he mentioned twice that cartography is a good reference point when trying to display data that overlays other figures. In fact he recommended stealing and copying whenever possible:

Look for excellent conventional displays, in most cases.

The idea in analytical design is—don’t be original, do it right. Steal from good examples. Find a good metaphor.

For those who would decry large and complicated tables as an efficient way of displaying data, he mentioned stock charts and sports statistics. I love this; so often in web design I hear that things need to be dumbed down in order to be digested by the masses. I’ve often wondered what the real benefit is: less customer service?—is that the goal of a site? Nielsen notes users will put up with a lot of irritation before they’ll leave a site, and Norman adds that users will actually blame themselves when things are poorly designed. Clearly life should be better, and design can improve everyday irritations substantially. Nonetheless Tufte puts an emphasis on taste and quality over accessibility, and this is refreshing.

It seems there is a misplaced egalitarianism about design that I’ve noticed in many a dull meeting: something like, “Ten-point Hoelfer Text may be all well and good for you design types, but fourteen-point Arial will be understood by those people who [somehow] cannot read or understand anything else. Nevermind that people visiting the website/reading the article/looking at the sign will have overcome many a better-designed obstacle to get where they are, looking at our material; when it comes to us, concessions must be made.” Tufte does not hold with such nonsense. About page three, my notes summed up the general theme “…He continually reminds you that your audience is not stupid, and is in fact as capable as you are.” But here are a few direct quotes:

Think of your audience as busy, not stupid.

People aren’t going to get any more confused than you are.

(And how to avoid confusion in general? “Annotate everything,” and a reminder that in most cases, with tabular data, “This is a solved problem.” Additionally his love for sidenotes matches my own, and makes me wish I’d found a reasonable sidenote solution for this blog with CSS. If anybody knows how to do it without absolute positioning, let me know.)

The last few paragraphs are not to indicate that Tufte prefers design to usability. In fact quite the opposite. There is no mercy for those who would “put lipstick on a pig,” that is, dress up otherwise useless information. Tufte actually prefers annotations to a lot of usually unobjectionable cartographical conventions: “…codes, legends, and other fooling-around are impediments to learning.” This is an uncharacteristically website-friendly point of view, where the static position of a legend leads to a lot of useless scrolling. Frankly, it’s clear that legends can be useful, when they are useful and easy to memorize; Tufte’s examples of their failings were all print, and involved awkward page breaks. But there’s a lot to be said for describing visual verbs, like arrows: just adding a bit of descriptive text can make up for any number of awkward map keys.

---

After lunch, I was hoping for more in-depth practical examples, and maybe some guidelines, about the visual problems Tufte had described earlier. Since I’d arrived ten minutes before the course started, I hadn’t realized (unlike this attendee) that a lot of what he was saying aloud was quoting verbatim from his books. I did, however, already knew about sparklines, and was disappointed to find that was all Tufted had slated to talk about for the next hour. Sparklines are tiny little fever graphs, the height and width of regular words, designed to be used inline with text as a tidy visual of whatever data you’re interested in, and they are super neat. Their practicality is obvious and the idea is really easy to grasp. In short, they are so fabulously intuitive they do not warrant an hour’s worth of explanation.

Tufte ended the day with (a) a long analysis of why Powerpoint, and more generally shallow outlines, totally suck (and can lead to death), (b) how to glean the correct information, or at least know what you should be looking for in a meeting; and (c) how to shorten up your presentations.

Along with most people in the audience, I already hate Powerpoint, not to mention any designer has a burning desire to destroy any program that only allows nudges in inch increments and has a native resolution of 180 x 200px—so Tufte’s explanations added fuel to the fire, but did not really change anybody’s mind. As for meetings, I’ll duly write what he prescribed, but I’ve never been in charge of a dull presentation, and aim to never be in charge of one. Here are the tips:

• Only show full-sized, useful pages and videos during presentations. Otherwise:
• Write up an executive summary, about two hundred words or so, and
• Then outline the rest in a nice tabloid-sized paper, printed on both sides, which costs very little, and can hold an amazing sum of data, which is useful because
• The person you’re presenting to is quite busy, and can read a lot faster than you can talk, especially with those ridiculous Powerpoint slides*

*I added that last bit.

More importantly, he added a few key things to remember if you are ever an Important Person getting information from a Powerpoint or other badly organized presentation:

1. What is their story?
2. Can you believe them? What’s their credibility?
3. What is the domain specification? (In other words, to what, exactly, is this relevant?)
4. What do you really need to know? (And this last question should get you out of the room.)

A lot of the second half of the lecture was so transparent that I can’t wholly recommend the course to interested designers. It’s worth getting the books, but once you have them, the data overlaps too much to justify the price tag. Having said all that, Tufte is interesting and charming, and a good speaker. I’ll leave you with a few last quotes on creating interesting information graphics:

Analytical design is content-based, which in turn leads to elegant but transparent architectures.

The idea is to create interesting comparisons. The question is always, “Compared to what?”

Compared to what? That’s always a good question.

—Timoni

On the confusion between creation and instinct

I have been reading Designing Visual Interfaces: Communication Oriented Techniques for the last few days and have been charmed by the UI examples (cira 1995, or earlier), and the authors’ assertions about the uselessness of of “simulated brushed aluminum buttons” and “gratuitous dimensionality” in interface design. I’ve also found the book to be incredibly useful in detailing what later books take to be common knowledge about the graphic aspects of user interface design. Their positive attitude about how proper design techniques can be learned is reassuring, too, especially when it comes to basic things most would consider innate talent: “With practice, your eye will become trained to recognize exactly how much space is needed to achieve the proper balance between figure and ground,” and so on. Well, hooray!

From the cover

On page 89, they remark on purposefully organizing information, and why:

Organized structure does not occur naturally in man-made artifacts, so it must be consciously induced by establishing relationships among the components of the design. Effective use of structure allows individual elements to work in concert without being diminished in their own right.

But this lack of faith in humanity’s ability to organize is followed with:

The eye craves structure and will seek to impose its own organization onto a design whose structure is not readily apparent. This breakdown threatens communication, since the designer is no longer in control of the message.

So the immediate question is: why does your eye (or mine, or anybody’s) want to impose structure on visual elements it can’t naturally organize? Is the problem at the end, when there are too many paths and variables, and people can’t remember how they decided to organize things? Categorization via tags is a nice solution, allowing a significant number of paths to be recorded very quickly and retrieved just as quickly. Nonetheless the dichotomy between organizing information and imposing organization itself is curious. It’s clear that people want data to be organized, to the point of overwriting whatever faint attempts at aesthetics the light-handed designer might attempt. This is considered bad design, obviously: making the viewer work too hard only leads to confusion. Good design strives towards absolute clarity (attractive absolute clarity, really, because not everybody likes International Typographic design as much as designers do), but oddly there are already standard rules and regulations of good design, things that can be written down like a list:

• Take care with the mixing of typefaces
• Obey thee the rules of hierarchy when organizing important bits
• A pica in the middle means a pica all around

And so on, but somehow these are ignored or otherwise not apparent when it comes time for the untutored to fire up Word and make a flyer. It’s clear from the prevalence of bad music, bad art and bad film in this world that just because people want things to be a certain way doesn’t mean they can sit down and make them that way. Nonetheless when people listen to bad music or look at bad art, they’re only disgruntled. With design, people try their best; they look, they look again, they’re irritated, they use rulers or eyeglasses or their fingers as markers; they write things down a different way, and reorganize information until it makes sense to them. People instinctively want to organize their data in simple and practical ways. If the basic rules of design are the answer, and so clear they can be summarized in a page or two, why do they need to be written down at all? Why aren’t they instinctual during the creative phase?

—Timoni

In Defense of the Blink Tag

It was all the Advantage’s fault: their website immediately brought to mind the permanently underlined links, animated gifs and all other discarded relics from Web 1.0. The tags, the red italicized Courier Bold on bright green, the weird grey-and-serif: to be frank, I totally dig the site, and more than that, it reminded me of my love for <blink> tags.

I know they’re irritating. I know they were completely misused. But if Bertin’s retinal variables are:

• size
• value
• orientation
• texture
• color
• shape
• position

Then the blink tag is the HTML tag that truly makes use of the dynamic possibilities of the digital medium beyond what’s available in a conventional (e.g., paper) 2-d setting. The <marquee> tag is technically just a bastardization of positioning—not to mention it makes text less readable. But a properly used blink tag could be useful and graceful to boot.

Examples of the variables, in themed colors

Unfortunately, there is no way to properly use a blink tag. You can’t define how often it blinks or how many times, or how quickly it fades in or out; and without being able to control those variables, you end up with a dynamic element that outlives its usefulness. Generally speaking, whatever information you’d highlight with a blink tag needs to be noticed immediately and then acted on—at which point the blinking is just a distraction from the next important bit of data. If there was a way to have a blink tag turn off and on two or three times when a page is first loaded, they might still be around. We make fun of animated gifs, to be sure, but we still use them, and the ones we make fun of are usually simple and looped. But so far as I can tell, there is no way to manipulate the blinking of a blink tag, and the only built-in property seems to be “universally hated by everybody.”

—Timoni