Coding Horror

programming and human factors

Font Rendering: Respecting The Pixel Grid

I've finally determined What's Wrong With Apple's Font Rendering. As it turns out, there actually wasn't anything wrong with Apple's font rendering, per se. Apple simply chose a different font rendering philosophy, as Joel Spolsky explains:

Apple generally believes that the goal of the algorithm should be to preserve the design of the typeface as much as possible, even at the cost of a little bit of blurriness.

Microsoft generally believes that the shape of each letter should be hammered into pixel boundaries to prevent blur and improve readability, even at the cost of not being true to the typeface.

So we answer the question with another question. What do you respect more: the pixel grid, or the font designer? It's not surprising that Apple would side with the font designer, because Steve Jobs thinks Microsoft has no taste. But me, I'm a pragmatist. Given the ubiquity of relatively low DPI displays, I'm with Dave Shea. I side with the pixel grid.

Joel talks about the pixel grid, and how Microsoft's type rendering pays more attention to it. Speaking as someone who thinks a lot about the pixel grid, I have to say I think I'm coming around to the idea that Microsoft's ClearType simply works better.

Alright, I'd better qualify that quickly. Think about it this way – as a designer, you don't just set type in Photoshop and let it go, right? You tweak. You kern. You attempt to match the letters to the pixel grid as closely as possible to reduce the blurriness. Sometimes spacing suffers, and you have to choose between a slightly blurry letter with perfect spacing, or a more precise fit within the pixel grid with just slightly off spacing. I can't be the only one that leans toward the latter most times.

And that's the difference here. ClearType is a closer match to what I do manually already. Yes, I prefer the way type on OS X looks; ClearType seems too sharp and overly blocky, the subtleties of the curves are lost and it's overly chunky. But, for the medium in which it's being rendered, it seems like a more ideal solution.

Dave's opinion carries a lot of weight here, not just because he's a well-known designer, but because the three citations he provides demonstrate just how common it is for designers to do exactly the kind of manual, per-pixel tweaks that ClearType does for us automatically. And it's not just an aesthetic choice, either – there's plenty of hard data to support the assertion that snapping fonts to the pixel grid improves reading accuracy.

A fascinating greyscale-only variant of this rendering techique, FontFocus, illustrates beautifully how subtle tweaks can "snap" fonts to the pixel grid for better readability:

imagination, 9ppem Helvetica, FontFocus on

imagination, 9ppem Helvetica, FontFocus off

Typography, if you haven't figured this out by now, is really complicated. It's one of the few areas of "computer science" that actually justifies the title. I highly recommend reading the entire FontFocus article, as it's very instructive.

Dave Shea thinks the pixel grid will be moot once high resolution displays become ubiquitious. I wholeheartedly agree, although I'm unsure when exactly that will be. The history of display resolution increases have been quite modest so far. Ten years ago I was using a single 17" 1024x768 display; now I'm using three 20" 1600x1200 displays. So you'll forgive me if I'm not overly optimistic about this theoretical jump from 100 DPI to 200 DPI.

I don't understand why Apple is asking us to sacrifice the present at the altar of the future. Can't we have hinting at low resolutions, and accuracy at high resolutions, too? Snapping fonts to a pixel grid may very well be irrelevant when everyone is luxuriating in the glow of their 200 DPI monitors. Until that glorious day arrives, respecting the pixel grid certainly makes text a lot more readable for those of us stuck in the here and now.

Discussion

What's Wrong With Apple's Font Rendering?

I had read a few complaints that OS X font rendering was a little wonky, even from Joel Spolsky himself:

OS X antialiasing, especially, it seems, with the monospaced fonts, just isn't as good as Windows ClearType. Apple has some room to improve in this area; the fonts were blurry on the edges.

I didn't believe it until I downloaded the first beta of Safari 3 for Windows and saw it for myself.

Font rendering in Safari 3 Beta:

Font rendering in Safari 3 beta for Windows

Font rendering in Internet Explorer 7:

Font rendering in IE7

All of these screenshots were taken under Windows Vista. It's easier to see what's happening if we zoom in a bit. These images are zoomed 200% with exact per-pixel resizing. Safari on the top, IE7 on the bottom:

Font rendering in Safari, closeup
Font rendering in IE7, closeup

At first I wasn't even sure if Apple was using ClearType-alike RGB anti-aliasing, but it's clear from the zoomed image that they are. It looks like they've skewed the contrast of the fonts to an absurdly low level. The ClearType Tuner PowerToy allows you to manually adjust the RGB font aliasing contrast level, as I documented in an earlier blog post, but I don't think it can go as low as Apple has it set.

