Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Whilst using the product!
Onboarding isn't about
installing training wheels,
it's about getting people to
ride without them
1
Samuel Hulick - @usero...
Any time there’s an
opportunity to increase the
likelihood that users are
successful when trying to
adopt your product.
1
...
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 :(
Perceived Value
What about WP plugins?
Most plugins have poor onboarding
RTFM?
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
Identifying Issues
User testing
"He got tired of seeing the admin notice reminding him to
install WooCommerce pages and presses the skip button
instead of...
Improving user onboarding
1. Present Next Steps
When left to their own devices in a new space without any
sense of direction or purpose, many users can feel lost,
overwhe...
Offer visual feedback
add_action( 'admin_notices', 'just_a_test_notice' );
function just_a_test_notice() {
// Possible classnames: updated, erro...
<?php
/**
* Plugin Name: Plugin with Dependency
* Description: Just an example
* Version: 0.1
* Author: Mike Jolley
*/
cla...
public function dependency_notice() {
// If the user can install plugins, let them with 1 click, otherwise link to .org
if...
2. Introduce Features
Custom welcome screens
Pointers
add_action( 'admin_enqueue_scripts', 'enqueue_wp_pointers' );
function enqueue_wp_pointers() {
wp_enqueue_style( 'wp-point...
jQuery( function( $ ) {
var my_custom_pointer = $( '#insert-media-button' ).pointer( {
content: '<h3>My heading</h3><p>Thi...
4 Prevent them loading multiple times!
4 Options
4 Query string
4 Try not to overwhelm the user #pointerception
Product Tours
3. Educate during usage
For the things we have to
learn before we can do
them, we learn by doing
them.
Contextual Help
Empty States
Blank states are an opportunity for you to provide a warm
and human experience to your product, instead of literally
sayin...
Help tabs
add_action( "current_screen", 'add_my_custom_help_tabs' );
function add_my_custom_help_tabs() {
$screen = get_current_scre...
Interactive walkthroughs
e.g. https://wordpress.org/plugins/sidekick/
4. Offer an Intuitive UI
"when target users understand it's behavior and effect
without use of reason, memorization, experimentation,
assistance, o...
4 Follow familiar WordPress UI and design patterns
4 Never rely on a user manual to explain something
4 Use clear, consise...
Ninja Forms
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
t...
WC 2.4 Flat Rate Shipping
5. Help with one time
setup
Guide, simplify or
automate!
WP Job Manager Setup Wizard
Code: http://git.io/vsznk
WC 2.4 Setup Wizard
Wrapping up..
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
Questions?
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
User onboarding for WordPress plugins
Upcoming SlideShare
Loading in …5
×

User onboarding for WordPress plugins

25,752 views

Published on

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

Published in: Internet

User onboarding for WordPress plugins

  1. 1. User Onboarding for WordPress plugins
  2. 2. I'm Mike Jolley @mikejolley / mikejolley.com
  3. 3. What do I mean by user onboarding?
  4. 4. The intersection between selling, educating, and using your product. 1 Ben Chow - Product Designer
  5. 5. Whilst using the product!
  6. 6. Onboarding isn't about installing training wheels, it's about getting people to ride without them 1 Samuel Hulick - @useronboard
  7. 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. 8. Why is onboarding so important?
  9. 9. A poor onboarding experience makes every part of a product company work harder [...]
  10. 10. marketing teams have to acquire more and more visitors to keep filling a leaky funnel [...]
  11. 11. sales & support teams have to spend their days hand- holding confused signups
  12. 12. Poor experience = Lost users + More support :(
  13. 13. Perceived Value
  14. 14. What about WP plugins?
  15. 15. Most plugins have poor onboarding
  16. 16. RTFM?
  17. 17. What happens right after sign-up makes or breaks any web product 1 Nate Munger - Intercom
  18. 18. What happens right after activation makes or breaks any plugin
  19. 19. You don't get a second chance to make a first impression
  20. 20. simple setup + obvious benefits = happiness
  21. 21. Identifying Issues
  22. 22. User testing
  23. 23. "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
  24. 24. Improving user onboarding
  25. 25. 1. Present Next Steps
  26. 26. 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
  27. 27. Offer visual feedback
  28. 28. 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>'; }
  29. 29. <?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' ) ); } } ...
  30. 30. 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>'; }
  31. 31. 2. Introduce Features
  32. 32. Custom welcome screens
  33. 33. Pointers
  34. 34. add_action( 'admin_enqueue_scripts', 'enqueue_wp_pointers' ); function enqueue_wp_pointers() { wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); }
  35. 35. 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' ); });
  36. 36. 4 Prevent them loading multiple times! 4 Options 4 Query string 4 Try not to overwhelm the user #pointerception
  37. 37. Product Tours
  38. 38. 3. Educate during usage
  39. 39. For the things we have to learn before we can do them, we learn by doing them.
  40. 40. Contextual Help
  41. 41. Empty States
  42. 42. 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
  43. 43. Help tabs
  44. 44. 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>' ) ); } }
  45. 45. Interactive walkthroughs e.g. https://wordpress.org/plugins/sidekick/
  46. 46. 4. Offer an Intuitive UI
  47. 47. "when target users understand it's behavior and effect without use of reason, memorization, experimentation, assistance, or training" Everett McKay
  48. 48. 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
  49. 49. Ninja Forms
  50. 50. 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
  51. 51. WC 2.4 Flat Rate Shipping
  52. 52. 5. Help with one time setup
  53. 53. Guide, simplify or automate!
  54. 54. WP Job Manager Setup Wizard
  55. 55. Code: http://git.io/vsznk
  56. 56. WC 2.4 Setup Wizard
  57. 57. Wrapping up..
  58. 58. Put yourself in your user's shoes
  59. 59. Think about the steps users need to take between activating and successfully using your plugin Activate > Setup > Using
  60. 60. If an end-user cannot understand the fundamentals of using your plugin, you have failed, not them RTFM
  61. 61. Questions?

×