You’ll also notice that the page is very simple and (I hope) extremely easy to read. I wanted to start from scratch and really simplify the page much more than a normal blog post and make it easily readable on mobile devices as much as larger screens. I first started using media queries and planning out different style sheets for different devices…I had an iPhone style sheet and an iPad style sheet. But as I simplified and simplified, it occurred to me that I might be able to get rid of media queries all together. So that’s what I did. There are only 13 CSS rules to the whole page…

So please let me know if you have any feedback on the new principles page…it is a work in progress and I’ll be improving it over time.

Note: this is an excerpt from my forthcoming book Make them Care!

In a recent post (Why you should bury the sign up button) I told the story of a redesign I did in which people just didn’t want to click the “sign up” button on the home page, no matter how beautiful or sexy that sign up button was. What I realized from that project is that there are cases in which no amount of visual design will significantly improve the state of things…instead we need to focus on making people care.

Here’s another example. On cyber Monday this past November I received an email from the New York Times informing me that I could save 50% on a Times Digital Subscription. It was time sensitive…offered today only, so I had to act fast in order to take advantage. While I don’t read many emails like this, I did read this email because I think the New York Times is one of the better news outlets out there (although now I’m not so sure) and I have an iPad that I enjoy reading on. Perhaps the Times had something interesting here, so I kept reading. Here’s the email:

I ask you to notice several things about this:

1. It’s an offer about money. The primary content of this email is about the savings one would get for taking advantage of this offer. “Save 50%” is the first text you read and the most visually heavy content on the page. Variants of the message of “saving” are repeated throughout the email. The number one message this email communicates is that I can get a very good financial deal here.
2. The email assumes the value of the offer is already known. There is almost no information at all about what a digital subscription from the New York Times is. The only clue are the few words in this sentence: “Award-winning articles, videos, blogs, and more – it’s all wrapped up in a perfect package…”. That is the only description of what one would actually get with this offer.
3. I have to make up my mind immediately. The only call-to-action on this page is “Get it Now”. Clearly this is designed for people who already know they want a digital subscription, or have decided to get one after reading this email. People who click that button are people who have made up their mind…who have already decided that now they want to get it.

Well, even though I’ve read the Times online for years I have no idea what a “digital subscription” is. I can already read the Times on my computer, my tablet, and my smartphone (I simply visit nytimes.com or the nice Skimmer app), so I’m already receiving the Times “digitally”. What exactly is different about a digital subscription? The only thing I know about it is that I’m not currently paying for the Times but with a subscription I would have to…but I have absolutely no idea what I would get by doing that!

A Straight-forward Fix

The design solution to this is relatively straight-forward.

The first piece of missing information is my current status as a New York Times reader. Tell me what I’m currently getting by stating it plainly. Say something like: “You currently enjoy the free Times online edition, which includes loads of free content, including top news, sports, and political news”. This could be in pretty good depth, too. Reiterate the amazing breadth of content that the Times offers for free online…and perhaps showcase one or two amazing stories of late. It’s easy to assume that readers/users/people know their current status but in many cases they will not.

The second piece of missing information is the difference between where I’m currently at and where I could be…what exactly is being offered here? Explain what is included in the digital subscription. What additional content, commentary, and news is delivered if one were to subscribe? Is there a different delivery mechanism or app I would use on my various devices? How are they better? And don’t be generic here…”videos” and “blogs” are not compelling features of a digital subscription! I’ve got those in spades, baby. Show me…dive deep into the details about how this experience is superior to the one I currently have. The design problem here is to answer the question of what makes the Times videos and blogs different and better.

Remember that comparison is how people make decisions. The email the Times sent does not allow me to make the comparison they need me to. By sending an email with merely an offer to pay money the only comparison I can make is between not spending money and spending money…think about that for a second! I think we all know which one will be chosen. Choosing to not spend money is the rational choice here. So give people something to compare! Show the comparison between these two sets of information side-by-side and let people compare what they’re getting with what they could get. Paint a beautiful future for them! Never assume that people know anything about an offer…and strive hard to clearly communicate that comparison every single time you make the offer.

The Times email problem and the sign up problem from my last piece are similar. The designer(s) are trying to compress a process that takes time into an immediate decision with little information. In both cases the conversion rate is going to be low…very low…I would bet dollars to doughnuts the Times was not overwhelmed with the success of their Cyber Monday email campaign.

Designing for the Next Step

I call these design failures a failure to “Design for the Next Step”. When designs fail to provide an appropriate next step for users it stops them in their tracks. They simply click away to another web site, stop using an app, or otherwise leave.

So let’s dive into this fundamental problem of interaction design. It is easiest to start by putting the problem in context. The Usage Lifecycle shows the progression someone makes as they use your software over time. From a practical standpoint most people go through stages as they learn about, try out, make the decision to use, and continue to use your software.

Here is an example of what the Usage Lifecycle looks like:

We can also dive down a level deeper and look at a stage in more detail. Here is how we might find the “Interested” stage of the Usage Lifecycle:

These steps are stable for most software. When we fail to design for the next step, we break this progression in some way. Most designs suffer from one of the following ways to blunder:

• Moving too fast through steps. When you give people too little information and ask them to continue to the next step anyway. You’re asking them to move too quickly through a process that takes time. This happens a LOT, and usually results from a lack of context given by the designer. Too little explanation, too many competing screen elements, not enough examples or supporting content, all of these things contribute.
• Skipping a step. When you completely skip an important step. This usually happens early on in design…you simply don’t make it very far if you’ve skipped a step as your usage plummets.
• Steps out of order. Asking for billing information before showing shipping rates on e-commerce sites is a common example. This tends to stop people in their tracks, as people want to know what they’re going to pay before they enter their billing information. This is exacerbated because shipping costs are often higher than expected. This is common in app design as well. Using templates is an interesting example…sometimes you choose a template before creating a thing and sometimes you want to create the thing first. I’ve seen both ways make sense, depending on the object in question.
• Showing a step too early. Timing is important, too. Take pricing, for example. Pricing is a signal, and if your pricing is relatively high it is easy to dissuade people from buying if you show them prices before you’ve convinced them of the value of your product. Another example is asking people to share your app with friends upon initial entry…while you may get some activity from happy clickers, you are asking your users to share something they are not yet familiar with. This will not only frustrate them but also stop some of them in their tracks. Better to share when appropriate, after they’ve had success with the software.
• Automating a step while taking control away from users. In general, software and hardware is an augmentation of human thinking and action, so automating tasks is usually very helpful. But in recent years we’ve seen software go way overboard. Sites that tweet for you without your permission. Apps that auto-friend you with others. The crucial aspect is control. If you do something for someone while keeping them in control you are usually good. Do something for someone and take away their control of it and you will have problems.
• Inappropriate next step. Or the next step might just be inappropriate, the wrong next step. This often happens when designers try to leverage some other action you take with what their ultimate goal is…when their priorities are not aligned with yours.

For every interaction you design, think about why it’s not working in relation to these questions. Are you moving too fast? (likely) Did you display the steps out of order? Is the next step appropriate?

Three Pieces of the Next Step Puzzle

So how do we design for the next step? Well, every design situation is different and will require a different design. But in general there are three things we have to get right. Clearly communicating the current step, the next step, and how to get from here to there.

1. Clearly communicate the current step. As I explained above, the NyTimes were not fully supporting the current step I was on as a reader of the New York Times. They did not clearly communicate to me my current status, so their promise of a better status didn’t make much sense. This often feels like a recapitulation of the obvious…I’ve heard designers say “Why would I tell people something they already know?”. Fight this tendency! It’s always better to be clear about agreed-upon status than assume people know something.
2. Clearly communicate the next step. The Times also failed to communicate the value of becoming a digital subscriber. This is a classic problem of not addressing real customer needs. The needs of NyTimes customers is to get better news than they’re already getting (to be better informed)…not to take advantage of an offer! So the task is to clearly communicate the future in which one is a digital subscriber and is better informed than they currently are now.

   If the Times had successfully communicated both the current and the next step, they would have allowed people to compare the two against each other and make a real decision.

3. Clearly communicate how to get there. The Times did this well. They clearly communicated the offer and how to take advantage of it. The call to action was clear. Unfortunately, the Times didn’t satisfy the other two requirements so the offer fell flat for anybody except those who already decided to take advantage of it.

Designing for the next step is a fundamental problem of interaction design. Almost every screen we design, be it in an app or marketing website, can be improved by really focusing on the steps and sequences of steps a user goes through. In our haste we often speed up the process too much, get steps out of order, fail to present an appropriate next step, or otherwise break the sequence. By re-assessing your app or site in light of these potential errors, you can discover the sequence and timing that your users need to successfully make it to the next step.

Think about how counter-intuitive that is at first glance. You take away the call-to-action that says “sign up” and you get more sign ups. But actually it’s just focusing on what people really want, in the order that they want it, where they happen to be in the usage lifecycle. They want to find out about what you’re offering first, figure out if it makes sense for them, and then sign up. It’s a process. Too often we treat a landing page like an immediate decision.

Cue the analogies to dating and relationships. When you first meet someone you don’t usually ask them to get into a full-blown relationship (even if that’s your goal). No, you want to get to know them a little, see what they’re about, see if they like Footloose, and see if you’re compatible. You want to know that they’re not crazy or an axe murderer.

Relationships take time, no matter what kind they are. So the next time you are designing a call-to-action, first make it crystal clear but then go beyond clarity and ask: “Is this the most appropriate time to ask this?”. Too often timing considerations get lost in our rush to get calls-to-action in front of people.

So yes, timing. In the same way someone would never say “Hi, I’m Josh. Do you want to move in together?” we should be time-appropriate with our design. There is a right time for every message. If I was a religious man I would be quoting Ecclesiastes right now, but I’ll let Ren McCormack do it instead.

The goal of the redesign was to increase conversion on the primary call to action of sign-up. We wanted to double or triple (or more) the number of people who were signing up and trying out the product.

I knew the redesign was a vast improvement over the existing one, merely because the page better communicated what was going on. Instead of a vague headline that wasn’t communicating value to readers I used a much more descriptive one that helped orient people immediately to have some idea of what the site does. And the button…well let’s just say that it was so hot it made you want to click it.

So we launched, and then we looked at the data. Uh Oh. No big increase in conversion, certainly not enough to change the business. The conversion rate had improved about 20%, which is OK, but the rate itself was so low to have very little effect on the company’s bottom line.

