this comprehensive list of Donald Trump’s insults

this detailed rundown of the 2016 Primaries

? Data is a big deal in the newsroom right now, and in 2016, we’ll likely see data take on an even bigger role in reporting feature stories.

The New York Times is just one example of an organization increasingly banking on data-driven reporting: in the Politics section of nytimes.com there is a blog called 

 that consistently uses analysis of detailed data sets to reveal surprising insights about news events on the front page. They typically include charts and diagrams to bolster their reporting: large, interactive explorations that are driving more and more traffic for the paper every day.

The Upshot, FiveThirtyEight and Buzzfeed, all of these publications are treating data visualization the same way that financial papers like the Wall Street Journal treat them: alongside the story, illustrating the story, but not integral to the story itself.

So what does data look like when it’s used as part of the story itself? How can we treat it as we treat verbs and nouns, integrated into, instead of apart from, the story?

A sparkline is a small intense, simple, word-sized graphic with typographic resolution. Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather sparkline graphics can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic. Data graphics should have the resolution of typography. – Edward Tufte, Beautiful Evidence, 46–63

Edward Tufte describes sparklines in his book 

 as being word-sized graphics. “Typographic Resolution” is his key identifier of a sparkline, and he goes back to this distinction repeatedly without quite defining it. So what does “Typographic Resolution” mean?

Emojis are one example of word-sized graphics that we use every day: these pieces of design have typographic resolution, as they sit directly with the text to add meaning or change context. Emojis can turn “thanks 😀” into “thanks 😕”; a lot of meaning is imparted with a very small symbol.

Let’s look at a data table that might benefit from sparklines.

This is a typographic table: just numbers and letters, spelling out the top 10 index funds over the past 4 years. We can add a small chart to each line with the historic trends for that fund.

This adds 120 more data points to each line, demonstrating the volatility of each fund, as well as demonstrating the forces of market cohesion and highlighting market-wide events.

In fact, we can make this chart far more compact by eliminating the numbers on the right, replacing milestones with historic trends. Some audiences might not need to quantify the specific returns of the funds, and for them, we can add data and reduce complexity.

For the right audience, this compact display of data is just as easy to parse as the original. It might be argued that it’s easier, in fact: the lines resonate aesthetically with our natural instinct to find patterns, using multiple mental modes to add additional dimensions to the data.

Simply taking normal-sized charts and sizing them down doesn’t accomplish the kind of efficiency of space we’re looking for with our new visualizations. In order to succeed, charts have to be designed with their size in mind.

This is a proprietary platform that Planetary designed for The Daily Beast. It displays information about system-wide averages, local maximum and minimum, and current state into a small visualization that accompanies each report.

This approach also applies to paragraph-level charts. This is an example of how we might take a story about market performance and integrate charts into it:

http://www.nytimes.com/2016/01/05/business/international/stocks-asia-markets-china.html

These charts are designed with tininess in mind. They don’t include text or axes. They use very few colors or patterns. They focus on one piece of information and don’t try to draw correlations or associations. This simplicity allows them to add value without adding noise.

There are a number of tools available to designers and developers that make it easy to embed tiny charts into paragraphs of text:

 A developer named Tom Noda has written up a 

great tutorial for rendering small charts in D3

. He deftly addresses some of the technical challenges, such as smoothing and asynchronous data fetching.

 While we don’t normally think of fonts as software, they are actually complex pieces of code, capable of really interesting applications.

, a font originally published by FontFont, can parse numbers into a variety of different visualizations. It uses the inherent qualities of the text — color, style, and size — to style the charts and graphs. And because it’s a font, it can be embedded into web pages and rendered alongside other text; this takes advantage of the optimizations done by browsers when rendering text. It’s nothing short of black magic.

We see the value of data visualization more and more each day, as large and interactive charts are published alongside stories in major publications. Newsrooms that explore the realm of word-sized charts, making data a central and essential component to stories, will stand apart; the next frontier of data is integration with the text of our stories.

Tiny Data Visualizations

