Typography for Lawyers: Essential Tools for Polished & Persuasive Documents
by Matthew Butterick

I may not be a designer, but I represent a design company. Each document that leaves my office needs to look deliberate, thoughtful, and legible. And no matter what your resume claims, you’re not proficient in Word until you can nicely format your work.

Enter Matthew Butterick, an attorney/digital type designer. His book, Typography for Lawyers, codified my gut reactions to basic design mistakes and armed me with the tools to fix them. Don’t let the title deceive you. This book applies to anybody who writes on a regular basis. Butterick’s work mixes philosophy with practical how-tos; he focuses on the functional, not the needlessly fancy. For example, rules come with explanations:

I know that many peo­ple were taught to put two spaces between sen­tences. I was too. But these days, using two spaces is an obso­lete habit. The prac­tice was passed down from the typewriter era. Type­writer fonts had unusual pro­por­tions. Using two spaces helped set off sentences a bit bet­ter. We don’t use type­writ­ers any­more. So it’s not stan­dard. It’s not part of typo­graphic prac­tice. Once in a while, you can use two spaces after sen­tences. When? If you’re forced to use a typewriter-style font. These are also known as monospaced fonts.

Butterick then illustrates his point by reproducing the same paragraph with two spaces between each word. His suggestions demonstrably improve your writing’s readability.
It doesn’t take much effort to put his advice into effect, either. Want to keep two words on the same line? You’re a [Ctrl]+[Shift]+[Space] away.

Check out the companion website for a glimpse, though I recommend actually buying the book. It includes more visual examples, better guidance for choosing a font, and word processor‑specific advice. I’ve kept a copy on my desk since the day it arrived.
–

20 Things I Learned About Browsers and the Internet
by the Google Chrome Team, Illustrations by Christoph Niemann

This Google primer was designed for readers with little to no knowledge of the inner workings of the World Wide Web. I use it as a resource for clients unfamiliar with the industry. It’s from a credible source, concise, and beautifully designed to boot.

The online book covers topics directly related to our process (Thing 4: HTML, Javascript, CSS and More/This Is Not Your Mom’s AJAX) and general Internet Education (Thing 14: How Modern Browsers Help Protect You from Malware and Phishing/Beware the Ne’er-Do-Wells).

Many basic primers sound condescending or skew intimidatingly technical. This book respects its audience while acknowledging that these topics are outside of their comfort zone. I initially thought of the book as an advertisement for Google, as it was written by the Chrome team. However, I was pleasantly surprised to find sentences like this one:

Upgrading to a modern browser — like the latest version of Mozilla Firefox, Apple Safari, Microsoft Internet Explorer, Opera, or Google Chrome — is important for three reasons…

Though the document naturally has a slight Chrome bias, it promotes all modern browsers — a moral we can all stand behind. The interactive book embraces HTML5, with lovely page turns and dynamic elements that render well in all modern browsers. For those truly fearful of the Internet, Google’s also provided a PDF alternative.

–

Apple Style Guide
Business writing requires consistency. Chicago Manual of Style and the AP Stylebook have reigned for many years, but are irritatingly slow to adapt when it comes to technology. For example, AP changed “Web site” to “website” in April 2010 — years after the tech industry adopted the single-word spelling. I simply don’t trust either company to arbitrate “touchscreen” vs. “touch-screen.”

Luckily, Apple regularly posts a free copy of their in-house style guide. This PDF not only settles office arguments on the correct usage of “front-end” (Answer: only use the hyphen for adjectives), but also functions as a quick glossary. The real gem is the Style and Usage chapter, though functional spec writers might find interesting nuggets in the Technical Notation and How to Write a Glossary sections.

Can’t stand anything Apple or crave more content? Try the just-released fourth edition of the Microsoft Manual of Style. It’s been eight years since the last update, and so far the reviews say it was worth the wait.

I’d never seen this particular point articulated so bluntly, but it reinforced a philosophy that we’ve always worked hard to embody in our client work. We partner closely with our clients to help them understand that the “why” of a project is just as (if not more) important than the “how.” To that end, our approach includes a few steps that, while not necessarily difficult to execute, are often overlooked and can lead to underwhelming results.

In order to better understand the distinction between usefulness and usability, let’s explore a hypothetical website project for Lassie’s Dog Walking Company. LDWC is a new company and has come to us to create a website. The stated goals are to improve exposure, facilitate contact, generate leads and convert leads into clients.

Know Your User

When it comes to both usefulness and usability, it is absolutely essential to have a thorough understanding of your target audience, its behaviors, needs and expectations. By identifying this user information, it becomes easier to optimize the web experience around the needs of the people you’re trying to reach. At Manning, we produce a user experience matrix that helps visualize the different user segments and how they might interact with a website.

