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.
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.
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