I am absolutely not trying to start an OS X versus Windows flame war here. I used the quote above for a reason: there really is no single best way to render fonts; results depend on your display, the particular font you're using, and many other factors. That said, I'm curious why Apple's default font rendering strategies, to my eye -- and to the eyes of at least two other people -- are visibly inferior to Microsoft's on typical LCD displays. This is exactly the kind of graphic designer-ish detail I'd expect Cupertino to get right, so it's all the more surprising to me that they apparently haven't.

Update: I have a followup post that explains the font rendering difference. It looks like neither Apple or Microsoft is wrong; it's a question of whether you respect the pixel grid.

Discussion

Who Killed the Desktop Application?

I've sworn by Microsoft Streets and Trips for years, since the late 90's. I make a point of installing the latest version of Microsoft's mapping application all our desktop PCs for all our desktop mapping needs. It's also great on laptop PCs; combined with a USB GPS receiver and a laptop, Streets and Trips is a fine navigational aid on trips. Well, assuming you were going to take the laptop on your trip anyway, which I always do.

So I was taken aback when I noticed my wife was using Google Maps on her PC to map something. I asked her why she was using Google Maps instead of our old pal Streets and Trips, and she said, quite matter of factly, "Because it's faster."

Because it's faster?

I tested it myself, and she's right. It takes about 9 seconds to launch Streets and Trips 2007 on my (very fast) desktop PC, compared to about 3 seconds to load maps.google.com in the browser. It's a mixed-up, topsy-turvy world we live in when web mapping applications are now faster and more convenient to use than their desktop equivalents. But it's a fact.

What's worse, Google maps is easier to use than Streets and Trips, too. Here's the location of the DNA Lounge, a club owned by old-school Netscape engineer Jamie Zawinski, mapped in Streets and Trips.

Location mapped in Streets and Trips

Here's how I get directions to the club using Streets and Trips:

  1. Right-click the pushpin
  2. Click Route, add as End
  3. Navigate to the address entry bar on the toolbar
  4. Type my home address and press Enter
  5. Right-click the new pushpin
  6. Select Route, add as Beginning
  7. Click the car icon on the toolbar to bring up the route planner sidebar
  8. Click the Get Directions button

It's an incredible amount of work for what is probably one of the most frequent use cases for mapping software-- getting directions from point A to point B. Let's compare the same task in Google Maps. We're already up 6 seconds since the browser-based app loads in 1/3 the time of the desktop application.

Location mapped in Google Maps

Here's how I get directions to the club using Google Maps:

  1. Click the "To here" link
  2. Type my home address and press Enter

There's no reason Streets and Trips couldn't adopt the same conventions as Google Maps. But Streets and Trips seems to be completely stuck in the old world mentality of toolbars, menus, and right-clicking. All the innovation in user interface seems to be taking place on the web, and desktop applications just aren't keeping up. Web applications are evolving online at a frenetic pace, while most desktop applications are mired in circa-1999 desktop user interface conventions, plopping out yearly releases with barely noticeable new features.

This should be an unfair comparison. Streets and Trips is free to harness the complete power of the desktop PC, whereas Google Maps is limited to web browser scripting and HTTP calls to the server. Google Maps turns all those browser-based application weaknesses into strengths, by offering a bunch of online-enabled features that Streets and Trips doesn't: satellite view, real-time traffic data, and the new street view. Plus it's always up to date; we're guaranteed to be using the latest version with the newest features. And unlike Streets and Trips, it's free-- or at least ad-subsidized.

Streets and Trips will still be helpful in one very specific situation: disconnected use with a laptop and/or a GPS. But in every other case, Google Maps is superior. It's faster, it's simpler to use, and it has more features. It's hard not to look at the facts and conclude that desktop applications-- at least desktop mapping applications-- are dead.

Discussion

Designing for Informavores, or, Why Users Behave Like Animals Online

I'm currently reading through Peter Morville's excellent book Ambient Findability. It cites some papers that attempt to explain the search behavior of web users, starting with the berrypicking model:

In a 1989 article entitled "The Design of Browsing and Berrypicking Techniques for the Online Search Interface," Marcia Bates exposed the inadequacy of the classic information retrieval model characterized by a single query.

Instead, she proposed a berrypicking model that recognizes the iterative and interactive nature of the information seeking process. Bates understood that the query and the information need itself evolve as users interact with documents and search systems. She also recognized that since relevant documents (like berries) tend to be scattered, users move fluidly between search and browse modes, relying on a rich variety of strategies including footnote chasing, area scanning, and citation, subject, and author searching.

