ZURBlog is where we discuss product design, business and strategy.

As product designers, we've been conditioned to figure out who our users are, and rightly so. After all, it's a waste of time and money to design a product without figuring out who will use it. But are we spending too much time on users that we're forgetting someone else?

Consider this. You build an awesome product, you launch it, and then wait to see what happens. You know your target demographic will adopt your product, but what about those other people who'll see it — like the early adopters who try a product and aren't likely to become long-term users? We're talking about the journalists, bloggers, marketers, and product junkies who will spread the news, who could easily make or break your product. That's because they are the most vocal with their opinions. So how would you want them to talk about your product?

As pointed out in this video from the folks at Penny Arcade, these "unintended users" can help transform an industry. Check out the video below, noticing the issues that game designers face when it comes to designing with these folks in mind:

Let's take the idea of a spectator from the video a step further. A spectator can also be seen as a potential customer. Someone who comes into contact with a product briefly, observing how it works, and may even take it for a spin. With that in mind, let's take a closer look at a couple points in the video:

1. Accessibility. As the video points out, spectators want to understand how to use something, even if they aren't necessarily at the helm. They want to know the rules, even if they don't intend to play themselves. Another way to think about it is communicating your core value clearly.
2. The human touch. As seen in the video, spectators are in it for the human touch. In the case of spectator sports, this translates into the drama of the game. But in product design, this translates into the "why." Simon Sinek tackled this issue in his book "The Power of Why." Most designers tell others the ins and outs of their products then expect them to pay for it. That doesn't work. Users and spectators both need to know why they should care or why they should use your product.

It's imperative that we know who our customers are and what problem our products solve for them. However, it's also worthwhile to consider those casual spectators. Win them over and you'll be well on your way to transforming them into actual users.

Hat tip to Dre from Wages of Wins for sharing this video with us.

We've said it once and we'll say it again, get feedback or fail. Spending tons of money to launch a product only to later learn that it's a flop (we're looking at you, Google Wave) is not only a waste of time and money, but it can damage your reputation. You need feedback while building your product.

That's where user testing comes in. However, many product designers fear putting their work out in front of would-be customers before it's finished. After all, who wants to expose something they've created to criticism? Who likes to hear where they've gone wrong? Then there's all the work — gathering testers and conducting the actual test. Why go through all that effort when you can just put stuff up and launch it? With that mentality, it can be easy to dismiss user testing.

As the folks at Penny Arcade point out in this excellent video on video game testing, your product is competing with dozens of other products, so it has to be prepared for that. The way to do that is user testing. Check out the video below and notice how the folks at Penny Arcade approach user testing and why you can't be afraid of it:

Let's break down three of the major points in this video and see how we can apply them to our approach to user testing:

1. Be willing to admit you're wrong. As the video points out, you're too close to your projects. You'll have a natural bias. Admitting that you don't know all the answers encourages a lot of "why" questions, which leads to solutions to a problem. In other words, it's OK to be wrong because it'll eventually get you to a win in the end.
2. Fully invest in your work without letting your pride get in the way. As creative types, we naturally fear exposing our work to criticism. After all, we pour our blood, sweat, and tears into our projects. They become our babies. So it's easy to have a knee-jerk reaction to criticism. One way to keep from being reactionary is to solicit specific feedback, such as avoiding open-ended questions and seeking feedback that is directly related to moving your project forward.
3. It's never too early to start user testing. OK, you have an idea for a product, might even have a few pixels finished already, but why start early? Remember Josh Levy and Ross Coen, BeenVerified's co-founders? They blew $550,000 in funding without getting a single customer because they developed a product in silence first and tried to find a market later. As entrepreneur Joel Gascoigne advises, throwing up a landing page that talks about your product is one way to test drive the concept. Testing early is far cheaper than building a product in silence for months.

It might be tough to hear the constructive feedback from your potential users, but it's absolutely crucial to see if your ideas and concepts work. However, getting feedback isn't enough, you also have to be open-minded and willing to accept that you might not have all the answers.

We've said it once and we'll say it again, the old ways of web design don't apply anymore in the age of so many different phones, tablets, and other web-enabled devices. Millions of people use those devices on a daily basis to hop online. Websites can no longer afford to be stuck in 960px Photoshop templates.

Some websites have embraced the brave new world of countless devices, such as The Boston Globe. Yet the number of websites that are responsive are few and far between. The latest to join the responsive ranks is Smashing Magazine.

