Epic: 6.5 Video Featurettes

[thetinyl]

What is this?

This is a tracking issue to help facilitate work being done for the 6.5 release video featurettes. Based on the highlighted features being outlined here #58028, these are short videos meant to focus on one feature. They can be high-quality screen recordings and should be able to stand alone. Ideally, they will be 30-60 seconds in length. They will mostly be used across marketing channels, including social media.

If there's an opportunity to string them together to create a longer video, that would be welcome, but is not an expectation.

Examples of 6.4's featurettes can be found here #54810

Timing*

• Initial review: March 5
• Videos complete: March 19

*Proposed dates are flexible.

Content

There are a lot of features and we don't need to create videos for all of them. Here's a starter list of what might be interesting to show:

• Font Library (does this already exist from 6.4, perhaps?)
• Pattern Overrides
• Style revisions
• Block Effects/Interactivity (could showing some front-end fun be worthwhile?)
• Data Views
• Design tools: background repeat/size, shadow supports,

Extra notes

• I suggest including some kind of lead-in title or short copy to frame each featurette and make sure it's clear what's being shown.

[thetinyl]

@jasmussen For awareness.

[jasmussen]

Exciting release, lots of cogs to line up. Apologies for the lateness, but here's a first featurette, an i1 version of the font library. A few things I think are right in this one:

• It shows the full flow, and it's trivial to cut it down if need be.
• It's recorded in 4:3 format, but inside a square container. It's easy to change the container aspect ratio, even if changing the source material aspect ratio is less easy (but still possible in many cases)
• It features a minimal "cropping" treatment.

6-5-font-library-i1.mp4

I'd love feedback on both the general content/pacing of this particular video, as well as the items mentioned above, aspect ratio, treatment, etc.

Pending any feedback on edits, or a need to re-record this one, next on my list to do featurettes are:

• Design tools: background repeat/size, shadow supports,
• Interactivity API
• Style revisions
• Data Views
• Link control improvements

Pattern overrides, block connections, partially synced patterns I'm doing last and they depend on what lands. Let me know any other thoughts you have here.

In addition to this, I'll see about how we can add a title card to these. These title cards will most likely follow the same pattern (i.e. be mostly identical to) what was used for 6.4.

[jasmussen]

Here, tentatively, is another featurette around background tools:

6-5-background-tools.mp4

Let me know what thoughts you have on it, and whether this should stand alone with a separate additional "Shadow" featurette, or whether it should be bundled with a shadow tool demo. Perhaps at the same time, or side by side.

[annezazu]

Font Library Feedback

• The typography presets is not in 6.5 RC1. Are you using GB trunk? I don't think that's making it into the release or, if it is, it's missed it in RC1.
• The delay at 5s-7s is too long and feels awkward. I'd pause for a beat but then zoom in.
• I don't think you need to click through each preset. I'd click 1-2 then move on.
• I'm torn about whether or not to show the connecting to Google to show that folks need to opt in. Curious what others think.
• Instead of zooming in on the edge of the upload modal, I'd zoom in on the modal itself more in the center like this.
• After changing the headings font zoomed in, I'd change the font of one more thing, like an individual paragraph block, to show it's not just available at a global setting but for individual blocks too similar to this.
• The ending cuts off oddly. I'd perhaps zoom all the way into "Saved" as the final scene so to speak.

I know I'm referencing my own youtube video in this but hopefully its helpful as I've had my own decision points to make in how best to feature this feature :D

[annezazu]

Background tools feedback

Let me know what thoughts you have on it, and whether this should stand alone with a separate additional "Shadow" featurette, or whether it should be bundled with a shadow tool demo. Perhaps at the same time, or side by side.

I like the idea of it being a part of another demo with Shadows. I think that would go together nicely here. My only feedback on this is that the end result is really subtle and hard to see. It almost looks like you removed the background image based on how faint it is.

[thetinyl]

Thanks for diving into these @jasmussen!

It's recorded in 4:3 format, but inside a square container. It's easy to change the container aspect ratio, even if changing the source material aspect ratio is less easy (but still possible in many cases)