Data-driven interfaces are on the rise. Financial District CEOs want to see a birds-eye view of their bottom line as much as Silicon Valley Co-founders want to watch their growth hackers hack. Each user has their own hopes and fears about data, but there’s one thing nobody wants to see: a blank space.

Unfortunately, errors happen. No database is perfect, and as designers and product owners, we have to prepare for the worst. So let’s look at a (real-world!) example from some recent work at Planetary:

In this graph, the values for December 6th, 9th, 13th, and 14th are missing. What are the possible ways of handling this?

The first answer, of course, is “make sure the data is there.” But as I mentioned, there are likely going to be cases where we have to handle missing data — changes in the vendor APIs, hardware issues, acts of god — so let’s analyze a few solutions.

This is what we’re currently doing. If we don’t have the data, we’re simply not drawing that portion of the graph.

 we don’t have this data, so we don’t display anything.

 we don’t have any other design or development concerns: no need to distinguish between “we have data for these days” and “we don’t have data for these other days.”

 a user has no idea what’s going on here. If asked what this graph means, all they can say is “well, there are gaps in the graph.”

 while missing data is not, by default, a reason to panic, having gap-filled graphs might inspire stress in our users.

Here’s what it would look like if we simply filled in the gaps by connecting the dates that we do have:

 It makes it much easier to track the trends in the data that we do have — there was a big increase in the middle of the time period, and that’s easier to understand this way.

 Again, no tricks in design or development: if anything, this solution is slightly easier than not showing data we don’t have.

 By drawing a line between December 5th and 7th, we’re implying what the data was for December 6th. While training and close inspection might lead a user to doubt the interpolation, it’s a little too easy to take the smooth line for granted. Was December 6th lower than the 5th? Higher than the 7th? Showing the line here might lead to inaccurate conclusions.

 even though we’ve connected the dots, we can’t display anything for the most recent two days because we don’t have any points to extend the line. Again, we can’t give a user any idea of what happened these days.

What if we shaded in the regions for which we didn’t have data with some informative error state?

 While we don’t have data for those days, we do have some information about 

 — for the yellow regions, we couldn’t collect the data. For the gray region, we haven’t tried to collect yet. There are a number of different reasons why we don’t have data, and we can provide that to the user.

 This approach allows a user to answer questions not only about the data, but about the state of the application. It’s the most informative of the solutions.

 Implementing this solution is tricky, as it requires a number of steps to record the error state and then display the error state. In addition, a key needs to be present for this to be useful to untrained users.

 I say “might” because it really only gets ugly if we have lots of error states. Seeing lots of these errors could be anxiety-inducing for the user, even if the problem is on our end as the product manager.

As an advocate of user needs even over technical requirements, I prefer solution 3. But I’ve employed all three of these approaches in products, and each can be useful depending on the circumstance.

I’m curious to hear how others have addressed this problem. Opinions? Alternative solutions? I’m all ears.

Mind the Gap

Finding the “just-right” in data visualization

Data visualization is everywhere. From analytics platforms to infographics, across newsrooms and social media channels, there are vast swaths of the internet devoted to delivering data in non-tabular format. There are entire blogs devoted to the subject, such as the ubiquitous 

. With such an immense interest in seeing and understanding complex data, designers are constantly challenged to produce images that both catch a viewer’s eye and accurately depict the information at hand.

With such a high demand, there are (inevitably) a great number of approaches being employed; some to great success, others to embarrassing failure. It’s possible, then, to learn from these approaches to create data visualizations that are good-looking 

. By “plain english,” I mean “words that you speak out loud regularly.” Depending on where you work, you might say phrases like “regular spectral density potential” regularly — so instead think of words your 

Show highs and lows, let the viewer fill in the rest

. Most graphs fall victim to “too many axes” syndrome: lots and lots of grid lines dividing up the space, ostensibly to give the viewer a hand in judging the data. However, humans are pretty good at spatial estimation, so only plot the maximum and minimum on each axis.

