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:

Media_httpimgskitchco_uwtzd

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. 

Media_httpimgskitchco_aekbe

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.

Media_httpimgskitchco_itqeu

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

Media_httpimgskitchco_ojdkt

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.

Posted

The tyranny of incentive structures gone awry: How Google Wave failed

Media_httpwwwgooglewa_qihix

Anonymous user on quora writes:

Part of the deal initially was that Wave would be compensated much like a startup, base salaries were supposed to be low but with heavy performance linked bonuses which would have made the Wave team rich upon Wave's success.

During the course of negotiations and building the Wave product, the "heavily reward for success" part of the equation remained but the "punish upon failure" got gradually watered down into irrelevance, making the entire project a win-win bigger proposition.

Because large parts of the performance bonus were tied to intermediate performance goals, the Wave team was more motivated to hit deadlines than to ship good product. Product began to suffer as the team pushed to fill in a feature checklist on time.

Reflecting on my own time as a program manager at Microsoft early in my career, I have to say the push to ship intermediate milestones and hit dates can have some serious unintended consequences.

The classic software project management quandary rears its ugly head again, over and over, and seemingly everywhere.

Quality, scope, or shipping on time: Choose two.

One thing I disliked about being a PM at Microsoft was how one of the main things we ended up having to do was punt bugs in order to ship on time. We were implicitly and systematically reducing quality and scope in order to ship on time.

If you don't sacrifice quality, then you're sacrificing scope. And doing that mid-stream for a project is often death by a thousand paper cuts, especially for user experience. Product teams end up spending as much time designing to duct tape together incomplete features and broken scenarios as building them in the first place.

And when you don't scale back scope, you sacrifice quality and end up with Google Wave. Damned if you do, damned if you don't.

Filed under  //  Google   Microsoft   product design   product management  
Posted

Dieter Rams: His first Braun design, and 10 principles of good design

Media_httpwwwgrafikma_edwct
Good design is innovative
Good design makes a product useful
Good design is aesthetic
Good design makes a product understandable
Good design is unobtrusive
Good design is honest
Good design is long-lasting
Good design is thorough down to the last detail
Good design is environmentally friendly
Good design is as little design as possible

 

Filed under  //  emotional design   product design  
Posted

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.

Moz-screenshot-4

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.

Media_httpidiskmecomg_idhbb

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.

Media_httpidiskmecomg_lwhvr

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

Filed under  //  product design   user experience  
Posted

Steve Jobs on Flash: substandard apps that limit the progress of the platform

We’ve been there before, and intermediate layers between the platform and the developer ultimately produces sub-standard apps and hinders the progress of the platform.

--Steve Jobs re: Flash via taoeffect.com

Kind of interesting. Is he talking about Flash or is he talking about Java? 

I spent a few years writing deeply complex user experiences in Java. Invariably it was a technology tax we had to pay to try to get proper native-like experiences on exactly this kind of thing -- an intermediate layer (Java Swing) between the underlying machine (Win32).

Writing desktop apps in Java was a real pain. Flash, while easier, is still another inefficient layer between you and the underlying metal. You're right, Steve. Lets not subject people to that anymore.

Filed under  //  Adobe   apple   flash   iPad   product design  
Posted

On designer humility

The latest much ado about nothing on the Internet: Blogger Joshua Blankenship has written a pot-calling-the-kettle-black diatribe against Dustin Curtis's apparent lack of humility in criticizing American Airlines. He seems to think that Dustin should be a little more humble in his criticisms of such a large, immovable corporation whose complexity seemingly exceeds that of a very good designer.

I call bullshit.

A humble designer is one who affects no change indeed. Designers should be less humble. When engineers or business guys or management or *anyone* makes a product lousier, they should get up and shout, and raise hell. Designers should NOT 'know their place.' Because if the powers that be keep their power, then we will continue to live in a barely working cesspool of compromises and bad experiences.

Apple wins because the guy who cares the most about user experience happens to run the show. And last I checked, humble wasn’t really a word you could use to describe him.

Media_httpcachegizmodocomassetsimages4200907128x128198xopenerstevejobsapplejpg_vccgsobbcjayhap

Filed under  //  apple   product design   product management  
Posted

"There's not a detail there that doesn't need to be there." -- Ive on the new iMac.

Needless to say, design minimalism in action.

I would love to be a fly on the wall at Apple sometime. I'd love to hear what they *really* say behind closed doors. "OK guys, lets really get rid of all the ding dongs..."

Filed under  //  apple   product design  
Posted

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.

Moz-screenshot-5

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.

Moz-screenshot-3

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:

Moz-screenshot-4

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.

Filed under  //  product design   user experience  
Posted

Microsoft Courier: Wow, someone is paying attention in Redmond

I hope this 7 inch tablet has something like a 500dpi display. If we learned anything from Tablet PC, it was that writing at 72 or 96dpi sucks.

I really liked the simple drag-to-right collaboration interface. There are some interesting ideas here. Too bad it's just a concept. The devil for these devices is in the execution details.

Filed under  //  Microsoft   gadgets   product design  
Posted

The Joy of Minimalism: I removed something from my bike that I didn't need, and cycling got more awesome

Moz-screenshot-15

For Christmas last year, my little brother built me a single speed / fixed gear bike. He was kind enough to add both front and rear brakes, so I could get up to speed with riding it without, uh, dying. I started riding single speed -- it felt like I always had the wrong gear. Too slow, too fast. I was bored.

Then I started riding fixed-gear. Its true what they say: You feel more in touch with the road and the bike. But I still had front and rear brakes -- and I used them quite a lot, even though I didn't need to. I still hadn't broken with my non-fixie habits.

Today, I removed the rear brake. I took off the whole mechanism -- cable, calipers, everything. (I kept the front brake just to be safe.) The bike looks a LOT cleaner. But that's not interesting. What matters: It changed my entire cycling experience. I'm right handed, and the rear brake handle was on the right side of the handlebar -- so now that it was gone, the urge to brake went away. I regulated my speed according to my surroundings. I didn't brake. I way more free to just roll naturally, as I had one less knob or control to worry about. It was liberating.

When it comes to software and products of all kinds -- think about what removing a rear brake might do. There are so many needless dialogs, radio buttons, menus, alerts, gradients, drop shadows, mouseovers, text, icons, lines, boxes, and so on. Its absurd. Every single element in a UI exerts some cognitive load -- some weight on the brain. Its slowing you down. You're trying to get to a destination, and all the inessential UI is just screaming for more of your precious brain power.

Get rid of the things you don't need. Keep the things you do. Yes, you can add to the experience by subtracting.

Filed under  //  fixed gear bikes   minimalism   product design  
Posted