$30 off During Our Annual Pro Sale. View Details »

"Decisions, not Options" in the Age of Gutenberg

Chris Van Patten
August 08, 2018
3k

"Decisions, not Options" in the Age of Gutenberg

Chris Van Patten

August 08, 2018
Tweet

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