Gutenberg: Iteration on the Welcome Guide

[pablohoneyhoney]

In the context of 19195 trying to evolve the Welcome Guide as a critical moment for new users (potentially returning if switching back or after a while), here a new pass with a few considerations in mind:

1. Evolving the copy to be more direct, concise, and accurate.
2. Adjusting the layout to be vertical, reduced (312x480), more adaptive to translations and screens.
3. Unifying visual elements.
4. Refreshing the look with more contrasted colors and sizes.
5. Relating this to a potential evolution towards 18667

Proposal

_Three steps_

_Marks_

_Localized_ (excuse the translations)

In G2 styles 18667

Copies

_Step 1_
Welcome to the block editor
Create and edit rich content with images, paragraphs, or videos in the form of blocks.

_Step 2_
Adapt each block as needed
All blocks come with controls for things like color, size, or alignment.

_Step 3_
Find the right 
ones for you
Browse or search among many blocks available in the block library.

Current

Next steps

• Feedback and iteration cycles.
• Test motion, trying to add some life to the illustrations.
• Clean and adjust the figma file

[mtias]

This looks neat :)

[karmatosed]

I really like this iteration, thanks for exploring this @pablohoneyhoney.

I do feel this adapts easier across the device, it also avoids the issues with mobile views leaving large spaces and the 'x' overlapping text.

My only ponder is mixing '<' with the word next. I think it works but it feels a little more confusing to me to have one direction in text and the other in an icon. This could be a personal preference for both being arrows though.

One note, thank you for showing this in multiple languages, that's key for this screen and shows the easier adaption.

[mrfoxtalbot]

This feature is extremely important and was long due. I like the overall approach but I feel it falls a bit too short. I would throw in two suggestions to increase engagement and impact:

• Consider using GIFs instead of flat graphics. Animated gifs catch a user's eye, they just do. And they can condense a lot more information in a matter of seconds.
• Add a secondary "Read more" option/link along with main "Get Started" one to take advanced/curious users to the docs page.

[ballio2000]

Here is an exploration with motion added to the welcome guide in G2 style. As @mrfoxtalbot mentioned above, having the visuals in animated GIFs should help catch attention and make things more engaging. The idea here is to have short and sweet intro animations to make the content come to life.

Preview mockup of all three frames in sequence:

Individual cropped GIFs:

[MarcoZehe]

Just please make sure you include all information contained in such Gifs in textual form as well. Gifs are even harder to make accessible than simple images, so the textual alternative is very important for accessibility.

[enriquesanchez]

Also important to respect the user's browser motion settings (prefers-reduced-motion) if we decide to use animated GIFs.

[garretthyder]

Reviewing this ticket the redesign appears to address all the issues I raised in #19733 so I closed it in favour of this ticket. The direction here is great and seems to address the X overlap and the skinny text column on smaller screens.

[mrfoxtalbot]

I just found a very good example of "Welcome Guide" on https://www.flexboxgame.com

https://www.youtube.com/watch?v=L4BIy8Nq7dQ