design

How I get users to take action

Hey there!

You’re receiving this short letter because you joined my newsletter. Every other week, I send out free, no-strings-attached advice that will help you improve the UX of your product so you can increase your revenue. Not interested? There’s an unsubscribe link at the bottom of this email.

[Edit: Or perhaps not- maybe you came this page via a tweet or a friend shared it with you. This is an archive of an email that I sent to people who like to learn more about the intersection of design and business. If you want to receive more articles along these lines in your inbox, no-strings-attached, every other week, give me your email address.]

I recently came across a fantastic signup experience for a new web app, ⌘+SPACE. It’s the perfect example of getting your users to do onerous tasks (like creating an account) that are so important to your business, but seem to create so much friction for users. I know the founders, so I asked them what their success rate was for such a great signup workflow– 5%? 25%? 50%?

Try > 75%. That’s insane.

Today, I want to show you a bulletproof way I’ve found to get users to perform any task, not just creating an account, that’s good for everyone.

Here’s the secret: Make sure your user is always more invested in your product than the effort you’re asking them to expend.

What? Investment? Effort? Did I start reading a newsletter about mashing up exercise regimes with financial analysis? Don’t worry, I’ll explain this in more detail below, and show you how ⌘+SPACE is winning at getting users to create accounts.

Here’s the basic psychology behind our secret formula: If you’re invested in something, you’ll continue to pursue it regardless of what that entails. Think about your hopeless friend who is always finding “The One” and then proceeds to follow that relationship from “good” to “bad idea” to “the entire building is on fire!” Why do they do that? Because they’ve convinced themselves at the beginning that they’ve found their true soulmate. If someone’s your soulmate, that’s a pretty serious commitment, and you don’t want to just throw that away.

For effort, we know that users are loathe to perform actions that, even if they know are good for them, require effort (like creating an account, entering contact info, etc). Hell, as humans we’re so bad at this that we can’t convince ourselves to get regular exercise, despite knowing we’ll feel better and live longer as result. If we can’t even muster the willpower to do that, what chance does your product have to convince someone to sign up, enter in that extra info that makes the app that much more powerful, etc?

So here’s where our secret formula hacks our own psychology. By making sure that we’re always more invested, we can ask, and expect, our users to do almost anything.

Great! All I have to do is make my users invested!… Wait, what does “invested” mean for a product? User investment can come in a variety of ways, so I’ll list just a few here to get started:

  • Emotional investment: I believe this will make my life more fulfilling (best for B2C companies)
  • Pragmatic investment: I believe this will make me more effective at X than I would be otherwise (best for B2B)
  • Co-Action/Perceived Ownership: I worked with Product Awesome to make this incredible thing, so now I own part of it and want to see it succeed
  • Actual, cold-hard cash investment: Damnit, I paid for this and I’m going to use it! (I don’t actually recommend this route that often, but it can work in regulatory and stagnant industries…)

 

What investment is not:

  • If I just do… – You’ve made your user superficially invested in the app, but only to the next step. You’re not making their life better.
  • This promised me X! – Again, you need an app that creates actual value, not promises
  • Everyone is telling me about it, I guess I should… – You’ve done a great job of building hype, but have not created a lasting investment.

The basic line is that there are many ways to make a user feel invested in your app. And that’s a good thing! You’re improving their life!

Think of your users as having a “Committed to Action” piggy bank. The job of your product is to make lots of deposits (investment) before asking the user to withdraw from it (effort) to do something. You don’t ever want to ask the user to overdraw from their piggy bank.

To see this in action, let’s look at how ⌘+SPACE’s signup process first makes a user invested in their app, then asks them to perform the “hard” action of creating an account:

Click Display Images to see what I’m talking about here

When you first land on ⌘+SPACE’s homepage, you’re greeted with a simple sell – designers can have a portfolio of their work instantly made for them by ⌘+SPACE. At this point, all the effort they ask for is that a designer enter their username for Dribbble (a site where designers can show off what they’re working on with small images), which is appropriate given that the user has little to no investment in their service.

After a potential user enters that info, ⌘+SPACE really ups the user investment in their service. On the very next page, the user is greeted with their portfolio, already beautifully set up and ready to go!


