"Decisions, not Options" in the Age of Gutenberg

38bc9be7f4f140d1f719c1faeed29a6c?s=47 Chris Van Patten
August 08, 2018
2.8k

"Decisions, not Options" in the Age of Gutenberg

38bc9be7f4f140d1f719c1faeed29a6c?s=128

Chris Van Patten

August 08, 2018
Tweet

Transcript

  1. “Decisions, Not Options” I N T HE AGE O F

    GU TE NBE RG
  2. None
  3. @ChrisVanPatten

  4. tomodomo.co

  5. None
  6. None
  7. None
  8. First, a history lesson.

  9. In the beginning…

  10. None
  11. None
  12. None
  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.)
  26. None
  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

  62. None
  63. None
  64. None
  65. Points of Confusion

  66. Plugin Sidebar versus Block Inspector versus Block Canvas

  67. None
  68. Plugin Sidebar versus Document Inspector

  69. None
  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

  85. None
  86. None
  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!