I recently contributed an article to Get Started With Gutenberg, a free publication produced by Heart Internet. Jumpstart Your Gutenberg Designs With SketchPress provides a detailed tutorial on using SketchPress: a library of WordPress admin interfaces, symbols, and icons for use with the popular design toolkit, Sketch. With SketchPress designers can create high-fidelity mockups of custom blocks and other editorial interfaces for both Gutenberg and classic versions of the WordPress admin. SketchPress and other open-source projects from 10up are available on GitHub. You can pick up a copy of the book at WordCamp Europe or download the digital copy.
Prior to the release of WordPress 5.0, I conducted a survey asking WordPress users with Gutenberg experience to offer their perspective on the new editor. The survey was conducted as part of a broader user-research effort designed to understand more about how content publishers view page-building and site-building tools, and how the new content editor matches expectations. This research was intended to explore the behaviors and opinions of people who had already tried Gutenberg. Updates to the new editor based on this research are being tracked on Github and MakeWordPress.org.
The WordPress Design Team recently had an in-depth conversation in Github about enhancing the publisher flow in Gutenberg. After watching Gutenberg go through several iterations since our last user test, I decided to try testing the current flow to see how well it was received by publishers. I hoped to identify friction or pain points in the Gutenberg authoring experience in the interests of helping refine the publishing flow.
A new WordPress content editing experience—Gutenberg—is coming soon to WordPress core, and 10up’s User Experience team is eager to understand how it will impact the experience for content creators. As a starting point, I created a usability test to study the experiences of professional, digital content publishers who are used to writing stories in the current editor. Building on other Gutenberg usability tests that focused on re-creating a prescribed layout, I instead asked professional writers to produce the same kind of content they already produce every day: write a simple story.
The user test asked ten participants to complete the following prompt:
Write a news-style blog post about somewhere interesting you have visited. Please include the following elements in your post:
A title
A paragraph or two about the place
An image
An extra item such as a video or blockquote
These tests were taken with Gutenberg 2.9.2 (the current build at the time the test was created). As of this post, the current version is 3.0.1.
During the unmoderated test, participants described what they were thinking as they progressed through the task. Their words and screen movements were recorded with permission.
Sketch, a digital design app for macOS, enables the the rapid creation of wireframes using libraries of symbols and and reusable design elements. 10up has extended these capabilities with SketchPress: a library of WordPress admin interfaces, symbols, and icons. When wireframing admin interfaces, SketchPress frees up our designers’ time to focus on big picture problem solving and user experience challenges, rather than the repetitive minutia of button treatments and existing page layouts.
Recently, SketchPress was recognized as the preferred admin wireframing resource by Make WordPress Design – the official core WordPress design team – and is now listed on their official Trello project board. This endorsement validates the utility of the project while inspiring us to continue iterating. We value feedback, contribution, and adoption by the community as we seek to share high quality open-source design resources as part of our commitment to openness and giving back.
Getting started with SketchPress
Download SketchPress from GitHub and open it in Sketch. You’ll see a number of pages down the left side of the interface. The first page is an introduction to the document and outlines information about what is included. If you plan to regularly use SketchPress, you’ll probably want to set it up in the templates folder: clone or download the repo directly into the Sketch templates folder, and you can to begin a new Sketch wireframe from the newly-saved template. Add or remove elements to begin modeling WordPress admin interfaces.
The next major release of WordPress is slated to include Gutenberg, a new content writing/editing experience that will change how we craft content inside of WordPress by modernizing the interface and increasing control over the layout and structure of pages and posts. 10up is actively contributing to the development of Gutenberg and is deploying it for some of our clients, and we’d like to better understand how professional content creators will perceive and adopt to the change.
We’re conducting a professional usability study on the current build of Gutenberg. Our goal is to augment existing user testing to better understand a particular subset of the user base: professionals who write and edit relatively standard, news-style content inside of WordPress. We want to observe how this audience perceives and adjusts to this new experience by watching them use it to create some basic content. Our ideal participant has experience creating content with WordPress, and brings a reasonably fresh and unbiased experience to Gutenberg.
Sarah James on
•
2 Comments
The next major release of WordPress is slated to include