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.

    More Posts

    Contextual & StreetHawk Inc 2023.