Given our interest in responsive web design and our development of Foundation, we were intrigued by Smashing Magazine's new homepage design. We liked what we saw and decided to do a complete deconstruction of the site, looking at what the folks at Smashing Magazine did well and at things they could improve on.

You can see our complete deconstruction from several different views (laptop, tablet, and smaller devices) by clicking on the thumbnails below:

• Laptop

  
  Laptop View Deconstruction

• Smaller Laptop, Tablet

  
  Small Laptop View Deconstruction

• Tablet Portrait

  
  Tablet Portrait Deconstruction

• Another Tablet Portrait

  
  Another Tablet Portrait Deconstruction

• Small Device

  
  Small Device Deconstruction

It's awesome to see other sites take the plunge, think about how their site will display on all the future devices that will come out and become responsive. With Smashing Magazine, there are certainly opportunities for improvement, but it's a step in the right direction. We excited to see how they iterate and refine their site in the coming months.

Think of this — a typical website visitor has an attention span of 5 seconds the first time they see a webpage. Seems like a long time? Try it yourself: go to a webpage you’ve never visited before, count to 5 in your head, and leave the website. What do you remember? If nothing grabbed you in that first 5½ seconds (or even the first 2 or 3 seconds!) you probably would have been out of there.

Five seconds is all we've got as product designers to capture a potential customer’s interest. That initial visual, interaction, or text someone sees is our opportunity to leave the most powerful impression on them. If we screw up in these first few seconds, chances are we lost them.

Take a look at this great example from Penny Arcade at what happens when a video game fails to engage users in its opening moments:

So the question becomes, how do we capture their attention in those first 5 seconds? Back in the early days of the internet people used to think flashing buttons and blinking text was the answer. Thankfully that did not catch on for too long. These days people are trying to use design and usability to catch potential customer’s attention.

Let's take a look at three points in the video and see how these points can be used to capture attention in those first 5 seconds:

1. A ‘wow moment’ in first 5 seconds. For video games, you've got 5 minutes to hook a user. Well, you've got less time than that when it comes to designing online products. As we've said, you've got five seconds. That's it. If nothing on your website grabs users in the first 5 seconds, they're likely to bounce and never come back. A wow moment or a memorable interaction is a must in these first 5 seconds.
2. Communicate your core value clearly. As seen in the video, the game Skyrim failed to communicate its core value to players. This was exactly the same problem faced by a young entrepreneur from Castro Valley High School. After the initial launch of his WordPress plugin, he got tons of emails from confused users. They couldn't figure out the value behind the plugin.
3. Duplicating how another product engages users in it’s opening moments can be disastrous. Studying how other products engage users is useful. However, Skyrim copying Call of Duty 4: Modern Warfare's opening was disastrous. That's because the designers didn't understand the underlying elements that made Modern Warfare's opening so successful. If you plan to do this, make sure it makes sense to do the same for your own product. You should also understand all the minute details that made the opening moment successful.

It's easy to get consumed by the mad rush to release a product and just throw up something that doesn't really engage a potential user. We’ve seen this happen one too many times. This is precisely why we released a simple little app called Clue to help people test what potential customers remember after looking at their webpage for 5 seconds. It’s a simple way to figure out if you’re displaying the right visuals and text to grab your customer’s attention.

Remember — if we don't get their attention in the first 5 seconds, then it might never happen since they’ll just leave.

Take a close look at the video above and you'll notice one common thread about the future of interaction design — hands. The video suggests that we'll be primarily interacting with devices with our hands in the future.

Bret Victor recently published an nice little rant about this video, concluding that hands are the future of interaction design. It caught our eye and we loved the emotion behind the article. We partially agree with Bret. While we already use our hands to interact with devices today, we cannot forget about other types of interactions.

Our Voices

Our voices are pretty wicked. Get this, the human voice can produce sounds ranging from 60 to 7000hz. We can make some 40 distinct sounds in English to make more than 200,000 words. What can we do so that users can interact with devices using their voice alone? We're already seeing that with the latest iPhone.

Our Minds?

What would an interaction with our minds look like? Our minds are faster than anything else that we can interact with (much faster than our hands or our voice). We are getting closer to interacting with our minds directly. Such interactions, if possible, will be lightning fast.

The challenge for us as product designers is exploring and considering all types of interactions when we think about the future. It's not enough to focus solely on hands. We need to look at the problem holistically. These hypothetical visions of the future may be imaginary right now, but they are they only thing that inspires us to explore the possibilities of making them a reality.

