Contextual

Category: Tips

  • Google continuous onboarding in 2019

    In earlier posts we’ve looked at what Google has done to introduce new features and deepen engagement – we call this continuous onboarding. This post is an update that shows the following key characteristics:

    • Google consistently use tips, popups and feature tours.
    • Tips are ALWAYS simple.
    • Tips are ALWAYS contextual
    • Popups and Tips seem to target the user who hasn’t yet used a specific product feature.

    Lets dive in…..

    Advanced Gmail Features

    Gmail is a mature product and after the closure of Google Inbox some of the top features are being imported into the new cleaner Gmail UI. 

    1. “Schedule when to send” – this simple contextual tip explains to the user in one-shot the new functionality. Easy and Done!
    2. Dynamic email – this is more complex and a pretty new feature. The “Learn more” button takes me to a deeper explanation. The “Got it” is what users expect from a popup tip to dismiss it.
    3. Google’s choice of a simple style indicates that they know that the vast majority of the population will understand these little visual elements. They don’t try to be too sexy or clever, this would just distract from the education mission. Google’s tips are consistently in this blue colour.

    The calendar tip is not exactly from Gmail but its closely coupled with the gmail UI. In this case the:

    • Again, its simple and contextual to point at the new button that I’d not previously used.
    • The blue colour is in the button but it still echoes the recognition common across their tip UI.
    • The tip has a dimmed background to standout.

    Previous
    Next

    Youtube Channel Membership

    Wow, this is an interesting new feature in Youtube!

    It looks like Youtube are taking on Patreon but I’d have never know unless this tip popped up because generally I just click “SUBSCRIBE” and don’t really notice what else is needed.

    Again, despite Youtube being fairly autonomous to Google, the style of tip, placement follows the same style elements:

    • Google tip blue.
    • Title (bold)/Description.
    • Use of “Got it”
    • No use of dismiss or “X” buttons.
    • The blue appears brighter to compete with the intense red of the SUBSCRIBE button.

    Google Docs – Word editing.

    Google wants to take Microsoft Office’s (once) safe userbase. The new feature introduction of co-existence with Office’s documents is a powerful feature that they want to promote. 

    So this popup is not shy about their message – very different to Google’s other low-key feature announcements tips – the popup is a significant announcement. Two things to note:

    1. The blue button will launch the tour below. The text explains what will happen.
    2. The “X” dismiss button is clear.
    3. The user only has 2 possible responses and Google’s analytics will know exactly how each user responded to the prompt. This is how Contextual works – allowing Product Teams to infer different conclusions and behaviours from what buttons the end-user clicks.

    Clicking the (yes, you guessed it – blue) button above leads to explain a few key features.

    NOTE: they don’t attempt to explain Google Docs. They only explain the NEW Microsoft Office integration features such as Managing Versions, what format and Conversion.



    Previous
    Next

    If the top popup was too subtle, sometimes Google also uses their bug splash coachmark to announce the new feature.

    The Best Practices

    You can guarantee that Google knows that this type of contextual education is a key step in continuous onboarding. The simple takeaways (with complex data backed reasons) are observable in these recent Tips, Tours and Popups in Gmail, Calendar, Youtube and Google Docs.

    The Google Best Practices for tips are:

    • targeted at users
    • has a predictable design and colour that won’t confuse users.
    • doesn’t have any flashy colour schemes buttons or widgets that distracts from the education mission
    • doesn’t use more buttons necessary than is needed for the job
    • buttons look like links (presumably to simplify render on a broad range of devices)
    • allow the user to engage with the tip or to easily dismiss
    • their response is captured and measured.

    There is also examples in Google Photos, Google Assistant and several other products that also use the blue contextual tip – look out for them the next time you are using their products!

  • Compare: User onboarding in 2 Meditation apps

    I was listening to a podcast recently with the founder of Headspace a popular meditation App. I’d not used the App but many people I know have – what amazed me on the podcast was that it was mentioned their revenues exceed $100M – it appears that the sector is big business!

    I downloaded a few apps and discovered there are several use-cases that need to be handled: Relaxation, Commuting, Sleeping, Quick Breaks, Focus etc.

    Compare this to something like Uber where you just have one-job-to-be-done (JTBD) and that is get a ride.  These meditation Apps have to connect with each user’s main reason for downloading the App and get them started on that – its a disparate set of uses.

    Here is 2 examples:





    This App (I think it was Calm – I downloaded a bunch!) makes this really simple and targeted on what they want to get users doing. The App points to all the important features to get me focussed on my job. The goal is to get me to the “aha” experience.





    Brain.fm have a nice App and they take a carousel approach to introducing the user to the products main features. Their unique value is they use some magic underneath the music (presumably Binaural Beat” or “Isochronic tones”) to increase the impact on the meditator.

    I like they way they hit that with “Music designed for your brain”. It would directly create continuity from the:

    1.  marketing phase, where the user decided to install the App

    2. onboarding the phase, where the user decides to keep using the App.

    Overall, the first App is more effective. Sure, its less pretty (the Brain.fm carousel looks great). But it has 2 downsides:

    a) its not contextual

    b) they force the user to signup. 

    These two factors create a barrier to get to “aha”!

    Both Carousels and contextual Tips/Tours are available in the Contextual platform, so its really up to your team to choose which method to use.

  • Medium’s Tips for teaching new user habits

    When Medium replaced “Recommend” with “Claps” great confusion ensued. Here’s how Medium attempts to train us to understand the new feature.

    Whats the deal? Medium wanted to reward great stories more than good stories. But we’ve all been trained to Heart, Upvote, Like, and with a simple tap “Un-Like” – but that was too restricted for Medium’s goal.

    Medium's inApp tooltip to educate users on clapping more for more points

    Medium’s inApp tooltip to educate users on clapping more for more points is a simple cue to get users over the confusion factor about “claps”.

    In Contextual this is a very quick process – here is how its done.

    1. Add the SDK
    2. Screenshot your page
    3. Pick the page and select Tip tool, pick a style
    4. point at the placement of your tip. Add your own content and style. (colors, fonts, round corners etc)
    5. Target at an audience, Save. Set it live – EASY!

    If you’ve got a feature that is not getting uplift:

    1. consider how user’s might be a little confused about it.
    2. check with users to confirm.
    3. your tip should describe/or imply the action. Medium hijacks the long-press gesture and explains it: “Press and how to…”
    4. your tip should describe the value to the user. In Medium’s case: “show your support.”. Its crisp, clear.

    Its easy to under-estimate the power of simple tips to get uplift. Results vary and Contextual allows you to measure the uplift based on your stated “Success Metric” (Goal).

     

  • How a huge email app uses Coachmarks, Tips & Cards

    Inbox is slowly replacing Gmail and it takes a little getting used to because it introduces a few new concepts that are powerful but not familiar. This is a classic case of being able to guide people to understand a concept and deepen their engagement.

    If they can understand a feature, they will get more out of it, and not switch to another App!

    Coachmarks

    Targeted at first time usage of a feature, these are very intrusive but allow a lot of screen-realestate to explain the feature and point to the specific location on the screen. Here we see Bundles, Links, Pins and Snooze are all explained. The timing of the prompts were:

    1. Once I developed basic competence with the Inbox app (reading emails, sending etc)
    2. Not in one session, it was across several sessions that I didn’t keep a track of, but it appears they group them tightly so a user learns contiguously.

     

    Cards

    Cards are a popular metaphor in list/feed based applications because the user is interactive with cards all the time. Some examples are:
    iOS and Android Notifications: Users are familiar with pull-down, swipe away lists of cards.
    Twitter: In Twitter a tweet is effectively a “card” – so Twitter introduced advertising as a card and appears seamlessly inline with other tweets.
    Google Now/Home: Both of these flagship apps on mobile, use rich cards (titles, body, icons, images). Its a very flexible pattern that can be populated in a number of ways without getting locked into a fixed format. Just like Twitter, these Apps can “drop in” promotional or educational content without disrupting the flow.
    In Contextual we achieve cards with a positioned card-shaped popup/modal but we will probably explore how we can work with apps in their own list stream – anyone willing to use this “in-stream” pattern just let me know!

    Conclusion

    Back in 2012, Matt Cutts of Google shared how they ran 20,000 experiments per year on just one of their products. You can imagine that Google does much more than this is 2017 and its easy to conclude that if some UI metaphor exists and persists, this is because the data it “telling them” to persist.
    Google have persisted with above type of coachmark on several products: Google Docs/Drive, Maps and now Inbox – so its clear that this method is working. We can expect to see this pattern used a lot more in the future and we will come to treat it as second nature.

  • Mobile Tooltips: the unobtrusive UX pattern to deepen engagement

    Remember Clippy? Perhaps you’d rather not!

    Clippy was Microsoft’s “Office Assistant” and became universally derided. Here are 5 reasons why people hated Clippy:

    1. Obtrusive – power users hated Clippy because it had patronizing suggestions.
    2. Distracting – the image at right (without the gun) is literally Clippy looking bored and wanting you to stop your job and pay attention to it. As we’ve talked about before, JTBD (jobs to be done) is how a product manager should think of a user’s flow
    3. Always there – he(?) sat on top of Word/Excel taking up screen realestate
    4. Killed your flow – this hilarious Quora answer lampoons how it would take 30 seconds to hijack you writing a sentence.

    How to be unobtrusively useful

    We’ve blogged before about how tips need to be unobtrusive. In particular if a web “desktop design” approach is shoe-horned into a mobile App, the patterns conflicts with a user’s “Jobs To Be Done” (JTBD) imperative.

    The best way to deliver unobtrusive user guidance via tips is:

    Contextual

    Unlike Clippy, tips should show when relevant to users.

    Audience: We have customers in Health and Telecoms that have older customers that prefer guidance whereas Milenialls will click/touch/swipe a thousand things until it works. I’m not being “age-ist” – its just a fact.

    Trigger: Apps should only show the tip to the correct audience and stage of user journey. If a user has already user a feature, then they shouldn’t be seeing tooltips explaining what they know. If a user is about to commence a complex task for the first time, then offer to help them!

    Simple & Distinct

    In my recent popular article at uxdesign.cc, the idea of “Cognitive Overload” was discussed and how App Product Managers should design to reduce this overload. In this article we suggest that launchers and tips need to be perceived as a layer on top of the application but not compete for screen real-estate.

    In this simple tip, Youtube taught me something new – that I can pinch the screen. It obeys two simple rules that we think are important:

    • Get the Job Done (JTBD)
    • Get out of the way

    Note how simple this tip is, it can be dismissed by simply touching.

    mobile tooltips mobile tooltips - example youtube

    Also, these two Youtube tips are similar but also point to a clickable screen element (the bell button and the drop-down filter). Notice how “cognitively” the tip looks very different to the rest of the App. Its very easy for the user to distinguish the tip from the App content – in fact they’ve interesting used the same colour in round badges over channels as discussed in my previously mentioned post.

    The lesson is that Google: one of the largest tech companies on the planet has figured out that this design pattern of: simple, distinct, coloured tips converts their users to adopt the recommended features. Google would have massive teams of analytics, data scientists to come to that conclusion and we should take notice!

    Data Driven

    Which is a nice segue that puts substance to our first recommendation of “Contextual”. All tooltips need to justify their existence and Product Managers need to know what uplift they get on feature usage, engagement or other success metrics. We’ve written other posts on A/B split tests to verify that your in App education is data driven and working. Our two main points are:

    • Measure the success of tooltips – we’ve seen uplift range from 20-80% for new features. Pick your metric and compare against your Apps default state.
    • No Code – using tools like Contextual, the ability to deploy tooltips is codeless, no more Appstore releases or fighting for resources on the Product Roadmap. This is critical, you need to iterate fast!

    Significant New FeaturesGoogle Maps add a Pit-Stop

    Its worth mentioning a slightly different style tooltip that Google also shows for significant feature additions. Many Apps will throw this up as a popup or carousel page when the user opens the App – but that’s lazy and google does a great job here of contextualizing this new feature mid-task.

    The inclusion of title, icon and “GOT IT” button are simple but significant to catch the users attention that this is significant. In particular, the use of a button allows the Product Manager to use analytically see who dismissed by the button or clicked elsewhere (or outside) the tip. In Contextual, this gives measures of “Accept” and “Reject” to measure how positive the response was for the tooltip.

    Summary

    Clippy got it wrong but was a brave piece of help technology for products (Word and Excel) that had become very feature rich (bloated?) and complicated to use. Microsoft had to solve the problem of surfacing features and their approach is what you should avoid – especially in Mobile apps!

    Clippy Best Practice
    Obtrusive
    Distracting
    Always there
    Killed your flow    		 Job Centric (JTBD)
    Simple
    Contextual
    Get out of the way