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

Block Inserter: Add graphical empty state #17122

Closed
karmatosed opened this issue Aug 21, 2019 · 7 comments · Fixed by #21944
Closed

Block Inserter: Add graphical empty state #17122

karmatosed opened this issue Aug 21, 2019 · 7 comments · Fixed by #21944
Assignees
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Enhancement A suggestion for improvement.

Comments

@karmatosed
Copy link
Member

karmatosed commented Aug 21, 2019

If you search for something and get no blocks returned just text comes back:

image

It could be nice to have a graphic or something here to bring a little delight along with text that informs.

@karmatosed karmatosed added the Needs Design Needs design efforts. label Aug 21, 2019
@talldan talldan added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Enhancement A suggestion for improvement. labels Aug 22, 2019
@melchoyce
Copy link
Contributor

Some initial ideas:

image

@enriquesanchez
Copy link
Contributor

These are good! I like how the dashed outline combined with the question mark in the 2nd option provide a lot of context to this empty state.

@karmatosed
Copy link
Member Author

I really like either 1 or 3 the most, although I like them all. I can see how 3 could have some animation behind it which might be nice.

@karmatosed karmatosed added Needs Design Feedback Needs general design feedback. and removed Needs Design Needs design efforts. labels Aug 24, 2019
@melchoyce
Copy link
Contributor

We could consider maybe animating on hover? I think it would be distracting if the illustration was constantly in motion.

@melchoyce melchoyce changed the title Add graphical empty state Block Inserter: Add graphical empty state Aug 27, 2019
@mapk
Copy link
Contributor

mapk commented Aug 27, 2019

Just to add my two cents here. I really like the simplicity of the first graphic option the best. Adding a graphic is a nice visual indicator. 👍

@kjellr
Copy link
Contributor

kjellr commented Aug 28, 2019

Another option would be to mimic the shape of a block item, but use a dashed border to indicate that it's missing:

Frame 2

This is a little less of a literal "block," which I think may be helpful here.

@melchoyce
Copy link
Contributor

Let's go with @kjellr's suggestion.

@melchoyce melchoyce added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. labels Aug 29, 2019
@Soean Soean removed the Needs Dev Ready for, and needs developer efforts label Feb 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants