The Home Page’s Middle Manager

Khoi

19 years ago

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