User onboarding for WordPress plugins

User Onboarding
for WordPress plugins

I'm Mike Jolley
@mikejolley / mikejolley.com

What do I mean by user
onboarding?

The intersection between
selling, educating, and using
your product.
1
Ben Chow - Product Designer

Onboarding isn't about
installing training wheels,
it's about getting people to
ride without them
1
Samuel Hulick - @useronboard

Any time there’s an
opportunity to increase the
likelihood that users are
successful when trying to
adopt your product.
1
Samuel Hulick

Why is onboarding so important?

A poor onboarding
experience makes every
part of a product company
work harder [...]

marketing teams have to
acquire more and more
visitors to keep filling a
leaky funnel [...]

sales & support teams have
to spend their days hand-
holding confused signups

Poor experience =
Lost users + More support :(

User onboarding for WordPress plugins

Most plugins have poor onboarding

What happens right after
sign-up makes or breaks
any web product
1
Nate Munger - Intercom

What happens right after
activation makes or breaks
any plugin

You don't get a second chance to make a
first impression

simple setup + obvious benefits
= happiness

"He got tired of seeing the admin notice reminding him to
install WooCommerce pages and presses the skip button
instead of the install pages button"
fml

When left to their own devices in a new space without any
sense of direction or purpose, many users can feel lost,
overwhelmed, and confused about what they're supposed to
be doing there
Whitney Hess

add_action( 'admin_notices', 'just_a_test_notice' );
function just_a_test_notice() {
// Possible classnames: updated, error, is-dissmissible
echo '<div class="notice">';
// Your notice text (html)
echo '<p>Hello World</p>';
// Close notice div
echo '</div>';
}

<?php
/**
* Plugin Name: Plugin with Dependency
* Description: Just an example
* Version: 0.1
* Author: Mike Jolley
*/
class WP_Plugin_With_Dependency {
/**
* Constructor
*/
public function __construct() {
add_action( 'plugins_loaded', array( $this, 'check_for_dependency' ) );
}
/**
* Check for existence of dependency after plugins are loaded
*/
public function check_for_dependency() {
if ( class_exists( 'WP_Job_Manager' ) ) {
// Do regular plugin stuff...
} else {
add_action( 'admin_notices', array( $this, 'dependency_notice' ) );
}
}
...

public function dependency_notice() {
// If the user can install plugins, let them with 1 click, otherwise link to .org
if ( current_user_can( 'install_plugins' ) ) {
$url = wp_nonce_url( self_admin_url( 'update.php?action=install-plugin&plugin=wp-job-manager' ), 'install-plugin_wp-job-manager' );
} else {
$url = 'http://wordpress.org/plugins/wp-job-manager';
}
// Show the notice
echo '<div id="message" class="notice updated">';
echo '<p>' . __( 'Plugin with Dependency requires WP Job Manager to function.' ) . '</p>';
echo '<p class="submit"><a href="' . esc_url( $url ) . '" class="button-primary">' . __( 'Install WP Job Manager' ) . '</a></p>';
echo '</div>';
}

add_action( 'admin_enqueue_scripts', 'enqueue_wp_pointers' );
function enqueue_wp_pointers() {
wp_enqueue_style( 'wp-pointer' );
wp_enqueue_script( 'wp-pointer' );
}

jQuery( function( $ ) {
var my_custom_pointer = $( '#insert-media-button' ).pointer( {
content: '<h3>My heading</h3><p>This text will be shown inside the pointer</p>',
position: {
edge: 'top',
align: 'left'
}
} );
my_custom_pointer.pointer( 'open' );
});

4 Prevent them loading multiple times!
4 Options
4 Query string
4 Try not to overwhelm the user #pointerception

For the things we have to
learn before we can do
them, we learn by doing
them.

Blank states are an opportunity for you to provide a warm
and human experience to your product, instead of literally
saying, “Your dashboard is empty and that’s all I’m going to
say.”
Samuel Hulick

add_action( "current_screen", 'add_my_custom_help_tabs' );
function add_my_custom_help_tabs() {
$screen = get_current_screen();
if ( 'my-screen-id' === $screen->id ) {
$screen->add_help_tab( array(
'id' => 'my_custom_help_tab',
'title' => 'Help tab title',
'content' => '<h2>A heading</h2><p>Some content.</p>'
) );
}
}

Interactive walkthroughs
e.g. https://wordpress.org/plugins/sidekick/

"when target users understand it's behavior and effect
without use of reason, memorization, experimentation,
assistance, or training"
Everett McKay

4 Follow familiar WordPress UI and design patterns
4 Never rely on a user manual to explain something
4 Use clear, consise wording in descriptions and
contextual help
4 Remove distractions/simplify
4 Make processes as efficient as possible

The biggest problem is that I’m not sure it’s very intuitive as
to what the users should do next. Do they go to the next
tab? Is the name “field settings” clear enough...
- James Laws - WP Ninjas

Code: http://git.io/vsznk

Put yourself in your user's
shoes

Think about the steps users need to
take between activating and
successfully using your plugin
Activate > Setup > Using

If an end-user cannot understand the
fundamentals of using your plugin, you
have failed, not them
RTFM

User onboarding for WordPress plugins

More Related Content

What's hot (20)

Similar to User onboarding for WordPress plugins (20)

Recently uploaded (20)

User onboarding for WordPress plugins