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.

Avoid chart porn at all costs: Mint Blog has great data but needs to stop hiding it with anti-minimalism

Hey Mint guys, you're doing great work. You've got great data. I love your product. Your blog is cool.

You've got to fix your infographics. It's just... really... not... OK. I spent years designing data visualization for a quant data analysis platform (Palantir Finance) so somewhere along the way, bad data viz became a huge if very geeky pet peeve.

Look at that example above. What is going on? Some things are big and some things are small. There's no legend. There's no common axes. This is chart junk... or maybe worse (better?) -- chart porn. It simulates the act of looking at statistics without actually giving the user any real insight.

Growth rate? Growth of what? Rate over what amount time? Heck, you don't even get the numbers. There's no time, date, footnote, asterisk. All the viewer ends up with is a question mark. It's happening over and over again, like this one I blogged about a few months ago.

This is not useful. You know what's a better visualization than a bunch of random images that are slightly bigger or smaller than each other with no labels? Ordered lists. That's the amount of information you're communicating if you don't give numbers and context.

Brilliant design thinker / statistician Edward Tufte would *hate* these infographics. In fact he would probably set it on fire. Tufte says: Minimize non-data ink. That is to say, don't waste your time on parts of a chart that don't convey additional message.

Data Ink Ratio = (data-ink)/(total ink in the plot)

This is minimalism at work in infographics. Data stands on its own. It does not need fancy images and gussied up fancy texture backgrounds.

Here's a case study from Tufte's work that I find fascinating. Chart junk of the worst order (not even qualifying for porn -- it's not pretty):

Yet when you apply a high data-ink ratio and a whole lot of ingenuity (designers thrive on constraints), what you can get can be dramatically better:

Look at that! Cut the crap and let the data speak for itself -- and the mundane / unintelligible suddenly takes on meaning and life.

The problem with chart porn is that it gets in the way of the message you're communicating. I'm a big believer in minimalism, and these charts are anti-minimalist. They are filled with lines and fury signifying nothing. (rather like life, some would say)

Oh, Mint. Please use your data for good, not for more chart porn.

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.

Epic win: Infographics expose Republican chartjunk obfuscation

Before (Released by Rep. Boehner)
(Partisan attempt to make proposed health system look absurdly complicated)

After (Released by irate graphic designer/citizen)

via robertpalmer's flickr and infosthetics.com

Notable mainly because the role of good/bad graphic design can play in people, society, and understanding policy that affects decisionmaking. Not only can bad visual design cause space shuttles to explode -- it can mislead, misdirect, and just plain lie.

There are now four kinds of lies: Lies, Damn Lies, Statistics, and Intentionally obfuscated infographics.

Dear Rep. Boehner,

Recently, you released a chart purportedly describing the organization of the House Democrats' health plan. I think Democrats, Republicans, and independents agree that the problem is very complicated, no matter how you visualize it.

By releasing your chart, instead of meaningfully educating the public, you willfully obfuscated an already complicated proposal. There is no simple proposal to solve this problem. You instead chose to shout "12! 16! 37! 9! 24!" while we were trying to count something.

So, to try and do my duty both to the country and to information design (a profession and skill you have loudly shat upon), I have taken it upon myself to untangle your delightful chart. A few notes:

- I have removed the label referring to "federal website guidelines" as those are not a specific requirement of the Health and Human Services department. They are part of the U.S. Code. I should know: I have to follow them.

- I have relabeled the "Veterans Administration" to the "Department of Veterans' Affairs." The name change took effect in 1989.

- In the one change I made specifically for clarity, I omitted the line connecting the IRS and Health and Human Services department labeled "Individual Tax Return Information."

In the future, please remember that you have a duty to inform the public, and not willfully confuse your constituents.

Sincerely,

Robert Palmer
Resident,
California 53rd District

Quantum of Solace's multitouch UI / video wall gives us a glimpse at what's to come.


The last Bond movie featured a brilliant display of user experience. Tracking down the international villian Dominic Greene, the team collaborated and explored the information space using a Microsoft-Surface-like multitouch display, and could also send items to a video wall for discussion.

It'll truly be an awesome age when this is a reality. I don't think it's too far off. The age of disposable high quality displays coming.

via benarent.co.uk