Skim reading

The New York Times Skimmer offers an alternative way to read the paper online. A selection of stories from each section, chosen by the paper’s editors, is presented in a simple grid: click on a story to be taken through to the full content on the main site. Different themes allow users to customise the look of the App. CR spoke to design director Khoi Vinh and software developer Andre Behrens about the App’s design

What was the initial impetus for the Times Skimmer? What were you trying to offer readers that you could not do via the main site?

Andre Behrens: The initial impetus for the Skimmer was to have fun. (Really). It was not part of a normal product process.

One day, it became very easy to access our feeds using Java­script, and being a Javascript developer, I wanted to have a poke around.

I didn’t set out to advocate certain user experience ideas, but the ideas are ones I obsess over and, over time, the product grew into the shape of those biases. Which is why there are no scroll bars. I have a bias against scroll bars: I consider them user-hostile for content consumption.

It’s why the grid is so regular: I wanted to have easy two-dimensional scanning. I wanted to have easy keyboard navigation, because I find heavy mouse use overly fussy. It’s why there are no numbers in there.

Is the Skimmer’s design informed by aggregator sites such as Notcot and Dropular?

AB: I don’t use either of those sites and am unfamiliar with them. It would be accurate to say the design was not consciously influenced by other aggregator sites, as I don’t much like the aggregator sites I’ve seen. I use rss heavily, but I don’t really like the current crop of rss readers.

Could you briefly outline the development process? ab: For the early part of its life, Skimmer was my pet project, so the process was me trying things and seeing what I liked.

When Khoi and his team got involved, we moved to an iterative, agile process of checking in almost daily, trying a few things, assessing, and trying the next thing. The collaboration was pretty deep, and I think that had a lot to do with the quality of the final product. Every successful product development experience I’ve been part of has worked this way.

Khoi Vinh: The fact that Skimmer is living and breathing at all is really due to Andre’s passion and persistence. Initially, I didn’t know how much our design group could offer to him without disrupting that sense of fun that he was having. We wanted to be really careful about that.

But Skimmer was the perfect candidate for testing out how the Times might use Typekit, Small Batch’s amazing solution to bring a broader array of typefaces to the web. Andre and I had a really good, frank conversation about taking his original Skimmer prototype and doing a significant upgrade to it to incorporate the Times’ signature (and proprietary) typefaces. We found a way to work together that was really open and collaborative, and very quickly hit a nice rhythm. I’m really proud of the way his ideas and ours produced something that really took Skimmer to the next level.

You first put the prototype up in February – what were the main suggestions/feedback that you garnered through that process and incorporated into the final version?

AB: I don’t think there was any feature that we made only because users wanted it. There were several times users requested a feature that was on my mind, too, and the user feedback pushed me over the edge. This is why Skimmer quickly began displaying articles in an iframe [a way of displaying a document within another document in HTML].

Users raised questions about the regular grid design, so I implemented a theming engine to explore alternatives. Some geekier users want the ‘hjkl’ navigation keys present in most Google apps, and the vi text editor, so I added that.

KV: Throughout our organisation, we’re all big believers in letting users guide us as we build new features and remake existing ones. But for Skimmer, we didn’t do any of that – as Andre mentioned, it was much more about having an idea, sketching it out, building it, assessing its success, and then letting that inform a new round of ideas; all very quickly. At its heart, Skimmer is a really simple product without a lot of business logic contingencies, so this approach really made sense. I wish that every product we work on could be as straightforward, but alas that’s not the world we live in.

What were the main things that surprised you in terms of user feedback?

AB: Most of the feedback that isn’t a positive or negative response to the product has been in line with my own thinking, which surprised me! Readers (the ones that are talking in public, anyway) are thinking about the same things I am. This gives me confidence we are moving the product in the right direction.

KV: Andre’s first prototype was so mature, and gave us such a good idea of what users liked and didn’t like that I must confess that not a lot of feedback really surprised me. This project is one of those blissful incidences where the developers and designers really occupied the same headspace as the users. Actually, I think what surprises me the most is that more people aren’t using Skimmer. We have a pretty good-sized audience for it, but it’s such a pleasant experience, I fully believe it could be several times the size it is now.

What is the rationale for the order in which stories appear?

AB: The order is editorial ranking, that is, editors rank stories by importance and judgment. This is expressed in the regular site’s section front pages and home page. It is also reflected in the rss feeds. Skimmer uses the rss feeds for its data, and displays stories in the order it receives them.

The rationale is that our customers value our judgment: They can get ‘reverse-chron’ anywhere. The Skimmer steps into an in-between spot where the presentation of that judgement is more subtle than on the rest of the site, but the order is still there, and I expect it will stay that way.

KV: In a sense, Skimmer is a simple feed reader, but in the themes we’ve designed, we really tried to communicate as much of that editorial judgment as possible.