. For such a seemingly obvious component, the title is often forgotten. What do you want your viewer to get out of a graph? If you answer this question in a title above the graph, you’ll provide the viewer with vital context and a good sense of what they’re looking at.

Let’s say I’m preparing a graph for a client who makes pizzas. They’re interested to see how their pizza production rates have fluctuated over the last four months. Here are a few examples of how these three guidelines can be applied (or not).

In every board room in the world, there’s a laser pointer landing on a graph that looks like this:

This graph has everything: big numbers, lots of lines, overly redundant labeling. There’s no way you could misinterpret this!

 Well, it’s labeled. But isn’t “July first” much easier to say than “seven-one-twenty-fifteen?”

 This is an example of over-labeling. We’re only looking at four months here — no need for all the lines.

 It does! But it’s a little too literal.

, chances are there’s some sort of data visualization being done. And more often than not, it looks something like this:

Of course, there are good examples of data viz on Dribbble and other showcase sites, but in many cases, the design is being done from a strictly aesthetic point.

 Kind of. But it’s not very descriptive.

Let’s split the difference between these two. We’ll show what’s necessary to preserve the aesthetic qualities, but label clearly and simply to ensure accuracy:

 Yes. We’re really clear about the time scale, as well as the domain and purpose of the graph.

 They are! Also, the extra zeros on the numbers are truncated to save some space.

 It does; “…last 4 months” spells out the time frame in a much simpler manner than “7/1/2015 to 10/31/2015.”

These examples and guidelines are a (biased) set of tools for making good-looking and useful graphs. There are a huge number of topics I’ve glossed over, each of which holds innumerable hints on properly visualizing data; for more information, read the works of 

, a critic of poor data visualization and a proponent of the just-right approach.

Lastly, no approach is successful without constant improvement and experimentation. Edit frequently and update your methods constantly. By refining and revisiting, you’ll find the happy medium between overwrought powerpoint and abstract art doodle.

Goldilocks your graphs

One day last August my Dad called to tell me that my Mom had cancer and it was serious.

When I got off the phone I was in shock. I mumbled to my coworkers that it was bad news and I didn’t know what to do.

With hardly any input, they booked me a one way ticket to San Diego. Transportation was booked to and from each airport, all on the company card. No need to worry about communicating my absence to my clients; my teammates would take care of it.

I had been working at Undercurrent for just six weeks.

Before coming to Undercurrent I worked at the nonprofit Invisible Children. My coworkers felt like an extended family. We went to absurd lengths for one another: four A.M. rides to the airport; friends of friends sleeping on our floors and couches as needed; letters of recommendation; over-the-top low budget birthday celebrations; donations to each other’s Kickstarter/Indiegogo/GoFundMe campaigns.

I was a writer there and it was my dream job. My coworkers were my closest friends, and the work itself was full of mission and purpose and hope.

Despite all of this, after nine months as a volunteer and two years on staff, I was burned out, depleted, and confused. I was still committed to the mission, but tired.

Telling a friend about my confusion, I explained that my employer truly cared about me: they wanted me to be happy and healthy and advance in my career. My friend patiently explained to me that Invisible Children, Inc, wasn’t actually a person. It couldn’t feel the care and compassion that I was ascribing to it. My managers and colleagues did care about me and want the best for me, but the organization had a separate mission: to end a war in central Africa that had child soldiers at its center. That was the explicit and worthy purpose that the organization was accountable to.

That made sense to me: People can care about people, but organizations can’t.

After leaving Invisible Children I got a job at Undercurrent, a 30-person strategy firm in New York.

The shift from the nonprofit world to the management consulting world was jarring and my year at Undercurrent forced me to reconsider my conviction that organizations can’t care about people.

) was different than most companies in that we were a self-organized company, not a top down company. (Specifically, we were a 

.) We didn’t have managers, just teammates and sometimes team leaders. Seniority was recognized and respected, but it didn’t confer extra privileges. As part of this setup, the employee handbook was written by employees, for employees. Anyone could contribute to the handbook, whether new hire or senior strategist. And the handbook was updated monthly. We added, changed, and removed policies as our business grew and changed.