Let's face it, traditional web design with 960px Photoshop templates and comps just does not work anymore. It no longer applies. You can't ignore the millions of phones, tablets and other web-enabled devices being sold every day by just focusing on the 960 grid. As many of you know, we're very passionate about this subject and that's is why we developed Foundation.

We recently had the pleasure of speaking at SF HTML5 Meetup about a solution to help people prototype faster for any device in the world and the fundamental shift all designers need to make when thinking about their work. We delved deep into Foundation and how it helps people with responsive prototyping. Enjoy the talk below.

Customer engagement can either make or break a product. If you build an interface that does a poor job of engaging a customer you'll find that you're having a tough time retaining your customers. It’s relatively easy to get a big traffic spike when you launch a product, but it’s insanely tough to sustain activity and customer engagement after the launch.

People constantly struggle to figure out how to maintain and grow customer engagement. A common solution for engagement is to make every interaction flashier than the last one, but that can burnout your customers pretty fast. In fact, pacing yourself is one of the best things you can do.

Penny Arcade published a great little video about the pacing tactics video games use to keep people engaged, which very few products do as well. And most of the points in this video can be adopted into the design of any product:

Here are a few key points from the video translated into the language of designing online products that engage customers:

1. Start with a short bang (hilarious moment, a memorable interaction), then bring it down. Make this short and small, or else users will expect too much going forward.
2. Give your customers room to breathe, don’t attack them with too many “memorable” moments. Let customers smell the electronic roses so they are not constantly stimulated.
3. Don’t try to top the last moment/interaction the customer experienced with a more intense one. This is counter-productive. People get acclimated to stimuli. Think of candy — it tastes great if eaten once in a while, but eat it all the time and pretty soon you'll get sick of it. Same goes for your product. If everything is super exciting, pretty soon it’s not exciting anymore.
4. Enjoyment will increase overall if you alternate between intense/memorable moments and periods of rest.
5. People need closure. You can’t leave your customers at the most intense point in the experience. You need to bring them back down so that they can engage with the entire product overall. Otherwise, they feel like the experience was truncated or ended abruptly.
6. Bonus: Remember that the entire product itself, each stage in which a customer goes from a novice user to an engaged user, and each specific interaction should follow the exact same engagement pattern: short bang, rest time, another short bang, etc.

It's so easy to focus on static screens and forget the entire flow. As designers, we're not creating artwork to hang on your wall, stare at, and "appreciate." We're building things people interact with and use!

Hat tip to Dre from Wages of Wins for sharing this video with us.

A little while ago we wrote a post on the pros and cons of stacking divs to speed up interactions. Since then we received a number of questions regarding guidance in regards to the website response time. Specifically: What should the response times be for a typical site? Some of you who have attended our our Interaction Design For Engineers talk have probably heard us speak about this. In this post we’ll go over 3 important limits to remember for site response times.

Less than 100ms

For an action that has no shared control (such as typing something in a field) 100ms is the perfect response time. You type a character and you expect it to show up in the text field immediately.

Here is the example of how to use a sub-100ms response time:

More than 100ms but less than 1sec

Any action that takes more than 100ms and less than 1s implies shared control between person using the interface and the interface itself. In other words, the user expects the app to process the command they have asked it to do. If a user clicks “next” after filling out a form, they expect to wait for at least 100ms until something happens. You might need to add a delay in your interface to achieve this response time. See below:

More than 1sec but less than 10sec

For anything that takes from 1 to 10 seconds, the user starts to lose focus on the task and lose flow. If you are in this range, you have to show some kind of message that something is happening but you don’t necessarily need to say: “this will take 20 seconds to come back”. A good solution for this response time is a spinner or some type of progress indicator such as this:

More than 10sec

This response time is just plain old depressing for the user. If the action will take more than 10 seconds you need to notify the user that they have time to go get coffee, check Twitter or their email or do something else. Alternatively, you can give the user something fun to do while they are waiting for the action to complete. Here's something we use to engage users while they are waiting for a process to complete:

Response times are a tricky subject; it’s easy to mess up the interactions and lose a customer’s focus during longer processes. Hopefully this post clarifies what to do during each time window. We’d love to hear any past experiences you’ve had with response times. Give us a shout.

Dale Carnegie, the renowned author of "How to Win Friends and Influence People," said in his other book, "Public Speaking for Success":