How do you deal with hierarchy in this format? All stories apart from one are given equal prominence.

AB:  It just comes down to a matter of taste and priority. The rigid size consistency is there to aid scanability of the content, and to increase the likelihood of a surprise discovery. I figured if people wanted the hierarchy of our other outlets, they were covered. Skimmer presents one possible alternative.

How do you tell people which stories are older/which more recent? ab: In short, we don’t. One of the design philoso­phies of the App is to avoid using numbers whenever possible. I’ve grown weary of email programmes, rss readers, Twitter clients and Facebook shoving unread counts in my face, and triggering a completion-ist obsession to see all the new stuff.

From the beginning, Skimmer has been designed as a relaxed reading environment. So no unread counts, and no dates. In general, the editorial rankings privilege fresh and new stories. But if you are an information junky who wants to know something the second it’s available, there are other, better outlets – like our home page, news alerts, Twitter feed, and so on.

At a deeper level, I think when you see numbers and dates, they hijack your brain, and you can’t see the content anymore, only the numbers.

KV: Andre and I are of one mind on these points – for the most part. I think there are some counter-arguments to be made for dates, to take one example. But then I think that’s the beauty of Skimmer. The templating engine can and will present alternative approaches to how users can consume the news.

How will you integrate advertising into the final version – Blackberry is there as a sole advertiser at the moment but presumably there will be more?

AB: That is to be determined in the future. Not much more can be said about ads at this time.

By using Typekit with the Skimmer you are able to employ the same typefaces as the paper – cause for celebration for a designer? ab: I’d say it’s cause for celebration for anyone. The typefaces look fantastic. As an engineer, it was revelatory to me to see the power of dropping the typefaces in, as if the ghost of the New York Times had possessed the App. I just love it.

KV: I think it’s a big win, naturally. The inclusion of our signature typefaces is a huge push towards remedying our long-standing frustration that so much of our brand, as represented by our proprietary fonts, can only be approximated in a web browser by Georgia and Arial.

So Small Batch’s Typekit is a terrific evolutionary step; it’s still early in our usage of this method but we’re optimistic about it. We also owe a debt of gratitude to Jeff Veen at Small Batch for working so avidly with us to make this happen; the reason Skimmer looks as good as it does is in large part because Jeff and I had an early conversation in which he pledged to help us pilot test this. The collaboration with his team at Small Batch was profoundly productive.

All that said, this is a battle won, but the larger war is still going on: using our own typefaces is great, but what we really want is real typography – kerning, widow- and orphan-management, etc. That’s still a way off. But we’re getting there.

Could you explain the use of themes for customisation and what each one offers eg Swiss, Flow, Lines. In particular, what was the thinking behind Fridge and how does it work?

AB: Themes were something I added to explore some reader comments from the first prototype. I didn’t have any aim beyond discovery and experimentation. At best, I hoped others would jump in and bring some interesting ideas to the table. So we have ‘Lines’, which is the traditional view of content you see just about everywhere. I hate it. ‘Swiss’ is the same as the default style, but with Helvetica. I like Helvetica.

‘Priority’ was a quick attempt at exploring a compromise with those who wanted more of the sense of editorial curation. I saw a few people on Twitter say they really love it. ‘Fridge’ and ‘Flow’ get the most attention. I consider them more art pieces than UI.

Mostly, they are demos of the theming engine. The theming system is pretty flexible, and my hope is that others will have cool ideas we can try in future releases. In that light, the intent was to demonstrate that the themes don’t have to be based on a grid. In fact, there are at least two themes in the works that I hope to get on Skimmer soon. I’m particularly fond of one of them.

The design seems well suited to a touch-screen. There have been rumours about the launch of a tablet device by Apple – was the Skimmer done with an eye on producing some­thing that may work with this kind of device?

AB: No. But: Skimmer was written to adapt to its environment. It is highly flexible. If Apple releases a tablet, Skimmer runs very well in Safari, and would likely run well on such a device. But Skimmer will run just as well on the JooJoo, or a Netbook for that matter. Someone let me borrow a little Fujitsu tablet PC, and it ran great on that.

The experience breaks down on mobile devices, but for any screen that could be attached to a keyboard, the experience seems to work pretty well.

KV: We want to be ready for the coming sea change that tablet devices will bring (we hope), so we design a lot of things with that impending dynamic in mind – vaguely.

However, the only platform out there that’s capable of delivering the power, simplicity, ease of use and elegance that we aimed for in Skimmer is, in fact, a personal computer running a modern desktop operating system and using a modern browser. So we designed this to be as good an experience as we possibly could for desktops and laptops, first. We’ll design for tablets when they’re here.

More from CR

Why the iPad matters

Malcolm Garrett argues that the true value of the iPad will be in driving the evolution of the computer interface

Graphic Designer

Fushi Wellbeing

Creative Designer

Monddi Design Agency