Helvetica Type Blocks / CC License

I just watched the documentary Helvetica. It scratched an itch of mine, which is peering over the wall into the design world. The design of fonts particularly hits home, since it bridges two worlds I live in: that of computers and that of writing.

The film is intriguing, as it explores not only what goes into a typeface, but what people read into a typeface. Helvetica is ubiquitous. You have an opinion of it, even if your opinion is not to notice it.

While the film was about Helvetica, for me it morphed into a film about code. In the same way Helvetica and other fonts are designed, my day to day job is to design code. This is what I do. It is what I love.

Like fonts, code can be good, it can be bad; it can fail miserably, it can succeed widely; people can agree on it, or disagree on it. For those that practice the trade, it is their life, but to everyone on the outside, it’s a mystery often best left ignored.

I’m at my happiest when I design code. Not when I mechanically write it, not when I sling it with reckless abandon, but when I design it and it becomes beautiful.

I can only hope that I’ll have the fortune to write code that one day becomes as influential, as ubiquitous, as hated, and as loved as

Helvetica Poster / CC License

Helvetica

My sickness is that I’m fascinated by human behavior, by what’s underneath the surface, by the worlds inside people.

- Johnny Depp

As you open the packaging and peel back the carefully wrapped tissue paper, those are the first words that great you, written in a black bubble on a white sleeve. The sleeve slides off to reveal the beautiful packaging of your Mental Notes – a black faux leather case with a brain etched to one side.

Pulling on the case top, it resists for a minute until the force for the magnet is broken, and it flips open to a felt lined interior. The first thing you notice is the pack of cards and the directions booklet sitting on top of them.

Calling them directions is too straight forward. It’s a suggestion and a why booklet. Suggestions on how you might want to use the cards, the reason the cards are designed as they are, and the reason they came about.

Then you open the cards. They have heft, due to their stock and the amount of them. The color of the cards is muted: a light blue back, grays, whites, and blacks on the front.

The first thing to hit you is the image on the top card. It’s simple, but clearly evokes the title of the card.  The card is adroitly broken down. A title for the concept. Then a category, followed by a brief description. Next is the image, after which is a paragraph of explanation text. Wrapping it all up are suggestions of related and contrasting cards. It nicely encapsulates an aspect of human behavior, putting it into an actionable piece. It’s a perfect reference that helps to keep the idea at hand. Best of all, there are fifty of them in this pack, putting a wealth of scientific research at your fingertips. A wealth of information with which to make the world a better place.

Then you put them back in the case, putting your favorite in the pocket that seems to have been provided just for that purpose, knowing you’ll revisit the cards many more times, because they’re useful, and also beautiful.

Mental Notes

This post is based on Abe’s presentation, but has been embellished. All the good points are his, all the low points and errors mine.

Feelings are a nebulous thing, yet there is no question design evokes them. We can no more suppress feelings than we can avoid design. Given the ubiquity of feeling, how does one go about creating a design that takes them into account?

Focus

Start with focus. What is an activity based around? Figure that out, then design the product tightly around that activity.

Some examples:

The Flip. People make videos to share, so make sharing as easy as possible.
Basecamp. Project management is collaboration, so make collaboration as easy as possible.

Focus caused these products to shed features that took away from their main purpose. As a consequence, they became simple to use and their adoption has been high.

Empathy

Empathy is feeling your user’s pain. How does a company become empathetic?

It starts with a mantra. A mantra is not a mission statement, it is an essence. It is three or four words that capture the company.

Some hypothetical examples from Guy Kawasaki, who developed the idea:

Healthy Fast Food  -  Wendy’s
Democratize Design  -  Target
Peace of Mind  -  Federal Express
Authentic Athletic Performance  -  Nike

Beyond the mantra are principles. Principles are one or two sentence ideas that guide the company more explicitly than a mantra.

Google’s potential principles:

• Every millisecond counts
• Add a human touch

Existing next to the mantra and principles: make the future tangible. It’s human nature to respond to what we can see, touch, hear, smell, and taste – even if it’s only in our mind. Goals that are concrete are easier to obtain.

An intangible future: We’ll be the best fast food company with the happiest customers.

A tangible one: We’ll create the juiciest burgers so our customers have to use a napkin.

More tangible futures: We’ll create a phone that excels through design.  We’ll create a set of cards that provide a reminder of human behavior.

Mantra and principles keep the goals of the company front and center, providing focus. If something doesn’t help fulfill the mantra or principles, it gets dropped. Having a tight focus keeps the user’s needs and feelings in front of you.

Being tangible lets you put your product in front of customers every step of the way. They can play with, even if it’s a sketch with a sharpie, or a box, or only a block a wood. They can provide feedback; you can adjust. Either with changes to the product, or by changing customers.

You have options, because you made it real, with empathy and focus.