This is a good solution for the variety of aspect ratios we'll need for microsite/social. Appreciate the consideration here.

In addition to this, I'll see about how we can add a title card to these. These title cards will most likely follow the same pattern (i.e. be mostly identical to) what was used for 6.4.

That works for me. I can adapt copy for titles and will take a look at 6.4 as a guide for length.

Font Library featurette notes

I agree with some things that @annezazu has already pointed out, namely:

• The delay at 5s-7s is too long and feels awkward. I'd pause for a beat but then zoom in.
• I don't think you need to click through each preset. I'd click 1-2 then move on.

Additional thoughts:

• If there's a way to make it quick, I think the Google Fonts opt-in is worth showing. It's a strong value-add, I think.
• Personally, I prefer the visual interest of zooming to the edge of the modal, but it's not a strong opinion.
• I agree about the ending feeling abrupt. I wonder if we even need to end it with a 'Save' at all? Installing and changing the fonts (even if we add a paragraph font change) feels like a natural conclusion to me.

Background featurette notes

I think the whole example here is too subtle, not just the end. Is there a different image/background pattern you could try that may be a little splashier?

Also seconding this:

I like the idea of it being a part of another demo with Shadows.

[jasmussen]

I actually omitted the consent box because the visuals were not good (typographic widows, incorrect heading levels, and a few other things fixed here #59631 — but that won't make it to 6.5).

I'll need to re-record regardless, Anne you were right I was using the plugin. I'll try and record with the refreshed consent dialog regardless, we can always cut it out.

[jasmussen]

Here's a first draft of the new font library. Good feedback in general, but since I had to re-record, some pacing and zooming aspects had to be redone from scratch, so if I missed still applicable feedback, sorry about that, I'm happy to address.

The following is a long one that ends on changing a color as well; not directly related to the font library, but it's a nice way to see how one theme can look entirely fresh with a new font and a new coat of paint. Easy to trim out and end on a Save button instead; I included that in the recording. Similarly, the consent dialog is part of this, let me know how that feels. I can cut it out (it's not verbatim what'll ship, it's a cleaned up version that omits typographic widows), I can also zoom, pause for longer, etc.

6-5-font-library-i2b.mp4

Note that I didn't change the text font. This is because the particular theme I'm working with has a site logo and the navigation block on the right; the navigation block would shift when changing the font, the site logo would not, unless I also drilled into Blocks > Site Logo > Typography, which would make this video somewhat long. I can revisit this (e.g. delete the header navigation just for this one featurette, add a tagline instead or something), but it's not clear it's worth it, let me know.

[jasmussen]

Here's a new take on the Design Tools video, that bundles both background and shadow tools into one, as well as tries to address the feedback shared. Let me know any thoughts!

6-5-background-tools-i2.mp4

[thetinyl]

Appreciate the re-record, @jasmussen. 🙏

Font Library notes

I don't have too much to say about this version. It flows better than version 1 and I actually don't mind the modal, personally.

I like the fresh coat of paint, my only suggestion would be to cut down to showing one or maybe two colors to shave off some seconds at the end.

Background/shadow

The background change is much clearer on this one! 👏 Thank you!

The end has a bit of an awkward pause before the save (around 0:38-0:39), but that's the only (small) thing that stood out to me.

[jasmussen]

Great feedback. Sped up the color options and trimmed several seconds off the end of the font library:

6-5-font-library-i2c.mp4

Here's a tweaked Background/Shadow that's a bit snappier towards the end:

6-5-font-library-i2c.mp4

Meta note, I think GitHub may recompress these videos, so I'll put the full files in the source of truth folder. Don't know if that's shared here, but it's the same material, perhaps just higher quality.

[jasmussen]

Here's a first test on the Interactivity API. It focuses entirely on the ability to now untoggle the "Force page reload" button on the Query loop, which ultimately can result in faster navigation between pages, since they won't have to load fresh every time.

The nuance here is that the interactivity API is actually much more substantial than that, there are now things possible like this mega menu block, or infinite scroll and much more. But those all use the API to develop new things, or are bound for 6.6. So the big news is that the API itself is shipping, but the only two visual things actually shipping are that page reload feature, and the lightbox, and the lightbox we demoed for 6.5. So I'm curious on your thoughts.

