Welcome! This all-volunteer team needs designers of various kinds. See our handbook and drop into #design once signed up for volunteer opportunities.
Our vision is to be the go-to resource for design for other teams across the WordPress open source project.
Gutenberg needs to provide a way for users to discover and install new third-party blocks without ever leaving the editor. We are looking for a volunteer to lead the design part of this project.
Currently, new Gutenberg blocks can be provided by plugins, which often register many blocks, and which are managed from outside the editor. The Block Directory proposal outlines a new type of simple block-based plugin that is intended to be seamlessly installed from within Gutenberg itself. This is one of the 9 priorities in the 2019 roadmap.
The WordPress.org API will provide an endpoint for searching for blocks by name and description, and return metadata similar to that of plugins. Gutenberg’s Inserter could use that endpoint to also show relevant block plugins that are available to install, with a button and process for seamless installation. Some early sketches of ideas have been made, such as these:
(Note that these are all merely explorations and visual ideas, not set in stone)
It will be important to give users enough information about available blocks in order to make an informed decision – which might include the author, review ratings, and so on – without overloading them with too much information.
One key feature that might help improve the user experience is to allow users to insert a preview of the block into their document first, before installing the plugin, and then use the preview to make their decision about whether or not to install it.
As of now, there are some ideas sketched out and some general requirements as outlined above. There is work already on the block management feature, which is tangentially related. But there are many decisions yet to be made. Work needs to begin soon if this is to be ready in time for the WordPress 5.3 release later this year.
Some of the main design issues that need to be resolved include:
We are looking for a volunteer designer who can manage this project and commit enough time to see it through to completion in time for the 5.3 release. Responsibilities would include:
Given the nature of the work and the time frame, we expect that this is a project that will need a minimum commitment of at least a day a week, and possibly considerably more at times.
If you think you might be the right person for the task, please make yourself known to the Design Team during the weekly meeting, Wednesday 18:00 UTC in #design. Or alternatively, leave a comment below.
Two weeks ago, a group of WordPress design researchers conducted seven usability tests with a combination of beginner or casual WordPress users (5), and power users (2). Most of them hadn’t used Gutenberg yet.
The goal was to learn more broadly about how people use navigation menus, and about their mental models related to navigation for a website. We also wanted to validate whether the proposed solution was on the right track.
The team selected moderated usability testing for two reasons:
The usability testing script comprised of a short exploratory interview, followed by a task-based evaluation of the prototype. This allowed the team to ask exploratory questions when the participant expressed moments of delight or confusion, or to pause and uncover more qualitative insights. It also allowed the team to better test the prototype, which had limited functionality.
Thank you to all the design researchers who participated: @josearcos, @favoriteswan, @kjellr, @mapk, @vishalmukadam, and @dpknauss.
The research team spent this past week reviewing notes, breaking out key insights and turning them into “sticky notes” for easy rearranging, which was helpful for synthesizing the data into coherent groups afterwards. We marked off positive, negative, and workflow-oriented insights for each session. Then, we grouped the negatives together and created action items for each major problem.
Some of the issues were inherent to how the prototype worked, or are related to Gutenberg as a whole, so we separated those out from the actionable items:
Overall? Our testing went way better than I was expecting for such a complex block.
The biggest barrier our power users had to overcome was doing things the “WordPress way.” When the team asked them to add a menu, they hunted around for a wp-admin link—which didn’t exist in our prototype.
Once the testers figured out they could add the menu directly from the front-end screen, they were delighted.
Beginners struggled the most with learning the fundamental Gutenberg patterns. Some of the icons and labelling were especially confusing — we’ll be looking at improving both in our next iteration. Many of our testers weren’t sure if they were previewing their page, or editing it. Many wanted to press a “publish” button after making changes. Because many people encountered the menu item dropdown early, they kept returning to it when looking to complete a task. In many cases, they glossed over new UI to return to what they’d already used. We’ll want to account for this in future iterations.
Of the various steps, people struggled the most with adding pages to their menu. Most figured out how to add a menu, and then add a new page okay, but the search interface tripped up a lot of our testers. We’ll need to focus on improving this UI.
By the end, pretty much everyone seemed comfortable with the general concepts, and had learned about the “add” icon, the menu item dropdown, and how to move pages around.
“I like this, I wish mine did this!”
A navigation menu tester
Most of our testers were really excited to see WordPress heading in a more visual direction, and found our new UI way easier than the only ones they’d used in wp-admin and the Customizer.
@tinkerbelly and I are compiling a list of all of the changes we need to make to the prototype. @tinkerbelly is working on implementing those changes in an iteration on the prototype, which we’ll then walk through with @lukepettway later today to get his insights on any accessibility issues we might run into.
After implementing any changes @lukepettway suggests, either @tinkerbelly or I will write up a design handoff on the GitHub issue and chat through the prototype with the developer who’ll be working on this block, @jorgefilipecosta.
Once the team has a working PR of the Navigation Menu block, the next step will be another round of testing. Stay tuned for more information on that in the coming weeks.
X-comment from +make.wordpress.org/updates: Comment on Weekly Digest | Week 13
Happy Friday once again! This is the last Friday of the 1st quarter of the year. Let’s take a deep breath and dig into what went on this last week.
Work is progressing on the Navigation Menu block. A group of designers conducted seven usability tests last week, and have spent this week going through notes and pulling out insights. Keep an eye on this p2 for an update next week on next steps.
wp-admin
There’s a new PR that explores the widget-blocks in a wp-admin page. It’s quite basic right now, but still a wonderful work in progress.
Customizer
Some simple explorations are being done to include blocks in the Customizer. They are rough thoughts that incorporate Customizer’s existing patterns with a bit of Gutenberg.
Thanks for reading, staying informed, and contributing anywhere you can!
You can read the full transcript of this meeting on our Slack channel. You can also read the agenda for this week.
Next week this meeting will shift time to be +1 hr. Springing forward!
@mapk shared that the team has been getting really positive comments on the release of Gutenberg 5.3. Thanks to everyone who has been contributing and testing everything!
There are a few tickets that could use review this week:
These three are good tickets to get involved in and test out! They will most likely impact some future design decisions in other areas as well.
One last thing that is a followup on the Accessibility section in last week’s design update post. There are 4 really important a11y issues that we need to keep moving forward.
By the way, for anyone interested @boemedia asked a great question about the process of releasing a new feature in Gutenberg. It’s worth taking a quick read.
Also, Block Manager should be coming to WordPress 5.2 soon!
Site health is being merged into core now (woo hoo!).
@hedgefield shared some thoughts about the process of getting a design moving and seeing the vision through to the end. You can read more about the discussion on Slack. It led to a good discussion (with some healthy radical candor) on the importance of making sure we take care of our amazing designers who give it their all to see WordPress improve.
In addition, there are a few open design details that could use review.
There’s a new design listed in Trac. @joostdevalk asked for signoff on moving forward. Thanks to Megs Fulton for the great work done!
Last week, @jarahsames and I hosted a live video session in which we walked through the process, methodology, and results of the site building research—then answered lots of questions!
For those who weren’t able to make it, here’s a video and a transcript.
This is the agenda for the weekly design chat meeting on Wednesday, 27th March 2019, 19:00 GMT.
This meeting is held in the #design channel in the Making WordPress Slack.
Leave a comment if you are working on a project and would like to give an update in the design meeting. If there is anything you would like to see added to the agenda, please also leave a comment.
Gutenberg 5.3 is out! This release will be included in WordPress 5.2. The planning of this worked great with the next WordPress release thanks to everyone involved.
There’s been extensive moderated testing this week for the Navigation block. It’s so rewarding to converse with participants and get realtime feedback as they click through the prototype.
These sessions are not only boosting the confidence of design decisions, but also bringing to light several areas of improvement. After this week, there will be a post outlining the details of everything learned.
If you want to get involved in future testing, become a WordPress researcher.
This last release includes:
The Block Manager has been included in this release! It’s been a requested feature for some time now.
The Section block is difficult requiring a bit more time to get it to a minmum viable product. Aligning the inner blocks so that they conform to the wide and full widths within the Section block includes a lot of math, a lot of testing, and a lot of patience.
The Accessibility & Design Teams are working to prioritize a set of issues right now.
Thanks for reading, staying informed, and contributing anywhere you can!
You can read the full transcript of this meeting on our Slack channel. You can also read the agenda for this week.
The first week in April this meeting moves like most .org meetings, ahead an hour.
Gutenberg 5.3 was released! Congrats to all the amazing work designers have been doing!
You can read more about it on the release post. It will also coincide with the release of WordPress 5.2. Some things to point out:
The Improved Fatal Error Protection
The intention is to give users the ability to access their WordPress admin when a plugin or theme is causing a fatal error. We’ve been asked to give design feedback on:
Feedback is welcome! Feel free to jump in and share your thoughts.
Site Health plugin design
The work has wound down. There has been an exploration of what the Gutenberg styling would look like in other areas of the admin. Further work is intended to explore what this could look like.
As an interesting note, the team chose 16px for the main font size with this plugin. Much of the WordPress admin uses 13px, but from an Accessibility perspective that seems to be pushing the limits of what’s reasonable.
—-
As a site note, the team did a Contributor day at Yoast last week, and it went well! The design table had 3 first-timers, and the team gave feedback on about 8 open issues, even one long-dead one about Gutenberg annotations.
This is the agenda for the weekly design chat meeting on Wednesday, 20th March 2019, 19:00 GMT.
This meeting is held in the #design channel in the Making WordPress Slack.
Leave a comment if you are working on a project and would like to give an update in the design meeting. If there is anything you would like to see added to the agenda, please also leave a comment.
