Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider adding a rotating Tips area to the block sidebar #16594

Open
kjellr opened this issue Jul 15, 2019 · 2 comments
Open

Consider adding a rotating Tips area to the block sidebar #16594

kjellr opened this issue Jul 15, 2019 · 2 comments
Assignees
Labels
[Feature] NUX Anything that impacts the new user experience [Type] Enhancement A suggestion for improvement.

Comments

@kjellr
Copy link
Contributor

kjellr commented Jul 15, 2019

Alongside efforts like #16315, we should consider other areas where we can bring education and help to the user contextually. This is one of those ideas.


#16315 includes a new inline help notification to the top of the sidebar when users first try Gutenberg. This notice is aimed to help them understand the purpose of the sidebar:

Block-Sidebar-Tip

Gutenberg is a complex application, and there are a number of block-specific tips and shortcuts that would be helpful to surface even beyond the initial first-use NUX flow. For example,

  • Letting users of the List block know that they can type space at the start of any list item to indent it.
  • Pointing users to the "Edit" icon if they'd like to replace the image used in an image block.

Slack does a great job of showing these sorts of messages while the page loads, but in our case, it may make sense to have a dedicated area in the sidebar for them. This could either end up looking like the other Tips notifications, or it could look like its own separate thing:

Frame 2

Third party block developers could easily provide these via the block registration:

blockSettings = {
    title: __( 'List' ),
    ...,
    tips: [
        'Quickly indent the text in a new list item by starting it with a space.',
    ]
}
@kjellr kjellr added Needs Design Feedback Needs general design feedback. [Feature] NUX Anything that impacts the new user experience labels Jul 15, 2019
@kjellr kjellr self-assigned this Jul 15, 2019
@karmatosed
Copy link
Member

karmatosed commented Jul 16, 2019

In nobody's surprise, I really like the dark version of these. I think it might be good as a design exercise to place all the types of messages / Tips being considered alongside each other. Is the hierarchy visually reflecting what we want? I think personally it's ok to have different looks if perform different functions.

@mapk
Copy link
Contributor

mapk commented Jul 23, 2019

While considering this concept in today's design triage, we came to this conclusion. Comment from #16592 (comment)

Add tips to both locations.

  1. In the main Block Inspector, they can be turned off globally so they don’t interfere with the more advanced user’s experience.
  2. In the help sidebar on the Inserter/Library they can’t be turned off unless the user toggles off the entire help sidebar.
    This flow makes sense and surfaces tip visibility while also allowing easy ways to turn them off completely.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] NUX Anything that impacts the new user experience [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants