Successfully reported this slideshow.
Your SlideShare is downloading. ×

User onboarding for WordPress plugins

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 93 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to User onboarding for WordPress plugins (20)

Advertisement

Recently uploaded (20)

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?

×