In short, Bates described information seeking behavior on today's Web, back in 1989. Google relies on the citations we call "inbound links." Blogs support "backward chaining" through trackbacks. Flickr and del.icio.us allow us to pivot on subject or author. The Web allows our information seeking to grow more iterative and interactive with each innovation. The berrypicking model is more relevant today than ever.

Bates' research was picked up by Peter Pirolli and Stuart Card and folded into their 1995 paper titled Information Foraging in Information Access Environments:

We use the term Information Foraging both to conjure up the metaphor of organisms browsing for sustenance and to indicate a connection to the more technical optimal foraging theory found in biology and anthropology. Animals adapt their behavior and their structure through evolution to survive and reproduce to their circumstance. Animals adapt, among other reasons, to increase their rate of energy intake. To do this they evolve different methods: a wolf hunts ("forages") for prey, but a spider builds a web and allows the prey to come to it. Humans seeking information also adopt different strategies, sometimes with striking parallels to those of animal foragers. The wolf-prey strategy bears some resemblance to classic information retrieval, and the spider-web strategy is like information filtering.

So if you've ever wondered why users behave like animals online, now you know. There's real science behind it in information foraging. Instead of hunting for food, users hunt for information, ruthlessly, and without compunction.

Puma in the woods

In practice, what this means is that users pursue "information scent". Users will click the back button nearly instantly when they don't catch a whiff of the right information from the current page. Jakob Nielsen explains:

Information foraging's most famous concept is information scent: users estimate a given hunt's likely success from the spoor: assessing whether their path exhibits cues related to the desired outcome. Informavores will keep clicking as long as they sense (to mix metaphors) that they're "getting warmer" -- the scent must keep getting stronger and stronger, or people give up. Progress must seem rapid enough to be worth the predicted effort required to reach the destination.

If you think this is all a bunch of trumped-up academic terminology for the basic principle of human laziness, well.. you're right.

