Hard to find way to add a block with adding changes

[karmatosed]

With the upcoming changes, I am finding it hard to see right away how to add a block:

This icon area is maybe confusing for new users and took me a few beats to get a grasp on. Could we use some animation or highlighting to encourage adding? Something to make the icon stand out enough to not get lost in the sea?

[phpbits]

I was about to post this one too. It's harder to add blocks than before, also the icons are not showing on blocks inside the columns.

[darrencoutts118]

The design of that all being white on which is quite confusing to see. I would suggest either a border around the buttons, or add a border around each individual button to clearly highlight that it is a button. They do not stand out to me, and make me want to do anything with them

[carlhancock]

This is exactly why I vehemently disagreed with removing the trailing block inserter UI from the bottom of every post. The previous UI having the trailing inserter with it's frequently used blocks on rollover made things more obvious. It was simple. This change has made things less obvious and a lot busier visually. Simple is better.

[carlhancock]

I don't think this issue provided enough detail, context, and screenshots to fully outline just how poor the current block insertion workflow is. I've created a new issue #5113 where I try and outline the situation in more detail. Gutenberg needs to make things more obvious, not less obvious.

[StaggerLeee]

I don´t like it as it is now, confusing. Logic says you have to put mouse cursor between blocks to use Inserter on top bar. Not select existing block, then use Inserter.

I do not know what ideas are you copying around from other platforms. Somehow guess you are making the same mess as I, when trying to mix several designs from other websites and mix several, non-compatible, ideas.

Edit: I see now it comes by pressing Enter when inside one block. Some blocks will use Enter key, some others Tab key. Pressing any of them wrongfully will make errors. Maybe shortcode with "new line" do not know if it will disable shortcode.

[mellis32]

I like the way the editor works now versus the way Gutenberg worked before. It acts much more like normal paragraph writing now. I really didn't like icons cluttering up the writing area, detracting from what the content would look like on the actual page.

However, there is some additional polish needed:

1. I don't understand why 'Add Audio' and 'Cover Image' are the featured icons. My understanding is these are less commonly used blocks than regular images, bulleted list or headings. These were not the featured icons as originally shown in Revisit the trailing inserter #4951.
2. I support showing the icons in the empty paragraph on first load, especially if they are greyed out, as in Dropbox Paper, and as originally shown in Revisit the trailing inserter #4951.
3. It bothers me that the UI is not consistent about when to show the icons. I do not believe two rows of icons should be showing up just by hovering over another empty block. Icons should disappear or grey out from the originally selected box when the mouse moves to another block. Gutenberg gets messy when too many icons are shown on the screen at once:

[roryashfordbentley]

I have done some user testing with the Gutenberg editor and the biggest challenge everyone faced was adding in new blocks. I showed them the plus button in the header and we agreed that is the easiest way to add new blocks currently but the general consensus was 'why isn't that button at the bottom?'.

[karmatosed]

I have done some user testing with the Gutenberg editor and the biggest challenge everyone faced was adding in new blocks. I showed them the plus button in the header and we agreed that is the easiest way to add new blocks currently but the general consensus was 'why isn't that button at the bottom?'.

That's interesting feedback @roikles, what level and context were the users? Was it a user test using a task?

[carlhancock]

@karmatosed Is there standard task based scenario that is being used for doing user testing at WordCamps? I know i'd read that some user testing occurred at WordCamp US. But I am not sure what that consisted of and Gutenberg has obviously changed since then.

If there were some standard user test scenarios that could be documented they could be used at WordPress related Meetups, WordCamps, and even more importantly... WordPress developers/designers/contributors could have friends/family who know nothing (or very little) about WordPress do some user testing and collectively report back.

Also, it might be worth looking into paid user testing using a company that specializes in user testing. Although that is something that the WordPress Foundation (shout out to @m) would likely need to fund as it obviously wouldn't be free. But it would be a great thing to have done for a change of this magnitude.

[karmatosed]

Is there standard task based scenario that is being used for doing user testing at WordCamps? I know i'd read that some user testing occurred at WordCamp US. But I am not sure what that consisted of and Gutenberg has obviously changed since then.

@carlhancock , yes we have used a few formats and I'll link some resources there here now - we've documented all along:

https://make.wordpress.org/test/2017/11/27/gutenberg-usability-testing-at-wordcamp-us/
https://make.wordpress.org/test/handbook/call-for-testing/gutenberg-testing/

Right now we have enough usability testing feedback to not have to go the paid route but it's not being ruled out as a way to reach outside the WP bubble. The community has been processing the 90+ videos from WCUS.

We have a link in the plugin and still get feedback through that also, which is processed each time. We've had a lot of feedback from this so it's been working really well. We can always iterate though, so if you are interested would be great to get you involved.

[karmatosed]

Here is a suggestion:

This adds a gentle fade until you hover over the icon. cc'ing in @jasmussen for the work he's done on this interaction to sync up.

My thinking is in this it's a simple change but one that makes the 'new block' stand out and benefits focus.

[karmatosed]

I am removing design feedback as it has some design issues here and hopefully we can work on getting this in.

[noisysocks]

Can we close this? The UI has changed a bit since it was opened and we have #6631 landing soon which will highlight the inserter.