Aug 27 2013

How Microinteractions Grew our Traffic to Over 42 Million Monthly Visitors in Under 18 Months

Featured_MicroInteractions

Editor’s Note: the following is a guest post by Rodney Rumford. He was cofounder and Chief Innovation Officer at TweetPhoto and is currently cofounder and Chief Product Officer at SlimSurveys.

Do you want to know how we grew our business from zero to 42 million monthly unique users in under 18 months? Microinteractions is the short answer… read on for the rest. Back in early 2009 when we started TweetPhoto, we were on the cusp of the mobile photo sharing explosion. We knew instinctively that we had to make social photo sharing in real-time (and across platforms) simple, straightforward and easy. We also knew that users would be attracted to mobile based microinteractions that made their photo sharing a delightful, friction free and a slightly addictive experience.

For the uninitiated; microinteractions are simple ways for users to engage with a product, consume, express and interact via a highly simplified action. Microinteractions should always be designed to accomplish a single task in a delightful and simple way.

tweetPhoto

At TweetPhoto we built a lot of specific microinteractions into our product, such as auto-tweeting, sharing, favoriting, displaying view counts and showing who viewed the photo. However, what we were ultimately giving users were very discreet and simple microinteractions to help them express and consume data quickly. These microinteractions (as the core of our product) drove a huge portion of our business growth, virally amplifying the product’s reach by ~ 17%. This was key in driving our website growth to over 42 million monthly unique visitors in under 18 months.

Product Design is All About the Details

The famous designer Charles Eames often said, “The details are not the details. They are the design.” The details needs to be made insanely simple and highly intuitive. Obsessing about these design details make all the difference in the user experience. Microinteraction design is about how you approach problems; and work thru the process of simplifying obsessively until you have come up with the most intuitive and simple to understand design for your users. Focus on conveying the most information with the least design whenever possible.

Our latest start-up is SlimSurveys.com and from the earliest days we’ve focused on microinteractions. We asked ourselves, how can we fundamentally change what is typically a poorly designed user experience (taking surveys) and make it positive and even delightful experience? We decided to take the opposite approach of every survey solution on the market of giving survey builders lots of choices for how surveys are constructed. While building SlimSurveys we’ve made “less is more” our internal mantra.

We had to figure out how to make the product microinteractions as simple and as intuitive as possible for consumers so that they could intuitively understand the product the very first time they saw it on their mobile devices. We also needed to constrain the survey creation process with microinteractions so that they could create consistent and predictable surveys.

When designing a product, one needs to anticipate what the user wants to do next. How do you create the perfect environment where the user can easily get to that next step? One must put themselves in the mindset of the user and anticipate what they want to do and make that microinteraction intuitive, obvious and simple. “The role of the designer is that of a very good, thoughtful host anticipating the needs of his guests.” said Charles Eames. An example of this is after a user has built a survey we anticipate that they will want to share the URL of the survey so we automatically highlight it for them so that copy and pasting the URL is easier.

Microinteractions are almost always made up of four core parts:

HowMicrointeractionsGrewTraffic

1. A Trigger initiates the microinteraction. An example would be while a user is viewing a photo, having a trigger such as a star to favorite & share the photo.

2. Rules that determine how it functions. While someone might favorite a photo, we had rules regarding if that behavior should/would be shared to various networks such as Twitter and Facebook.

3. Feedback that the rules generate. An example would be a tiny bit of ghosted notification/confirmation text that would disappear after a few seconds that provided feedback that a survey questions had been saved.

4. Loops & Modes that make up the meta rules. An example of a loop is when a countdown timer is started and displays how much time you have left to edit a recent post in Basecamp. An example of a mode is in the Vine app, you touch the screen to record and when you release the recording pauses. This is done without a button and simply toggles record/pause modes based upon whether a user is touching the screen or not on their iPhone.

Some Lessons Learned

HowMicrointeractionsGrewTraffic_2

Less is More: This is a mindset that product designers need to stay focused on. Keep in mind that the idea is to simplify the user experience with microinteractions while adding functionality that sits below the surface. Bringing data to the surface is not always ideal, but when properly executed can add tremendously to the experience – if used in a way that is advantageous to the user experience.

Don’t Start From Zero: Understanding the context, the user or the platform can actually provide you with a great deal of information. Use this information to anticipate what the user wants to do next or what they might need to know. It is your job to create simple shortcuts to that specific action or informational data.

Bring the data forward when it adds value to the user. With Tweetphoto we exposed something as simple as how many times an image was viewed. While this might seems obvious years later, what we knew was that this simple micro-exposure of data drove velocity of sharing, commenting and new photos being uploaded. The psychological motivation to share more frequently if your photos got lots of views was something very powerful.

Prevent Human Error: In the simplest of terms, don’t let users mess up. Finding ways to eliminate the human error element takes some thinking about how users might misinterpret something as simple as how to enter dates in a form. Example: We don’t let users build a survey with no questions.

Use the interface elements that are already there to convey information: A common example of this would be something as simple as a red dot notification on your iPhone app icon with a number to convey how many notifications you have received. You see this sort of microinteraction design on iPhone apps frequently.

Give your microinteractions a human and personal touch: try not to speak machine. A nice example of this is the wording we use when a user has built a survey “Woo Hoo your survey is saved and ready to share”.

In Closing

Microinteractions offer the opportunity to delight users. The accumulation of tiny nuanced microinteraction moments and details can create a very positive experience for your users. At the same time it can be a very strong engine of growth and the success and increased adoption of your product and business.

So I would suggest you revisit your product and pay attention to every detail. Work on how you can simplify and anticipate your users needs with elegant microinteractions. If you have specific thoughts, questions or microinteraction examples, please engage by leaving a comment.

Further Reading: You can read more about Microinteractions in this book.

About the Author:

Rodney was cofounder and Chief Innovation Officer at TweetPhoto and is currently cofounder and Chief Product Officer at SlimSurveys.

Leave a Response

3 Responses

  1. Aug 28 2013
    Kaleem

    You could credit Dan Saffer — the original author of these ideas — more prominently than a token link at the bottom of the article. He’s been talking about them at major design conferences for more than a year. This article appears to be an almost verbatim summary of his presentation, which consists of highlights from his book Microinteractions.

    Dan Saffer’s Microinteractions interview, published months ago on this blog: http://www.dtelepathy.com/blog/design/dan-saffer-on-the-importance-of-microinteractions

  2. Aug 30 2013
    Shahzaib Khatri

    Micro-interactions sounds small, but they make great impact at the user experience side. Its about simplifying details, turning your good product to a great one.