Last week in Blenderbox UX (August 16-20, 2010)

A roundup of links shared by the UX team at Blenderbox last week:
Screenshot of UXMyths.com

  • UI Stack Exchange: collaborative Q&A for UI and UX people. Get backup for those times when you know you’re right but can’t remember why.
  • UX Myths: a straightforward list of user experience and design myths. My favorite thus far is #13: Icons Enhance Usability
  • Balsamiq Mockups: the tool has been around for awhile, but Matt just installed the trial version and reported that it felt “fun”
  • Get a firm grip on your web content: Fantastic, client-ready diagram. Perfect explanation of how to kick off a content strategy project.

Unrealistic design: The NYT’s Taxi TV proposal

Last night, the New York Times‘ Op-Art (?) section posted a proposal from Antenna, a NYC design agency, to redesign the annoying clamor that is the NYC Taxi TV experience.

Anyone could make this screen look better. But it takes more than that to make it a good design.

I had an instant, negative reaction to the proposal. Not because of the design itself, which demonstrates a solid grasp of the information cab riders want and the context in which they’re consuming the information, but because the designers understood the design problem all wrong.

If the sole objective of Taxi TV is “providing useful information to riders,” then Antenna’s design is commendable. But that’s not the only–or even the primary–objective of Taxi TV. A 2007 Times article about NYC’s Taxi TV contracts confirms as much: Taxi TV is about advertising, not providing useful information. (Sidenote: WABC’s Taxi TV page for ad buyers provides a pinpoint description of NYC taxi passengers, as only a marketer could—“upscale, affluent and captive”.)

It’s unpalatable, but Taxi TV is an advertising platform first and foremost, which means that Antenna’s proposal is a failure. The client—advertisers—would never agree to having their content off by default, hidden behind an “Entertainment” button. That design wouldn’t make it past the first client review (if even that far).

This is a perfect illustration of the tension designers face between providing the end user with the best possible experience and not getting fired by your client for doing so. For Taxi TV, the best user experience is clearly at odds with the business objectives. A good designer reconciles that issue instead of pretending it doesn’t exist.

How I Would Improve Taxi TV

I’ll put my money where my mouth is and offer a better proposal. Here are the design principles I’d follow, ones that I feel would result in a realistic and implementable design for Taxi TV’s interface.

Design to keep the screen on

From the advertisers’ perspective, nothing is worse than what I regularly do: hop in the cab, get instantly annoyed at the screen blaring at me, and immediately hit the OFF button on the screen. Of course, Taxi TV should allow users to turn the system off, but the content and the UI should do all it can to convince users that Taxi TV is worth keeping on. To do this, start the cab ride with a dashboard or overview of the things a passenger can do: see a map, get fare information, or watch TV. Don’t just give the user a choice, show them what they could experience with a small, live updating map like the one Antenna designed, a live (but muted) TV screen, and live updating fare information. Entice passengers to drill down into any of these three options.

Shut up and enjoy the ride

Leave the sound off until the passenger turns it on. This allows ads to be seen while decreasing the chance that a user immediately and instinctively turns the TV off when the ride starts. I would do my best to convince the client that muted ads are better than no ads at all. This could even be a useful design constraint for advertisers: make your ads compelling enough that passengers want to hear them. Or, to take it a step further, the NYC TLC could have structured the entire advertising model so that advertisers only pay for passenger interactions (as opposed to muted impressions).

Don’t do anything unless the user requests it

Taxi TV’s posture should be passive and reactive. Let the passenger approach Taxi TV and provide only what the passenger requests. Ultimately, this will feel like a less annoying experience to the passenger and makes them less likely to form a negative view of Taxi TV with repeated experiences. As a result, you have a passenger audience that is less hardened and more likely to see Taxi TV as a useful resource than an obtrusive annoyance.

Themes from An Event Apart (Boston 2010)

The farther away one gets from the end of a conference, the less likely one is to write about it. I’m no exception, which is a shame because there was a ton of great thinking and practical advice that came out of the energizing An Event Apart 2010 in Boston.

So, on the tiny off-chance that I can’t write in-depth, lucid details about everything that inspired me, I wanted to at least capture the broad themes I heard last week.