This matrix has been greatly simplified for the purposes of this example, but it is not hard to see how this process begins to uncover details that will help guide the architecture and functionality of the site.

Create a Useful Website

Once we understand the users and their needs, we are able to use this information to create the site architecture, content and user interface in accordance with basic criteria for usefulness:

• Be accessible.
• Provide the content users need.
• Facilitate the functionality users expect.

We apply these criteria to the entire site, but for this example let’s focus in on a specific portion: appointment scheduling.

We know from the user experience matrix that LDWC has a segment of users who are current customers interested in using the web to schedule their next appointment. So for the new website, we will be including a section that includes scheduling information and an online form that will allow users to schedule their next appointment. The wireframe for this feature might look something like this:

So by arriving at a better understanding of our audience, we’ve ensured that, first and foremost, we build a site with features that these users will find useful. But let’s not stop there. Now let’s look at how paying even more attention to user behavior can help improve usability.

Improving Website Usability

So our site provides the ability to schedule appointments online and customers love it. LDWC is getting appointment requests more frequently and with less staff time required. However, some customers are complaining that the online process seems difficult to use. Additionally, site analytics show that 30% of users who start the form give up before submitting it—indicating that they are having difficulty inputting data or experiencing other problems.

Clearly customers are finding this feature useful, but there seems to be room for improvement with regard to usability. After user testing, interviews and data analysis, we determine a few potential areas for improvement:

• New page – The form requires users to visit a new page to fill out the form. Some users are discouraged immediately by this additional step.
• Required fields – The form requires all fields to be filled out in order to process. Mistakes are difficult to identify and correct. Users become quickly frustrated.
• Amount of information required – Users are intimidated by the prospect of providing a lot of information about themselves, their pet, the appointment.
• Sense of progress – There is no indication for users what point of the process they are in or what they can expect to happen once the form is submitted.

In order to improve form usability, we change the way the form functions.

• The form now launches in a popup lightbox within the user page. This keeps the user from having to visit another page, and makes appointment scheduling feel more like a feature of the user page rather than an entirely separate function.
• The required information is now broken into more manageable chunks. This allows the user to provide the requested information according to logical groupings and without being overwhelmed by a large number of fields.
• The form steps are clearly marked with a progress indicator. This gives the user feedback that encourages completion.

After a few months of using the new form, online scheduling requests are up nearly 30%. There are far fewer complaints regarding the process. However, it is clear in analytics that when users do not complete the form, it is almost universally in the appointment scheduling step. In order to further improve usability, we perform additional user testing.

Observation of user testing shows that many customers are struggling to correctly input the date of their appointment requests. They are either unsure of the calendar date they would prefer, or they struggle to format the date properly, causing the form to fail.

To make the Date field easier to use, we provide a calendar date picker. This feature allows users to choose dates according to day of the week, and also ensures that the date is properly formatted every single time. After a few months of implementation, appointment requests are improved by another 15%.

Hopefully this example illustrates the differences between usefulness and usability and shows that by giving proper attention to both, you can continually refine the user experience.

A new iPad App conceived and developed by Manning is part of a campaign that goes on the offensive against a CareerBuilder Superbowl ad that uses chimpanzees.

Our app, Chimps Should Be Chimps, is being used as part of the The Lincoln Park Zoo’s protest against CareerBuilder’s upcoming ad.  The story was picked up by NBC Chicago, the Chicagoist and the Chicago Sun-Times.

This CareerBuilder ad reminds us that the message of Chimps Should Be Chimps remains timely. The app allows us to reach a widespread, targeted audience and easily update and distribute the content. For fans this Sunday: if the big game is a blowout, and the commercials seem stale, there’s a another option to turn to.

Erik worked as a multimedia specialist at the University of Connecticut where he produced, shot and edited video and multimedia projects for University Communications. His work included creating recruitment programs, marketing and news pieces.

He has extensive experience with non-linear editing, 2D and 3D graphic creation, shooting with a variety of HD camera formats, and video compression. And he sometimes even stars in his own work.

At Manning he’ll be responsible for video projects and integrating video into our digital interactive work. In his spare time Erik has a passion for stand-up comedy, guitar and playing ice hockey. Although he’s originally from Connecticut, he is not a Boston Bruins fan (so getting him to support the Blackhawks won’t be hard.)

Last night I slept for 6 hours 51 minutes, 7 minutes under my monthly average. Decent quality for most of it, looking at the graph. Tap another app: today I’ve consumed 16 oz of coffee (4 calories, since I drink my coffee black.) Better log another cup – those seven minutes are taking a toll.

