Presentation on user onboarding for WordPress plugins from WordCamp NL 2015.

1. User Onboarding
for WordPress plugins

2. I'm Mike Jolley
@mikejolley / mikejolley.com

3. What do I mean by user
onboarding?

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

5. Whilst using the product!

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

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

8. Why is onboarding so important?

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

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

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

12. Poor experience =
Lost users + More support :(

13. Perceived Value

14. What about WP plugins?

16. Most plugins have poor onboarding

17. RTFM?

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

19. What happens right after
activation makes or breaks
any plugin

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

22. simple setup + obvious benefits
= happiness

23. Identifying Issues

24. User testing

26. "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

27. Improving user onboarding

28. 1. Present Next Steps

31. 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

32. Offer visual feedback

37. 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>';
}

39. <?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' ) );
}
}
...

40. 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>';
}

42. 2. Introduce Features

43. Custom welcome screens

47. Pointers

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

49. 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' );
});

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

53. Product Tours

56. 3. Educate during usage

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

58. Contextual Help

59. Empty States

60. 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

62. Help tabs

63. 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>'
) );
}
}

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

69. 4. Offer an Intuitive UI

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

71. 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

72. Ninja Forms

74. 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

76. WC 2.4 Flat Rate Shipping

81. 5. Help with one time
setup

82. Guide, simplify or
automate!

83. WP Job Manager Setup Wizard

85. Code: http://git.io/vsznk

86. WC 2.4 Setup Wizard

89. Wrapping up..

90. Put yourself in your user's
shoes

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

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

93. Questions?