When a few hundred lines of javascript could equal $100 MM

If you click around the radio buttons above, the form resets. Orbitz does an AJAX call to reset the form with new HTML. I can select two cities, select my dates... and I just decide to click "Flight + Hotel", Orbitz blows away my form submissions (data loss!)  and replaces it with a blank form! Not only is this rude to the user, it's bad for business. 

This simple UX gaffe could be worth double digit percentage decrease in revenue for Orbitz over the course of a year. For a company that made over $700 MM, that's could easily be over 9 figures. 

This could be solved with an incredibly simple and tiny amount of javascript to remember selected airports and leave/return dates. It could be fixed in less than an hour by a halfways decent hacker.

It's things like this that make me thankful for Hipmunk.

Why the new task UI in Taskrabbit has great behavioral design

Taskrabbit is a cool service that helps people list local tasks that they'd like to hire people to do. It's also a great example of behavioral design-- helping users not just complete the task but want to do it as well. 

Here's the new task UI:

1) Great copy is great communication

Copy is UI, UI is copy. The only way you can explain what's happening on the screen is by the text and elements on the screen. They work together. You must explain what's going on, and what's next. Yes, you know what's happening, but you're the creator of the UI. Users have no such context.

Remember that as a designer, you must design with intention in mind, but evaluate what you create with beginner's eyes. Often in YC office hours, PG will point out glaring holes in people's designs -- but it is because he has honed this skill of viewing a web page with the eyes of a novice, even if you've been talking about the idea with him for hours.

Clear your mind, read what you've got, and if it doesn't make sense, then explain. Rinse, repeat.

2) Great use of contrast to determine what's important and what's more information 

You'll notice the darkest pieces of information (highest contrast) are the headers for the specific inputs. "Title of your Task" for instance. It's big, it's dark, and it commands the most initial attention. This establishes a visual hierarchy. All things below that title pertain to that particular input. There's proper padding between inputs so that the grouping is further reinforced. 

Some products mistake extreme brevity for being simple. Wrong. You should strive to have enough text to properly guide the user to their task. A long block of text that is undifferentiated won't be read, of course -- so your main tool here is to make the important stuff bolder, larger, and command more attention. Then write additional text in a smaller, lower contrast font.

If they care, they'll read it. If they don't, they won't. And that's just OK. The important part is that people complete the task. 

3) Show a lot of examples

It's the worst when UI doesn't show an example at all. It's the rudest experience. Imagine a brusque waiter, or a bank clerk who can't be bothered to help you with what you're trying to do. That's what you're doing when you don't show more examples. 

Yes, that even means helping people with writing titles.Notice how Taskrabbit drops a greyed-out tip right there in the textbox.

DO THIS. There's nothing that will orient a user more as to what they should put than text right there inside the textbox they're about to fill out. Don't forget to clear it when the textbox gets focus, though.

4) Progressive Disclosure

See those little links at the bottom? They're optional. And they don't take more space than they need. If someone wants it, they'll click. If someone doesn't want it, they won't. 

This is virtually your only tool to create things that are both powerful and simple. Use it everywhere and you too will be both easy to use and powerful. 

--

Remember, UI is a conversation that you have with your users, hundreds if not thousands of times a day. But if you can make that conversation go well... it'll be a few million times a day soon enough. 

Again, props to Sarah Harrison, @sourjayne, Taskrabbit Director of UX. I am impressed. Two thumbs up, way up.

Like this article? PS, you can follow me on twitter here.

Facebook newsfeed rollups: Attention hoarding behavior

Noticed this on my minifeed recently: 

94 items from Twitter? This may well be an unintentional consequence of rolling up message updates per Facebook Application. Lord knows there are a lot of apps out there like Farmville that produce an incredible amount of noise. The natural way to limit the impact of other apps on the overall Facebook experience is to collapse these.

But at the same time, it is quite a profound way to greatly limit the effectiveness of other apps on the platform. 

Facebook is well within its rights to do this. It certainly isn't new, too. It is advantageous behavior. Facebook activity is regarded as premium and gets more attention. As Twitter consolidates power and cuts out third parties from the attention stream by telling people not to create twitter clients anymore, it makes total sense that Facebook incentivize use of its own authoring tools. 