What was wrong? Why wasn’t there a big improvement in conversion? Why was our click-through so low on what was obviously the primary call-to-action? Didn’t we follow all of the visual design rules here? Make headline big and bold. Check. Make a bullet list of important points. Check. Make a beautiful, sexy button that looks like it was born to be clicked. Check.

Why then, were people not clicking the sexy button?

It’s at this point when you have to step back and ask yourself: what exactly is design? Is design creating something for creation sake? We certainly had done that, and we had already done as much work as is done on most redesign projects. Most projects would have launched and been done…when redesign is the goal the launch is the end.

But that’s not what passes as good design these days. Good design is design that works. So to honestly assess the redesign I did I had to admit…this design was still not working.

Damn was that hard to admit. Really, really hard to admit. I hated admitting it because it was an admission that I failed. I’ve not often admitted that on projects in the past that just didn’t get the usage that I wanted. In so many cases it was easier to say to myself that what I did was better than what was there before and the work of launching was enough. It is so easy to confuse getting stuff done with doing good work.

Yet, this admission also allowed me to see the problem more clearly. Once I accepted that the redesign still wasn’t working, I created the opportunity to find out why not. See that interesting little trick I pulled there? Failure is an opportunity to problem solve! We all love to problem solve, right?

So in hindsight the answer is obvious…people weren’t clicking “Sign Up” because they were not ready to. They saw the button and did not care enough to click it. I could have made it flashing big-ass and red, but still nobody would have clicked on it.

No visual design wizardry at this point would have improved things. No matter how much we tweak the call-to-action, we’re not going to significantly improve click-through on it. We’re not fighting an attention war here…we have people’s attention because they’re on our website. No, we’re fighting an emotional war. We need to convince people of the value of what we’re offering enough so they actually care. They are aware that our big-ass honking button is there…how could they not be? We made it impossible to miss! in fact they’ve read the text on it that says “Sign-up for Free”. They can barely get it out of their peripheral vision…

No, our visitors can see clearly…they’re not failing to notice the button. And they can read…they can see what the button says. They’re also not obstinate…they’re not doing this just to spite you.

The hard fact is that they just don’t care.

Or more precisely, they don’t care yet. They’re interested, but they do not know enough to care. We have not given them enough of a reason to care. They are not ready to take that step.

