Here’s a report from my city to illustrate just how important user testing is, especially in situations (very common to web design) when you’re introducing new technology. . . .

Over the last year Boston has been installing new fare-collection boxes in all of its buses. The transportation authority’s goal was to integrate new fare-collection technology (the boxes) with old fare technology (swipe cards, bills, coins, and transfer tickets), primarily in order to a) thwart fraud and b) finally allow customers to use the same tickets on the bus as they do on the Boston subway.

Here’s an image of the new box, lifted from the website of its designer, the German firm of Scheidt & Bachman:

To the left is a bill slot and a coin slot. To the right is a feeder for monthly passes and subway cards.

Here is a photo of the old fare box, courtesy Mika Product Design at MIT:

To the left is a coin funnel. To the right is a card swiper. Where does cash go in the old box? Why shoved in the side of course :-)…

The need for a new fare box was clear, but the choice of Scheidt & Bachman’s machine clearly neglected the mechanics of riding a Boston bus. These blogs cover the frustration very well—here, here, and here—but it boils down to three big design mistakes:

1. Passes must now be fed into the fare box instead of swiped, but countless commuters attach their pass to a lanyard or keychain for quick access/fast boarding. The new design not only adds time for those getting their passes out (namely women, who tend to keep their passes in a wallet in a purse or bag) but instead of a split second swipe, each pass user must wait a few seconds while the machine sucks in the pass, verifies it, and spits it back out. (UPDATE: A coworker just suggested that this is because with stored-value cards the cards must be written to, not just read.)
2. Dollar bills must also be fed into the machine, rather than shoved in the side. This takes time as well, especially when you don’t have a crisp bill handy. The side-shove might have been unsightly, but it was effective, especially when the driver had one of these:
   
3. Worst of all, coins must be fed one coin at a time instead of dropped in a funnel. Not only is this incredibly time-consuming—certain bus lines can have 20+ passengers getting on at once, with at least half of them using coins, with the fare being $.90, meaning five coins apiece—but it’s dangerous. People will be fumbling with bags and winter gloves, often on a bus that’s starting to move, all just to pay the fare.

It’s design at its worst. The meannest thing you can do to a faithful user is introduce something new and fancy to your site that destroys their ability to use it. Just as when you ignore accessibility issues, it shows a lack of respect and at the very least a lack of professionalism.

So when you’re planning out your next web project, keep the lesson of Boston’s buses in mind.

Share This

It’s a bit of an irony that tools that put us “in touch” with faraway others can’t actually allow us to share space with them, let alone feel the change in the air as they enter a room, the strength of their handshake upon introduction, or the hint of their perfume. “Reach out and touch someone” was the famous AT&T slogan that every four year old knew—and that every four year old knew was, well, a reach.

And it’s a shame, because the sense of touch—literally, and in the general sense of the shared experience of space—is the essential sense. It’s what makes or breaks you. (Take, for example, emperor and polyglot Frederick II, who wanted to discover the “original” language that people would speak if they never heard a language. He took newborn babies and instructed their foster mothers to bathe and feed them, but not to fondle, pet, or talk to them. Every child died.) There is nothing so important to a person’s mental and ultimately physical well-being than the belief that at least one person shares their experience of the world. Electronically, what else are blogs for, then? Or Web 2.0? Or good design? They’re there to share. But none of these is physical. And none is as pleasing as, say, a pat on the back.

But now to backtrack. . . .

Here, on the obstetrical ward, is a double sink in a little room—a chrome faucet, two basins and drains, just like any kitchen sink. There is a counter on the left, and a counter on the right. Overhead, a long heat lamp lights and warms the two counters and the sink.

This is where they wash the newborns like dishes. A nurse, one or another, spends most of an eight-hour shift standing here at the sink.

Different nurses bring in newborns, one after another, and line them down the counter to the sink’s left. The newborns wear flannel blankets. Knit hats the size of teacups keep sliding off their wet heads. Their faces run the spectrum from lavender through purple and red to pink and beige.

You don’t feel the warmth of the heat lamps or the water, as author Annie Dillard describes them in her book For the Time Being. You can’t feel the eight-hour ache in the nurse’s legs. You can’t touch the flannel or the knitting or the slick foreheads.

But can’t you, just? Of course.

Web design may have no sense of touch, but neither does the written word. The difference, at present, is that the written word has had time to develop its language for communicating touch, to get what a person sees on the page to trigger the participation of imagination and, more importantly, tactile memory.

Web design is slowly developing its own language for the sense of touch, as well as generally for shared space. Design standards contribute to this development by providing a consistent experience of the web.

What will further this development? It could be something we’re told all the time: design with an actual person in mind. Don’t think of your site as a collection of visual elements. Don’t think of it as HTML or CSS or PHP. Don’t even think of it as page.

Think of it as a room you can walk into and shake someone’s hand.

Share This

How’d Times reach such saturation? Simple. It’s the default font on the world’s dominant word-processing program, Microsoft Word.

But no longer. . . .

Earlier this year, Microsoft released betas of Office 2007, and the first thing reviewers noticed, besides the new interface, was that Times New Roman had been deposed as the default font with something called . . . Calibri?