When my Mom got sick, the instances of kindness and empathy I experienced from the people at Undercurrent were myriad and nuanced. But it wasn’t just the individuals — I had a feeling that Undercurrent as an incorporated entity was showing me kindness and empathy, too.

The contents of the care package Undercurrent sent me when I was at home with my mom.

This feeling came into focus when my Dad asked me who we should thank for all of the allowances I’d been given while my mom was sick. The CEO? The senior partners? My mentor at the company? The colleague who booked the plane ticket? The folks who took on extra work while I was out?

The closest I had to an answer was everyone, and no one person more than another. My colleagues were just acting out the spirit of the policies that we had woven into the handbook and our culture. Because of that, it was like every single individual had the power to decide to pay for that initial flight home and give me eight consecutive weeks off of work and rearrange my project load.

It was like the decision had been made long before I arrived at Undercurrent. Every action was an extension of Undercurrent’s values and policies. Just as a computer acts out the instructions it was programmed with, so too was Undercurrent behaving according to its programming, like it had an artificial emotional intelligence.

While the specific kindnesses that Undercurrent showed me aren’t feasible for every organization, I do believe that people can create policies and mechanisms so that an organization mimics empathy. If that’s true, then empathy can be scaled. More than any formal framework like Holacracy or sociocracy, the key is hiring empathetic people and giving them both the freedom and mandate to bring their empathy with them to work. Too often as employees and employers, we check our human feeling at the door.

My mom died five months after being diagnosed with stomach cancer. I worked remotely from San Diego for several weeks at a time, and spent an extended Christmas with my parents and siblings. Thanks to Undercurrent, I didn’t have to choose between keeping my job and taking care of my mom in her final months.

Today, I am the Director of Communications at Planetary, a boutique web development company that builds awesome web apps to simplify complex information.

Now that I’m at Planetary, I mean to repeat the experiment and see if we can practice empathy at the organizational level. It’s hard to know what shape that will need to take, but I think it begins with asking each other “how are you?” and then sticking around to hear the answer. The team is smaller, and half the team is remote. These are challenges, but I’m excited — not to mention determined — to work them out because in the throes of grief and gratitude, paying it forward is the only thing I know to do.

Thanks to everyone who helped make this piece better. Looking at you, 

The human organization

3 billion people used the internet for the first time in the past decade

. Can you imagine what that was like? When I began using the internet, the web was 

. Interface design required finagling websites from knots of spreadsheet-like tables, and even the most sophisticated designs couldn’t do much more than blink and display images. Now, 

37% of the world has the internet literally at their fingertips

, allowing them to manage their finances and healthcare, communicate in real-time using pictures and videos, and purchase everything from hamburgers to houses. Complex functions require complex interfaces; so how has interface design changed to accommodate?

Well, in many ways, it’s gotten boring.

In 1990, a group of researches concluded that “

” — “the ability … to recognize the value of new, external information, assimilate it, and apply it to commercial ends” — would become one of the most important factors in a company’s success. Their paper has since been cited by 26,347 others, and 25 years later, the 

 is fitting proof of this prediction’s accuracy. But our brains change at a pace much slower than the rate at which technology 

. So how do we use new technology to even our odds? Let’s look at one of the most commercially successful business interfaces of the last 25 years: the Bloomberg Terminal.

This monstrous pile of letters and numbers nets Bloomberg roughly 

. Friends who have used it rave about its ability to quickly visualize a vast amount of information; a specialized keyboard allows users to command financial data with speed and accuracy. It is ugly as can be, but it is brilliantly 

: There is a deliberate hierarchy, an accurate color scheme, concise and useful charts, and clearly-labeled tools throughout.

. There’s no thinking “outside the box.” No Jony-Ive-slinging-superlatives-in-a-black-t-shirt materials. No cleverly branded names, no breath-taking or game-changing, and certainly nothing even close to “intuitive.” Just data. This aspect — the lack of design-award aspiration — means that there’s little between the user and the information they’re assimilating. These terminals often span 

