How they did it: The New York Times' budget interactive

by Ethan Klapper The buzz this weekend in the online journalism world was about an interactive created by The New York Times, "Budget Puzzle: You Fix the Budget." The puzzle was an online companion to a story by Times reporter David Leonhardt in Sunday's Week in Review section. The feature has been very popular on Twitter. "It's one of the most tweeted graphics we've ever had," said Kevin Quealy, a Times graphics editor. The game allows users to explore various options (spending cuts and tax increases) to close the U.S. budget gaps projected for 2015 and 2030. In an interview with 10,000 Words, Quealy stressed the overall simplicity of the project. While the graphs at the top of the page showing how much money a user saved were created in Flash, the rest of it was just basic HTML, Javascript and CSS, Quealy said. Even the graphs at the top of the page would have been created in HTML had there been more time. "The technology behind it isn't terribly advanced," he said. "It works in IE6." Leonhardt worked on the research aspect of the project for some time. Quealy's role, as an interface designer, began on Tuesday. "We had to work really fast," he said. "I probably had literally 20 mockups for the way it might work." During the design process, which included work during the wee hours of Saturday morning, Quealy said he had to strike a balance between the interactive being too simple (and boring) and being too complex (and game-like, for something that's a serious topic). One of Quealy's design tests is whether or not his parents would be able to understand how to use the interactive. If they could understand it, then it's usable. "At the end of the day, I think we really chose the right format, which is just the table," he said. "It's very simple and easy to use." Under the hood, the different choices of budget cuts and spending increases a user can select are checked with Javascript. Nothing is stored in a database. To facilitate the sharing of a user's results, a variable called "choices" is appended to the URL. This variable tells the Javascript which tax cuts and spending increases to display. A user then has the option to post the results to Twitter, by interacting with the service's Tweet Button, which Quealy noted is partially why the interactive is so popular on Twitter. The feedback was overwhelmingly positive, he said. "We thought people would like it, but we've had incredible response," Quealy said. "We had like 500 letters yesterday. We normally get like eight." The puzzle works as smoothly as it does because of the teamwork that went into creating it, Quealy said. In addition to Quealy and Leonhardt, Shan Carter, Matthew Ericson and Bill Marsh worked on its development. At the end of the day, though, Quealy said it's all about the content. "My overarching advice for a project like this is the thing we do really well in this case is let the content speak for itself," he said. "We didn't try to make it too flashy or we weren't trying to show off our technical expertise ... This content, the results of [Leonhardt's] findings, that's what's really important about this. How can we really showcase that?"

Fishbowl

How they did it: The New York Times' budget interactive

Ethan Klapper

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

Ethan Klapper