Opened 5 years ago
Last modified 4 years ago
#48758 new enhancement
Repurpose 'Hello World' post to also serve as a Gutenberg tutorial
Reported by: | nrqsnchz | Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | |
Component: | General | Keywords: | has-screenshots needs-copy-review |
Focuses: | ui, ui-copy | Cc: |
Description
(This ticket has been migrated from GitHub: https://github.com/WordPress/gutenberg/issues/17874)
On new WordPress installs, users get a 'Hello World' post by default. The post's content is minimal and does not do a great job of explaining users what to do next.
I'm wondering if we can instead make better use of the 'Hello World' post and maybe have some pre-loaded content that can help new users learn the basics of the Block Editor and maybe serve as a little showcase of the cool things you can do.
The new 'Welcome to WordPress" demo post
☝️ The above is a quick example that hopefully can serve as starter to iterate to something better.
Because the guide is in the block editor, the idea is that the guide itself shows what users can do by using different types of blocks and features. For example, the guide can make use of column blocks, video, group, etc. We can use it as a nice showcase of what can be done with Gutenberg.
We can also probably use better images or even fancy illustrations, to make it more interesting and engaging.
In the example above, which again is just a quick attempt, the guide starts by showing users how to add a block using the Block Inserter in the top toolbar. That right there communicates to the new user that the plus sign icon adds blocks and when/if they find it somewhere else in the interface, they will already know what it does. It also discretely shows that there's more options in the toolbar that the user can then explore.
The guide then moves on to explain that there are different types of blocks and that they can be customized by using the options in the Block Toolbar.
And finally, the guide explains that there's a sidebar with additional settings for the document and the blocks.
Again, this could be improved in so many different ways:
- we can iterate on the contents and topics of the guide,
- we can use better images or illustrations,
- we can be more clever and use different blocks and make the guide more interesting
I'd love to hear your thoughts on this.
Change History (18)
#2
@
5 years ago
Thanks for the feedback @karmatosed!
"One thing I wonder is the amount of text. For example, are you suggesting we translate this? I feel that a lot of text like this will be quite a bit for many to follow. How could we perhaps take this idea and make it more inclusive to everyone?"
I totally agree. There should definitively be a balance. A big block (no pun intended) of text would not be inviting. I think we should make use of as many elements and formats as possible to make this more engaging and educational.
I can see us using video, illustrations, guided steps (like "Add your first block") and even linking to external resources and examples.
The guide could also be formatted in a way that can be consumed in parts, so folks can come back to it and continue where they left if they want.
#3
@
5 years ago
from @karmatosed: (https://github.com/WordPress/gutenberg/issues/17874#issuecomment-541014782)
"What would the most minimal amount of information we could get across for the most impact? I know you are mentioning a few things like video, illustration, guided steps. What do you think the minimum could be? What other examples are there out there to explore too? I know it's a common ask but I do think on things like this we can learn."
#4
@
5 years ago
Discussed at Oct 16 design meeting on Slack (https://wordpress.slack.com/archives/C02S78ZAL/p1571251034235000).
I'll attempt to add the general feedback from different folks:
- We need to be cautious and avoid this becoming a manual.
- Explore merging with demo page
- How would this complement Tips?
- Explore renaming from 'Hello World' to something more obvious and engaging, so users don't ignore it. (Introduction, Tips, Guide, etc.)
- This might be useful to see how well themes supports the Block Editor.
#5
@
5 years ago
For inspiration, I'm starting to look at how other products/services do welcome guides/tutorials.
Here's Trello's 'Welcome Board' (https://trello.com/b/bKbdmCKB/welcome-board) that every new users gets by default on their account:
I like how the board is divided into 3 lists (Basics, Intermediate and Advanced), which by itself teaches the new user about lists and how to use them.
It's nice that the amount of cards on each list is relatively short, so it should be hard for most folks to feel overwhelmed.
The cards themselves are used both as step by step actions and as examples/demos of the available features (click on a card to see what's behind, drag this card anywhere, etc.).
Instead of getting complicated or long, the 'Advanced' list points the user to external resources such as Help docs, longer online guide, API info, etc. where if interested, the user can then dive deeper and learn more.
#7
@
5 years ago
Notion (www.notion.so) also has an onboarding guide that is presented to new users as soon as they finish creating their account:
Similar to Trello, the UI elements are used to format the tutorial and guide the users on a step-by-step basis:
The workspace is also preloaded with some sample templates that include some guidance on how to use them:
#8
@
5 years ago
- Keywords needs-copy-review added
Here's a second pass at the new 'Hello World' post I'm proposing. Before we look at images and media, I think we should focus on the content and make sure we get it right first. I worked on what I think would be a good outline to start with. I tried to keep things to a minimum.
Let me know what you think and if you feel this can be improved. Maybe we can condense things a bit more? Maybe a I missed something or things are out of place?
Welcome to WordPress!
This is a demo post. Think of it as a playground for you to explore and learn the new block editor. You can edit or delete it, it’s up to you!
Blocks and the Block Library
Blocks are the fundamental building piece of the WordPress editor. They are great for building engaging content that you can insert, rearrange and style with little effort. In fact, this welcome post is built with blocks!
Let’s start by adding a new block.
Adding blocks
Adding blocks is easy and there’s a few different ways you can do it. First, try clicking the Add Block button on the top toolbar.
[image/gif]
You can add all types of blocks from the Block Library. These include paragraphs, images, galleries and even blocks that will help you customize the layout of your post.
[images]
You can also add more blocks by clicking the Block Inserter [image] that appears before and after the blocks in your post and by typing / on a new line of text.
Block Toolbar and Settings
Each block comes with its own set of properties and options. When a block is selected, you’ll find these in the Block Toolbar.
[image]
Each block type will come with different settings. Make sure you explore them so you get the most out of your blocks.
You’ll find additional and more advanced settings and options in the Block Settings sidebar.
[images]
Edit and Select tools
The WordPress block editor features two modes that make getting around easier.
[image]
As their name implies, Editing and Selecting allow you to focus on one interaction at a time. Press escape (ESC) to enter selection mode and press Enter to go back to editing mode.
Document Settings
The Document Settings sidebar is where you’ll find your post’s general settings. These include visibility, status, categories, tags, excerpt, discussion options, among many others.
[image]
Publish
Click the Publish button once you are ready to publish your post. This will open the Publish panel where you can review your post’s visibility and date settings before publishing.
[image/gif]
Learn more
You’re now ready to start using the block editor! If you want to dig deeper and learn more about its powerful capabilities, we recommend you take a look at these links:
- link 01
- link 02
- link 03
This ticket was mentioned in Slack in #design by estelaris. View the logs.
4 years ago
#10
in reply to:
↑ description
@
4 years ago
I think the Hello World is pretty great. It has a certain history and heritage of it behind it. But we could always add some new content like images. heading, images, quotes, pull quotes and new features to show off the new features of WordPress. It has been just a few lines awhile
Replying to nrqsnchz:
(This ticket has been migrated from GitHub: https://github.com/WordPress/gutenberg/issues/17874)
On new WordPress installs, users get a 'Hello World' post by default. The post's content is minimal and does not do a great job of explaining users what to do next.
I'm wondering if we can instead make better use of the 'Hello World' post and maybe have some pre-loaded content that can help new users learn the basics of the Block Editor and maybe serve as a little showcase of the cool things you can do.
The new 'Welcome to WordPress" demo post
☝️ The above is a quick example that hopefully can serve as starter to iterate to something better.
Because the guide is in the block editor, the idea is that the guide itself shows what users can do by using different types of blocks and features. For example, the guide can make use of column blocks, video, group, etc. We can use it as a nice showcase of what can be done with Gutenberg.
We can also probably use better images or even fancy illustrations, to make it more interesting and engaging.
In the example above, which again is just a quick attempt, the guide starts by showing users how to add a block using the Block Inserter in the top toolbar. That right there communicates to the new user that the plus sign icon adds blocks and when/if they find it somewhere else in the interface, they will already know what it does. It also discretely shows that there's more options in the toolbar that the user can then explore.
The guide then moves on to explain that there are different types of blocks and that they can be customized by using the options in the Block Toolbar.
And finally, the guide explains that there's a sidebar with additional settings for the document and the blocks.
Again, this could be improved in so many different ways:
- we can iterate on the contents and topics of the guide,
- we can use better images or illustrations,
- we can be more clever and use different blocks and make the guide more interesting
I'd love to hear your thoughts on this.
#11
@
4 years ago
Hello world is the tradition. We seen it everywhere, or similar greetings while on platforms beginning.The suggestion is while keeping Hello world as it is, if we can do something to give a little push/ guidance using Images or videos to user where to start or look. that would be great.
#12
@
4 years ago
It's great to see this happening. I've got some feedback on the design to hopefully help keep this moving.
- I agree with @asithc that maybe we should keep the "Hello, World!" title. It's pretty iconic.
- Avoid using red arrows in the images. Is there another way to focus an element?
- When two very similar images are side-by-side it's difficult to guess the difference between them.
- Can we pair back the text a bit? Maybe we just focus on the Block Inserter, the Settings sidebar, and an individual block and its toolbar.
#13
@
4 years ago
I almost think it should be near identical to the original. This post is often seen for the first time on the front end of a site. Even if someone loads it in the editor, I think showing images of the editor within the editor could be confusing. I also suspect most folks are looking for a way to delete this rather than edit it. I don't think it's the best place to teach Gutenberg.
What do you think?
This ticket was mentioned in Slack in #design by paaljoachim. View the logs.
4 years ago
#15
@
4 years ago
I think this is a very good idea! I am hoping we can have additional discussions around this ticket but also more in general how we can present help guides.
#16
@
4 years ago
- Keywords needs-design-feedback removed
What a great idea @nrqsnchz! Your mockup post is already a good example of what this could be, and definitely fills a void that the GB showcase post and onboarding modal don't service.
I'd love to upgrade the Hello World post too, it feels like a relic from the days where only programmers wrote anything on the web. The term is cute, but I wonder how many people starting a blog today have any idea what it means.
A salient point that @michaelarestad makes though that I had not considered in my initial enthusiasm for this is that indeed you'll probably see the post on your frontend first before encountering it in the editor. That might be a weird moment in the flow to give editor guidance. Some of that might work better as an interactive tutorial on top once you open it in the editor - but that might be another discussion.
As far as design goes, I like your first draft a lot. One thing I'd be interested to explore is if we should use more abstract representations of the editor UI in the images? When I look at the post I can't quite tell which ones are images and which ones are actual UI. Maybe just putting a colored border/background around the images would make them stand out more?
#17
@
4 years ago
My suggestion would be to set 'Hello World!' as a draft instead of published.
Maybe use a blogging prompt. This is essentially what I did with my plugin Launch With Words. People import the json file that has blogging prompts.
Sample Text
This is your first blog post. Traditionally, WordPress sets it to "Hello World." So why not use this as a prompt to write your very first blog post?
Why did you launch your website? Is it primarily for your small business or to write about a subject you're passionate about? What should readers expect to hear from you and how often will you publish?
WordPress is proud to democratize publishing. The website is ready. Are you?
Happy to work on this with y'all.
from @karmatosed (https://github.com/WordPress/gutenberg/issues/17874#issuecomment-540605774):
"I love the idea of having a better introduction page. There is actually a demo page already in Gutenberg if you have the plugin, that is a great starting place for this. My only ponder with using the hello world is we have to do a check for 'if Gutenberg active' as that page is also used for classic editor.
The problem with the demo page right now is it's not a guide as much as a showcase. What your suggestion fills is a guide. It also takes a somewhat not as useful thing, the hello world post. I know historically there's some passion around it, which is great, but it could be more useful.
One thing I wonder is the amount of text. For example, are you suggesting we translate this? I feel that a lot of text like this will be quite a bit for many to follow. How could we perhaps take this idea and make it more inclusive to everyone?
I think there's a great foundation here, it's how that could grow and avoiding being a manual page."