forg.io

User•Education, Pt. II

Continuing Education

After establishing the patterns & guidance for warm welcomes Google wide, we summarized our findings into 3 key points:

Say hi and welcome first time users in a Googley way
Excite users about the experience ahead & help them understand what it means for them
Increase engagement and retention of 7 day active users

With that work completed, Material Design, Brand Marketing and I turned to a topic that we moved out of the warm welcomes; user education.

When to educate users

Working with user researchers, we realized first launch of an application is not the time to try to educate users. Armed with statistics and our recently updated guidance on warm welcomes, we immediately began to search for when the correct moment would occur.

~30% completion rate

~70% abandon at first step

User don’t recall what they see

Users want to get in and play, not read an instruction manual

Users aren’t ready for UI patterns we’re teaching; they haven’t even seen the UI

The first clue came from previous work the marketing team had done on app adoption rates with mobile web users. Google Maps was investigating ways to increase downloads of their app, and the answer came in the form of a relevant and timely promo, highlighting a feature the web version couldn't provide.

After the change was implemented, Google Maps saw a 35% increase in downloads, or roughly 700,000 additional downloads over 2.5 weeks.

Interruptive promos displayed to everyone loading the mobile site. 7-10% CTR

Promo displayed only to users who searched for directions. 15- 19% CTR

Educational Formats

Given the knowledge that these educational moments should be in context, we then identified 4 broad categories that would define how users would learn:

1. Tap Target

Prompting a user to try a feature that can be completed in a single tap.
E.G. Saving a place in Maps.

Fullscreen scrims are too interruptive/heavy/blocking
New, distinctive design positioned to mean helpful prompt in the user’s mind whenever they encounter it
In-line UI (e.g. cards) feels the most native but often confused with real UI because cards have an informational meaning to users
Tap targets focus attention on the UI element users need to interact with to take the action, so they learn by doing vs. cards that are disconnected from the required action

Outer circle spans full width of screen (on mobile)
Target highlights UI element requiring tap to take action being prompted
Outer circle uses apps primary color. Target is neutral and contrasting
Only primary action is tap, no ‘Got it’ button. Tapping outside or swiping dismisses

If action is part of a set, include the rest of the options, but scaled back to 24% opacity

Highlight action with contrasting color

Tap Target can be contained by dialogs or cards

2. Guided Flow

Prompting a user to try a feature that requires more than one interaction.
E.G. Adding home and work in Maps.

The initial prompt often doesn’t equip the user with enough guidance to complete the task
Testing shows series of steps help users complete the task
The design of steps after the initial tap target have been stripped down to accelerate task completion and be less intrusive
A “you’re done” bottom sheet at the end reinforces task completion and provides positive behavioral feedback

3. Sandbox UI, gesture indicator & hint motion

Prompting a user to perform a gesture that affects a portion of the screen.
E.G. Dismissing a card.

User can interact with the sandbox UI like they would real UI
Sandbox UI lets the user learn by doing without compromising real content
Gesture indicator and hint movement help visualize the motion we want users to take
Descriptive text in Sandbox UI helps clarify result from gesture being described

4. Snackbar, gesture indicator & hint motion

Prompting a user to perform a gesture that affects the whole screen.
E.G. Moving between tabs.

Full scrims are confusing because it’s unclear whether you are moving the scrim or the surface beneath it
Snackbar is a low profile component to explain gesture outcome
Gesture indicator and hint movement help visualize the motion we want users to take
Interaction affects real UI

User Testing & Iterative Design

Before settling on the four patterns, we reviewed previous work done on the topic by the Material team, and tested variations, aiming for a the sweet spot between being totally disruptive and so low key that users missed the prompts.

Iterations that move other elements out of the way, partially or fully occlude the interface behind.

Results showed that the circular design performed best. The unusual shape caught users eyes while giving hints as to pieces of the regularly rectangular UI’s behind the tap targets.

We extensively tested different locations and arrangements to stress test the circular design

Motion Design

Motion design became a critical element in this balance, drawing a users attention to a particular location, without obscuring the rest of the interface. Working closely with the lead Material motion designer, we iterated on length of time, animation curves, and ways to inform users through the direction of the motion:

The introductory animations showcase where the target lives, introducing the copy as support

After appearing, animation draws the eye back to the promoted action through subtle changes in size, as well as quick ripples, similar to material user feedback

Early concepts explored whether the tap target should expand or recede upon user interaction. Both directions ended up being used, for acceptance and dismissal, respectively

Collaboration & Continuing Work

After researching and iterating on our designs, we began speaking with product teams about how they were hoping to expand user education. While the technical implementation and logic for how and when to trigger these elements is still under development, responses have been positive from the search, maps, drive, analytics, keep and fit teams.