1. How Facebook Onboards Its 1 Billion Users

    Facebook reached 1 billion users in October 2012. That’s a lot of users. I think many people are interested in how Facebook tours its product and onboards users. Let’s see how this world-class company onboards…

    1. Facebook Sign Up Process. These days Facebook pushes you to sign up if you go to facebook.com or profile pages including fan pages. They present you to a modal popup with a sign up form and if you try to take action such as message, you’ll be directed to a plain sign up page.

    Profile page - Login in or sign up modal popup

    Profile page - after you close modal popup

    Profile page- redirect page when you try to interact with person or organization

    2. Sign Up Funnel. Once you’ve signed up, Facebook puts you through 3 important funnels that will greatly increase the value of Facebook for the user i.e. convert new users into active users.

    1. Find your friends

    And when you try to skip find your friends

    2. Fill in Profile info

    3. Set your Profile picture

    3. Facebook’s Timeline Product Tour. Once you’ve completed the onboarding tasks, Facebook give you the option to take a tour. The tour is semi-interactive. For example, you can upload a profile picture directly from the product tour, but not upload a cover photo, add information about yourself, nor post stories.

    1A. Profile picture - if you haven’t uploaded a profile picture, you can do it from the tour.

    1B. Cover Photo - introduces user to cover photo.

    2. Add your basic info - points out where you can find your basic info.

    3. Tell your story - highlights where you can post stories.

    Lastly, Facebook also provides a way for users to re-take the tour.

    Conclusion. Facebook and Google+ both also have excellent videos and feature pages that gets users excited and invested in the idea. See feature pages of Google + and Facebook Timeline.

    These great companies have also taken another step to increase conversions by building custom interactive tours that teach users how to use the applications inside the application itself. The best way to teach someone how something works is in context (i.e. in-application.) Both these companies are addressing the issue of onboarding users properly. Showing users where things are within the app is a lot more effective than showing it on a video; however, where they fall short is actually letting users complete the tasks during the tour. For example, you can’t actually edit your profile or share stories during the tour. Facebook seems to want users to complete tasks during the tour given it has added the functionality to add a profile picture within a tooltip; yet it may be difficult or unprofitable to build a custom jQuery tour solution that allows other tasks such as sharing a story.

    I wonder if they have heard of Kera, a simple way to create and deploy interactive tours for your web application. 

    —Taige Zhang (@taigeair)

  2. How to Create a Great Interactive Walkthrough or Tutorial for Your Web Application

    Many games such as Portal, World of Warcraft, and Kingdoms of Camelot have good tutorials that familiarize you with the game and teach you the basics. But those are designed by experts who have gone to school for that. How do you, a developer or marketer, create something that great for your web application?

    Here at Kera, I’ve built 10+ tutorials and learned some tips and tricks that I want to share. The Kera tutorial building platform is pretty easy to use. It has two components: creating events which requires some CSS and HTML knowledge so you can target DOM elements and sound which is optional but extremely useful.


    Decide and plan out your walkthrough or tutorial. Consider these questions:

    • What do you want to accomplish with an interactive tutorial?
    • Should it give an overview of your application, highlight features, or help and teach users to complete tasks?
    • Are there tasks users can accomplish in the tutorial that will increase conversions?
    • How long should the experience be?
    • Do you want to include audio?

    Once you’ve decided, it’s good to create a storyboard or outline of the events of the tutorial. No matter what type of tutorial you plan to make, we recommend keeping tutorials to less than three minutes because longer tutorials have less engagement. It’s better to create several shorter tutorials rather than one big one. This will make it easier for you to manage and for the learner to understand. See some examples from our showcase.

    Creating Events

    Be clear. Move the virtual cursor to the thing or area you’re talking about as you would in a screencast. This will make it clear to the user exactly what you’re referring to. Use the “move” event type.

    Keep their attention. Ask the user to click on buttons such as navigating through your application to keep them engaged and interested. Getting them to do something allows them to remember it better than just showing them. Use the “click required” event type to ask users to click on something and “input required” to get the user to type something.

    Doing the real thing. Keep in mind a new user might not have any data that you can use to teach them. Consider creating dummy data for new users or building a tutorial that creates something that can be deleted once the tutorial is over.

    Give the users more freedom. Kera has a safety layer that prevents users from going off track and doing things not specified in the walkthrough. When they try to click outside of the targeted element they will be prompted to quit or continue the tutorial. You can enlarge the allowed area of free play for the user by using the attribute “reveal”. Specifying an “reveal” area will override the default reveal on your event; so make sure you encompass the the element you want the user to interact with within your revealed area. Protip: reveal the complete form for the user when asking the user to click on submit so they can make any revisions.

    Voiceovers and Sounds

    Recording tools. You can record audio using your smartphone’s voice recorder app or a computer program. If you don’t have one try eXtra Voice Recorder Lite or QuickTime (screen recording and then export audio) for Mac and Sound Recorder for PC. Don’t worry about file size. Record high quality audio and Kera will optimize it for the web when you upload it.

    Use Voiceovers. A human voice better engages users and makes them feel that they are dealing with a real product made by a real company. Make sure your voiceover is read clearly, slowly and with a smile so that it sounds friendly. If you don’t feel confident about using your own voice, there are affordable services such as VoiceBunny that can help.

    Have an introduction. It’s nice to know who you are and what the tutorial is about in the beginning. This a great way to welcome and convey important information to the user.

    Use a script. Reading from script is really helpful because reduces speaking mistakes and makes it sound more professional.

    Include pauses. It is important to leave pauses in your recording when asking the user to complete tasks. We recommend leaving 1.5 second pauses because different browsers resume playback differently and may skip ahead a bit. If you have dynamic events such as modal popups or AJAX events, please note it might take more time for the user’s web application to render due to varying internet speeds.

    Be in a quiet surrounding. It is vital to record your voice in a quiet place and free from distractions. It will appear more polished and professional.

    Background music. Consider adding music to help increase engagement, professionalism, and to better convey your brand. Check out Unique Tracks and Royalty Free Music.

    Call To Actions (CTA)

    Welcome walkthrough. Kera tutorials can be used to welcome and onboard a new user after signup. Consider using an auto-play walkthrough right after signup to introduce your users to your application’s interface and highlight important features. Another popular method is to use a lightbox to present the CTA and allow the user to launch the tutorial. This has the advantage that the user is expecting a tutorial.


    Example of a lightbox launched tutorial

    Show specific tutorials on specific pages. You can attach a tutorial to anything: links, buttons, icons, flags, lightboxes, etc. You can have different tutorials on different pages by binding specific tutorials to specific CTAs on particular pages.

    Example of a tutorial presented only on the schedule page

    Show tutorial to specific users. You can launch specific tutorial for specific users. For example, you can set a flag on your backend for users who haven’t completed the tutorial and render a CTA such as a popup or notification from where users can launch the tutorial. Once the user completes the tutorial, you can set their flag to completed tutorial and not generate the CTA for the user.

    — Taige (@taigeair)

  3. Dave Wright is a Keranite!

    Databases. Statistics. Optimization. Baseball.

    These are the things Dave is passionate about. He’s going to be helping us build out the analytics and measurement side of Kera. I’ve worked with Dave in the past and am sincerely excited to have him as our first engineer! You can check out his collection of hilarious videos or follow him on twitter.

    - Cameron Westland (@camwest)

  4. Attention Spans and Response Times: How Fast is Fast Enough?

    — Discuss on Hacker News —

    Your brilliant web application and marketing efforts have won you visitors and recognition. But there’s a ticking time bomb built into every interaction on your site. In about 1 second your potential customer is going to start thinking about doing something else.

    The Experts Say…

    Usability expert Jakob Nielsen calls it a fight against “the inevitable decay of information stored in short-term memory” [1]. How quickly your web application responds will have an impact on your engagement and the attitude towards your site.

    In 2006, Google famously experimented with displaying 30 results per page instead of 10. But the extra results forced loading times up to 0.9 seconds from 0.4 seconds.  The result was a 20% drop in ad revenue [2].

    Google being Google probably didn’t lose too many customers in the long run. But for a relatively unknown startup, it could be a large price to pay.

    A 2006 study from Akamai states that “fifty-five percent of online shoppers who spend more than $1,500 online per year insist on pages loading quickly” [3].

    How fast is fast enough?

    It turns out web pages are no different from any other interaction. Our levels of patience over time follow a pattern that’s easy to remember [1]:

    0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels like it was caused by the user, not the computer. This level of responsiveness is essential to support the feeling of direct manipulation

    1 second keeps the user’s flow of thought seamless. Users can sense a delay, and thus know the computer is generating the outcome, but they still feel in control of the overall experience and that they’re moving freely rather than waiting on the computer. This degree of responsiveness is needed for good navigation.

    10 seconds keeps the user’s attention. From 1–10 seconds, users definitely feel at the mercy of the computer and wish it was faster, but they can handle it. After 10 seconds, they start thinking about other things, making it harder to get their brains back on track once the computer finally does respond.

    Three Factors

    Now that we know keeping response times under a second is crucial to a happy user experience, let’s look at the factors that make up a response on the web:

    (Server response + Browser render) + Latency 

    The parts you have control over are server response and browser render time. Tools like NewRelic help you keep tabs on those times and should notify you when they become intolerable.

    Response time visualization

    Latency, however, is mostly out of your control. It’s the time it takes for information to travel between a device and your server. Since the rise of broadband internet connections, latency time has generally stabilized to well under 0.1 seconds.

    Mobile Latency

    But the new surge in mobile devices has reintroduced latency as a problem. Average latency on mobile devices ranges from 0.1 - 1 second. Latency on Sprint’s 4G network averages 0.15 seconds. On their 3G network requests average 0.4 seconds [4]. So now just to satisfy your mobile customers, you need your server response time under 0.6 - 0.85 seconds just to keep the average mobile user engaged.

    It’s up to you your and your engineering team to stay aware of those response time numbers and keep them down to a tolerable level.

    So while your marketing efforts will land users on your site, make sure you devote some effort on response times to prevent them from wandering off and keep them coming back for more.

    - David Wright

    [1] http://www.useit.com/papers/responsetime.html 
    [2] http://glinden.blogspot.ca/2006/11/marissa-mayer-at-web-20.html
    [3] http://www.akamai.com/4seconds
    [4] http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/