Anytime attention is pooled together, there's value. Like water in a desert, creators of apps of all kinds will seek that attention anywhere it can get it. Whether it is after a Google Search or on a habitual reload of a StumbleUpon page, cmd-tab to Twitter App or dopamine-seeking Facebook visit.

It is a profound metaphor. As app creators, we seek this attention, and to pool it, to divert it, and to control it... Attention, like water, as life-giver. Attention, like water, as enabler. Attention allows us to create our cities and charge rent on the whole thing. 

It so happens that some of the nicest cities to spend time in are created out of the public good (Craigslist and Wikipedia), while others are twisted up corporatocracies (examples left as an exercise for the reader). 

iPhone 4 Antenna issues are a UX issue: What the user doesn't know makes them happy.

Apple this morning is reporting that they've figured out what is really going on with the iPhone 4 antenna. 

We have discovered the cause of this dramatic drop in bars, and it is both simple and surprising.

Upon investigation, we were stunned to find that the formula we use to calculate how many bars of signal strength to display is totally wrong. Our formula, in many instances, mistakenly displays 2 more bars than it should for a given signal strength. For example, we sometimes display 4 bars when we should be displaying as few as 2 bars. Users observing a drop of several bars when they grip their iPhone in a certain way are most likely in an area with very weak signal strength, but they don’t know it because we are erroneously displaying 4 or 5 bars. Their big drop in bars is because their high bars were never real in the first place.

To fix this, we are adopting AT&T’s recently recommended formula for calculating how many bars to display for a given signal strength. The real signal strength remains the same, but the iPhone’s bars will report it far more accurately (ed: emphasis mine), providing users a much better indication of the reception they will get in a given area. We are also making bars 1, 2 and 3 a bit taller so they will be easier to see.

As Gruber reports, this is the best phone antenna ever created. All the lab tests show its amazing. So what's the cause? The antenna does get attenuated if you hold it a certain way, but in a less dramatic way than 4 bars dropping. Perhaps only 20-30%. Not worse than other phones at all. Turns out it is not an antenna issue, but a user experience issue. 

Mark Twain said if you tell the truth, you don't have to remember anything. The pithy saying applies here. I can just imagine the wheels turning as Apple engineers and execs scramble to understand the situation. But it starts with a simple, pretty innocent idea: gosh, the bars look so low. AT&T reception is terrible. Lets just add a couple bars, and nobody will be the wiser. Years later, the issue is exposed in a public and grand fashion as a truly unintended consequence.

While truth will set you free, a little fib will make people happy...

When I was at Microsoft, we had a related UX problem with Microsoft ActiveSync. Customers would consistently complain about how awful ActiveSync was, even calling it ActiveStink. But after a pretty comprehensive review of feedback and failure rates, we figured out that ActiveSync wasn't that bad at all. For instance, we'd often show this error:

The server happened to be down at that very moment, but it would sync again and be fine. We put "Attention Required" and we'd call out that they hadn't synchronized against Exchange. 

What did Blackberry do? Nothing. It wouldn't tell you that the server couldn't be contacted. Users just kept thinking they were up to date. And if they weren't? Oh, it wasn't the Blackberry's fault. It was probably the server or the network or something. Everything is fine. They loved their Blackberries. Brand loyalty through the roof.

Is it important that I'm connected? Or that I FEEL connected?

When it comes to communication technologies, there's a unique UX force at work. There are few things more annoying than a communication device (that costs hundreds of dollars no less!) that makes me feel disconnected. So device makers are forced to think about ways to make people happier by hiding errors or pretending things are fine. There is a very real incentive for them to do so, as I saw first hand with the Blackberry vs ActiveSync status issue. Sometimes it can literally make your brand.

But in the case of Apple, sometimes the things you do to make your users happy can come back to haunt you.

Google finally nails Google Apps sharing settings

