is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
One of my favorite features on the new NYTimes.com is the row of feature articles that we have running across the middle of the home page. With questionable creativity, we refer to them by their acronym, “MOTHs,” though when they appear at the bottom of an article I guess they really ought to be referred to as “BOTAs.” I had almost nothing to do with designing them, so it’s not bias talking when I say that I think they’re a very attractive, eye-catching method of highlighting features using sometimes very different kinds of imagery (or no imagery, as with the headline-only ones) in a surprisingly cohesive presentation.
They’re also incredibly effective at signaling a different kind of content from what appears at the top of the home page, which is an important role in a layout that must juxtapose sometimes incredibly serious and upsetting content with sometimes esoteric or lighthearted content. The editorial team have used the MOTHs to great effect to publish a mix of opinion, arts, sports, technology and other articles less urgent than those at the top of the main columns. They make it all work together.
Behind the Scenes with a MOTH
Above: Wide load. The MOTHs as they appear in their visually elegant but usably problematic home page form.
We had MOTHs in our old design, too, but they were comparatively diminutive and required some inelegant typographic overlays for labeling. In this design, they’re a bit simpler to implement, though they did provide their own challenges. Because there’s a real, live, human editor applying editorial judgment to each photo, they must be manually cropped. To minimize labor for those already hard-working folks, we had to standardize on a single size for all the MOTHs produced. For those that appear on the home page and on article pages, that’s a no-brainer, because they’re represented in exactly the same manner in both cases: a full row of images spanning the entire width of the page.
But for the section fronts, like, say, Movies, the uniformly sized MOTHs present another challenge: they span only the first two major columns, which isn’t quite enough room for four MOTHs, but more room than we would have liked to have given to just three. In this case, as you can see, the pictures don’t look particularly comfortable, with far too much room left over on either side of the three we fit in there.
Grid Matters
This is the result of an inconsistent layout grid: the underlying column structure on the home page is slightly different from the one we use on the section fronts and article templates. There are some complicated reasons for why this is so, but it serves as a good illustration of two key points: first, putting together the visual framework for a site as complicated as NYTimes.com is an intricate puzzle, and second, grids matter a lot in information design. Now you know why I’m so crazy for them.
Above: three’s company. Narrower but more usable MOTHs from the Movies section.
It’s true that the grid differential on the section fronts causes an aesthetic problem, but as it happens, it actually helps us with a usability problem: the MOTHs are designed to scroll forward and backward, one by one, in a slide-show like behavior (using JavaScript), and so they require an intuitive visual cue in order to suggest that functionality.
Our solution for this on the home page was to tuck a forward arrow and a back arrow in the title bar of the entire MOTH structure, just above the right-most MOTH. This is tidy and visually elegant, but in some informal user testing we ran in the office, I wasn’t very encouraged that as many people will spot them and understand them as I would like. Looking again at the Movies section front, with the arrows placed instead on either side of the three MOTHs and within the excess space left over from the grid differential, the arrows are clear, lucid and usable — they almost can’t be missed. I would bet money that almost nobody overlooks or misunderstands those arrows, especially in comparison with their counterparts on the home page. It’s just too bad they’re not as optimally elegant as I’d like to see.
The Human Hand in Evidence
I almost forgot one other thing that I really like about the MOTHs. In news design, there is a propensity to favor the photographic image to visually communicate events and ideas. The Times generates no shortage of beautiful photography, and I begrudge none of it, but lately I’ve become really preoccupied with the relative scarcity of illustration on the World Wide Web.
Basically, I’d like to see a lot more of it — it’s not particularly in keeping with my wannabe Modernist pretensions, but I started out my design school career thinking I was going to be an illustrator, so I carry a torch for the discipline. Anyway, there’s something about these MOTHs that’s particularly conducive to showcasing illustration, or at least in these first few weeks of usage, the editorial team has done a great job making use of hand-drawn images when they’re appropriate. It’s nice to see some evidence of human artistry amongst all that hard news and slick lifestyle photography. All of which is a segue into a new initiative I’m brewing up to use at least a bit more illustration online… but that’s a post for another day
I think I know where you’re going with this, and as you already know, I like the idea.
But maybe I’m wrong. At any rate, I must agree with you on illustration… I find it very pleasant to have a bit of a hand-drawn interlude between all the fancy photography. As much as I love photography, life is much more interesting with variation.
I’ve always (well, for the last couple of weeks) liked that middle element, too. It separates two entirely functionally different sections of the page with a big fat opportunity to call out some of the most interesting content in today’s paper.
When I first saw it, I called it “the belt”. I like referring to visual design elements as articles of clothing: Footer=”shoes”, header=”hat”, nav=”collar”.
I too love the band of images on the front page. I really like it in conjunction with the video player. It really helps to create the experience of the home page as 3 distinct sections as you scroll down. The second section being very image and media rich with the video player, the ad, the band.. and the third section, at the bottom, giving you the full breadth of the site. I have been really impressed with the home page. I think it was a challenge to move the the wider format.
Given a few days, I now know that any minor grumblings I had with the new layout ended up being the growing pains of adjusting to seeing more information on the screen. These are exciting times! The adoption of the wider format across the internet, is a far greater step towards generating a real Web 2.0 experience…
I’m another fan of the “belt” on the home page. I recently tested a similar UI and found that the addition of a pagination navigation (1, 2, 3) above the scrolling content helped those users that did not see the arrows navigate successfully. Did you play with anything similar during your design process? The idea is inspired by the feature area on the iTunes store landing page. It is not only effective as a back-up navigation method, but better sets expectations as to how much content is available and how much of the complete set is currently in view.
Matt: We weren’t as conscientious about our informal usability testing as we should have been, as we put the MOTHs in front of users pretty late in the game. It had occurred to us to add pagination cues there, but there just wasn’t time to figure out how it would fit in with the visual language. It seems like a small thing, I know, but when you’re trying to re-fit a huge locomotive like NYTimes.com, there are a million little things that all seem to demand the same amount of attention.
Now we’re going through the site and trying to fix up various things here and there. The navigation for scrolling those MOTHs is one area we’ll get around to sooner than later, hopefully.
Wow. I was one of the great clueless…I had NO IDEA that the horizontal band o’ images scrolled…not because I overlooked (or didn’t) the navigation arrow, but because I just didn’t think this was the sort of thing that one would see on the home page of nytimes.com.
Now why was that?
It has to do, I think with expectations and the idea that on the home page, “it’s all laid out for you”–it’s not so much an interactive hunt for content as it is a smorgasbord of possibilities.
Now I know that it’s a smorgasbord with..surprise!..some of the entrees tucked away behind a trick cabinet.
And by the way, I also find myself clicking on what I expect to be an article on the home page and discover that it’s a video. Which you’d think would be a bonus…but it’s not when my quest for more details yields instead an Associated Press brief which is basically just a fifteen second woman’s voiceover reading the story over a stillframe.
But I’m sure I’m neither typical or “in the demo”, so, well.
By the way, I completely agree with you that Illustrative art works great there. It’s that tasty square aspect, underused since the time of the SX-70.
i am beginning to really like the redesign – despite initial familiarity issues – i did notice how radically better the site appears in the mac/safari than my pc/firefox – like night and day… so – congratulations on your efforts on the mac, i wish i could get that type of typographic care on the pc..!
Martin Bialasinski
As for the arrow buttons on the section pages:
How about making the link area span more than the button alone? There is plenty of room and it would make it easier to hit the link for users not wearing the black belt of micro-precision mouse mastery 🙂
I, too, dig this nothing-but-sweet navigation. In fact, to me, horizontal navbars are underused. That’s sad, because this can shorten web pages a lot, and hide less relevant informations. The drawback of the technique is that Javascript has to be enable.
Suggestion: Add movement. Why add this superfluousness? Because it’s not immediately clear if user-action (clicking) adds one new unit, or a whole row of units. Know what I mean? It confused me at first what additional content was added, and a very quick visual sliding would fix it up.
One of my favorite features on the 
I think I know where you’re going with this, and as you already know, I like the idea.
But maybe I’m wrong. At any rate, I must agree with you on illustration… I find it very pleasant to have a bit of a hand-drawn interlude between all the fancy photography. As much as I love photography, life is much more interesting with variation.
I’ve always (well, for the last couple of weeks) liked that middle element, too. It separates two entirely functionally different sections of the page with a big fat opportunity to call out some of the most interesting content in today’s paper.
When I first saw it, I called it “the belt”. I like referring to visual design elements as articles of clothing: Footer=”shoes”, header=”hat”, nav=”collar”.
I too love the band of images on the front page. I really like it in conjunction with the video player. It really helps to create the experience of the home page as 3 distinct sections as you scroll down. The second section being very image and media rich with the video player, the ad, the band.. and the third section, at the bottom, giving you the full breadth of the site. I have been really impressed with the home page. I think it was a challenge to move the the wider format.
Given a few days, I now know that any minor grumblings I had with the new layout ended up being the growing pains of adjusting to seeing more information on the screen. These are exciting times! The adoption of the wider format across the internet, is a far greater step towards generating a real Web 2.0 experience…
I’m another fan of the “belt” on the home page. I recently tested a similar UI and found that the addition of a pagination navigation (1, 2, 3) above the scrolling content helped those users that did not see the arrows navigate successfully. Did you play with anything similar during your design process? The idea is inspired by the feature area on the iTunes store landing page. It is not only effective as a back-up navigation method, but better sets expectations as to how much content is available and how much of the complete set is currently in view.
Matt: We weren’t as conscientious about our informal usability testing as we should have been, as we put the MOTHs in front of users pretty late in the game. It had occurred to us to add pagination cues there, but there just wasn’t time to figure out how it would fit in with the visual language. It seems like a small thing, I know, but when you’re trying to re-fit a huge locomotive like NYTimes.com, there are a million little things that all seem to demand the same amount of attention.
Now we’re going through the site and trying to fix up various things here and there. The navigation for scrolling those MOTHs is one area we’ll get around to sooner than later, hopefully.
Wow. I was one of the great clueless…I had NO IDEA that the horizontal band o’ images scrolled…not because I overlooked (or didn’t) the navigation arrow, but because I just didn’t think this was the sort of thing that one would see on the home page of nytimes.com.
Now why was that?
It has to do, I think with expectations and the idea that on the home page, “it’s all laid out for you”–it’s not so much an interactive hunt for content as it is a smorgasbord of possibilities.
Now I know that it’s a smorgasbord with..surprise!..some of the entrees tucked away behind a trick cabinet.
And by the way, I also find myself clicking on what I expect to be an article on the home page and discover that it’s a video. Which you’d think would be a bonus…but it’s not when my quest for more details yields instead an Associated Press brief which is basically just a fifteen second woman’s voiceover reading the story over a stillframe.
But I’m sure I’m neither typical or “in the demo”, so, well.
By the way, I completely agree with you that Illustrative art works great there. It’s that tasty square aspect, underused since the time of the SX-70.
i am beginning to really like the redesign – despite initial familiarity issues – i did notice how radically better the site appears in the mac/safari than my pc/firefox – like night and day… so – congratulations on your efforts on the mac, i wish i could get that type of typographic care on the pc..!
As for the arrow buttons on the section pages:
How about making the link area span more than the button alone? There is plenty of room and it would make it easier to hit the link for users not wearing the black belt of micro-precision mouse mastery 🙂
I, too, dig this nothing-but-sweet navigation. In fact, to me, horizontal navbars are underused. That’s sad, because this can shorten web pages a lot, and hide less relevant informations. The drawback of the technique is that Javascript has to be enable.
Suggestion: Add movement. Why add this superfluousness? Because it’s not immediately clear if user-action (clicking) adds one new unit, or a whole row of units. Know what I mean? It confused me at first what additional content was added, and a very quick visual sliding would fix it up.