6-5-interactivity-api-no-reloads-i1.mp4

The video above will also need a little bit of editing, perhaps actually speeding up the page loading of the version that still has page reloads; it may be misleading otherwise, since when demoing the no-page-reloads improved state, the images are actually cached from before.

Edit: I've relalized this entire video is more inaccurate since disabling force page reload only works with post pagination links, not with navigation menu links. I'll keep this video up for a broader conversation on what (if anything) we can demo for the interactivity API. There may not be anything really visual to do.

[jasmussen]

Here's a quick one for List Views:

6-5-list-views-i1.mp4

[jasmussen]

Here's one for the Link Control:

6-5-link-control-i1.mp4

[jasmussen]

Here's one on style revisions:

6-5-style-revisions-i1.mp4

[thetinyl]

The Font Library and background/shadow videos seem good to me. 👍 Nice stuff, @jasmussen.

• For List Views/Data Views: There are a number of pauses throughout that could be trimmed down. Otherwise, this feels solid to me.
• For link control: Could this start right at the plot? Say, at 0:04? Or just before then if the goal is to keep the Editor starting point of these consistent. I'd also consider trimming the transition between the new link vs. the image links section.
• For style revisions: No feedback from me, I like this one as is.

Relating to the Interactivity API, I think you said it yourself:

So the big news is that the API itself is shipping

On top of that, it sounds like showing what can be done (currently) doesn't really fit within the concept of a "demo" featurette. I can potentially see the value of creating a kind of interaction sizzle reel, one that shows front-end capabilities without "demoing" how they happen—if only just to get folks excited about what's possible. But I can see how that might appear confusing to non-devs if it's not framed properly. Perhaps it's something to explore for a future release? Something like that also doesn't necessarily need to be tied directly to a release, per se.

I'd be comfortable not having a featurette for the Interactivity API this time around.

[jasmussen]

Nice, thank you for the feedback. Given we have this baseline now, I'll give it the weekend to allow for more feedback and ideas, and then I'll address all that and start adding a intro/outros, and we'll take it from there.

[jasmussen]

Here's a batch of files that address the feedback above, as well as add intro/outro titles.

Note: we'll want to update those titles to be better than what I put there. Lauren, your advice is appreciated. Secondly, the gray color is off, I will address that as part of any additional feedback on the content, as well as the text updates.

Font Library:

6-5-font-library-i2c.mp4

Link Control:

6-5-link-control-i2.mp4

Background & Shadow tools:

6-5-background-tools-i3.mp4

List Views:

6-5-list-views-i2.mp4

Style Revisions:

6-5-style-revisions-i1.mp4

[thetinyl]

Thanks @jasmussen. I'm not seeing anything else that's glaring from my perspective.

we'll want to update those titles to be better than what I put there.

Some title suggestions to work with:

• Meet the Font Library
• Use improved link controls
• Play with background and shadow tools
• Discover new Data Views
• Get more details from style revisions

These are mostly based on existing copy/messaging that's been consistent throughout the release (ex: Beta 1, About page). I recognize length may be a concern here, but none of the above titles are longer than the longest one you currently have so I'm guessing all could fit. Let me know though, I'll adjust as needed.

[annezazu]

Link control

Turning off lightbox feels like an odd thing to feature. I almost wonder if we should do the opposite and show changing link control to set lightbox. Not a dealbreaker but just want to be cognizant of promoting turning off a feature we've iterated on this time around.

Otherwise, one of the major changes has been in initiating the link control UI, specifically allowing you to keyboard your way through the link text. I'm tempted to include that:

Screen.Recording.2024-03-12.at.1.04.06.PM.mov

Background & Shadow tools