Finally, a sharing UI that makes sense. Previously, when using Google Apps for our posterous-inc.com company domain, we would *routinely* have problems where people wouldn't be able to see documents without a link because the item was 'shared with everyone' and everyone had 'access' but it didn't show up in their document list. There was a disconnect between whether it was 'in your list' and 'accessible.' Thankfully, these unnatural modes (modes are the enemy of understanding) have been removed.

The Google Apps team has nailed it by making the visibility options top-of-mind. They did this by flattening the option of 'in your list' vs 'accessible' into one set of choices.

They've also added visibility options prominently to the top bar. This is a good move that makes it a lot easier for people to immediately know what level of privacy they've chosen.

Note also how it contextually changes and becomes more useful depending on which setting is chosen. At a glance, this turns out to be incredibly valuable.

This is an example of really well done and well-thought-out UI. Kudos.

Two quick design fixes lala.com can do to increase stickiness, conversion, and retention

Lala.com is a music sharing site that's been around for maybe a year or so. They've built some great traffic and have a product I use every day now. I first heard about it actually from Posterous users who kept asking for the ability to embed Lala.com in their blog posts. It's US-only for now (sorry, International friends) but at least now I don't have to pine away for a re-activation of my Spotify account.

As a product, it's great. But there is always room for improvement. Here are a few basic design changes that I think could give a big ROI.

1) Incentivize long-lasting value by switching the Play and the Add to Queue button

When I first saw lala.com, I thought it was yet another in a line of many music services. I, like every new visitor to every site, had my mouse hovering over the back button. Luckily I stayed around long enough to discover its value. They have pretty great song libraries that have everything from hits to the obscure parts of the catalog. And they allow you to play the whole song through once for free, which is very impressive.

They've expertly engineered the site to be playable at all times even during browsing. This means you can actually just browse around the site without ever stopping your music player. (It's something that our friends at YC-backed thesixtyone.com do really well too.) But the main call to action on most songs and albums isn't to take advantage of this ability to create playlists.

Instead, it's a play button that causes it to play now. Many users may not even realize they can queue long playlists of songs. Instead, a 'queue' button is next to it, but as all designers realize with time -- if it's a secondary action, nobody uses it.

The fix: Make the queue button default, and show a tooltip or flyout that teaches the user that they've added something to their playlist. Heck, make an ongoing sidebar to the right to reinforce the playlist concept. A single song play may only last 3 minutes, but if you can get people to create playlists of music, then you've a) achieved incredible lock-in and b) proven that you're valuable. You've beaten the back button, at that point.

When you're new, focus on being as simple as possible. But when you're in a crowded space, you have to focus on showing the user how you are different and better. Lala is interesting because of a voluminous on-demand catalog of music that can be your new music player playlist. So focus on that.


2) Once you prove to them you're valuable, make it easy for the user pay you and buy into the system.

Lala has a concept of song credits, and when you sign up, you get a prominent item in the menubar that lists how many song credits you have. You can listen to any song in their system for free once, but if you want to play the full length song again, it costs 10 cents to 'buy the web song' and stream the full length song forever. Like Spotify, without the monthly fee.

I didn't need all 25 song credits to realize this was a valuable service. Yet clicking on Song Credits always shows the same text wizard above. It wasn't until I used up all 25 credits that I was shown the UI I was expecting:

It's OK and even desirable to have great explanatory text around how your site works-- but don't hide functionality that is the critical path to the user who wants to buy into your system.

--

Building user experiences is just a repeating conversation you have with thousands of users every day. A faux pas here or there will not necessarily doom you, but it costs you some percentage of future customers in the end. For a service that hopes to be viral and organic, a few percentage points in conversion can result in significant deviations in outcome and success. A first impression is make or break, whether in person or on the web. Make yours count.

You should follow me on twitter here.

You can't separate visual design from interaction design.

In 86 slides, Stephen Anderson explains why it's impossible to separate visual design from the core of the product. You can't just make it pretty later. Visual design has to be baked in from the beginning.

Visual design and understanding of gestalt give you the tools to realize your intentions. Interaction design is knowing what a user should be able to do on a given step. Visual design is making something that allows the user to do it, quickly, efficiently, easily, and all the while feeling good about themselves.

In consumer products, how the customer feels when using your software is make-or-break.