Without further ado, here they are:

Your designs should embrace the diversity of browsing experiences offered by different devices

Media Query

  • It is no longer necessary—or even possible—to make the browsing experience the same across all browsers. Like HDTV, the device determines the experience you get; the experience is not (and should not be!) the same for every device. Design and testing processes should change to reflect this reality.
  • CSS3 media queries are an easy, stylesheet-based way to adapt our designs to devices with variable widths.
  • Read more: “The CSS3 Experience” by Dan Cederholm, “Hardboiled Web Design” by Andy Clarke and “Everything Old is New Again” by Eric Meyer.

Mobile is moving to the center of the web design practice

Growth Opportunity

  • Change is coming: designing for mobile browsers will represent a significantly larger chunk of your design focus and energy in the next 5 years, due to the incredible proliferation of smartphones.
  • Consider designing the mobile experience before the desktop experience, it allows you to focus on users’ primary needs.
  • Designing mobile experiences means embracing—and designing for—flexibility.
  • Read more: “Mobile First” by Luke Wroblewski, “Everything Old is New Again” by Eric Meyer, and “A Dao of Flexibility” by Ethan Marcotte.

Usable is no longer good enough

Aarron Walter - An Event Apart: Seattle 2010

There’s still no substitute for good planning, informed design, and responsiveness, both in project management and product design

  • Plan for change at all points of the project, from scoping the project down to the individual design decisions.
  • Avoid adhering to hard and fast rules if you have the opportunity to investigate, research, and make an informed decision. But don’t ignore your gut.
  • The more techniques you learn, the more flexible your processes can become.
  • The qualities that contributed to the success of the web as a platform are the qualities that make us successful as web developers: rough consensus, working code developed quickly, velocity, and responsiveness.
  • Read more: “Put Your Worst Foot Forward” by Jeffrey Zeldman, “Anatomy of a Design Decision” by Jared Spool, and “How the Web Works” by Jeff Veen.

For more details from the individual talks, Luke Wroblewski’s conference notes are that rare combination of concise and thorough. I’ve linked to them liberally above; here’s the full list: Luke’s An Event Apart notes.

The problem with Clients from Hell

Clients from Hell bugs the hell out of me. Take this recent post, for example:

Me: “We did some research that indicates that the registration may have run out. Your organization registered and managed the domain name, so I can’t help with this since we have no involvement in managing the domain name.”

Client: “[very angry] I am reading your email in disbelief. You are the webmaster – how can there be an aspect of our website that you have no control over?”

Why is that client from hell? Because they don’t understand the relationship between domain name registration and site functionality? Because they called the webmaster when there was a problem with the website?

Sites like these, while good for the occasional laugh, only contribute to web professionals’ image as aloof, arrogant, know-it-alls. If clients don’t know how this stuff works, it’s not their fault.

On a positive note, Michael Beirut’s talk about great clients is inspiring, and highly recommended:

2010/01 Michael Bierut from CreativeMornings on Vimeo.

960 Grid System: HTML wireframes?

A long time ago for a project that didn’t require much visual design work, I created wireframes in HTML. I thought I was making the handoff to our developers a little smoother, but it didn’t really work out that way. In my case, two things were wrong with this approach: 1) my basic assumption was off: creating the HTML for this project was not really the giant task that I assumed it was; 2) the code I wrote wasn’t really re-usable. *cough*

I think a lot of IAs & interaction designers have gone looking for this “holy grail” deliverable at one point or another—the deliverable that’s more than just your standard, garden-variety deliverable, the deliverable that is the shell of a site that everyone else builds upon. As far as I can tell, it never really works like that.

I forgot all about it until today, when I came across the Fluid 960 Grid System, a set of interactive page layout templates written with HTML, CSS, and Mootools.

I’m tempted to try wireframing with this framework, but I think it works best in the following situation:

  • Rapid development environment (or just the old fashioned compressed timeline)
  • Buy-in on using a 12 or 16 column grid from visual designers
  • Buy-in from developers that they can work with this framework with few modifications