Design, Focus, and Empathy

Designers on the web are experiencing a bit of a revolution that is summed up in a few words: measure everything.  Led by the likes of Google, every click, every eyeball movement is tracked to see what the user does next, all in an attempt to answer the question: what works best?

Design no longer is the purview of instinct and feeling; it has become more analytical.  My characterization here is crude and not wholly correct.  There are shades of gray, as instinct has its place and measurement can’t tell us everything.  Since I am not a designer, I’m not enmeshed in the design world and can’t speak to everything that happens.  I only follow along from the outside as a curious and interested spectator.

I don’t think most designers would argue that design has become more and more about measurements, conversions, and click through rates.  And this isn’t necessarily a bad thing.

However, all this focus has fallen in the visual design and user interaction arena.  One place that still gets neglected is that of copy design.  For those of you not aware, copy is the term used to refer to the written part of a website or a magazine, as opposed to the images and layout.

The web is more words than images, although Flickr and YouTube are doing their best to change that.  Day in and day out, you get around the web by reading.  It stands to reason that what the web says is as important as to how it looks.

Typography gets a lot of attention and for good reason, as fonts matter.  A font can catch your eye or set the mood.  Often fonts are compared using the pangram “The quick brown fox jumps over the lazy dog”.  This is great for evaluating the font, but if a font isn’t used to say anything, what use is a font?

Shouldn’t copy – what a website says – be given as much attention as how it looks?  Changing copy can quickly fix problems that otherwise would be difficult to deal with, as Joshua Porter shows.  Copy can affect conversion rates.  Dustin Curtis tweaked the words that pointed to his Twitter account and saw a measurable difference in click though rate: a 173% difference.

The design world already knows the work of Edward Tufte.  It should also know the work of his wife mother, Virginia Tufte. She wrote the book Artful Sentences: Syntax as Style.  It’s a book that does nothing except examine sentences.  The fact that this can be done speaks to the richness of language and suggests that we all should pay more attention to it.

So I ask: where are the copy designers?  I expect that over the next few years we’ll see them appear.  If they don’t appear explicitly, current designers will add copy design to their repertoire.

Words matter just as much as looks.  How much opportunity is your site passing over just because your copy lacks power or style?

Two sentences highlighted by Viginia Tufte in Artful Sentences: Syntax as Style:

I feel – and the anxiety is still vivid to me – that I might easily have failed before I began.
- V.S. Naipaul, Literary Occasions, 195

The desire to move on, to metamorphose – or perhaps it is a talent for being contemporary – was given to me as life’s inevitable and rightful condition.  To keep becoming, always to stay involved in transition.  It was all she and my father had ever known.
- Arthur Miller, Timebends: A Life, 4

Thanks goes to Jason Rudolph for the conversation that sparked this post.

Where Are The Copy Designers?

Looking back, I don’t remember all the points Nathan highlighted, however, at the time the ones that most struck me I wrote down in my moleskine.

One of the points was that of the smallest effective difference.  This is where elements are separated by the smallest distinction possible, so that they are distinct and easy to follow, but so that the eye isn’t overwhelmed by the divider.  An example of this would be having a thin gray line dividing boxes, as opposed to a thick black bar.  This principle stuck out to me because I realized it often shows up in calendar grids.  Google calendar uses this to great effect.  Each block is marked with a thin blue line in Google calendar.  This also has the side effect of maximizing space.

The other principle that struck me from Nathan’s talk is that content influences design.  Nathan used an example from his own design company to showcase this.  He talked about how as they designed the website for Peace College the Alumnae Affairs department at Peace College the homepage design was designed last and was influenced by the content of the second level pages.  How could they have known what needed to be highlighted on the homepage without knowing the content of the other pages?  The hierarchy of the second level pages also influenced how the layout and navigation of the homepage was to work.

Once it is shown to you, realizing that content influences design seems obvious, yet as most of us go through our lives we continually ignore this fact, leading to suboptimal designs.  What tends to be designed is one size fits all, and while there is a place for systems like that, more often than not they lead to inefficiencies.

The ignorance of content influencing design even shows up in programing.  All to often, we programmers build the scaffolding of our programs first and then later insert the all important content, squishing it into the scaffolding we’ve built.  This leads to logic that is warped to account for the scaffolding, instead of the scaffolding changing to accommodate the logic.

DSLs (domain specific languages) are one way that content influences design in programming.  The content becomes the design of the language.  While it’s still possible to have a badly designed DSL, a DSL is closer to the content than a generic language will be and this should lead to greater efficiencies in design.

Nathan’s points were well taken.  While I’d heard of Tufte, not being a designer myself I’ve never taken the time to read his works.  I’ll need to rectify that, as it’s clear that principles that apply in the design world also have applicability to the world of programming.

Content, Design, and Tufte