If I felt like it, I could post graphs of these patterns to Facebook, to bore my Friends with the minutia of my statistical existence.

Or I could think about why I monitor these things in the first place.

There’s a terrific New York Times article from about a year ago called “The Data-Driven Life” on this self-measurement phenomenon. At the time, I thought the tracker lifestyle was pretty bizarre. A few apps later and a quote from the story rings true:

I got nothing from my tracking system until I used it as a source of critical perspective, not on my performance but on my assumptions about what was important to track.

I’m not a true believer yet – and I doubt I’ll ever be a person who creates a statistical analysis of how daily butter intake changes my arithmetic speed. But I started tracking to wean myself off of caffeine, and it’s worked. Unchecked, I consume it like a fiend. Logging every diet soda keeps me from overindulging. Then I wanted to see if my sleep improved on days I drank less caffeine (it does!). The daily graphs have taught me how I sleep and how often I sleep — and how to improve them.

Now if I can only remember to track my hours at work…

What made the iPad a good fit for Project ChimpCARE?

Patrick Mouser: The iPad and other emerging platforms are really changing the way in which companies, organizations, etc can reach their audience. Traditional media such as print, TV and even the (capital I) Internet can’t rival the level of engagement possible with the iPad. The device is highly mobile – people use it everywhere, it’s intuitive – used by toddlers and grandparents alike, it’s tactile – you literally hold and touch it to interact. Additionally, most users think of their iPad as technology that enriches their experience: they download apps to make things easier, do things faster, to entertain, to learn, to connect. They trust it and welcome it into their lives. And so the relationship they have with the device creates an environment that is fundamentally more conducive to engaging people than the bully pulpit provided by traditional media. And so it’s interesting to explore the idea of how to communicate with users within this entirely new dynamic.

Tell me about your initial approach to the project.

PM: Lincoln Park Zoo came to us with a few ideas – and the tendency for a lot of companies would be to answer the RFP with pricing. That’s fine, but we’ve developed a mindset here that the first solution isn’t always the answer to a client’s problems. We didn’t approach this project with a platform in mind. We worked with the zoo to understand their needs, and what they were trying to accomplish as an organization. Project ChimpCARE is focused on education. They want people to know enough to make informed decisions. So instead of trying to make a persuasive space, our charter was to make something that spread their message.

Did you always know you were making an iPad book?

PM: Our early process doesn’t limit itself to any set deliverables or technologies. It’s very focused on making sure the right ideas and concepts are taken into account at each stage. If you’re a chef, you don’t learn individually how to cook every dish that’s ever been made. You learn sauces, you learn knife skills, you learn techniques. Once you understand the process of how to cook, you’re free to take the ingredients at your disposal and cook the best dish you can.
We knew a project for children could have an intergenerational appeal. And the iPad is a great way to reach unexpected user bases – people who are less tech-savvy, people who are on the go, kids.

How did you keep the app fun without losing sight of the message?

PM: As we began to craft this story, we had to make something that was entertaining and creative for kids that also conveyed the goals of Project ChimpCARE. And so that certainly had to be a very strategic process, getting those message points incorporated into the story and have the app still be engaging and something that kids want to interact with. Since the story was interactive, we could build in things like supplemental pop-up features. For example, there are hidden spots in the story and if you tap them they launch what we call Chimp Facts – our zookeeper giving more information about what’s being portrayed in the illustrations. I think these Chimp Facts become more powerful, more impactful because they launched within the context of the story.

How did you tailor the experience to your young audience?

PM: Since our audience is a lot younger than our normal website viewers, we needed to communicate in a visual language that they’d understand. For example, the interface uses very little text. Natalie defined the visual language through the illustrations, so our interface had to support the artwork. If we’ve done a good job, the design will feel seamless from the characters to the buttons you push.

However, I slowly see sites developing native apps (although having mobile versions of their sites coexist). For me, personally, if there is a site I go to often, I prefer to have the native app (presuming that it works well). In my imagination I see the web evolving in this way. HTML, JavaScript, PHP, RoR, among other programming languages are great for what they do. But without the current type of synergy with these tools that makes the web so unique and fresh over time, the environment for web development is pretty dull. Web standards are always being debated and there always seems to be issues with creating a new site that takes advantage of new web technologies.

If you take a look at the SDKs of other platforms, they can provide deep device integration along with tools that expand on possibilities of what you could develop solely on the web. However the web surfing environment on the computer has always felt like a separate space.

It’ll be interesting what type and form of web content will be considered as standard in the years to come.

Can you tell us how you developed the artistic style for the character illustrations?