When dealing with people, remember, you are not dealing with creatures of logic, but with creatures of emotion.

Numerous studies have highlighted that emotion rules our brains’ decisions, yet so many companies seem to disregard this finding when designing their user interfaces. In order to understand why companies should include emotion in their user interfaces, let’s delve into how emotion impacts our decisions.

Emotions are Powerful Memory Makers

Emotions attached to a significant event are extremely powerful memory makers. Just think about some of what your remember:

• Do you remember first time you drove a car?
• Do you remember where you were on 9/11?
• Do you remember when someone close to you passed away? Was born? Graduated?

Now try to remember what you had for lunch 4 days ago. How about the color of socks you wore 3 days ago? Why is it that we have such vivid memories of some events that happened a long time ago but don’t remember an event that happened a few days ago. The answer: emotion. James McGaugh wrote a great book, titled "Making of Lasting Memories," where he describes emotion as the scientifically documented reason for lasting memories. Let's take this a step further and look at how emotions and lasting memories drive decisions.

Emotions Drive Decisions

Back in 2006, Dr. De Martino asked 20 men and women to undergo brain scans while being asked to gamble with $95. When told the people would keep 40% of their money of they didn’t gamble the 20 volunteers decided to gamble 43% of the time. When told they people would lose 60% of their money the volunteers decided to gamble 62% of the time. The odds of winning were identical and explained to them in both cases. When the scans were examined it was uncovered that fear prompted the volunteers to act a certain way:

The brain images revealed the amygdala, a neural region that processes strong negative emotions such as fear, fired up vigorously in response to each two-second (on average) gambling decision. Where people resisted the framing effect, a brain region connected to positive emotions such as empathy, and another that activates whenever people face choices, lit up as well, seeming to duke it out over the decision.

You can see how emotions impact decisions from the example above. The problem is that the majority of products online do not use this to their advantage. There are many great examples of companies embracing emotion and character in their user interface. Let’s look at some of these examples.

Examples of Fun Moments in User Interfaces

MailChimp

This is a funny example, but very memorable. When you preview your email in MailChimp don’t stretch the browser too wide or you’ll rip the chimp’s arm off!

Photojojo

This is a fun example; a very small detail, but again very memorable. Notice what happens when you enter your name as you complete the checkout process — a cute little robot greets you:

Facebook Pirate Language

Facebook introduced a fun new language called “pirate language” a few years back. Check out one of the user’s excitement over the feature.

These details seem very small, yet they are responsible for the powerful emotions we experience as users. As mentioned above, these very emotions are guide us when making decisions about whether to use a particular product or buying something online. It’s our job as designers to show personality and emotion through our user interfaces. We’ll leave you with a quote from Kevin Hale, the founder of Wufoo, a company that has taken a very boring and uniform product and made it fun and exciting:

The inspiration for our color palette did come from our competitors. It was really depressing to see so much software designed to remind people they’re making databases in a windowless office and so we immediately knew we wanted to go in the opposite direction. My goal was to design Wufoo to feel like something Fisher-Price would make. We were determined to make sure Wufoo was fun!

Our friend Paras Chopra of Visual Website Optimizer published an interesting case study about Basekit (who is also one of our customers). The Basekit team wanted to increase conversion on their pricing page. They decided to create a new design to do a better job of motivating people to click the buy button.

Without looking ahead, take a look at the look at the screenshots below and answer this question: Which version created more clicks to the buy page?

Whenever we ask this question during our talks, we get a mixed response from people. As it turned out, visits to the buy page from the redesigned pricing page increased 25%. Why is that? There are a few specific details that were responsible for this. Let’s take a closer look:

1. The social proof from real customers above the pricing page speaks a great deal about the product. It motivates people to click the buy button.

2. The pricing plans are easy to compare to one another. Using color with consistent text spacing above the buy buttons makes it easy to compare the choices and pick one. The older design with different button colors makes you question the differences between the plans more.

3. A clear call to action on the updated pricing page helps as well. “Getting started” doesn’t mean you’re investing your life into the tool, it’s only a start. The old pricing page had the “sign up” call to action, which is asking for a bit more commitment from the user.

The tips above help illustrate how Basekit was able to increase conversion, but this does not mean that the same exact changes will help your pricing page. You might need to use different colors, different calls to action or a different layout all together. The main takeaway here is that these are some of the patterns that you'll want to pay attention to when trying to improve your conversion. It’s never too late to pay attention to small details like these. As we mentioned before success is in the details.