: no whitespace means more information. Despite its steep learning curve (or, perhaps, because of it), its charts and graphs are 

 of the financial industry. Its closest competitor, Reuter’s Eikon system, is only marginally less ugly, maintaining the same density and resistance to interface metaphors.

Of course, the design of the Bloomberg Terminal is unknown — and not at all important — to most people. However, one of the most of the exciting recent developments in tech is helping us master an interface familiar to 

. With new technology aiding computer-driven vehicles (in fact, 

), it’s becoming increasingly clear that we’ll stop driving cars soon. There will be no gear shifting, no turn signaling, no braking or accelerating, and no windshield wiping. So what sort of interface is best for an autonomous car?

There is a rich history of “interface design” for the 

complex information once required to drive cars

. But in a self-driving car, this information is redundant, and so is that interface. Google has kept the dashboard out of the 

, but why? One possibility is that the car’s dashboard is 

. It’s not sleek and sexy, or full of fancy gauges and real-time readouts; it’s just an empty space, which is going to be a jarring experience for most people.

Yep, no steering wheel. Here's a look inside Google's self-driving car. 

. Growing up, I watched countless movies and TV shows that portrayed interfaces as beautiful holograms spinning in the air, manipulated in space by flicks and swishes, surrounded by rainbow-splashed screens full of shapes and numbers. But as we see new technology accomplishing wonderfully complicated things beyond our imagination, like 

air-lifting goods directly to our doorstep

storing, tagging, and organizing all of our photos forever

Let go of shiny things Computers are starting to outpace the computational abilities of our brains, and fine-grained controls in interfaces are becoming overwhelming. The more we can do with a tool, the more the interface has to get out of the way. Sometimes, we can do so much with a tool, that we 

need the help of artificial intelligence to unlock its full potential

 of interface; it’s a complete shift in how we design our digital tools.

The trend in interface design — away from the 

, towards the simple and boring — is only beginning. In my experience, it’s inevitable. 

. In the past year, I’ve started countless projects with richly detailed interfaces, only to have users tell me they prefer simpler and more functional versions. In the world of product design, the user is always right. As the next 3 billion internet users come online, the interfaces that are the least noticeable will be the most widely adopted — even if that means there’s no noticeable interface at all. For the interface designer, that means we’ll ultimately have to take the Futurama-coined adage to heart: “

When you do things right, people won’t be sure you’ve done anything at all

 for looking at drafts of this piece. Thanks Josh!

In a previous version of this story, I had incorrectly identified a screenshot of a financial trading application as being from a Bloomberg Terminal. 

 informed me of the error, and I’ve updated the screenshot with a correct one.

Well-designed interfaces look boring

Creative work — be it designing, writing, coding, or managing — is a collaborative practice. At least two parties are always involved: The maker (a designer, developer, or manager) on one end, and the audience on the other.[^1] Feedback between the maker and the audience is absolutely critical to the success of the work: makers demonstrate their skill and expertise by facilitating focused feedback, and clients & stakeholders build great relationships with creatives by providing high-quality feedback.

In my experience as both a maker and an audience member, I’ve developed a few ground rules that have helped me provide and receive great feedback. At Planetary, we use this approach every day to build better products:[^2]

We use two questions to determine if feedback is good or not:

 Feedback should be terse. If you’re trying to articulate something, and are uncertain about it, it’s okay to say so, but be very certain of what you’re uncertain about, and use as few words as possible.

Examples ✓ The color of this element is too bright. ✗ There’s something about the way this moves that reminds me of some sort of animal.

 Always give feedback with action in mind. You don’t always have to boss the maker around, but always give feedback that can be acted upon.

Examples ✓ This text isn’t the same size as the other text on the page. ✗ I don’t like the way this layout feels.[^3]

What good feedback looks like - feedback MAP

In addition to overall quality, it’s important that feedback has a consistent structure. Consistency helps to create and maintained a shared language, and keeps translation errors to a minimum.

I suggest each piece of feedback have three main components: Matter, Attribute, and Process.

