Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
Yesterday, @lukepettway was kind enough to sit down with me and walk through my and @melchoyce‘s initial ideas for a menu blockBlock Block 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 accessibilityAccessibility Accessibility (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.
Video recording and transcriptAfter collecting feedback and discussing areas of the problem individually, @melchoyce and I have circled back to a proposed combined direction for the navigation menuNavigation Menu A 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. blockBlock Block 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..
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 (CustomizerCustomizer Tool 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.
The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. principles followed here:
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:
When you first add the navigation menu block, GutenbergGutenberg The 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 GithubGitHub GitHub is a website that offers online implementation of git repositories that 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.
At this stage, broad feedback would be extremely useful.
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.
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 accessibilityAccessibility Accessibility (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!
#gutenberg, #menusThese are the results of a user research study investigating mental models related to building and customising a website. Results are split across five posts:
Background | Segments: Bloggers · Small Businesses · Site Builders | Conclusions
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.
Let’s learn more about site builders!These are the results of a user research study investigating mental models related to building and customising a website. Results are split across five posts:
Background | Segments: Bloggers · Small Businesses · Site Builders | Conclusions
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.
Let’s learn more about small businesses!These are the results of a user research study investigating mental models related to building and customising a website. Results are split across five posts:
Background | Segments: Bloggers · Small Businesses · Site Builders | Conclusions
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.
Learn more about bloggersThese are the results of a user research study investigating mental models related to building and customising a website. Results are split across five posts:
Background | Segments: Bloggers · Small Businesses · Site Builders | Conclusions
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! 🍵
Huge thanks to @jarahsames, @alexislloyd, @bengrace, @benrearick, @bph, @cathibosco, @chrisvanpatten, @designsimply, @evawong, @johngough, @joshuawold, @karmatosed, @lilibet, @lonelyvegan, @mapk, @melchoyce, @mkaz, @msdesign21, @nao, @paaljoachim, @pento, @thedezzie, @tmmbecker, @tobiasziegler, @xarisgn, and Melissa Vander Wilt for helping to make this happen. Research like this takes a village, and it was fantastic to have so many people jumping in to lead sessions, take notes, share insights, and sift through all the data. Thank you for all your hard work! 🌟
If you have any questions about these results or would like to conduct your own research, please drop into the #research channel in SlackSlack Slack 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.
Background informationThe research group has a report ready to share as part of the sitebuilding research. Since it’s quite long, the group would like to choose the best place to publish it.
This report should be stored with other research results in the future, since these are likely to build upon and enhance one another. It’s best if these resources are easy to find and access. They should be something that everyone contributing to WordPress can refer back to in coming months and years.
This was discussed in Slack, but let’s open the conversation to more people.
Where should this type of content live?
This research is ready to publish, so please share your preference by leaving a comment on this post no later than Thursday, 31 January 2019. Thank you!
Happy new year, everyone! In December, a team of intrepid designers, developers, and WordPress people banded together to learn more about WordPress’ end users. In total, the team chatted with seventeen different people over seven days. Huge thank-yous to everyone who joined in—you’re all 🌟s!
Now it’s time to sift through the data and pull out some insights. This will happen over the next two weeks. Here’s the current plan:
These artefacts will be used to guide the product direction of GutenbergGutenberg The 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/ Phase 2—and possibly beyond!
Many hands make for light work, and many brains make for more insights and less bias. You don’t need to be a designer, and no prior research experience is necessary. Pop into the #research channel in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., pingPing The 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.” @tinkerbelly or @jarahsames, or comment here if you’d like to join in on any of the stages.
With user interviews for the sitebuilding study kicking off soon, lots of preparation is underway. (As a reminder, you can view the research plan here.) Here’s an update on where things stand right now, and how you can help.
Sessions are being scheduled with approximately twenty users during between 12 December and 21 December. The interviews will be conducted remotely via Zoom. They will be an hour long and will follow this script (subject to change as we iterate on it).
Each session will be lead by a moderator, who’ll be responsible for guiding the interview and asking the questions. A notetaker will be responsible for taking notes and recording their impressions. There may also be some observers on the call, who’ll just be listening in. Once the interview is finished, the moderator, notetaker, and any observers will convene (either on Zoom or in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.) for a brief debrief session to discuss insights and things learnt.
User research is an art, not a science, so it’s great to have lots of different people represented in these sessions and analysing the results. This means we can get more insights. If you’re new to user research and would like to participate, @jarahsames and I would like to help you!
First of all, we’ve put together some guides for each of the roles:
Feel free to leave comments if you’ve any questions on these documents, or ask in the #research channel in Slack!
On top of this, @jarahsames and I will be hosting a dry run of the interview script as well as answering all your burning questions so that you can see how everything will work on Tuesday, December 11 at 17:00 UTC. If you’re interesting in joining in with the research efforts next week, we’d love to see you there! If you can’t make it, you can leave any questions you may have here, or pop them in Slack #research. We’ll also record the session and post it here.
And as a reminder, you can sign up to register your interest in participating in these sessions by filling in this form, or pinging in the #research channel.
As phase 2 of GutenbergGutenberg The 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/ begins to gear up, it’s time to do some exploratory research in order to better understand the 30% of the web who may not be active in the WordPress community. This foundational research is intended to get a better understanding of how people use site- and page-builders currently, what their mental models of a website look like, and what pain points exist in the experience. Results will be used to inform the boundaries of the overall product direction.
Working with @karmatosed and @alexislloyd, @jarahsames and myself have been working on a research plan to explore attitudes toward sitebuilding. In short, we’ll be talking to people about their experience building websites, and we’d love for everyone in the community who’s interested to join us!
Absolutely anyone can be involved—you don’t need to be a researcher, or a designer, or a UXUX UX 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. person. You don’t need to have any experience talking to people, all you need is the willingness to listen and learn! Participating in user research is a great way of gaining empathy for your end users and evolving a more user-centric way of approaching product decisions.
There are lots of different ways to participate: you can help us with the planning and writing of the script. You can sit in on a session as a silent observer. You can take notes. You can run a session yourself. Or you can help analyse the results once it’s all over. Sarah and Sarah will provide you with guides for each task and will be there to help you throughout the process if you have any questions.
The interview sessions will be run the week of 10 December. These sessions will be shared in the #research SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel for anyone who’d like to participate.
A report of the results will be published here by 9 January, and updates on progress will be posted here weekly so you can follow along. Updates will also be shared every week during the regular design meeting every Wednesday at 19:00 UTC.
Interested in joining in? Register your interest here!
You must be logged in to post a comment.