"Decisions, not Options" in the Age of Gutenberg

Transcript

1. “Decisions, Not Options” I N T HE AGE O F GU TE NBE RG
3. @ChrisVanPatten
4. tomodomo.co
8. First, a history lesson.
9. In the beginning…
13. …and it was good.
14. …and it was good. (And we got used to it.)
15. Familiar integration points
16. TinyMCE,
17. TinyMCE, shortcodes,
18. TinyMCE, shortcodes, and metaboxes
19. TinyMCE, shortcodes, and metaboxes (And we got used to it.)
20. Familiar customisation tools
21. did a lot of the work for us. Advanced Custom Fields
22. CMB2 did a lot of the work for us.
23. PODS did a lot of the work for us.
24. WordPress did a lot of the work for us.
25. did a lot of the work for us. WordPress (And we got used to it.)
27. Change is coming…
28. The stuff that used to work will continue to work, but it won’t be the best user experience anymore.
29. A
30. A whole
31. A whole new
32. A whole new vernacular!
33. BLOCKS!
34. BLOCKS! INSPECTORS!
35. BLOCKS! INSPECTORS! TOOLBARS!
36. BLOCKS! INSPECTORS! TOOLBARS! MENUS!
37. BLOCKS! INSPECTORS! TOOLBARS! MENUS! You ain’t used to this!
38. With all these new integration points, we need to think carefully…
39. How can we create intuitive, elegant, and easy interfaces that fit in with Gutenberg and reflect the WordPress philosophy?
40. P·H·I·L·O·S·O·P·H·Y WORDPRESS HAS ‘EM.
41. Design for the Majority
42. Out of the Box Design for the Majority
43. Out of the Box Striving for Simplicity Design for the Majority
44. Out of the Box Striving for Simplicity The Vocal Minority Design for the Majority
45. Decisions, not Options
46. These are guidelines, not rules.
47. These are guidelines, not rules. (But they’re useful.)
48. As you consider your integration points, consider the philosophy.
49. As you consider your integration points, consider the philosophy. Be the philosophy you want
 to see in the world.
50. 1. Think carefully about where a control belongs
51. 1. Think carefully about where a control belongs 2. Think carefully about whether or not a control should exist
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
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
54. meet the USER INTERFACE
55. (figure 1) Toolbar
56. (figure 2) Block Action Menu
57. (figure 3) Block Canvas
58. (figure 4) Block Inspector
59. (figure 5) Document Inspector
60. (figure 6) Plugin Sidebar
61. Scenarios
65. Points of Confusion
66. Plugin Sidebar versus Block Inspector versus Block Canvas
68. Plugin Sidebar versus Document Inspector
70. Some humble recommendations…
71. Use Gutenberg core controls where possible
72. Innovate only when core controls won’t work
73. Separate blocks for separate markup (Most of the time.)
74. Don’t fall back to metaboxes
75. Options in code don’t have to be options in UI
76. Avoid the block settings menu (Probably.)
77. Conduct user tests
78. Best practices and patterns
 will emerge over time, but…
79. LET’S SPEED THAT UP WITH COLLABORATION
80. HIG
81. HIG Human
82. HIG Human Interface
83. HIG Human Interface Guidelines
84. HIG Human Interface Guidelines
87. introducing the Gutenberg Human Interface Guidelines
88. A practical resource for Gutenberg user interface best practices
89. A template for agencies and product teams
90. A guide for designers
91. Consistency › Predictability › Usability
92. https://github.com/TomodomoCo/gutenberg-hig
93. Each new integration point is a potential point of complexity or confusion
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.
95. Thank you!