"Decisions, not Options" in the Age of Gutenberg

Transcript

1. “Decisions, Not Options”
   I N T HE AGE O F GU TE NBE RG
   

   View Slide

2. View Slide

3. @ChrisVanPatten
   

   View Slide

4. tomodomo.co
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. First, a history lesson.
   

   View Slide

9. In the beginning…
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. …and it was good.
    

    View Slide

14. …and it was good.
    (And we got used to it.)
    

    View Slide

15. Familiar integration points
    

    View Slide

16. TinyMCE,
    

    View Slide

17. TinyMCE, shortcodes,
    

    View Slide

18. TinyMCE, shortcodes, and metaboxes
    

    View Slide

19. TinyMCE, shortcodes, and metaboxes
    (And we got
    used to it.)
    

    View Slide

20. Familiar customisation tools
    

    View Slide

21. did a lot of the work for us.
    Advanced Custom Fields
    

    View Slide

22. CMB2
    did a lot of the work for us.
    

    View Slide

23. PODS
    did a lot of the work for us.
    

    View Slide

24. WordPress
    did a lot of the work for us.
    

    View Slide

25. did a lot of the work for us.
    WordPress
    (And we got
    used to it.)
    

    View Slide

26. View Slide

27. Change is coming…
    

    View Slide

28. The stuff that used to work will continue to work,
    but it won’t be the best user
    experience anymore.
    

    View Slide

29. A
    

    View Slide

30. A whole
    

    View Slide

31. A whole new
    

    View Slide

32. A whole new
    vernacular!
    

    View Slide

33. BLOCKS!
    

    View Slide

34. BLOCKS!
    INSPECTORS!
    

    View Slide

35. BLOCKS!
    INSPECTORS!
    TOOLBARS!
    

    View Slide

36. BLOCKS!
    INSPECTORS!
    TOOLBARS!
    MENUS!
    

    View Slide

37. BLOCKS!
    INSPECTORS!
    TOOLBARS!
    MENUS!
    You ain’t
    used to this!
    

    View Slide

38. With all these new integration points, we need to think carefully…
    

    View Slide

39. How can we create intuitive, elegant, and easy interfaces that
    fit in with Gutenberg and reflect the WordPress philosophy?
    

    View Slide

40. P·H·I·L·O·S·O·P·H·Y
    WORDPRESS HAS ‘EM.
    

    View Slide

41. Design for the Majority
    

    View Slide

42. Out of the Box
    Design for the Majority
    

    View Slide

43. Out of the Box
    Striving for Simplicity
    Design for the Majority
    

    View Slide

44. Out of the Box
    Striving for Simplicity
    The Vocal Minority
    Design for the Majority
    

    View Slide

45. Decisions, not Options
    

    View Slide

46. These are guidelines, not rules.
    

    View Slide

47. These are guidelines, not rules.
    (But they’re useful.)
    

    View Slide

48. As you consider your integration points,
    consider the philosophy.
    

    View Slide

49. As you consider your integration points,
    consider the philosophy.
    Be the philosophy you want

    to see in the world.
    

    View Slide

50. 1. Think carefully about where a control belongs
    

    View Slide

51. 1. Think carefully about where a control belongs
    2. Think carefully about whether or not a control
    should exist
    

    View Slide

52. 1. Think carefully about where a control belongs
    2. Think carefully about whether or not a control
    should exist
    3. Support the most essential options, and no more
    

    View Slide

53. 1. Think carefully about where a control belongs
    2. Think carefully about whether or not a control
    should exist
    3. Support the most essential options, and no more
    4. Make decisions that let your users feel like they
    have options
    

    View Slide

54. meet the
    USER INTERFACE
    

    View Slide

55. (figure 1)
    Toolbar
    

    View Slide

56. (figure 2)
    Block Action Menu
    

    View Slide

57. (figure 3)
    Block Canvas
    

    View Slide

58. (figure 4)
    Block Inspector
    

    View Slide

59. (figure 5)
    Document Inspector
    

    View Slide

60. (figure 6)
    Plugin Sidebar
    

    View Slide

61. Scenarios
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. Points of Confusion
    

    View Slide

66. Plugin Sidebar
    versus
    Block Inspector
    versus
    Block Canvas
    

    View Slide

67. View Slide

68. Plugin Sidebar
    versus
    Document Inspector
    

    View Slide

69. View Slide

70. Some humble recommendations…
    

    View Slide

71. Use Gutenberg core controls where possible
    

    View Slide

72. Innovate only when core controls won’t work
    

    View Slide

73. Separate blocks for separate markup
    (Most of the time.)
    

    View Slide

74. Don’t fall back to metaboxes
    

    View Slide

75. Options in code don’t have to be options in UI
    

    View Slide

76. Avoid the block settings menu
    (Probably.)
    

    View Slide

77. Conduct user tests
    

    View Slide

78. Best practices and patterns

    will emerge over time, but…
    

    View Slide

79. LET’S SPEED THAT UP WITH
    COLLABORATION
    

    View Slide

80. HIG
    

    View Slide

81. HIG
    Human
    

    View Slide

82. HIG
    Human Interface
    

    View Slide

83. HIG
    Human Interface Guidelines
    

    View Slide

84. HIG
    Human Interface Guidelines
    

    View Slide

85. View Slide

86. View Slide

87. introducing the
    Gutenberg Human Interface Guidelines
    

    View Slide

88. A practical resource for
    Gutenberg user interface best practices
    

    View Slide

89. A template for agencies and product teams
    

    View Slide

90. A guide for designers
    

    View Slide

91. Consistency › Predictability › Usability
    

    View Slide

92. https://github.com/TomodomoCo/gutenberg-hig
    

    View Slide

93. Each new integration point is a potential
    point of complexity or confusion
    

    View Slide

94. With careful planning, smart
    guidelines, and thoughtful
    implementation, you’ll be able to
    create Gutenberg experiences that
    will delight our users and help
    them to do powerful things.
    

    View Slide

95. Thank you!
    

    View Slide