Here’s what I saw after I had filled in just one text field.

It’s only after you’ve had fun customizing your portfolio that you click on Publish, and, surprise, are asked to create an account.

And why wouldn’t you at this point? You’ve already had a portfolio instantly created for you, you’ve invested some of your time customizing it, and now you know you’re just a step away from reaping the rewards by publishing it (and notice the clever wording here – you’re still not signing up, you’re saving your existing investment in the service).

By contrast, here’s what ⌘+SPACE’s workflow would’ve looked like if they’d followed the standard pattern:

  1. Show user example of a portfolio (yawwwwn, who wants to see someone else’s work?)
  2. Ask for lots of info like Dribbble username, email, etc (borrring)
  3. Ask user to create an account as a “final step” to see their portfolio (really, can we get to the point yet?)
  4. FINALLY give the user their portfolio!

Look at all that effort! And it’s not until the 4th step that the user gets any kind of payoff from the process.

Instead, by giving the user a reason to be invested up front, ⌘+SPACE is converting more than 75% of their potential market into actual users.

To review:

  1. Always make sure your user is more invested in your product than the effort you’re asking them to expend.
  2. Users become invested in a product in several ways; Emotions, Pragmatism and Perceived Ownership are the most useful.

Thanks for reading. I’d love to hear your thoughts or talk more about this with you; just reply to this email with a few short words!

-Dave

Learn more about great design that gets results!

I send out a free newsletter every other week about the intersection of design and business. You'll learn how to increase revenue through better experiences and interactions.
* = required field

How to make the insanely simple overly complicated

I recently flew in business class on quite a few different airlines. Nearly all the seats were “lie flat,” meaning that the seat can, in some way, recline and fold out into a bed of sorts. Generally, these seats have three main jobs:

1) Sit upright (for landing and takeoff)

2) Recline, with a foot rest that slides/folds/Transformers out

3) Slide into a “flat” position

That’s it, pretty simple really.

However, there seems to be an overwhelming design urge that because these seats are for customers who are paying a premium for their ticket, these seats should really be capable of anything. Yes, in addition to fantastic 18yr old scotch, one of the unknown perks to business-class flying is that you can customize your seating to your heart’s content. Unfortunately, that overwhelming urge to show off the yoga-like flexibility of their seats means airlines often have overly complicated controls.

Here’s some examples of seat controls from I used over the past month:

The Toggle-tastic Seat:

IMG_1272

Really, who doesn’t love a good toggle switch?

 

The Secret Garden Seat

Plenty of controls to move your leg rest...  But took a while to figure out that the blue toggle at the bottom was what reclined the seat...

The buttons have different colors, which sort of match what part of the seat they correspond to. You may have noticed there’s no obvious way to recline the seat (probably the most important function!) That’s done by the  blue toggle switch at the bottom, which had no affordance… For several minutes I thought it was a “your-seat-is-working” light.

The Literal Seat

A little better... each part of the seat is a toggle that can be moved in the direction you want. (photo by jasonEscapist)

For these controls, each part of the “seat” is actually its own switch. While somewhat clever (you just move the seat in whatever direction you want), the utility is defeated by trying to elegantly manipulate tiny, oddly shaped toggle switches. It’s also easy to inadvertently bump another part of the seat controls, leading to this feeling of trying to tune an old radio.

The Sane Seat

At last! Simple, large buttons for moving the chair to each position automatically. (photo by thezipper)

Probably the best seat controls I encountered. Each button has a clear mapping, and the most important functions (upright, recline, lie-flat) are large buttons that you can’t miss.

Airline Seat controls others have used

While looking into this, I came across a few other examples of insanely complicated controls:

The Engineering-Comes-First Seat

by FlickrJunkie

Possibly the most ambiguous controls ever. Likely driven by an engineering decision that the 4-way button pad were cheap and readily available. I also like the ambiguous wavy-lines button. Does it make coffee? Massage? Heat?

The Everything’s Important! Seat

by matt1125

