Implement a 'Whats new' section for the block editor

[enriquesanchez]

While I was reviewing this PR that introduces a change in how users navigate through blocks and the block toolbar when using a keyboard, I kept thinking that this was a welcoming change but one that will most likely cause confusion due to the nature of the change.

I've been thinking of ways a change like this could be widely communicated, particularly to end-users, who I think will be the most affected.

Looking at other apps and services for inspiration, I came across a common pattern: the "What's new" section.

Here are a few examples for reference:

Slack

On the top-right corner of the UI, Slack has a "help" menu that is highlighted with a dot whenver new features are recent:

Clicking on "What's new" opens a modal with all the recent updates introduced:

Trello

Trello makes Taco, their mascot, appear on the top toolbar with a text that reads "New stuff":

Clicking on Taco opens a popover:

The information here is more summarized, but also offers a link to read more.

Glitch

Glitch also has a cute dog appear whenever there's news. It appears on the bottom right corner of the UI:

Clicking on the dog will open a modal, with lots of info:

---

I think it'll be useful if we implemented something similar, particularly because it's very unlikely that our end-users follow the make.wordpress.org blogs.

Here's a quick prototype:

We can fine tune exactly how much info we'd want to show here. We can go as extensive as Glitch, more summarized like Trello, or somewhere in the middle, like Slack. Considering who the target audience is, I think we should only highlight those changes that have an immediate effect on their experience.

What do y'all think?

[alexstine]

Great idea. Only thought from me would be to make sure users know it is there. That is one thing Slack falls short on. It may be best to auto focus the user in a "what's new" dialog after WP update.

Other option would be to have some type of alert get announced by screen readers. "What's new has notifications"

Thanks.

[bph]

Another consideration would be once the feature lands in Core, to distinguish between plugin "What's new?" and Core "What's New?". There would be a need to have two separate pages/posts category to feed the section.

[mapk]

I really like this form of communication. It reaches users who don't ever visit WordPress.org.

My first instinct is How do we automate this? That could be a problem, so then how would we curate this? It would be an ongoing effort for whoever is responsible. I volunteer myself, but would be good to have support.

We'd need to sort through the release and pull the major user-facing improvements to showcase in the modal. If documentation was already created, we could link to that, but if not, a link to the PR may be too much for a user to sift through. At the bottom, we could potentially link to the Changelog on Github for a full list of all the things.

Design-wise, the little dot works to inform the user about this. Including the link in the Options dropdown is good placement.

• The dot needs some position explorations around the ellipses icon.
• Should the dot in the popover be next to the text, or should it be right justified?
• The border on the modal should be removed. I don't see a border on other modals (ie. Block Manager).

[enriquesanchez]

Here's an updated prototype to revive this issue and continue the discussion around ways to keep end-users informed of new features and updates to Gutenberg:

---

And here are some static screenshots of the flow:

We indicate that there is new content in the 'What's new' section by displaying a red dot on the top right corner of the 'Options' menu. The presenence of new content should also be announced to assistive technologies.

After opening the 'What's new' menu, the red dot appears next to the option in the menu. This creates a "trail" to follow and helps draw the eye.

The 'What's new' modal is displayed front and center and includes a summary of most important new features of the release.

Here's the text version of the contents of the modal shown in these examples:

What’s new in the Block Editor
May, 2020 edition

We have another exciting release that packs a long list of new features for the block editor. New features such as block patterns, and a fresh new look of the editor’s interface make the block editor better than before.

A fresh new look
We’ve redesigned the block editor to make it easier and more enjoyable to use. In addition to a redesigned block toolbar, there is now increased color contrast, more consistent focus styles, cleaner icons, and better spacing and alignment. Find out more about the new look.

Block patterns
New block patterns make it simple and fun to create complex, beautiful layouts, using combinations of text and media that you can mix and match to fit your story. Learn how to create amazing layouts with block patterns.

More accessibility features
Navigating the block editor with a keyboard is now much easier than before. Toolbars, such as the block toolbar, are now a single tab stop as recommended by the WAI-ARIA Toolbar Pattern, bringing a more streamlined experience to keyboard users. Learn more about all the new accessibility features in the block editor.

Head over to the block editor’s development blog for more details and news.

I'm obviously not a copy writer, but hopefully you get the idea. The modal feels a little text-heavy to me, but I'm sure we could streamline it more. There should be links that direct the user to dig more if wanted.

There's also the option of having the 'What's new' modal appear automatically after an update. This would remove the need of the red dots. In addition to that we should also have a setting to turn this off.

@mapk asked some really good questions above, and along with those, I think it's important also to think about the differences in content, as @bph mentions, between the plugin version and the major WP release, since the major WP release will see less frequent updates.

@annezazu @mtias Would love to hear your thoughts since I know you've also been thinking about this recently.

[mtias]

I generally like the idea. I think "what's new" can be a great way to introduce highlights when they are concise and very easy to parse. Being more contextual to the about.php page on upgrades can be good, as it can supplement it further. I think it could be nice for this model to be used in other pages of wp-admin when you navigate to them.

I agree the last mockup seems extremely verbose and kind of defeats the purpose. I think we should reuse the "welcome guide" instead:

That seems a good pattern to follow.

[enriquesanchez]

Thanks for the feedback @mtias!

I'm trying out the same pattern we use for the Welcome Guide as suggested and worked some more on the copy in order to make it more concise.

As with the Welcome Guide, the What's New modal will appear automatically on the editor after an update. There will be a Close button for those who prefer to dismiss it.

If we follow the same format, we'd need to also create graphics to go with each new featured highlight. I made some quick and rough ones just for the purpose of testing this mockup.

Here's a quick prototype:

This feels more inviting and engaging, and by following this format we get rid of any issues around discoverability.

A few thoughts:

• I would keep this to a once per month cadence, tops. I know the plugin gets more frequent releases but we also don't want to overwhelm users with one of these modals popping up every two weeks.
• We'll need to account for creation of the graphics that will go with the highlighter features when we plan each Whats New edition.
• I wouldn't recommend to havve more than 5 steps in the modal. I even feel that we can get rid of the last one in the example above to be more concise.

[mtias]

Agreed on ensuring the cadence is not overwhelming. For WP releases it'd have to be the condensation of several releases. Do you think the plugin should have its own set? I would try to keep shown items to three whenever possible.

[annezazu]

Apologies for the delay here! Here are my general thoughts broken into loose segments:

Topics

I see three major areas that should both consistently provide a steady stream of items and that will be useful to end users no matter the cadence:

• Pull heavily from design changes from each release.
• Share keyboard shortcuts along with tips/tricks like using the backslash to pull up blocks (practical, can create a list of probably 5-10 things now to drip campaign people with).
• Focus on milestones coming up with things like FSE, widgets screen, navigation, etc.

I think even just having one from each of the above sections in each release is more than enough. Don’t want to overwhelm people. Basically though this would allow this flow to visually delight them with design updates, give practical tips to empower them, and give them context about where the work is going 💥

Sourcing

As for sourcing, pulling from what’s new for design, creating a list ahead of time for practical tips, and then checking the larger roadmap for where work is going should be fairly doable.

Current Design

• Agreed on feedback with this being text heavy and wanting each item to ideally have a visual alongside it especially if the "welcome guide" model is reused.
• I'd love to be able to see all of the items at a glance with an option to click into what interests me.

While this is obvious from the horribly drawn image below, I am not a designer! But here's what came to mind as the initial screen one would see:

Essentially you'd see all three items at once rather than needing to scroll through (likely lose people as loads of image carousel studies show). I imagine clicking into one would either expand it to show more information or take you to an individual panel with the option to return to all (or something else my non design brain can't think of). Inspired by slack, I think it might be neat to have some sort of checkbox to perhaps have people opt into getting this notice pop up proactively with each new release? Not sold on this but decided it was worth hurling out into the universe since this is still early days:

[DaisyOlsen]

@annezazu got here before me so I'll jump off from her comments.

I really like this idea.

I do wonder about the carousel since a lot of people will click to dismiss without going through everything. Headings with an expand to see more might be a better idea if there is concern about the amount of text. A read more link would be the best way around this. One app I use pushes changes every week and they have this kind of a modal. I really like it and I often click on the "see all the changes" link at the bottom. I'd share a screenshot but apparently there is no way to get it back after you dismiss for that week.

If the carousel design goes forward would say that relying on a custom graphic to be created for each featured change could set things up for trouble later. Anyone can write a sentence or two but not everyone can create a nice looking image to go along with it. If the design with the top image is the chosen one I'd recommend that a default graphic be available for times when a bespoke one is not available or to possibly give the option to have the image stay static(Gutenberg logo?) and the text to change.

[enriquesanchez]

For WP releases it'd have to be the condensation of several releases.

@mtias Yep, and that's the part that worries me about following the Welcome Guide pattern. There really isn't that much room for content and I think we'll have a really hard time condensing that much for a WP release.

I really like @annezazu's idea. I think it's a nice balance between the single modal with a lot of text and the Welcome Guide. It also solves the carousel dismissal issue that @DaisyOlsen brings up.

If the carousel design goes forward would say that relying on a custom graphic to be created for each featured change could set things up for trouble later.

@DaisyOlsen This is a great point and I raised the same concern above. It can be done but it'll definitively add friction to the process.

Here's a super quick mockup that explores the direction that @annezazu suggests. Please don't pay much attention to the content and graphics, I just wanted to throw something together to help us get a better feel:

[bph]

I know it'll be further down the implementation pipeline, and we should think about where the links -> would go, as that might have implication for getting the "Block Editor End user Documentation" team on board earlier in the release cycle, to get the pages ready.
I would assume that a Block Pattern update would link to the official Block pattern page that has all the other content.

[mtias]

