UX Hero

What’s wrong with this picture?

If you guessed “the tacked-on laminated Westin Hotel podium sign” you get a cookie.

Think of the stage as a user interface. Everything that isn’t the speaker is noise that users must actively ignore. Like logos stamped on phones.

Owning the quality chain

Lots of people accuse Steve Jobs of being a control freak. I prefer to think of it as Apple owning the quality chain.

From top to bottom, Apple takes responsibility for the quality of their products. Got a problem? Go to the Apple Store. Need free training? Apple Store.

That’s ownership.

To see what abdicating ownership looks like, check out John Dowdell’s post about mobile Flash (and don’t miss the comments).

When you’ve got an operating system made by Google, a handset made by, well, anybody, sold by a meddlesome carrier, with Adobe’s Flash sitting on top, the quality chain is broken.

I’d pity Dowdell for having an impossible job if his first reaction wasn’t “blame the user!”

When people say that Android vs. iPhone is a replay of PC vs. Mac, in one sense they’re right. Nobody owns the quality chain for PCs, so you get cheap, overdesigned Dell hardware running Microsoft’s uninspired operating system, sold to you by a Best Buy blue shirt.

Alignment

“To be succinct: I’m not sure that I serve my audience by worrying about how a new approach is going to help or hurt Barnes & Noble.” — Seth Godin on leaving traditional publishing

Think about your favorite products. I bet those with the best user experience are made by companies that align their interests with yours.

One reason Apple products are just better is that Apple’s customers and users are one and the same. Apple profits directly by selling premium stuff that people love.

Contrast that with the PC ecosystem. End users aren’t Microsoft’s most important customers; Dell is. The quality feedback loop between maker and user is broken.

Have you ever read How Buildings Learn? My favorite chapter explains why so many expensive university buildings are reviled by their occupants.

It turns out the architect’s client is not the occupant, but the university endowment. The architect and university both want expensive, novel, “prestige” buildings that photograph well. Meanwhile the occupants are forgotten until the malpractice suit over chronic roof leaks.

Have you hugged your web designer today?

Jason Santa Maria wrote about the shortcomings of today’s web design tools. He is more forgiving than I am…

Adobe. They talk web design, but their products are really about print design and image processing. Dreamweaver and Fireworks, their tools made explicitly for the web, don’t fit today’s best practices and workflows. Dreamweaver is a joke, only good for making old school image maps. Fireworks, while more useful, is clunky, and still is just for making graphics instead of working layouts. The icing on the cake is that Adobe products are known to be bloated, crashy, and unusable.

Web Typography. We’ve come a long way, baby. Kinda. While we have some workable options for embedding web fonts, there are serious caveats. With TypeKit you have to lease the fonts forever. Other web font vendors let you embed fonts, if you can find the license and decipher it. Like Adobe’s software, the way fonts are sold and licensed is optimized for print design, not web design. Even if you manage to find a good embeddable font, it’s going to look crummy in Windows’ type rendering. Which brings us to…

Browsers, especially IE. Things have gotten better on this front thanks to web standards evangelists and the good folks behind Firefox and Webkit. However, even if IE9 comes out and is great, I guarantee it will still be a bother to test, and we’ll still have to support IE7 and 8 for years.

CSS. It just kind of sucks. I think CSS’ biggest problem is that it’s optimized for specifying colors and fonts, but poor at specifying layout. Wouldn’t it be nice to be able to specify a grid layout in CSS instead of cobbling it together by styling each HTML element? Also, CSS tends to get bloated since it’s not programmatic and makes you repeat yourself.

I could go on, but you get the point; all our tools to build the web are blunt and rusty.

iPhone development sure is tempting lately.

I redesigned AVC.com

You can see it here. I’m running heatmap tests comparing the new and old versions right now. More on that when I have more data.

It’s interesting how people react to the new larger font size. Most readers like it, but for some it’s a bit jarring because so much of the web is still set in tiny Verdana.

Beside the type, Fred’s readers are noticing much faster pages, which is a big win.

What we wanted to do with this redesign

  1. Readability: If it looks better in Instapaper than in the browser, back to the drawing board.
  2. Mobile Ready: His old template (that I also did) had mobile CSS for the iPhone, but on this go-around we made sure that it looked great on the iPad and Android too.
  3. No More Widgets: 3rd party blog widgets tend to be noisy, more about promoting their own brand than being useful.
  4. Speed: Widgets are also heavy, injecting a ton of javascripts, images, and HTTP requests into each page view. Even worse, they often don’t use compression or long cache headers. We took AVC.com weight from almost 900KB and 130 HTTP requests to 250KB and  39 requests (and just 40KB when everything is cached). Now pages load in well under a second instead of ~5 seconds.
  5. Mobile Ready, Part II: The iPad and iPhone are now my target browsers, their limitations and features informing the design in subtle ways. For example, since getting the iPad, I prefer pages with subtle textured background. The texture serves to subtly anchor the scroll state, making it feel more tangible, and it also takes the edge off the screen brightness, allowing for visual effects like button embossing.

    However, if I had to pick one feature in the iPhone OS browser that changes everything, I’d say it’s the “double tap to zoom a column” feature. It’s a subtle, tiny thing, but it completely subverts clutter on the web, which makes the web a pleasure to read. Column zoom makes the iPad the best web browser yet devised.

Update:

Within an hour of the redesign launch, enough “the font is too big!” comments rolled in that we decided to nudge the base font down from 18px to 16px.

Thoughts on this:

  1. After so many years of tiny type, the world isn’t ready for 18px yet. One commenter called it “yelling”.
  2. It was too much change, too quickly.
  3. Fred’s audience is finance oriented, and they prefer information density to breathing room. Think about Bloomberg machines, stock symbol tickers, and the way stock data is presented in newsprint.
  4. The web is such a “your milage may vary” medium. On reflection, the type did look a little big on Arial in Windows, and Windows in general is biased toward making smaller type look good. Plus, you never know whether a Windows user has tweaked their DPI settings because so often the default DPI makes things look too small.
  5. Interesting, no Mac or iPad users I ran it by said the type was too big. I think this has to do with type being rendered in a more aesthetically pleasing way on Macs. If a font renders a little ugly when small, it goes all sore thumb on you when large.