So the right answer in this situation is not to give our call-to-action a stronger drop shadow, double its text size, make it fire engine red (#CE1620), or make it blink. No amount of visual design on that button will make people click it more. The right answer is to remove the button altogether and replace it with something that people do want to click. Something they do want to do…the appropriate next step in their lifecycle as a customer.

I call this Designing for the Next Step. And in my next post I will explain what I’m talking about in much more detail…

Addendum: The folks at Zurb have published an example of a 350% improvement from simply burying the sign-up button. That’s some serious improvement.

In the conversation below I imagine what it would be like to talk to most home pages…you know the ones…with the giant “Sign Up” button that commands your attention above all else.

(BTW: the following is an excerpt from my upcoming book Make them Care!)

Setting: The beautifully designed lobby entrance to your company’s corporate headquarters.

You: “Hmm…I just found this place by taking a path that looked interesting. You do software or something?”

Him (Salesperson in building lobby): “We offer amazing Software!”

You: “Ok, what is it?”

Him: “Sign up Now”

You: “Um…what does it do?”

Him: “Sign up Now!”

You: “How does it work?”

Him: “No obligation or credit card necessary!”

You: “I’m trying to figure out if this thing can work for me.”

Him: ” Did I mention it’s free to sign up?”

You: “Ok, what does it look like?”

Him: “Here’s a tiny screenshot you can’t see any detail on. Sign up Now!”

You: “You’re not answering any of the questions I have.”

Him: “Sign up Now!”

You: “I’m done here.”

Him: “Sign up Now!”

Apparently, Facebook does not agree. On Sunday Nic Cubrilovic posted some troubling news: Logging out of Facebook is not Enough. Facebook doesn’t actually log you out when you ask it to. They pretend to, but they don’t. Instead, they simply change the status of your logged in session to fool you into thinking you’re logged out.

You don’t see your friends or profile. You don’t view your feed. Even if you try to access your profile pages, Facebook will send you to the login screen. Except that you’re not actually logged out. Every step of the way Facebook knows that it’s you trying to access those pages.

So, I’ve designed a more appropriate Facebook logout button…instead of saying “Logout” it now says “Logout (not really)”. This is more accurate and better reflects what’s actually going on.

As an interface designer myself, I know that words matter. I believe that a lot of interface design is in fact copywriting. So when I see Facebook knowingly betray their user’s trust like this it goes against the first rule of interface design:

Clarity above all.

At the very least, interfaces should be clear. People should understand what is going on and what effect their actions are having. In this case people when people click “Logout” they think they’re actually logging out of Facebook, and they think that means their actions are not being recorded, and they are trusting the service to do what it says it’s doing.

In case you’re wondering of my Facebook status, I deleted my Facebook account last year because of the continued pattern of bad behavior from the company…and no I’m not 100% certain the account was actually deleted.

So I hope the designers at Facebook might reconsider the design of their logout mechanism. I provide this button design free of charge.

Update: L.A. Times thinks the button is a good idea, too.

So when a company keeps a really tight focus on their core product they should be applauded. Instagram is one of those companies. If you’re not familiar with the app, Instagram is about as simple as can be: you use it to take pictures, apply filters to them, and share them on social networks. That’s it. That’s all the app does. And it has been a wild success…Instagram is growing like a weed…they’re just about to hit 10 million users in about a year.

Instagram has just released Version 2.0 of their popular photo-sharing application and the release notes show a laser focus on the core features and only their core features. Here is what they’ve improved: speed of filters, added 4 filters, faster tilt-shift, larger images, and optional borders. That’s it. Those are the core features of the product…they’ve essentially taken what they have and sped things up.

In other words, Instagram has not added any new features with this “largest revamp” to the product. They’ve simply improved what they have to make it even easier and faster to share pictures.

So here’s a simple playbook:

1. Focus on improving what you already have. Don’t add new features, improve existing ones.
2. Make what you have faster. It can always be faster. Remove delays (like Instagram did by removing filtering delays…they even now have live filtering)
3. Improve usability Instagram also redesigned their already-successful photo taking screen. It would have been easy to skip this…
4. Resist the urge to add new features. Wait until the market demands it or you have real evidence that your business is hurting as a result.

Here’s the thing: What Instagram has done almost never happens! It is incredibly rare in the world of web applications to have such tight focus on the core functionality like Instagram has done with their V2 release. The vast majority of releases contains new features that add new capabilities to the product.

To wit: there is an entire vocabulary built around the problem of keeping focus: Feature creep, MVP (minimum viable product), lean startup, (release early, release often). And the problem has only gotten harder in the last few years in which development has sped up significantly. Web application frameworks, Amazon’s cloud services, and social coding services like Github have made it extremely easy to build faster than ever before. As a result it can be hard to imagine what it looks like to keep focus over time on a very small feature set.

So when a company like Instagram is able to keep extreme focus on only what is necessary they should be applauded and emulated as much as possible. Your users, who are already using your app, will love you for making it even better.

An Explanation and Some Reflections

The DVD delivery service (the original service) will now be called Qwikster. Yes, that’s right, Qwikster. The streaming part of the service will continued to be called Netflix. One explanation suggests this move was made in response to pressure from Hollywood who wants to charge per user access, not per copy. In other words, no ownership, nothing like owning or renting a DVD. Think Cable TV. The more things change…the more they stay the same.

Netflix is taking a huge risk here. They’re changing the user experience of their web apps to model the new company structure, not a structure that is most friendly to people. This is an extremely common problem in user interface design. Netflix is in serious danger of breaking the user experience they are well-known for.

As one commenter complains there will now be two separate movie queues, one on Netflix for streaming and one on Qwikster for DVDs. Hasting’s response is dismissive:

“We already have two queues. The two “sites” are a click between each other, so we think not that much different than two tabs on one site.”

Technically, Hastings is right about there already being two queues. But he’s dead wrong about it being much different. Obviously he’s never watched people use web applications before. Changing websites is not even close to the same thing as changing tabs. When you change websites you go somewhere different, you get a different UI, you’re using a different username, and you probably have to log in. You have a different payment system. Different family members to add. Different recommendations to look at. And that’s just for starters.

When you change tabs you don’t lose any of that context. You stay in the same place, you just get a different list.

This is a fundamental change in the product, and Hastings just dismisses the concern with a wave of his hand. Not only that, but this is a branding issue as well. When you switch sites you’re going from Netflix, a brand people know and love, to Qwikster, which sounds like the latest get rich quick startup without a real business plan.

It may be that the split was inevitable, but why not name the DVD service “Mailflix” and give people a chance to understand what’s actually going on? Give them some semi-logical name that actually makes sense? Mailflix for movies in the mail, Netflix for movies on the Internet?

Also, people don’t think they’re buying two services right now…they’re simply buying Netflix. As another commenter points out:

“You’re continuing to make a classic mistake: thinking you’re something different than what everyone believes you are. You’re not a DVD company and a streaming company: you’re where I go to watch movies. That’s it. The future clearly is streaming, but by separating and charging more for access, you’re wildly less valuable to me. I’ll likely cancel. You haven’t listened to customer feedback. You’re delusional and you’re lost.”

There is one angle where all of this makes sense. Let’s assume for a moment that Netflix is knowingly trying to kill off its DVD rental service. This is the way to do it…separate it out completely, give it a ridiculous name, and keep your brand equity with the newer streaming service. This almost makes sense…except for the fact that the content in Netflix streaming has gotten worse, not better, over time. If they really wanted to focus attention solely on Netflix going forward, they would create a catalog worth watching. Right now the streaming catalog is abysmal, and with movies that can only mean it gets worse over time as you watch the one or two you haven’t seen yet.

So as a Netflix subscriber who doesn’t even use the service anymore (outside of my kids watching educational videos) I’m left wondering…what is Reed Hastings and Netflix thinking?

The first is that words mean everything in the interface. Every single word you choose is important, from the call-to-action button to the headline to the words in an error message. Each word, if carefully chosen, adds to the experience of the user, making them more confident and sure that they’re on the right track. When carelessly chosen, each word erodes confidence and adds confusion to an uneven experience.

Good design is not an accident. It’s not something that just happens by someone getting lucky. Sure, once in a while someone stumbles upon a cool core mechanic that happens to work, but to create a solid interface that many people can use and enjoy takes real attention to the details.

The real question is…what are the details that matter? There are many candidates…there is technology and social and gaming and psychology and experience and content and fill in the next buzzword please. Everybody has their hobby horse…in this post I’m sharing mine.

While I’ll be the first to say “Oh…look a shiny new JQuery widget!” I humbly submit that there is no single element more important to your interface than the copywriting. There is nothing that makes or breaks a positive experience more than the simple set of words that you choose to communicate with. In a world in which we have to simplify as much as possible, nothing matters more than the small vocabulary you end up with in your final work.

Traynor resurfaces a great post by Jason Fried in which Fried suggests that Copywriting is Interface Design…I think we should also look at it the other way. Interface Design is Copywriting. Designing an interface is largely an exercise in choosing the right words. When you lay out a page, you’re choosing copy for the headline, subheadline, call-to-action, content area, graphs and analysis areas, error messages. All of these design elements are built out of words. Are you an aspiring wordsmith? I hope so…because you’re choosing some very important words!

The best line in Traynor’s piece is this one:

Nothing says Send Message, like the words “Send Message”.

This simple statement says a lot about the field of Interface Design. So often we don’t think twice about the words we use, and while we want to write like Hemingway we end up writing something that might place 3rd in a regional high school essay contest.

And, by the way, I don’t mean to sit on a soapbox here. This is hard stuff…it’s hard for every designer and developer I know. Choosing words is the hardest part of my job and I get it wrong before I get it right. The first attempt at any design is almost always wrong…it’s only the stubborn people who stick with it, test it, and continually refine who will approach great design.

Here is an example I’ve been using lately at HubSpot because it is so easy to see the importance of words in hindsight. For many years the domain setup screen in HubSpot software used the terminology “Add Domain” as the primary call-to-action. When you get set up with HubSpot you want to point your domain to the HubSpot servers so that your website (now hosted by HubSpot) continues to work.

However, we recently did some user testing and found that the words “Add Domain” stopped people in their tracks. The people using the software in our test said something like “I have to add a domain…where do I add it?” or “I already have a domain…why do I need to add one?”. In their minds they already had a domain…there was no reason to add a new one!

But the software had that CTA for years. Nobody questioned it because the entire team knew what it meant. It is important to note that no amount of introspection would have caught this! But to a user…someone who is transitioning from hosting their website somewhere else to hosting it on HubSpot the words were entirely critical to what was going on.

So…the fix was straight-forward. Change the words from “Add a Domain” to “Connect your Domain”. Note the subtle yet crucial difference that two words make. You’re not adding anything…nothing is new here. Instead, you’re connecting something that already exists…a domain that is YOURS. Easy peasy.

Now, multiply this by 1,000 and you might have an idea of how many places in your web application it is crucial to get your words right. Every single headline, every single call-to-action, every single error message, every single bit of microcopy. All of it. Every word matters.

So if you’re not already, start thinking of yourself as a copywriter. You already are one anyway.

1. Andy Hertzfeld is lead Designer. This surprised a lot of people. Andy Hertzfeld is one of the original Apple Macintosh team members and is the lead designer of Google+, focusing on the circles feature. This tidbit was big news last week, with many publications seeming to give Andy sole credit for the UI, so Andy wrote about his involvment and shared the credit with the other team members involved. Class act by Andy.

2. Increasing rivalry with Facebook. Dhanji Prasanna, an ex-Google+ engineer, wrote a post this weekend sharing some details of his time with the Google+ team, and there are two interesting bits. First, he describes how the circles project got started in part as the result of the research that Paul Adams had been doing:

“A few years ago, before the CEO cared a whit about social networking or identity, a Google User Experience researcher named Paul Adams created a slide deck called the Real Life Social Network. In a very long and well-illustrated talk, he makes the point that there is an impedence mismatch between what you share on facebook and your interactions in real life. So when you share a photo of yourself doing something crazy at a party, you don’t intend for your aunt and uncle, workmates or casual acquaintances to see it. But facebook does not do a good job of making this separation.”

Second, Dhanji describes the Google+ team’s response to the new Facebook Groups feature, which was built in part as a response to Adams’ research.

“Then it happened–facebook finally released the product they’d been working on so secretly, their answer to Paul’s thesis. The team lead at facebook even publicly tweeted a snarky jab at Google. Their product was called Facebook Groups.

I was dumbstruck. Was I reading this correctly? I quickly logged on and played with it, to see for myself. My former colleagues had started a Google Wave alumni group, and I even looked in there to see if I had misunderstood. But no–it seemed that facebook had completely missed the point.

And…it should be noted that Paul Adams left Google in December and now works at Facebook.

3. It puts Google on the design map. I’ve never heard as many designers saying such nice things about Google as they have in the past two weeks. In releasing a relatively polished, solid UI for Google+, they have started to turn their reputation around. This not only makes for better software, but it should help with recruiting as well. (this should not be discounted…Google is in a recruiting war with Facebook and Twitter…which is great! for designers)

4. Part of a bigger redesign. Google+ is taking on some new design styles that are part of a bigger redesign effort from Google. In the past few weeks they’ve redesigned Search, Gmail, Calendar…basically all of their properties. And, for the most part, these efforts have all been positive and made their software feel more professional, clean, and consistent. I know a couple folks who like the old style, but the vast majority of folks I’ve talked to like the new style.

5. Strong win for UX Research – Finally I think that Google+, even if it doesn’t grow to the size of Facebook, is a big win for UX research. The work that Paul and other folks at Google did over the past couple years led to a really innovative design. It will be interesting to see if the discrete sharing model works or if it’s too much management for folks. (I’ve started to use it to share with small groups…seems promising)

So there are a few reasons why I think Google+ is interesting from a design standpoint. I’m still amazed at the rise of social software…it wasn’t long ago that social was completely dismissed by nearly everyone. But, humans are social animals…as they say.

I remember the first time I realized how much even the smallest copy can matter in an interface. It was on an e-commerce project at UIE for which I had created a checkout form asking for billing information. I had coded up a system to notify me when an error occurred (even if people can overcome the error it was very helpful to know when one occurred). I kept getting notifications of billing address errors…it turns out that transactions were failing because the address people were entering didn’t match the one on their credit card.

So I ended up adding the copy “Be sure to enter the billing address associated with your credit card” at the top of the form. And just like that, the errors went away. It was clear the right copy meant I didn’t have to worry about that problem anymore, thus saving support time and increasing revenue on the improved conversion.

Ironically, the smallest bits of copy, microcopy, can have the biggest impact.

Microcopy is small yet powerful copy. It’s fast, light, and deadly. It’s a short sentence, a phrase, a few words. A single word. It’s the small copy that has the biggest impact. Don’t judge it on its size…judge it on its effectiveness.

Here’s another example. On the purchase page of Mark Boulton’s wonderful book Designing for the Web, he’s written a bit of microcopy that is crucial for people considering purchase. The copy is “Transactions are handled through paypal but you don’t need a paypal account to buy this book“. This turns out to be a huge question of would-be purchasers (I’ve seen it in several projects). People see the Paypal logo and they assume that they need to have an account…and everyone knows how annoying it is to create an account simply to purchase a single item. Actually, for a long time you did need an account to purchase something with Paypal. Only more recently did they change that. In this example, Mark has written half a sentence that communicates this fact and eases the fears of would-be customers.

Update Reader David Yeiser points out another good example of microcopy on Tumblr. When users are about to sign up, they’re asked to choose a sub-domain name for their site. This seems like a big deal, as you’re defining the URL at which you’ll be found by others. In order to reduce the stress of making a big decision that could affect the future of your blog, Tumblr gently reminds you that “You can change this at any time”. Done. No more worries about choosing the wrong sub-domain name…just choose one and start posting.

Microcopy is extremely contextual…that’s why it’s so valuable. It answers a very specific question people have and speaks to their concerns right on the spot. And because its so contextual, microcopy isn’t always obvious. Sometimes you have to hunt to find the right words. (or create an error notification service like I did) How to discover these hurdles? Talk to people! Why aren’t they adopting your software? What concerns do they have? What are they worried about? Successful salesmen know the power of these small turns of phrase. They have an arsenal of them for every situation.

Here are some other examples:

• When signing up for a newsletter, say “this low-volume newsletter”
• When people add their emails, say “we hate spam as much as you do”
• When subscribing for something free, say “you can always unsubscribe at any time”
• When selling an paid-for web application, be sure to let people know if you have a free trial.
• When storing customer’s information, say “You can export your information at any time”
• If offering optional account creation, say “If you create an account, you’ll be able to track your package”

All of these microcopy examples have one thing in common: they help to alleviate concerns of would-be customers. They help to reduce commitment by speaking directly to the thoughts in people’s heads. That’s why this copy can be so short yet so powerful.

Don’t be deceived by the size of microcopy. It can make or break an interface.

“our thinking is that if we give people more controls, they can share more information. As people shared more and more information, Facebook found that it creates a more component experience that brings them back to Facebook more often. Page views and traffic went up 50% within weeks of the launch of the news feed.”

Wow, that stat is amazing. A simple interface design feature, thought (by traditional thinking) to decrease page views, actually increased them and fast.

Page Views vs. User Experience

Zuckerberg’s response underlines a real distinction between the old page view approach to the Web and the new user experience approach. The difference lies in what you optimize for.

If you optimize for page views, you’re going to make decisions, both strategic and tactical, that increase page views. This results in things like split-stories on news sites, way too many screens on social networking sites, and perhaps worst of all, an entire approach focused on “keeping people on the site”. The problem with this approach is that it quickly gets out of hand. Instead of providing a single value proposition, the site provides countless propositions, thus diluting the value of each one. In almost all cases of optimizing for page views, the experience of the user takes a back seat. You optimize for the quarterly numbers, not user satisfaction.

If you optimize for the user experience, on the other hand, you have to take a longer approach. Sure, you might not get as much advertising revenue in the short term as the site with more page views, but you’re adding more long-term value. That’s the road that Facebook is taking, at least up until now. They don’t need to be worried about page views because they’re adding users and users are building out their social graphs on the site. (however, Facebook is currently building an advertising platform that could change this).

In other words, if Zuckerberg and Facebook had been stuck in the page view way of thinking, they never would have implemented the news feed feature. It simply makes viewing the activity of others too easy…there is no clicking necessary. But, the insight they had was that giving people better views into information would actually make the service more valuable and thus indirectly do what others fear would have suffered…increasing page views!

The problem with many sites these days is that they’re optimized for the advertiser and thus page views, not the user and their experience. What smart sites like Facebook see is that giving people tools they can really use is the best way forward because it makes them happy customers who will return again and again and over time you’ll get a lot more value out of that than if you optimized for anything else.

How AJAX/DHTML leads to less Advertising

This is the battlefield where interface design smacks head-on into advertising. It has become the 800lb gorilla in the room of many sites who rely on advertising revenue. In many cases, using technology and design to reduce the number of screens (either by simplifying task flows or by using AJAX/DHTML) drastically reduces page views that bring in advertising revenue.

Thus, it has become a very real issue that when designers do their job well, a site will generate less advertising revenue as a result…at least in the short term. Many folks in the advertising business stop at this point and push harder and harder for more page views. It may not always be apparent, but page views are still solidly entrenched in many boardroom strategy talks as the one metric to optimize.

In the long term, however, an enhanced user experience will actually drive more ad revenue because it will make people more successful, the service more valuable, and people will be more willing to share with others. They’ll return more, be happier, and eventually provide more revenue either directly or indirectly as a result of good business.

The question is: are decision-makers willing to adapt to this new way of thinking? Or is it just folks like Mark Zuckerberg, who didn’t come from the culture of page views, who can successfully optimize for user experience above all else?

This is especially true in social interfaces that model complex social interactions. In some cases there is just no way around it: human relationships are complex and so whatever view we offer into them must have some complexity as well. That doesn’t mean they should be hard-to-use, it just means that they communicate sophisticated information.

Take the reviews on Amazon.com. For years Amazon’s interface showed the average review, so viewers could tell the general mood surrounding a book. If it was a 5 star or a 1 star book, then that would be instantly recognizable.

But over time it became clear that the rating system had a fault: if the average rating was somewhere in the middle, say 3.5 stars, it was unclear whether it was just a dull book that most people rated as mediocre or if it was a polarizing book that half the people rated 5 and half the people rated 1. A political book, for example, usually polarizes.

So the review interface could be made more sophisticated, showing more information about how the reviews for a particular book were distributed. Amazon came up with a nice interface for this:

I’ve talked to many folks who have made positive comments about this interface. They like seeing more information, and it doesn’t confuse them. Instead, they get a more accurate picture of the reviews than they had before, and that helps them make a more informed decision. More is more, in this case.

(We actually released it live last week, but I was away giving a talk on Social Design at UXWeek and couldn’t squeeze in the time to write it up until now)

Publishing2 was a great project for Bokardo Design because it dealt with a load of social features (being a blog and all). This was both a blessing and a curse, as getting the social features into the site was fun but also difficult because of dealing with so many WordPress plugins working at once. We tried hard to get lots of useful features without cluttering up the interface. We consciously fought feature creep and tried to keep the site as personally valuable as possible. One way we did this was to use a plugin that allows folks to follow the comment stream of a blog post whether or not they actually comment on it themselves. Scott’s audience tends to comment in-depth, and they often provide serious insight in the comments. (I hope to add this feature to Bokardo in the near future)

Another interesting part of the redesign was choosing a typeface for the masthead of the site. We couldn’t find a typeface that we were happy with at first, but then we started thinking about what sort of typeface would represent a site like Publishing 2.0. Was there a typeface that was thematically appropriate? I think there is, and I wrote about it on a special page called About the Design, kind of like an extended colophon where we discuss some of the things we did.

This design writeup was a new genre of information, used to explain a little bit about the thought processes behind the design and sharing that with others. I would love to see this sort of thing on other sites! Since Scott played such a big part in the design it seemed appropriate to talk about how we worked together to come up with the end result. This is the ideal situation for me: to work with a client who has a clear vision and a passion for what they do. It really makes the project that much more enjoyable.

Also, I must also mention Scott’s new venture, Publish2 (here’s the blog). I really can’t tell you how brilliant I think this idea is – a social bookmarking and research platform for guess who?…journalists! It took me a while to consider the implications of this…actually still mulling it over. What happens when the research and discussions of journalists are public? There is already speculation of these implications surrounding the new Google News feature…and that’s exactly what Scott is going to find out with Publish2. I’m really excited to see where it goes…and to get insight into things like what blogs and resources journalists find valuable.

So, there are lots of details to the Publishing2 design that I would love to share with you. If you have any questions/comments/etc, feel free to drop me a line.

Many of you know that I worked at User Interface Engineering for 5 years. It was definitely the best and most exciting job I’ve ever had; Jared and the team are fantastic. While I am super excited about what I’m doing now, I am sorry to leave such a unique and wonderful place. Even so, I won’t be leaving UIE completely…we’re still collaborating on several projects and will continue to do so where appropriate.

When I was at UIE I did a mix of usability consulting and web design. Usability consulting for UIE clients and in-house web design and development for UIE itself. So I basically alternated between consulting and designing. In hindsight this afforded me an excellent opportunity to understand the design problem from both sides of the fence: from the view of an objective 3rd party consultant as well as from the standpoint of an in-the-trenches designer. These worlds are incredibly different, and both are unique in their own way.

But I kept running into the same problem. We would talk to people who have these grand visions for their business, and then you would investigate how people were using their site and there was this huge disconnect. Either their strategy wasn’t clear, it wasn’t being communicated to the designers, or the designers weren’t able to take that strategy and embed it into an actual interface. The chain of communication from business strategy to interface to user was tenuous at best. In many cases there was no direct conversation between these parties at all.

The problem I kept seeing over and over was one of translation. Interfaces were not communicating what their creators wanted them to communicate. It’s kind of like a beginning writer who has a grand fantasy of a story in their head but the words on the paper give you no sense of it. But their interfaces were definitely communicating something, though…unfortunately it was something other than what was intended.

At around this same time there was an explosion of social software, or software that is built around the social lives of users. In testing at UIE we saw the extreme power of this social influence…we would run user tests and find out why people were making the decisions they were making. In many cases they were making decisions based on their social network.

For example, we did a huge user testing study where we tested over a dozen e-commerce web sites. We had 70 or so people actually buy products from these web sites and part of our research was to find out how they made purchasing decisions. In more cases than I can count people said things like “Well, I knew I wanted a digital camera but I didn’t know what kind. My friend really likes Canon cameras and recommended them to me”. People who don’t know something rely on their social network to find it out.

After we heard stuff like this this over and over again, it became clear to me that the future of software is social. And while social networking was taking off like a rocket it was also clear that it wasn’t just about networking with others, it was about finding out what others knew and using that information to help make decisions. That’s why I write about Amazon, Netflix and other sites that aren’t about connecting to new people, but are leveraging our social networks to help us find out what we need to know. The latent information in our social networks is still mostly untapped. If we only knew what the people we know, know.

So I wrote two pieces on my blog, one called The Del.icio.us Lesson and the other called Digg’s Design Dilemma that together outline two important principles of what is going on.

The first (from the Del.icio.us Lesson) is that most people are acting in their own self-interest first: personal value precedes network value. This simple formulation has a huge effect on how to design, what features to focus on, and how to elicit participation and desired behavior.

Second (from Digg’s Design Dilemma) was that the interface is the medium through which this all occurs, and thus acts as an arbiter to behavior. In other words, all that happens happens because the interface either encourages it through positive design or discourages it through negative design. Therefore, the value and importance of the interface cannot be understated.

So these are the factors that drove me to start Bokardo Design. The services that I offer are a direct offshoot of these problems, observations, and principles.

So this is what I’m offering: Interface design and strategy for social web applications.

Interface Design

For some folks coming up with a strategy is the part they’re good at, while interface design is inscrutable. But on the Web, interface design is the execution of strategy. So I’m offering a service to create interfaces that execute on strategy. I’ll work closely with you to figure out the best way to expose a strategy through an interface, and how best to elicit the correct activities from your audience.

For example, I’m currently working with someone whose strategy is to help people find out the best local events to attend (there are many people doing things in this area right now). To do this, we need to figure out how people plan their time in and around events and how they make decisions about which events to attend. Not only that, but the way that people communicate events to each other is also important…and building a tool to help them do could be extremely valuable. Coming up with an interface that actually allows people to find and share events in the way they already are is the goal.

There are two levels of details to consider. One is the screen-level, where we build buttons and layouts that draw people’s attention to the right things in the right order. But there is also the activity-level, where we create flows that support the right activities in the right order. These two levels combine to make up interface design.

My interface design service is about creating an interface that executes an underlying strategy for success.

Interface Strategy

For many folks who aren’t native to the Web executing a coherent Web-based strategy is a challenge. There are a lot of questions to consider. When do you announce your idea? When do you launch? Should you do a complete redesign? How do you know if the interface is working or not? What if we launch and nobody uses it? The questions go on and on.

For example, I’m currently working with a client who has amazing ideas about where to take their service. But right now they need to focus their strategy on personal value because they haven’t articulated that in their interface yet. They’ve focused on the social value so far, essentially putting them into a chicken/egg problem thats promises users “our service will be valuable once a lot of people start using it”. This might be OK if we all had limitless attention span and could try out services like we try on clothes. But the Web environment is brutal, and so this is not a desirable place to be, yet countless people I’ve talked to are in this exact spot.

My interface strategy service is about working with folks who are having trouble formalizing a plan to build and release a focused, Web-based application.

Why I’m Excited

I’m extremely excited by the early interest in Bokardo Design. I’ve heard from entrepreneurs doing social start-ups, established companies looking to add social features to existing applications, and even some visionaries thinking about huge-scale services that could change the way we all look at the Web.

All of my conversations so far have reinforced the idea that building social features into software is really the sweet spot at the moment, as we have collectively realized that software is just an extension of what we already do: it’s not this fantasy land we visit only once in a while. To this end we must keep our software humane, to borrow a word from Jeff Raskin. And on that note, here’s something else that he said so well:

“As far as the customer is concerned, the interface is the product.”

Amen. If there is one statement that defines what I do at Bokardo Design, that is it. So if you’re interested in building an amazing interface, head on over to my contact page and say Hi.