How do you create onboarding logic for first time user experience?

Question

Are there any good resources for writing logic for a series of coachmarks for onboarding users?

Specifically, actions that trigger a coachmark in a series, how long they are shown, when they are dismissed and how long it takes for the next coachmark to show? I have written this logic and it is live in the app, but still just doesn't feel right.

Im also attaching an example of the flow. EXAMPLE:

COACHMARK: #2A

STYLE: Tooltip (with point)

POSITIONING: Underneath the recent stream. Anchored to recent tab even as user scrolls (tooltip would scroll out of view as user scrolls the screen and the tooltip would reappear as user scrolls back up the screen)

COPY: “Tap here for posts from the entire community.”

TRIGGER:

1. Occurs when user returns to home screen from any other section of the app.
2. Occurs when user has scrolled down 5 pieces of content.

DISMISSED

1. User can tap anywhere on screen to dismiss.
2. Coachmark also dismisses after 5 seconds on its own without requiring the user to tap to dismiss.
3. User can tap into any other section of the app to dismiss.

Answer 1

IMHO, coach tips are oldschool methods of informing a user. I say oldschool because they are out of context, they are not exactly informing a user's intentional task flow, but are sort of out of left field, simple descriptions that are discarded, and not folded into learning a new task flow.

So, here are a few principles to Onboarding of which coaching tips play an ancillary role to the greater picture. (I'm using the task of "following a thought leader" in my examples)

• Onboarding a first-run leads to a "quick win" situation where a user completes a small task loop. i.e. the user is led through the process of viewing global comments, and then following a thought leader.
• Coach tips should be used to spur activity, like assisting the "quick win", but not just pointing at buttons.
• Make sure the coach marks are leading through an activity, if you are pointing to the "Discover" tab, you are expecting the user to tap it, and take them through that "quick win" (i.e. following a thought leader).
• Instead of using tooltips like you have, let the user select those buttons on their own, and design the "Blank Slate" / "Initial View" of that section in a way that is informational and helps that current task flow (i.e. following a thought leader)

And just so i dont forget to answer one of your questions "How long should a coach mark show?"-- this opens a can of worms. What SHOULD the user do? Are you trying to prompt them to tap that button? If so, then tapping the button dismisses it and takes them to that section... if you're just showing them a message, a message should be dismissed by a user rather than a timer, or a combination. Not to belabor the point, but if the user is simply getting the messages out of the way, exactly how useful are they? Are the integrated in a more task-learning manner as discussed above? How much value are they adding?

Answer 2

Speaking from experience, coachmarks are hard to implement correctly without turning away some users. Depending on how forceful you want your message to get across, either dismiss it:

1. Only when the user selects the thing you highlighted; or

2. When the user selects a dismiss button

DO NOT set a timer to make it disappear after a duration. Users will be sure to miss it.

From the way you have it set right now, I feel like these are tooltips for clarification, and not instructions for onboarding. You only have one first-impression, so you need to be sure you do this right. I'm assuming your coachmarks also dim the screen for what you're not focusing, rather than just placing a hover box over what you are pointing at (which is in your mock up).

Ideally you should user test this, and try to use as few screens as possible. Having too many instructions will increase the barrier to entry and increase drop-off rates.

---

To address your questions directly:

How long they are shown?

Until dismissed.

When they are dismissed and how long it takes for the next coachmark to show?

If you have any animations, show the animations, then fade in the next coachmark. If not, wait about 500-1000ms – whatever feels natural for your app.