Tag visual design

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.

An example of extreme attention to detail in Google Chrome

Wow, this is such proof that Chrome rocks. When you delete tabs from the left, Google Chrome doesn't resize its tabs until you move your mouse OFF the tab area -- that way you can just keep clicking X without retargeting.

This is the kind of interaction design attention to detail I can really really appreciate.

Google Chrome is so svelte, it makes me feel skinnier.

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.