Cut out the very brief "entering the page" part at 3-4 seconds where you see the details view flash at the start. It's a bit distracting from the rest and doesn't help set any context (or else I'd say leave it in).

Excellent job showing the drop shadow options with the block changing in the same view. Love it!

At the 41-42s mark when you subtly change the block to outline, I would let it hang for just a second. It's a super fast transition and hard to catch when you're watching settings change, along with the visual of the block.

List Views

I don't think we can call them List Views when we have List View as a feature. It's too confusing. I like @thetinyl suggestion of "Discover new Data Views".

As for what we're demoing, I'm afraid that's not in 6.5! Only the Grid and Table views are available. I just double checked with RC2:

This has been confusing for me too but, in case it helps, here's a rundown pulled from this comment on what's stable for the release:

• "Site Editor > Templates > Manage all templates": table & grid layouts available.
• "Site Editor > Template parts > Manage all template parts": table & grid layouts available.
• "Site Editor > Patterns": grid layout available.
• "Side Editor > Pages": table & grid layouts available.

On the rest of the video, rather than showing deselecting something in bulk edit and deleting a template, I'd show filtering with more custom templates. I think it's worth showing the filtering options.

Style Revisions:

If there's a way we can squeeze in showing template and template part revisions, I'd love that as it's a big deal those are available. Ditto with Style Book open while going through revisions. We could then talk about overall revision improvements. As is, it feels like a less compelling demo of what's changing. Here's a bad and quick gist of an idea. For what it's worth, I have a test site you can spin up with lots of revisions (or export/import into another site) as I think it's compelling to show a site with lots of changes here.

revisions.bad.example.mp4

[jasmussen]

Great feedback, both! I'll dive into editing, re-recording where need be, updating colors and text, and will return with what may hopefully be the final ones.

[jasmussen]

Link control

6-5-link-control-i3-comp.mp4

• Updated text and color.
• Re-recorded to address feedback, notably around deselecting, then selecting again the link.
• Also showed setting images to use lightbox rather than the inverse.

The motivation for toggling off the lightbox is that this was the main optimization change in the UI: optimizing for on by default for images, with the control being highlighted to show that the image was already linked. But I see that it's not the most clear from a video like this.

Regarding the link control keyboardability, can you expand on this?

Otherwise, one of the major changes has been in initiating the link control UI, specifically allowing you to keyboard your way through the link text. I'm tempted to include that:

The link boundary, if that's what you're referring to, should be an existing feature. But maybe I'm missing nuance.

[jasmussen]

Background & Shadow:

6-5-background-tools-i4-comp.mp4

• Updated text and color.
• Trimmed per feedback.

[jasmussen]

Data Views

6-5-data-views-i3-comp.mp4

• Updated text and color.
• Re-recorded to show the correct options, thank you for catching that. I emphasized using filtering for custom templates, and showed a field toggle tool.

[jasmussen]

Font Library

6-5-font-library-i2c-comp.mp4

• Updated text and color.

Edit: wondering now if the "Meet the Font Library" should be on two lines instead of one.

Edit 2: new version:

6-5-font-library-i2c-comp.mp4

[jasmussen]

Style revisions

6-5-style-revisions-i1-comp.mp4

• Updated text and color.

I'm stand-by to re-record this one to include template part revisions, but I intentionally omitted that because of the incongruency of exiting the site editor. To me that feels like an incomplete or unrefined flow, and one I expect will also be better in the future. Let me know, happy to revisit!

[thetinyl]

Thanks @annezazu for the additional feedback.

wondering now if the "Meet the Font Library" should be on two lines instead of one.

@jasmussen I think two lines. Keeps it contained and faster to read.

Relating to the style revisions featurette and showing vs. not showing template/template parts... The featurettes aren't meant to show every nut and bolt of the new/improved features. They'll also be living in context with other messaging/image elements (social included), so if it's not shown it is likely being said.

I agree with Joen in terms of breaking the flow by showing something outside the Editor, especially if the future intention is to have it be integrated into the Editor (this is my assumption, perhaps this isn't the case). That being said, Style Book revisions are a quick toggle in the Editor, so could fit more seamlessly into the narrative you have. What about adding that to beef it up a little?

[jasmussen]

I updated the font library title.

That being said, Style Book revisions are a quick toggle in the Editor, so could fit more seamlessly into the narrative you have. What about adding that to beef it up a little?

Can you elaborate a bit here? Just toggle the style book while you're walking through previous iterations of the page?

Can work, happy to record that if need be, just wanted to make sure.

[annezazu]

The link boundary, if that's what you're referring to, should be an existing feature. But maybe I'm missing nuance.

If you dig through this issue #57821 you can see the change where before the link control popped up when you keyboarded in. Now it doesn't show but still allows you to edit. Not the end of the world not to show but I think it would be worth adding in to show the change.

For the font library one, my only feedback is that the consenting to Google part looks automatic rather than something you "checked" and confirmed. I know that's not how it works but the lack of "clicking" makes it appear that way. Not a deal breaker but had to mention.

For the revisions, my only feedback there is the saving flow at 23-24s. I think it would be more compelling to zoom more in on the Styles section or have the mouse hover around it. As is, it's not clear what's cool about it or what's being shown. Here's a rough example:

revision.style.saving.mp4

The rest looks great! Love the data views one in particular. Thanks for diving back in here and always be game to iterate.

[thetinyl]

Just toggle the style book while you're walking through previous iterations of the page?

Yes! Exactly. (Sorry if that was unclear!)

[jasmussen]

Good feedback. I have some other things I have to wrap today, so I'll revisit this Monday. Thanks again!

[BenjaminZekavica]

@jasmussen Oh wow, thank you it looks really good. You need design support for anything here? ☺️

[jasmussen]

Thanks Benjamin. Hopefully these templates work well enough!

Updated Style Revisions

6-5-style-revisions-i2-comp.mp4

• Updated to include a glimpse at the style book.
• To address this feedback, I added a pan-downwards to the style bar, but let me know if this needs more work. I had to re-record this entire thing, so some of the pacing and edits are now reset.

[jasmussen]

If you dig through this issue #57821 you can see the change where before the link control popped up when you keyboarded in. Now it doesn't show but still allows you to edit. Not the end of the world not to show but I think it would be worth adding in to show the change.

Oh thank you for clarifying. Rich's PR does a good job of describing this.

However just like I was confused by your initial video, I'm wondering if people will see this in the featurette and wonder: what's actually new? The new behavior feels like such a baselined, a "default" if you will, that it would probably only be clear what changed if we actually showed the before and after. That can IMO be valid enough for social media to highlight, I can probably do a before and after in the style of what Rich already did for the "Before", for that avenue. But as-is, I don't know that it's a great fit for the featurette.

[jasmussen]

Font Library

6-5-font-library-i3-comp.mp4

• Updated to zoom in on the Google Consent dialog.

It isn't clear to me that this one is necessarily better than before — the very valid lack of clarity mentioned was probably due to my ill-adviced use of tabbing and enter key to confirm the dialog, rather than clicking with the cursor. But now we have two versions and can pick the one we like.

Based on your feedback, I'll upload versions to the microsite next.

[thetinyl]

Trucking along here! Thanks @jasmussen.

• Style revisions looks fine to me (though the first version also looked fine to me).
• I see what you mean about the Font Library and the Google dialog... it doesn't look that different to me. The lack of visible "clicking" didn't bother me to begin with though, so either version works for me.

For link controls, I don't have a strong opinion either way, though I do agree with you here:

I'm wondering if people will see this in the featurette and wonder: what's actually new?

It feels very nuanced to me. Like it's the kind of improvement that's somewhat invisible because it just helps make the process easier; to notice it means it's likely not frictionless.

[thetinyl]

Having looked through these again on the microsite, I believe we're all good here.

@jasmussen can you confirm that the featurettes located in this Google drive are the final edits?

cc: @DanSoschin

[jasmussen]

That folder has the older version of style revisions, and the font library featurettes, so I moved those out. Good catch. Now they should be right.

[thetinyl]

Ha! I'm glad I asked then. 😁

@DanSoschin just making extra sure you're in the loop here. 👍

[DanSoschin]

Okay, thanks. I'll be using this folder: https://drive.google.com/drive/u/0/folders/1EQdsp7zT_OWPpoGJAIjjyXqj2DNp9Jgw for all the social media in the next 8 weeks!

[annezazu]

Closing this out as I assume this has been completed.