Humans are under less evolutionary pressure to improve their Web use, but basic laziness is a human characteristic that might be survival-related (don't exert yourself unless you have to). In any case, people like to get maximum benefit for minimum effort. That's what makes information foraging a useful tool for analyzing online media.

Whether you call it "information foraging" or the rather more honest "maximum benefit for minimum effort", it's a powerful model of the way people actually work online. There are billions of web pages, and only a tiny fraction are worth the users' time. That's why informavores are unforgiving. They will..

The last point is noted by Nielsen in his new book Prioritizing Web Usability:

In recent years, highly improved search engines have reversed [the idea of "sticky" web sites] by emphasizing quality in their sorting of search results. It is now extremely easy for users to find other good sites. Information foraging predicts that the easier it is to find good patches [of information], the quicker users will leave a patch. Thus, the better search engines get at highlighting quality sites, the less time users will spend on any one site. This theoretical prediction was amply confirmed by the empirical data we collected for this book: People left the sites they found useless within less than two minutes.

Frankly, I'm surprised it's a whole two minutes. You better hope the information scent is strong on your page, because Informavores' fingers are always hovering over the back button. And they have very itchy trigger fingers.

Discussion

Don't Ask -- Observe

James Surowiecki, author of The Wisdom of Crowds, writes about the paradox of complexity and consumer choice in a recent New Yorker column:

A recent study by a trio of marketing academics found that when consumers were given a choice of three models, of varying complexity, of a digital device, more than sixty per cent chose the one with the most features. Then, when the subjects were given the chance to customize their product, choosing from twenty-five features, they behaved like kids in a candy store. (Twenty features was the average.) But, when they were asked to use the digital device, so-called "feature fatigue" set in. They became frustrated with the plethora of options they had created, and ended up happier with a simpler product.

It's impossible to see that you're creating a frankenstein's monster of a product-- until you attempt to use it. It's what I call the all-you-can-eat buffet problem. There's so much delicious food to choose from at the buffet, and you're so very hungry. Naturally you load up your plate with wild abandon. But after sitting down at the table, you belatedly realize there's no way you could possibly eat all that food.

In all fairness, sometimes people do, in fact, want complexity. The newly redesigned Google Korea homepage is intentionally complex. Google's Marissa Mayer noted "It was important where our classic minimalism wasn't working that we adapt."

New Google homepage for Korea, 2007

This echoes an earlier blog post by Donald Norman describing the way South Koreans seek out complexity in luxury goods:

I recently toured a department store in South Korea. Visiting department stores and the local markets is one of my favorite pastimes whenever I visit a country new to me, the better to get to know the local culture. Foods differ, clothes differ, and in the past, appliances differed: appliances, kitchen utensils, gardening tools, and shop tools.

I found the traditional "white goods" most interesting: Refrigerators and washing machines. The store obviously had the Korean companies LG and Samsung, but also GE, Braun, and Philips. The Korean products seemed more complex than the non-Korean ones, even though the specifications and prices were essentially identical. "Why?" I asked my two guides, both of whom were usability professionals. "Because Koreans like things to look complex," they responded. It is a symbol: it shows their status.

What's particularly telling in the study Surowiecki cites is the disconnect between what people say they want and what they actually want. You'll find this theme echoed over and over again in usability circles: what users say they will do, and what they actually do, are often two very different things. That's why asking users what they want is nearly useless from a usability perspective; you have to observe what users actually do. That's what usability testing is. Instead of asking consumers what features they wanted in a digital camera, the study should have presented them with a few digital camera prototypes and then observed how they were used. Consumers' success or failure interacting with the prototypes tells us more than a thousand surveys, questionnaires, or focus groups ever could. Unfortunately, creating physical prototypes of digital cameras is prohibitively expensive, so it doesn't happen.

Prototyping software, which is built out of pure thought-stuff, is a much easier proposition. Dare Obasanjo recently pointed out a great paper, Practical Guide to Controlled Experiments on the Web (pdf), which makes a strong case for frequent observational A/B usability tests:

Greg Linden at Amazon created a prototype to show personalized recommendations based on items in a shopping cart. You add an item, recommendations show up; add another item, different recommendations show up. Linden notes that while the prototype looked promising, a marketing senior vice-president was dead set against it, claiming it would distract people from checking out. Greg was forbidden to work on this any further. Nonetheless, Greg ran a controlled experiment, and the feature won by such a wide margin that not having it live was costing Amazon a noticeable chunk of change. With new urgency, shopping cart recommendations launched. Since then, multiple sites have copied cart recommendations.

The culture of experimentation at Amazon, where data trumps intuition, and a system that made running experiments easy, allowed Amazon to innovate quickly and effectively.

Why ask users if they'd like recommendations in their shopping carts when you can simply deploy the feature to half your users, then observe what happens? Web sites are particularly amenable to this kind of observational testing, because it's easy to collect the user action data on the server as a series of HTTP requests. You don't even have to be physically present to "observe" users this way. However, you can perform the same kind of data analysis, with a little care, even if you're deploying a traditional desktop application. Jensen Harris describes how Microsoft collects user action data in Office 2003:

Suppose you wanted to know what [Office 2000] features people use the most. Well, you start by asking a "guru" who has worked in the product for a long time. "Everyone uses AutoText a lot," the guru says. The louder the "experts" are, the more their opinions count. Then you move on to the anecdotal evidence: "I was home over Christmas, and I saw my mom using Normal View... that's probably what most beginners use." And mix in advice from the helpful expert: "most people run multi-monitor, I heard that from the guy at Best Buy."

SQM, which stands for "Service Quality Monitoring" is our internal name for what became known externally as the Customer Experience Improvement Program. It works like this: Office 2003 users have the opportunity to opt-in to the program. From these people, we collect anonymous, non-traceable data points detailing how the software is used and and on what kind of hardware. (Of course, no personally identifiable data is collected whatsoever.)

As designers, we define data points we're interested in learning about and the software is instrumented to collect that data. All of the incoming data is then aggregated together on a huge server where people like me use it to help drive decisions.

What kind of data do we collect? We know everything from the frequency of which commands are used to the number of Outlook mail folders you have. We know which keyboard shortcuts you use. We know how much time you spend in the Calendar, and we know if you customize your toolbars. In short, we collect anything we think might be interesting and useful as long as it doesn't compromise a user's privacy.

This may sound eerily like Big Brother, but the SQM merely extends the same level of reporting enjoyed in every single web application ever created to desktop applications.

The true power of this data is that you can remotely, silently, automatically "observe" what users actually do in your software. Now you can answer questions like what are the top 5 most used commands in Microsoft Word 2003? The answer may surprise you. Do you know what the top 5 most frequently used functions in your application are?

Don't get me wrong. I love users. Some of my best friends are users. But like all of us humans, they're unreliable at best. In order to move beyond usability guesswork, there's no substitute for observing customers using your product. Wouldn't it be liberating to be able to make design decisions based on the way your customers actually use your software, rather than the way they tell you they use it? Or the way you think they use it? Whether you're observing users in low-fi usability tests, or collecting user action data so you can observe users virtually, the goal is the same: don't ask -- observe.

Discussion