The Design Team provides user experience, user interface, and visual design expertise for the WordPress project.
Want to get involved?
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 sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
We meet and have ongoing discussions in Slack#design
Team: Wednesday 18:00 UTC
Triage: CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress./metaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. and GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/: Tuesday 16:00 UTC
Last week there was a call for both notetakers and triage facilitators. The call is still open, if you are interested, leave a comment after these notes or announce yourself in the #design Slack channel.
Updates
GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ updates
@mapk let us know that the workaround full-site editing is moving forward. Several issues have been identified and Gutenberg designers are reviewing UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. flows in relation to these issues.
Other specific works happening around Gutenberg include usability testing on Columns blocks, more work and design for Navigation blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and global styles.
Discussion
@karmatosed open discussion around WP 5.4. And the list created of items the #design team would like to include. The list is very optimistic and needs prioritizing.
We ask people to review the list and let us know in the comments what do you think should be worked out for 5.4.
We talked about options in text and toggles like “on/off”. See examples on the SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. chat. You can leave your thoughts on both tickets. @kjellr is back and retaking the topic of how themes work with Gutenberg. Follow up his experiments on the mentioned repository. In the future, there will be more updates in #themereviews and make/themes if people want to follow this topic.
As noted in an earlier Gutenberg design update, I wanted to communicate a proposed UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. flow for rolling out the widgets-to-blocks interface changes. It’s a proposal and still up for discussion along with further communication in the GithubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ PR, Add blocks in widget areas RFC.
Widgets are now blocks which require a new GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ interface to help people transition to this new paradigm. What is the best way to introduce the new widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.-blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. screens to users? How can we do this with the least amount of development time, use existing patterns, and clearly communicate the gradual transition to blocks?
Diverging to explore solutions
I began by segmenting the use cases:
Users with existing widgets
Users without widgets
New users
My initial work included using different menu items in wp-admin and the CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. based on if the user had existing widgets in their site. A user with existing widgets would need more help transitioning to a new interface than a user without any prior widget paradigms.
Segmentation notes
After further investigation of this, I opted out. If the menu items segmented, it might cause more confusion because there would be some users with the new menu items while another may have the old. Documentation and internet tutorials could get difficult to follow at that point. I’d like to do this with the least amount of development time, and confusion on the user’s end.
Converging on a solution
wp-admin
To achieve a simple and non-confusing rollout, keeping the wp-admin menu items the same might be the best option. The user would still see “Widgets” under the “Appearance” menu item. When clicking that to view the widgets, the user would now get the new Gutenberg Widget Areas screen.
The new Widget Area screen
We’d need to make sure the proper messaging or tips are displayed on this page to help orient the user to the new layout.
Tips in the Widget Areas screen
Customizer
This scenario would work similarly to the one above. When clicking into the Customizer, the user would still see “Widgets” as an option if the Theme provides it. This shouldn’t require any additional work on the part of the theme outside what is currently required. Once clicked the user sorts through the blocks and can add 3rd party unconverted widgets with the Legacy Widget block.
Feedback
So that everyone’s aware, the discussions around why blocks are being introduced in the widget screens is already explained in the Github issues, and in comments on other sites. This is one of the 9 projects for 2019, and aims at helping everyone slowly make the transition to the block paradigm.
The feedback I’m looking for here is:
How do you feel about keeping the “Widgets” menu item through the transition even though these really aren’t widgets anymore?
Does it make sense to call these “Widget Areas” through this transition phase?
Is there anything I may have missed or not thought of?
As you may remember, back in December a small group of curious-minded people embarked on a research study with the aim to learn more about how end users think about site building.
Since the results have been out for a little while now, @jarahsames and I are going to be hosting a walkthrough of the results as well as a Q&A session, live on video! Join us at 19:00 UTC, Monday, 18 March to learn more and ask all your burning questions.
The session will cover:
The goals and aims of the study
How the research was planned and performed
Findings and insights
How you can get involved with future research efforts
Answers to all your burning questions!
The session will be recorded and shared here, so if you can’t make it live, you can always catch up later. It should take around an hour, depending on how many questions there are. If you can’t make the session or would like to pre-share your question(s), please drop them in the comments below, and Sarah and I will be sure to answer them during the Q&A portion.
The Zoom link for the session is here, and will also be shared to #research just prior to the session. See you Monday!
User research is key to ensuring that software meets users’ needs. With user research efforts ramping up across the project, now is a great time to get involved!
You don’t need to be a designer (or a developer, or a tester!) to become a researcher. All you need is a curious mind and a desire to help improve products for users.
Upcoming studies
With the site building study wrapped up, the next research efforts will be focussing on usability testing of new features. Coming up this month:
Anyone can become a researcher! You can start as a silent observer. This is the easiest way to get involved. You join the call as a silent, invisible participant to see how it works, and you can share your observations with us in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. after the session.
If you’re ready for the next step, you can help by taking notes or even running a session. You can also help by contributing your observations after the fact, watching video recordings, or compiling results. There are guides and support available for all of these tasks, as well as lots of friendly faces in the #research channel in Slack to answer any questions you may have.
If you’d like to be involved in one of the research studies listed above, please comment here or pingPingThe act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” myself, @sarahmonster in Slack, and I’ll get you set up and ready to go.
Yesterday, @lukepettway was kind enough to sit down with me and walk through my and @melchoyce‘s initial ideas for a menu blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. design, in order to catch any areas that could be problematic from an accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) standpoint.
After collecting feedback and discussing areas of the problem individually, @melchoyce and I have circled back to a proposed combined direction for the navigation menuNavigation MenuA theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site.blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience..
What problem are we trying to solve?
Building navigation menus for a website is a fragmented process that’s difficult to understand and visualise. It relies on a pre-existing understanding of the model WordPress uses to organise menus and doesn’t map to users’ understanding of how navigation menus should work. There are multiple different ways to create a menu (CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., Appearance > Menus, widgets) that all offer slightly different experiences, increasing confusion. Creating a link to certain parts of the site often requires manual work.
Principles
The coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. principles followed here:
Any interactions that are required by a majority (over 50%) of users exist in the block interface itself.
Advanced controls are moved to the block inspector in order to progressively reveal complexity.
Switching between advanced and basic interactions is made simpler by links.
The editing state of the block itself should mimic as closely as possible the front-end output.
Use technology and data to make smart decisions for the user so as to limit the number of decisions they need to make.
Users should be able to create pages from the menu interface if these pages don’t already exist on their site.
There’s a great deal of complexity that goes into a navigation menu (multiple levels of nesting, mega menus, social links, etc), but the majority of users require a very simple menu—a collection of links to the main sections of their site.
After a productive discussion in the #design meeting of 13 February, Mel and I decided to create slightly different experiences for core interactions and advanced interactions. For the majority of users, everything they’ll need to build a simple menu will be available in the block interface itself. Smart defaults help users get up and running as quickly as possible, so they may only need to make a few small adjustments to the out-of-the-box configuration of the block. For advanced users who want fine-grained control of complicated menus, a suite of advanced tools is available in the Inspector.
You can see how these interactions are classified in this diagram:
Core interactions are blue, advanced interactions are pink.
Proposed Solution
The core (in-block) UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. flow.
When you first add the navigation menu block, GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ will use some underlying code-magic to try to automatically generate a menu for you, based on a number of different factors including any pre-existing saved menus, where you’re inserting the menu on your site, and what content you already have set up.
Once you’ve created a menu, you can delete items quickly using the delete on your keyboard, or you can delete them using the traditional block settings ellipsis menu.
To rearrange elements in your menu, select the menu item you’d like to move and either use the drag handle or the “move left” and “move right” buttons to shift it. Advanced options and hierarchy management exists in the inspector.
One level of hierarchy is visible in the block itself. By default, sub-menus are hidden in the block interface, but they can be toggled on and off using the drop-down icon. For more complex hierarchical structures, an inspector panel opens and allows for legacy-style reordering and nesting of navigation items.
To add an item to your menu, start typing or use the “+” button. The placement of the “+” button shifts depending on which item is currently selected, so you don’t need to add new items at the end and then move them up.
Adding a new menu item pulls up a search interface, similar to adding an inline link or a button. The search returns all relevant content across your site, regardless of what content type it may be. Icons are used to provide additional context as to what type of content is being returned. From here, you can also opt to create a new page or enter the advanced mode to browse your content and bulk-add items.
If you’d like to dive more deeply into the finer points of discussion, there are a series of GithubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues for discussing different parts of the interaction:
There’s also a Figma prototype that you can play with or leave comments on directly. Note that it’s under construction, so not everything works perfectly yet.
Get involved
At this stage, broad feedback would be extremely useful.
Overall, does this feel like a sensible direction?
Is there another approach that might work better?
What’s the most elegant way to handle nested menus?
How can advanced reordering be made as simple and user-friendly as possible?
If you have feedback on a specific element or interaction, it’s best to leave that in Github or Figma. If you’d like to remix or improve this work, please feel free to create a new page in Figma, or duplicate the whole document itself, and share here in the comments.
Next steps
These designs are a work in progress and will be iterated on based on your feedback as well as usability testing results.
@lukepettaway and I will be meeting up later this week to do a walkthrough of the proposal and identify any potential accessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) problems in this design.
Mel and I will be working on a plan for usability testing of this prototype. If you’d like to be involved or sit in, please join us in #research at 18:00 UTC tomorrow, Tuesday 26 February for a text chat. More details will be posted here once those details have been hammered out. If you’re interested in helping with usability testing, there will be lots of opportunities to get involved!
The research group sorted participants into three segments, based on their current understanding of how people use WordPress. These segments are based on a handful of data points and warrant further study to confirm the categories. For now, these segments allow researchers to group WordPress’ extensive userbase into behavioural categories and learn characteristics specific to each group.
For this study, we focussed on three segments: bloggers, small businesses, and site builders (people who build sites for others). Today we’re going to learn more about site builders.
Site builders are people who make sites for others. Site builders often start as bloggers or small businesses. Having taught themselves to build websites, they are now progressively leveraging their skills to earn additional income. They tend to work for friends, acquaintances, or people in their professional networks and often barter or don’t charge much for the websites they build.
The research group sorted participants into three segments, based on their current understanding of how people use WordPress. These segments are based on a handful of data points and warrant further study to confirm the categories. For now, these segments allow researchers to group WordPress’ extensive userbase into behavioural categories and learn characteristics specific to each group.
For this study, we focussed on three segments: bloggers, small businesses, and site builders (people who build sites for others). Let’s learn about small businesses next.
Small businesses are the most varied group since businesses range widely depending on their nature. This is a difficult group to generalise about and researchers observed a diverse range of experiences.
The research group grouped participants into three segments, based on their current understanding of how people use WordPress. These segments are based on a handful of data points and warrant further study to confirm the categories. For now, these segments allow researchers to group WordPress’ extensive userbase into behavioural categories and learn characteristics specific to each group.
For this study, we focussed on three segments: bloggers, small businesses, and site builders (people who build sites for others). Let’s learn about bloggers first. (Hat-tip to @jarahsames who studied this segment!)
Bloggers wear many different hats: they are the writers, admins, and IT for their websites.
Results have been compiled from the sitebuilding research conducted at the end of December, and a report is ready. Make a cup of tea, it’s a long one! 🍵
If you have any questions about these results or would like to conduct your own research, please drop into the #research channel in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. and say hello.
With that said, let’s dive into the full report! There’s a lot of information to digest, so this will be split into five sections (see discussion), to be shared here over this week and next.