Gutenberg Phase 2 Friday Design Update #6

It’s the middle of February now and there’s been great discussion around how Gutenberg might impact some of the WordPress major releases. Because Gutenberg updates often affect the user interface, it’s important to consider these as major updates. Anyways, let’s get down to design!

Widgets to blocks

All core widgets are now converted to blocks! Please take a moment to stop and celebrate this achievement. A big round of THANKS goes out to everyone involved. Design Team, Core Team, Accessibility Team, other contributors, everyone! Great work.

The Classic Widget Block is still underway. This block will display widgets that haven’t been converted yet. Any non-core widgets will be accessed in Gutenberg by being contained in this block.

Other widget blocks are being improved upon: Archives [1464], Recent Comments [1792], Recent Posts [1594].

Navigation block

This complex block is HUGE. So many moving parts, interactions, etc. Distilling it down into key issues has been helping on GitHub. Feedback is coming in, providing different perspectives and thinking. This block is still about a month+ out.

Tightening up

The discussion about the Cover block including nested blocks is laying important groundwork for a Section block.

Accessibility

Some a11y discussion around the block specific responsive controls has been happening. It was mentioned in this week’s a11y chat as well.


Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Findings & recommendations (Site building study #5)

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

Key findings

  1. Big changes in software present cognitive challenges, particularly to long-term users of a product.
  2. People don’t care about the process of building a site—they just want to build something that works as quickly as possible, so they can focus on their core interests.
  3. People struggle to build a site that looks and works the way they want. Themes are a source of friction because they don’t match the way people think about building a site.
  4. Many people who build sites don’t have a pre-defined vision in their head of what it should look like. They tend to play around until they find something they like.

Recurring themes

Personal circumstances

A website is an opportunity to pursue a passion. That passion often begins as a side project, but the hope is that it will expand further. People often don’t have huge lofty goals for their sites or their businesses: they just want to pay the bills.

I’d like to be working for myself, but I’m not super good at hustle.

Sometimes a traumatic life event (accident, medical, personal) triggers a change in circumstances and brings people to a more entrepreneurial place, at which point a website becomes an essential tool.

WordPress allowed me to overcome difficulties in my life I couldn’t overcome without it.

Site building

A website is a tool for achieving a goal, not an end in and of itself. Building a site is often a necessary distraction from that goal. People aren’t really interested in the process of building a site, they just want to get a site out there.

WordPress uses too much jargon.

I wish there was a site builder that was for [non-technical] people like me.

Extensibility is the #1 thing people like about WordPress.

People have defined structures for how they build WordPress sites—they learn one approach, and then they repeat that for other sites. Often this means investing in learning one complex “do everything” theme and using that across all their sites.

Now I know these settings like the back of my hand because I’ve been using them for 10 years.

Generally speaking, people prefer when there’s a direct connection between element controls and the element itself. This aligns with Gutenberg’s approach, even though many people we talked to either didn’t like or hadn’t tried Gutenberg yet.

It’s so much easier and visual to float the blocks around.

Themes

People find making child themes to be an arduous process. They’ll often end up using a plugin to make the child theme, or editing the theme’s CSS directly via Appearance > Editor.

The term “theme” doesn’t really mean anything to people. A lot of people use the term “template” when they mean “theme.”

A lot of people spend a great deal of time choosing a theme, and they’re often unhappy with what they land on. often unhappy with what they land on.

A lot of times I will be unhappy with the layout. Often, everything else about the website is good, but the homepage isn’t right. I want the interior pages to look different than the home page – often not just look, but structure and mechanics.

Learning & delegating

Casual bloggers and people who may not consider themselves technical experts search Google to find answers to their questions. They assume documentation will solve their issues and are willing to learn more so they can make their website better. 

People will delegate as much work as they can afford to, so they can focus on the core of their work. Often a website is one of the first things they’ll delegate.

Change

Technology moves too quickly for people to keep up with unless they’re directly involved in the tech industry.

If it wasn’t broke, why are we fixing it?

People need to be sold the value of learning something new, because they see it as an investment that needs to be worth their (often limited) time.

Referrals

People rely heavily on referrals and reviews for advice when choosing software to use, whether that’s in person or via Facebook groups.

Security

People are concerned about their personal online security. They are also concerned about their site getting hacked and about data loss.

Recommendations

  1. Consider splitting themes into “styles” (colour, typography, spacing, pattern, and visual styling) and “templates” (structure and placement). Users often struggled to find a theme they liked and to make their site match the representation promised by the theme.
  2. Consider providing different paths or options for power users and for beginners. More technical users have very entrenched ways of doing things and just want to get on with it, but beginners prefer more hand-holding.
  3. Be very intentional with how changes are rolled out. Learning something new presents a huge cognitive load and users are resistant to investing the time to learn a new approach. Provide more gradual transition paths, make it easier to roll back to prior versions or “undo” an upgrade, and only ask users to learn something new when it’s totally ready and finalised. Consider implementing the minimum viable product when introducing new patterns and then adding features and functionality incrementally, so that users don’t feel overwhelmed. (Slack’s “What’s new” could be a great model.)
  4. When introducing new concepts or patterns, it’s important to clearly communicate the value offered by the change. There were a number of occasions where someone who was resistent toward trying or learning Gutenberg would likely have benefitted from it, but they didn’t recognise the value of investing their time to learn the new model. 
  5. Make room for people to build by experimentation and play. The majority of people aren’t likely to have a defined idea of what they want until they see it. 
  6. Documentation and help should be baked into the product, especially when introducing changes. 
  7. Adopt a more data-informed approach to the introduction of new features. Always start by asking “what problem are we trying to solve?” Test new features with end users prior to development, especially when they’re critical to the user experience. Ensure testing is done with a wide range of users who represent the breadth of people who use WordPress. Consider the merits of opt-in data collection to improve the product experience and remove features that aren’t being used. 
  8. Avoid adding clutter to core if it isn’t integral to the core experience. One of WordPress’ key strengths and sources of appeal to users is its flexibility and the additional functionality offered by plugins, but the plugin marketplace can be difficult for users to parse. Consider providing plugin recommendations or bundled packages for different use cases, and only include in core those functionalities that are universally relevant.
  9. Clearly communicate project vision and roadmap in order to ensure that everyone is working from a shared understanding. Decisions and the arbiter of those decisions should be clearly communicated so that the process doesn’t seem opaque. Establish clear metrics for success and ways of measuring this success. hello

Gutenberg Phase 2 Friday Design Update #5

So many good things! One of my favorite pieces shared by @youknowriad is; there were 52 contributors to Gutenberg 5.0 – the latest release!

Widgets to blocks

@melchoyce recently posted an update on these. But there’s even a few updates since that was written! For instance, the Search block is now merged. It’s moving fast. After talking with Riad, it looks like an estimated 4 weeks until they’re all merged in along with the addition of the Classic Widget block.

Tag Cloud – What do you think if the Tag Cloud block got renamed “Word Cloud” so that it’s clear it doesn’t only include tags? The option to switch between tags and categories would still exist, maybe in the block inspector.

The development of the widget screen for the inclusion of blocks is currently on hold until this PR is completed.

Navigation block

The Navigation block has a new issue with the hopes of refocusing and a deeper understanding of the problems people experience when building menus. Because this is such a complex block, there’s going to be really good discussions, so please get involved.

Tightening up

These small incremental changes are adding the polish to Gutenberg making it a real joy to use. One such example is the Focal point picker added to the Cover block. Speaking of the Cover block, there’s conversations about nesting blocks within it for more options to display over the image. Buttons? Did anyone say buttons?

Animations are also getting added bringing an emotional delight to the interface.

The color picker for blocks is getting some much needed clarity.

There’s also been some great headway on notifications in the editor which just need a code review before getting merged.

Research

Make sure to get caught up on the research posts that have been shared on the make/design blog. These reports are informing the design decisions going forward, so it’s important to have a firm understanding of what’s being shared. The latest one from @tinkerbelly concerns the segment of Site-builders.

Accessibility

A new issue has been opened to address the keyboard navigation of Gutenberg. It’s been a long time coming!


Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Meeting notes for February 6, 2018

This week, the weekly #design meeting was lead by @joshuawold. You can read the full transcript in our Slack-channel, or jump straight to the topics that were discussed by clicking the headings below.

Gutenberg update Phase 2

@mapk gives a quick update on Gutenberg Phase 2. He thanks the accessibilty team for being very helpful with design work being done. There’s a new ticket that directly explores the A11y (Accessibility) tabbing issues in Gutenberg.

Also, the navigation block just got a recent Github issue created to gather focus again. If you happen to have some thoughts on that, please join the discussion in the ticket by adding your comment.

Calls for design

There are two calls for design that need help from awesome designers. If you are looking into something tangible to contribute on as a designer, please check out the following calls:

  • Uniform Search Form Display/Experience – this ticket addresses the problem with  five different search types existing across the WP-admin.
  • Redesign mobile – check this ticket if you’re passionate about working with WordPress from your mobile phone. These pages could use some love and design feedback, first wireframes/sketches are in the ticket.

Dashicons

The basis for this discussion is issue 9647 of block icons SVGs not being reusable.

In his comment on issue 9647 Joen says:

For now we have used Dashicons because it’s the WordPress icon set. But this has not scaled tremendously well, and the icons are small and designed for older screens and interfaces than we use widely today. So we eventually adopted the Material icon set for block library icons, to make it trivial for plugin developers to quickly and easily pick a unique and legible icon that fits their block.

There are constant requests for new icons on Github, some more critical than others. But currently, it’s really hard to integrate new icons in the Dashicons icon font.

In the meeting, there’s a brief exploration on where this could go, and moving towards another open source icon set is suggested. @empireoflight, one of the prominent dashicon builders, says he used to think we could build an icon library for WordPress. But unfortunately, it’s just not happening.

A brief discussion follows on the impact of having multiple icon sets. But it’s good to know people are open to the idea of working with another open source icon set like Material Icons, and have an extended set of specific WP icons on top.

Everyone agrees this will overhaul the admin and will have a big impact. Knowing the logistics, breaking these into steps and setting a timeline would help getting an overview on what’s involved.

@mapk suggests starting with getting buy in other teams first and find people to help on the project after that.

@empireoflight will draft a post on make/design as a starting point for the discussion with other teams.

We’re looking forward on your thoughts on moving WordPress icons forward. Pleas feel free to comment on these notes, or share your ideas in the make/design post dedicated to this topic (which will appear soon on this page for you to discover. You can also subscribe to the design blog in the sidebar on make/design to get instant notifications once the post is there for you to read).

#meeting-notes

Learning about small businesses (Site building study #3)

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!

#gutenberg, #research

Learning about bloggers (Site building study #2)

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 bloggers

#gutenberg, #research

Design meeting agenda for Wednesday 6th February

This week’s meeting will be at 19:00 UTC tomorrow in Slack #design.

Here are the suggested topics:

If there is anything you would like to see added to the agenda, please leave a comment.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #4

Are you kidding me? It’s already February! Gutenberg has been rolling out with consistent improvements throughout January and will continue to do so this month too. Let’s look at what was done this last week.

Widgets to blocks

Really good discussion going on especially in regards to a11y. There’ve been some a11y concerns that need to be addressed which were brought up in relation to this screen, but really effect Gutenberg as a whole. The larger a11y issues will be addressed in another issue in Github to help keep the design of the widget screen moving forward.

Navigation block

Work is happening here and getting ready to be shared outward for feedback. So stay tuned to the issue!

Tightening up

  • Microinteractions (little animations) are starting to be incorporated into Gutenberg. Take a look at some work being done by @joen.
  • Added a style preview issue to the tightening up portion of Phase 2.

Block specific responsive controls

This issue is really narrowing down on a solution now.

Research

The first part of the WordPress research has been posted by @tinkerbelly. This research is being used to help further any development in Gutenberg. All contributors should really have a read through.

Project Boards

In Github, the project boards are used to understand the status of issues from a high level view. @karmatosed recently went through and combined the Phase 2 Design project board into the Phase 2 project board. This will help keep us unified. There’s also been an update to how these project boards are used; there are columns based on each of the focus areas for Phase 2.


Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Design meeting notes

Link to this week’s agenda.

Research findings

Sarah Semark shared an update on the work that the team has done for research. A post has been created where you can weigh in on where our research should go.

For context: We’re trying to decide where the research results and resources should live. It’s important that it’s easily findable and readable. The report is 3500 words long, so we’re also looking at whether it should be broken up.

Once we’ve figured out a place to keep it, we can add other resources to it as well. There are a few toolkit resources (templates, guides, etc) that would be good to keep with other research, so everything’s in one place.

There was additional discussion, and a new Make post will followup with further details. You can read the Slack chat log as well.

Calls for design

The WordPress 5.1 about page

We had several designers volunteer to work on designing this during the meeting. Look for updates in future posts.

HelpHub

HelpHub is going to be the new portal for all WordPress user documentation that currently resides on the WordPress Codex. You can visit the Github repo and checkout the design issues that need help.

Phase 2 will see a more design work around Search, contributor feedback, acknowledgements etc. During the meeting we had a designer volunteer to help out. If you’re interested you can jump into the Github issues!

Updating the theme design

We have a request for a design for showing info from the theme readme files, which are required in themes as of Oct 25, 2018.

Plugin readme files get converted into a page where you can add additional details about the plugin, FAQs, etc. For example, compare the information on these two pages. We need to design a comparable output both in WordPress admin, and on wordpress.org. You can follow the Slack chat for more information.

Gutenberg Phase 2

Right now we’re closing in on a couple things:

  1. Responsive block controls
  2. Widget/blocks in the wp-admin screen

If anyone can hop on and provide design feedback, it would be helpful. Otherwise feel free to reach out to @mapk.

Showcase

Previously we shared an update on the Showcase project. Pragmatic.agency has volunteered design time, we’re iterating on wireframes, Joost de Valk will share a first design soon, it needs to first be separated out from another page.

PHP Upgrade Page

The new page is ready for feedback, so if you have a few moments we’d love comments and thoughts on it!

Site Health

What is it? Some of you may have heard of the Health Check plugin – It’s a very useful tool that shows people how their website is doing technically.

Tim Hengeveld shared an update, “Doing good! Got some sketches up for each of the screens of the plugin with some quick wins in there, and I’m writing down all the checks that the plugin has now with what kind of actionable thing we can attach to them, be it a ‘fix now’ button or a link to more info etc, and possibly also some sort of indication which area of your site it affects (speed/security/a11y).”

#meeting-notes

Gutenberg Phase 2 Friday Design Update #3

I’ve been informed by some colleagues that this week has been super cold in areas around the globe. I live in Southern California and haven’t experienced it, but I truly hope you all are staying warm. The GitHub repo for Gutenberg, on the other hand, is on fire (in a good way)! 😉

Widgets to blocks

There’s a lot of development movement happening right now.

In addition, the integration of the widget-blocks in the wp-admin are being figured out too. Right now, it looks like staying inline with the mockups provided during the State of the Word might be the path to take (with some minor improvements of course). There’s also a desire to implement better a11y while we’re working on this as well.

Navigation block

This is a big one. While exploring the block itself, there’s been conversations in GitHub about how navigation is built. Is the block a simple one that just allows the user to select which menu they want to use? Or is the block where the whole menu is built? This decision effects the implementation of navigation building in Gutenberg going forward. One thing we know for sure is that everything is becoming a block in Phase 2, so these decisions are crucial right now. If you have some thoughts, please share them on GitHub.

Tightening up

It’s amazing to see all the areas in Gutenberg that are getting tightened up! Gutenberg 4.9 just released with a couple of beautiful design improvements: table striping and color swatch indicator. More design improvements are happening daily. Take a look at all the things.

Documentation

Some might say that Documentation isn’t really design, so why’s it here? But really, documentation should be a community wide endeavor. There are weekly edits being completed to make sure the future of Gutenberg has a solid foundation. Here’s what’s been done… and what’s being worked on. These are fairly simple textual explanations of Gutenberg. If anyone is looking to contribute with something non-code related, this is a great way to begin.

Communication consistency is key to this project. That’s why these weekly design updates are going out every Friday. Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2