This is the subject of your feedback. Often times, feedback is dead on arrival because it’s not about anything in particular. I’ve seen (and, at times, given) feedback that is just a suggestion to the maker “Make this bigger.” “Change this picture.” This isn’t actually feedback! This is telling the maker how to do their job. And nobody likes being told how to do their job.

Be specific as specific as possible! When you say “the logo,” which logo do you mean — the one on the front page? Or the one on page 17? When you say “the colors,” which colors exactly are you referring to?

This is a quality of the matter you’re focusing on. It’s usually some visual quality, but it can have analogues in the other senses: loud, soft, fast, slow, crisp, soft. You can answer the question “How?” with the attribute. It describes the Matter.

This is where you get to use fancy words. Again, be specific, but the more descriptive you can be, the better.

This is the process by which the Matter and Attribute occur. Think of it as the “Why” or “When” in our equation. This is probably the most complex aspect of feedback, because sometimes it’s just taken for granted: The process is “Why? Because I looked at it,” or, “When? When I went to the website.” But sometimes it’s more involved in that. And that’s when we start using words like “User Experience.” If your feedback comes from a specific process, try to elucidate that. And again — 

The model in the stock photo on our homepage 

Sometimes, simply writing down a sentence of feedback or two will suffice. But often, it’s hard-to-impossible to describe a particular piece of matter, a quality, or a process. In those cases, you can use an image! There are great tools to capture images, even giving you the chance to add some text or a drawing to the image.

This is the most basic way to get an image of the thing you’re providing feedback on.

, you can save an image of the whole screen by pressing command + shift + 3. To save just a portion of the screen, use command + shift + 4.

, you can copy an image of your screen to the clipboard using the PrtScn (print screen) key. Once copied, simply paste the image into a document in the Paint application, and save it.

There are tools to help you add information to your screenshots. This will allow you to be more specific, and save your thoughts together in a single place.

, from the makers of Evernote, helps you add information to screenshots in the form of drawings, shapes and text.

 is an online, cross-platform tool that organizes comments and tracks the progress of documents and images — think of it like “track changes” for creative work.

Sometimes, a screenshot can’t capture the Matter you’re trying to address: if it’s an interaction or an animation, it helps to be able to record a movie or animated GIF.

 is a tool I use almost every single day. You simply drag the window over the area of the screen you’d like to capture, and hit record. The program will generate an easy-to-share image file of the movie that can be viewed in any web browser.

 comes installed on every Mac, and can be used to capture short movies. Open the app, and select File > New Screen Recording from the menu bar. From there, hit the record button, and you’re set! You can even add audio commentary, which can be absolutely invaluable to the feedback process.

Facilitating efficient feedback between makers and clients/collaborators can mean the difference between a painful, failure and an inspired success. By dedicating yourself to providing or facilitating concise, action-oriented feedback, and by agreeing on a common structure with which to build that feedback, you — as a maker, or as a client — can become a more efficient and successful partner in the creative process.

[^1]: The audience can be the client for whom the work is done, or it can be the users of the product designed, or it can be the stakeholders or investors who will fund further development.

[^2]: This is not a one-size-fits-all solution! Use it as a starting point to find your own method of soliciting feedback.

[^3]: A note on feelings: I have banned the phrase “this feels …” from my feedback vocabulary. It’s often a crutch of feedback, and a pretty crummy one at that. I tell my collaborators “This doesn’t feel! YOU FEEL! Tell me how you feel!” They think this is pretty funny.

Towards Better Creative Feedback

Network of Websites

We redesigned a network of school websites to align with their new brand.

Higher Ground Schools

Product

We created a remote team building product that serves real food.

Pizzatime

Website

We reconceptualized the website for Miss Hall's School based on their rebrand.

Miss Hall's School

Mobile and Web Apps

We reinvented the furniture customization process for a family-owned furniture company.

Insights

8 of 8 pages

Tiny Data Visualizations

Mind the Gap

Goldilocks your graphs

The human organization

Well-designed interfaces look boring

Towards Better Creative Feedback

Internet

Twitter

Instagram