This article at Poynter Online provides an excellent overview of the new fonts included in Office 2007, including Calibri. It is indeed a big change: developers of MS Office have come to agree that sans-serifs like Calibri are truly easier to read for large amounts of on-screen text.

But what will happen to Times New Roman? In ten years, will it be just another term-paper alternative? Will instructors’ syllabi accept Calibri, or will they stand firm with Times because so many Word documents are still printed out to be read? Would you ever write a paper in Calibri because it’s easier to read on a screen, and then change it to Times at the last moment for your print reader? What about Phil’s theory about The Secret Lives of Fonts—is Calibri so pretty that universities will experience a round of aesthetics-inspired grade-inflation? And wtf is up with the new fonts’ not being available on Macs without a separate license? In general, what are we in for if the font-king is dead?

Share This

Neither site has undergone such radical updating since abandoning their neonatal designs in the late 1990’s. In fact, NYTimes.com had been clunking along with the same table-rific skeleton for eight years (see the 1998 design and the last pre-robots.txt design in 2003). CNN.com has historically been less conservative, trying out different designs (December 2000 vs. April 2005) taking a respectable stab at a standards-based design over the last year.

But the redesigns unveiled in the last two weeks are significant, not just in their scope, which encompasses both the look-and-feel and the architecture of both sites, but also in their acknowledgement of—some may argue capitulation to—aggregator, blog, and social-site design. . . .

First and foremost, both of these super-mainstream sites have taken the radical step of granting editorial input to users, namely by promoting “most popular” sections from a thrown bone to an essential element—red meat, as it were. CNN.com does so with a “top stories/most popular” choice smack in the middle of the front page; NYTimes.com, though visually more conservative, places a “most popular” tab at the top that links to a robust aggregate-user-generated page.

Next, both sites have at last made images and video a central component, with NYTimes.com taking the lead. While both had long provided non-text content, it was always supplemental and usually felt repurposed, as if they had on eye on selling the content to local TV stations—or vice versa in the case of CNN, which has long provided video from local stations. NYTimes.com has been drifting away from this model for some time and has in the last two years developed incredible web-only graphics, tutorials, photo tours, movie reviews, and mini-documentaries. With a nod to sites like Youtube and Google Video, NYTimes.com has now elevated video to its own elegant site section, video.on.nytimes.com.

Lastly, both sites, in a departure that must be hard for them, have largely abandoned the the lead-as-snippet model of previewing a story. CNN.com has done away with snippets—the one sentence blurb below a headline—altogether. NYTimes.com still has snippets, but they are now genuine encapsulations of the article’s topic, tone, and angle, rather than a reusing of the article’s lead paragraph. (Ironically perhaps, this is reminiscent of the sub-heads used in papers in the early 20th century.) Writing these snippets takes a bit more work on someone’s part, but it makes evaluating Times articles from RSS feeds and programs like Google Reader substantially easier.

The redesigns are works-in-progress, what with NYTimes.com’s offering a beta version of “My Times,” their stickiness-theory-inspired version of Yahoo and Google personalized homepages. But altogether, what do you all think of the redesigns so far? They were needed, that’s for sure. But are user-centric news sites going to be the norm? How much editorial control will they relinquish—and what will this mean for smaller news sites . . . or the web at large?

Share This

Between e-mails, blogs, news sources, and literary sites—let alone on-screen reading required for our jobs—we read a lot of long-form writing every day. And much of it is terribly designed when it comes to readability. Teeny type sizes, narrow line-heights (or leading, for print folks), low contrast, superwide lines—it’s enough to make your eyes throb.

Fortunately, though it hasn’t yet “trickled up” to bigger sites, it’s clear now that many web designers are starting to put as much thought into readability as they historically have into navigation, layout, and functionality.

As a starting point, look at the six most recent additions to the gallery on Stylegala, and you’ll see a number of things in common:

(The six: Veerle’s Blog, UX Magazine, VTwelve Design, Dress for Dialogue, Matija Turcin, The John Carroll School)

1. Sans-serif typefaces. Readers may think sans-serif types feel modern. And they’d be right. But the reason Arial, Verdana, Trebuchet, and the rest feel modern are because they’re now so common on the best-designed sites. There’s a growing consensus among designers that sans-serif types read far better on a screen than serif types. Even on screens with great resolution, serifs generate visual noise where they never did in print. In contrast, sans-serif types read more cleanly.

2. Line-height. Line-height is on the grow! In the trend towards more whitespace, this is probably the most valuable kind for your eyes. Veerle’s Blog uses 150% line-height for posts, and so does UX. Compare that kind of readability to that of an older site with 100% line-height.

3. Color. This is where things are still messy, where there’s no set trend. Each of the six sites above makes use of a wide palette, even for text meant to be read for a while. Some sites succeed, though others fail. There’s no question Matija Turcin’s site would be very difficult to read for any longer than a minute or two. But other designers, such as Matt Webb, have found ways to use a lower-contrast palette in ways that are extremely kind to the eye.

So the question that remains is this: to what extent is the readability of text dependent on color? Is black text on a white background, or vice versa, the way to be nice to your reader, or for longer texts to be easy to read must there be a good deal of color—or images—to give the eye something else to enjoy?

Share This