The physical locations and yellow lines linking the buttons is good. However, it’s a great example of how no visual design can make an interface feel immediately overwhelming and un-usuable. Especially tasteful was how the designer just reused the same yellow button for Landing and Lie-Flat mode.

The Kitchen Sink Seat

Far too many options, especially along the right side of the panel. What do the two inclined positions really mean?… Why are the position controls labeled with a * ? Are the buttons around the black box for controlling height of the seat, or the angle?

The Let’s-slap-a-label-on-it-and-everything-will-be-better Seat

by s.yume

Hopefully you brought your reading glasses, or you might miss that the < -> on the left side controls the head rest, while the <-> on the right controls the foot rest.

The “My manager’s manager was confused, so we added labels to appease him” Seat

by Gotham Nurse

Not too bad, but the labels are redundant (and too small to read)

The Customization is GREAT Seat

by eliduke

Simple, but clear. Except for the “M” button… which may be some sort of way to save your seat configuration.

In Summary: Don’t Overdesign It

As you looked at these controls, you have thought “but it’s a seat, so just try it out and see what happens! You’ll learn!” If only it was that easy. Due to some sort of safety engineering, most of the seats I encountered were clearly running off some set of hidden rules which limited the seat’s range of motion (presumably so you wouldn’t break the seat, or trap your feet, or something…) As a result, you had to “learn” what each seat would let you do, and when.

Customization is nice, but in the end, all I wanted was a simple set of controls to recline my seat, not the launch panel for a spaceship.

A Cleaner URL bar for Chrome

The other day I was looking at the URL bar in Chrome, and started wondering how it could be improved to more cleanly convey information.

What Chrome's URL bar looks like today

What Chrome’s URL bar looks like today

From left to right, there’s a few different things the URL bar is trying to communicate:

  • The page is secure/encrypted (the green lock, the “s” in https and the green text)
  • The protocol (https)
  • The domain (www.google.com)
  • The path (/calendar/render)
  • The page parameters (tab=mc…)

That’s a lot of information to put into one line of text, and as Chrome’s UI shows, it’s not all equally important. They’ve subtly grayed the path and params (and ://), and highlighted the lock and https. Still, it’s kind of a mess to me. So I started designing a few variants to improve it.

First, back to basics, only using typography

chrome-url-bar-typography

That’s kind of boring and ugly, and it still feels very cluttered. So I first started playing around with presenting an uncluttered UI:

Showing only what's relevant

Showing only what’s relevant

The protocol (https) and params (tab=mc…) are vestiges of another time when you might use HTTP, FTP or GOPHER, etc, on a regular basis. These days, it’s all HTTP (and switching to HTTPS, the secure version of HTTP, is usually transparently handled by the web server as needed). Likewise, it’s been a long time since I’ve seen anyone manually type params into a URL field. So let’s hide those with a subtle “…” button next to the star. We can still show them if the user wants though:

Clicking on "..." would bring up a list of the URL params

Clicking on “…” would bring up a list of the URL params

Finally, I separated the domain (google.com) and the path (render/calendar), placing them on opposite sides of the bar to make them more visually distinct.

Still, separating the path and domain may lead to oddities typing in the URL (is it two separate fields? does the path slide from left to right after you type it in?), so I went for another round

A flat look, separating parts by color

A flat look, separating parts by color

I wanted to see what the URL bar would like if you styled it as a Flat UI. It’s cleaner, with a clear distinction between the domain and protocol. But the path and params are still cluttering the bar too much. So let’s throw in that idea of the params being under the “…” button:

Finally, a clean URL bar for Chrome!

Finally, a clean URL bar for Chrome!

It’s clean, the important information is clearly visible, and as a bonus, it uses up a lot less space.

Research Specialist @ MIT

I was a research scientist at MIT in the Humans & Automation Laboratory. During this time, I worked on a project with Alstom Transportation to develop displays for train operators that aided them in making complex scheduling decisions which maximized on-time performance as well as fuel efficiency. My research also included continued research on the MAV-VUE project.

Responsibilities also included:

  • Managing two teams conducting research, which included both undergraduate and graduate students.
  • Guest lecturing in classes
  • Developing in-house software solutions
  • Arranging weekly lab seminars