Even if 960 Grids doesn’t work as a wireframing tool, I can see a lot of potential just for getting a quick idea across, or developing a clickable prototype for user testing.

Useful regular expressions in Google Analytics

Google Analytics support for regular expressions has come in handy a few times when I’ve needed to aggregate data from a few specific segments. To use regular expressions, scroll to the bottom of the report, where there is a dropdown menu and an input field that allows you to filter the data.

Google Analytics regular expression input field

Without further ado:

What percentage of users are using Flash 8 or higher?

Report: Visitors » Browser Capabilities » Flash Versions
Filter type: Include
Regular expression: 8\.|9\.|10\.

What percentage of users are using Flash 9?

Report: Visitors » Browser Capabilities » Flash Versions
Filter type: Include
Regular expression: 9.*

What percentage of users are on broadband connections?

Report: Visitors » Network Properties » Connection Speeds
Filter type: Exclude
Regular expression: dialup|unknown

What percentage of users have screen resolutions 1000 pixels or higher?

Report: Visitors » Browser Capabilities » Screen Resolutions
Filter type: Include
Regular expression: [1-9][0-9][0-9][0-9]x
Note: the trailing ‘x’ ensures that you’re matching a four-digit width (i.e., greater than 1000 pixels. Without it, the regular expression will match oddball resolutions like 800×1500. There probably aren’t enough of those to make a significant difference, but the trailing ‘x’ makes the result set more exact.

Learn everything you could possibly want to know about regular expressions in Google Analytics on this LunaMetrics blog post.

Why you should test your ad campaigns

I came across a great metaphor describing why multivariate testing of ad campaign landing pages (with a tool such as Google Website Optimizer) makes for a much more effective use of the money in an advertising budget.

The traditional way to do this is as follows:

  • Agree campaign budget
  • Build and sign off creatives (PPC ads, key words/phrases, landing page, offer details)
  • Take a sack of money
  • Move to top of building
  • Shake money out of sack
  • Sit back and hope

The better way to do this:

  • Agree budget
  • Brainstorm all the things we’d like to test (buttons, text, call to action msgs etc.)
  • Take 5% of budget and finalise *multiples* of these elements to test
  • Spend the 5% sending traffic to a multi-variate test
  • Find the ideal creative (based on conversion data)
  • Put this live
  • Spend the other 95% of the budget

The desktop, literally


“Layered Desktop,” by Gabriel Radic.

The desktop has been the primary GUI metaphor of operating systems for the last thirty years. Over that time, newer operating systems have stretched the desktop metaphor pretty thin, in the interests of better usability and faster task completion.

For example, remember when Apple’s System 7 would open each folder in a new Finder window, creating a cascade of windows that quickly became unmanageable? That was a literal interpretation of folders on your actual desktop. Fortunately, we now browse the contents of multiple folders within a single Finder window, an activity that doesn’t transfer to the stack of folders sitting next to me.

I found the wallpaper above really interesting: someone created a solution for organizing desktop icons which makes your computer screen look more like a desk, even though the design trend has been to move away from such literal interpretations. It’s not right or wrong—lots of people find it useful, judging by the comments—it’s a creative solution to a desktop organization problem.

Using Google as your address bar

I can’t tell you how many times I’ve watched my mom do this. From ReadWriteWeb:

More than 10% of the searches for the top 10 dating search terms were URLs (match.com, plentyoffish.com) and almost all of the queries were something that .com could have been added to for direct navigation. If mainstream users learned to navigate using the address bar instead of the search bar – what would happen to the search economy and innovation online?

The “tight collaboration” that created TimesPeople

Khoi Vinh on getting good ideas out faster by collaborating closely:

TimesPeople is the result of a tight collaboration between a small team of our technologists and designers and, for a new feature on our site, they managed to launch it in something like record time. It was actually a lot of fun bringing it to life, but the really important thing is the try-it-and-see approach that drove it. Rather than spend months and millions on creating the ‘perfect’ social networking addition to our site, we decided to take a good idea and get it out as quickly as possible. It’s certainly not perfect, but we’re hoping to learn as much as we can about how social networking makes sense in the Times environment.

From “People Wanted” (subtraction.com)