Natalie Sklobovskaya:   For Lulu and Poe, there were many ways I could have drawn them. They could have been a drawing for National Geographic or it could have been a drawing for some nature textbook, but we were dealing with a digital children’s book. So for that there needs to be a lot more research done both on how children’s book chimps are drawn, and how to draw a chimp, because I have never drawn chimpanzees before in such an intense fashion.

For the character design portion, I took trips to the zoo to learn how to draw chimps. I spent hours sketching and learning how they live, where they hang out and how they move.  I also tried to figure out how to depict them with regards to where on the gradient of animal to human they were going to lie. We wanted the reader to relate to the chimps. So within that it was a lot of push and pull, bringing in little characteristics of humans – you know, whites of the eyes, and maybe less furry or a little bit furrier… finding a good balance until it looks like something that’s friendly and real at the same time.

How did you make Poe and Lulu relatable?

NS: I definitely want readers to see chimps, in terms of realizing that these are animals that are being forced to act as if they’re humans, and that’s not okay. I want them to recognize that these are not just Curious George and little cartoons that could be anybody. Though, while I want them to see the animal, I also very much hope that they see themselves and their family members in some of these characters.

Children will see themselves in Lulu, and possibly see their grandparents in Poe, so it’s very important that there be some humanity in them.  We want kids to associate with these characters and sympathize with them, and see them as somebody who should not be mistreated, any more than they would want their loved ones to be mistreated.

From both a story and an illustration perspective, Poe is in many ways the more interesting character, isn’t he?

NS: Lulu is obviously our protagonist. And naturally she was going to be the friendly one and the smiley one and the more relatable one.  But, fundamentally the story is about Poe and his experiences. We see him from his youth when he’s going through all these really troubling times, we see him when he’s older and he’s finally made it into this wonderful zoo haven where he’s finally able to have a family and be happy.  So we see in him a wide range of emotions.  I would say that he actually epitomizes what it would mean to be human, much more than Lulu does without necessarily looking human or acting human in any other way. He was just a lot more of a colorful character, both in terms of the way that I had to draw him and the way he looked and the way he acted and the things that he said and felt.  He just had this great variety to him that I thought was a nice epitome of a very interesting character.

Can you talk about the differences in the illustration style between the flashback and the zoo scenes?

NS: I would say the biggest difference between the zoo and the flashback scenes is the approach. In the beginning we talked a lot about making them hearken back to the way that older-style drawings were done. So while we didn’t go all the way back to approaching it with such intensity, I would say I still attempted to do that. For instance, even though the zoo scenes were rendered very lushly in very saturated colors, there’s almost no trace of line, everything seems to be really done over. I would say the flashback scenes I approached instead with, I would say, a little bit more simplicity, I left the drawing intact, I colored very, I would say, modestly. I relied on line for a lot more than actual color to give a sense that it was done with a little bit more naiveté almost to give it a sense both of being in the past but also perhaps of being from an older time.

How did you work with the rest of the team?

I believe everyone had each other’s work in the back of their heads and knew that ultimately the piece you contribute isn’t the final piece. For me as the illustrator, the illustration I would be making was not the final product — a programmer needs to do programming with it, an interface designer needs to design an interface around it, story text was going to be placed on it.

My job, aside from creating what I hoped would be an appealing illustration, was to contribute functionally to these moving parts that the end product would be made up of. I think we all worked with that very collaborative mindset from start to finish.

—————

Stay tuned for the free release of Chimps Should Be Chimps in the App Store — and if you’d like to be the first to know about Chimp updates, sign up for our newsletter.

Combining creative people with the right clients and challenges results in some pretty unique work – like our soon-to-launch iPad app Chimps Should Be Chimps. Working with Project ChimpCARE taught us about the problems surrounding chimpanzees in entertainment. We learned another big lesson from the app itself: that we can find effective ways to use the iPad and other digital technologies to convey important information in an engaging way.

There’s a terrific metaphor from the founders of Sesame Street about interaction. Their show was a strong response to naysayers who believed education should never be mixed with entertainment, that an important message was good enough. Trouble was, much like broccoli, kids tended to avoid this type of education like the plague. The show’s co-founders called their philosophy “raspberry yogurt” – work that’s both tangy and nutritious. Sesame Street’s success attests to the power of this enhanced educational approach.

A little spice enhances a message, making it more appealing and more potent. So many important ideas fail to capture the imagination thanks to a traditional one-way mentality. We’ve found that the iPad is a tremendous platform for taking serious messages to a new level of engagement.

Stay tuned for the free release of Chimps Should Be Chimps in the App Store — and if you’d like to be the first to know about Chimp updates, sign up for our newsletter.