I think that's still too verbose. An example of the iOS ones I had in mind:

In that sense, I like the constrain the welcome guide offers in keeping things focused and sharp. We could still make it all fit in a single screen, of course.

It also worries me having so many actions, like links on each item and the checkbox. I don't think this is the place to expand on a feature.

[DaisyOlsen]

I think that's still too verbose.

Seems easily solved. The snippets can be made more concise with some word-smithing.

It also worries me having so many actions, like links on each item and the checkbox.

A single "read more" button to a single What's new post that can, then link out to more detail where it's available, might be something to consider. I'd venture to say that the goal would be to have as little actual content on the site-side as possible, directing people out to a place that there is more immediate control over for details.

For the checkbox I'm trying to think if I've seen more often seen it like this where checking the box opts in or checking the box opts out. What's the impact if there isn't a way to opt out and the modal displays once for every major release?

[annezazu]

I worry without links or something to learn more, it won't be possible to be concise and share truly helpful information with users without at least some context. In theory though, iOS does the same thing so perhaps it's fine :) I was coming from the perspective of someone who always wants more information whenever I see those kinds of popups which is likely why slack's approach appeals to me more.

[bph]

The idea to have one link to a "What's new" post on wp.org is intriguing at first, until I realize that when there are five new things, most of the time I am only interested in one particular thing. Linking to one post with details then only would get me annoyed as I would have to scroll through the linked post until I get to the interesting bits. Not sure if a compromise to have anchor links / jump links to the news item the relevant section in the post, is the solution here, as it would get back to the 'lot of actions' @mtias is concerned about.

[bph]

Another angle on the What's new discussion is if there should be an alert/modal for new features if they are settings or default controls. I was just looking through some settings on my Zoom account and saw this kind of interface.

I am almost fanatical in turning notifications off on most apps. I am easily distracted and lose my focus so an opt-in or opt-out switch, would be appreciated by someone like me. Screenshot is from Slack

I do like to know that there is a place where I can read through a What's new page/section, so opt-out would definitely be better for me.

Another example from Firefox: (too wordy indeed) but it seems to replicated the "Links learning more" schema.

This is the other part of the Slack What's New sections: (also too wordy, almost anxiety inducing)
I do like the subtle blue dot, to indicate this is a new feature you haven't seen yet.

[enriquesanchez]

This is all great feedback, @bph @annezazu @DaisyOlsen @mtias! Thank you!

I've tried to summarize most of the suggestions and worked on a couple more mockups. This time using @mtias' example from iOS as inspiration.

I agree that the succintness feels good here, and I'm sure the copy could be condensed even more. I find myself missing a link to find out more. That said, maybe this is a good place to start and iterate from.

For the checkbox I'm trying to think if I've seen more often seen it like this where checking the box opts in or checking the box opts out. What's the impact if there isn't a way to opt out and the modal displays once for every major release?

@DaisyOlsen I took inspiration from other apps and I found that having it checked was the norm. As long as the label is clear, I think it's fine. I've also considered not having it in previous explorations, but I can totally see the case where some users will not want to see these. That said, if we have a way to turn it off, we'd probably also need a way to turn it back on. This means another item in in the Preferences menu. I personally think that there's nothing wrong with that, but a thing to consider nonetheless.

Linking to one post with details then only would get me annoyed as I would have to scroll through the linked post until I get to the interesting bits.

@bph I agree with you. It would be best if we linked to individual posts highlighting each new feature.

[jdevalk]

Just wanted to cheer this on and say that, as a user, I look forward to these already. So often do I miss new features in Gutenberg the plugin. So yes I’d give the plugin its own set :-)

[kellychoffman]

Design feedback on current iteration:
Overall, the presentation of this information is feeling a bit more straight forward, but it the design itself needs to be polished.

• Needs a main call to action
• Visually, it should be brought closer to G2 styles. Overall has a very cramped feeling. Line height is too tight, for example.
• Alignment clean up: Icons might look better visually aligned to top of section header, for example. Also, we could possibly get by with no icons or more simplified icons.

[mapk]

I agree that we seemed to have lost some of the basic Gutenberg modal styling here.
Removing the icons entirely is a good idea. If we include icons, we'll have to create new ones for every new feature we want to talk about. That's a lot of maintenance for a 2-week release cycle.

[enriquesanchez]

Thanks for the feedback everyone!

Here's an iteration that cleans up alignment and spacing, adds a main CTA, and removes icons. I'm also using the same heading style we have in the Welcome Guide for consistency between these two modals.

No links

Links

[kellychoffman]

"No links" feels cleaner and has a nice sense of hierarchy. If we want headline links, might need to make that text bigger/bolder. Some small tweaks to consider either now or during implementation:

• Not sure about "Continue" as the CTA. What do you continue to?
• Notify me about updates: Is this a "keep these notifications on" checkbox? If so, may need to rephrase.
• Some inconsistencies in the right padding (close icon, hr,)