Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
"Decisions, not Options" in the Age of Gutenberg
Search
Chris Van Patten
August 08, 2018
0
3.1k
"Decisions, not Options" in the Age of Gutenberg
Chris Van Patten
August 08, 2018
Tweet
Share
More Decks by Chris Van Patten
See All by Chris Van Patten
Meet the Sandwich Stack
chrisvanpatten
0
65
Think Outside the Block
chrisvanpatten
0
820
Meet the Data API
chrisvanpatten
0
150
Going… Going… Gutenberg
chrisvanpatten
0
2.2k
It Doesn't Have to Hurt: Bringing Modern Dev Best Practises to WordPress
chrisvanpatten
0
3.1k
DCxNYC 2017 - CVP's Nine Tips for Pleasant Email
chrisvanpatten
0
51
Hello, my name is... Content Marketing
chrisvanpatten
0
390
The WordPress-Powered Startup
chrisvanpatten
0
8.7k
Project Management 101 (Barcelona edition)
chrisvanpatten
0
9k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Making Projects Easy
brettharned
116
6.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bash Introduction
62gerente
613
210k
A Tale of Four Properties
chriscoyier
159
23k
Code Review Best Practice
trishagee
68
18k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Navigating Team Friction
lara
185
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Transcript
“Decisions, Not Options” I N T HE AGE O F
GU TE NBE RG
None
@ChrisVanPatten
tomodomo.co
None
None
None
First, a history lesson.
In the beginning…
None
None
None
…and it was good.
…and it was good. (And we got used to it.)
Familiar integration points
TinyMCE,
TinyMCE, shortcodes,
TinyMCE, shortcodes, and metaboxes
TinyMCE, shortcodes, and metaboxes (And we got used to it.)
Familiar customisation tools
did a lot of the work for us. Advanced Custom
Fields
CMB2 did a lot of the work for us.
PODS did a lot of the work for us.
WordPress did a lot of the work for us.
did a lot of the work for us. WordPress (And
we got used to it.)
None
Change is coming…
The stuff that used to work will continue to work,
but it won’t be the best user experience anymore.
A
A whole
A whole new
A whole new vernacular!
BLOCKS!
BLOCKS! INSPECTORS!
BLOCKS! INSPECTORS! TOOLBARS!
BLOCKS! INSPECTORS! TOOLBARS! MENUS!
BLOCKS! INSPECTORS! TOOLBARS! MENUS! You ain’t used to this!
With all these new integration points, we need to think
carefully…
How can we create intuitive, elegant, and easy interfaces that
fit in with Gutenberg and reflect the WordPress philosophy?
P·H·I·L·O·S·O·P·H·Y WORDPRESS HAS ‘EM.
Design for the Majority
Out of the Box Design for the Majority
Out of the Box Striving for Simplicity Design for the
Majority
Out of the Box Striving for Simplicity The Vocal Minority
Design for the Majority
Decisions, not Options
These are guidelines, not rules.
These are guidelines, not rules. (But they’re useful.)
As you consider your integration points, consider the philosophy.
As you consider your integration points, consider the philosophy. Be
the philosophy you want to see in the world.
1. Think carefully about where a control belongs
1. Think carefully about where a control belongs 2. Think
carefully about whether or not a control should exist
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
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
meet the USER INTERFACE
(figure 1) Toolbar
(figure 2) Block Action Menu
(figure 3) Block Canvas
(figure 4) Block Inspector
(figure 5) Document Inspector
(figure 6) Plugin Sidebar
Scenarios
None
None
None
Points of Confusion
Plugin Sidebar versus Block Inspector versus Block Canvas
None
Plugin Sidebar versus Document Inspector
None
Some humble recommendations…
Use Gutenberg core controls where possible
Innovate only when core controls won’t work
Separate blocks for separate markup (Most of the time.)
Don’t fall back to metaboxes
Options in code don’t have to be options in UI
Avoid the block settings menu (Probably.)
Conduct user tests
Best practices and patterns will emerge over time, but…
LET’S SPEED THAT UP WITH COLLABORATION
HIG
HIG Human
HIG Human Interface
HIG Human Interface Guidelines
HIG Human Interface Guidelines
None
None
introducing the Gutenberg Human Interface Guidelines
A practical resource for Gutenberg user interface best practices
A template for agencies and product teams
A guide for designers
Consistency › Predictability › Usability
https://github.com/TomodomoCo/gutenberg-hig
Each new integration point is a potential point of complexity
or confusion
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.
Thank you!