Columns block is unintuitive and confusing

[pipdig]

The ability to add content within columns is a vital feature for any page builder/tool. Therefore I am excited to see that the "Columns (Experimental)" block is available in Gutenberg. However it still needs a lot of work to be inline with other equivalent tools on the market (hence the experimental tag, I know!).

As a real-world test, I asked my girlfriend (a long term blogger on various platforms including WordPress) to try out the Gutenberg editor. I asked her to add a photo with some text next to it. I suggested using the Columns block for this, though that is the only input I provided. She has used Gutenberg once before for around 5 minutes to create a simple blog post with only paragraph blocks. I recorded the screen which can be viewed at https://youtu.be/PQ-0a6G5Pq4

Some points to note:

1. There was particular difficulty in adding an image to the right hand column. In the video you'll notice there were two failed attempts which resulted in the photo being placed below the columns in new blocks. There is also a lot of hesitation with initially finding where to add the photo, in terms of using the correct (+) button.

2. At 0:58, she begins to try and drag the photos into the column.

3. After 1:10, she is able to find the option to insert the image block within the right hand column.

4. At 1:28 she tries to increase the size of the image by clicking and dragging the edge. However, this only increases the size of the image which overflows on the right side. She expected the columns to resize, so the left side would take a smaller percentage and the photos would fill that space.

I hope this feedback is useful. I should point out that my girlfriend is by no means a beginner with WordPress and technology in general. She has been blogging on various platforms for nearly 10 years.

Please let me know if I can be of any further help with the Columns block or other user testing.

Thanks,

Phil @ pipdig

[danielbachhuber]

Thanks for the feedback, @pipdig ! This is a great summary. We'll keep this in mind when we do another round of work on columns UX.

[ZebulanStanphill]

Interesting... the insert button on the right column appears to be broken. It should insert in the right column, but instead it is inserting after the columns block, which is certainly confusing. I thought someone had already reported that bug, but I can not find any open issues about it, so perhaps I should report it.

There are also some other current issues:

• Columns adding block only available on left and right seems stuck #5772 "Columns adding block only available on left and right seems stuck"
• Overlapping on smaller screen sizes with columns and adding blocks #5771 "Overlapping on smaller screen sizes with columns and adding blocks"
• Default block appender doesn't appear underneath nested blocks #5722 "Default block appender doesn't appear underneath nested blocks"

Additionally, these pull requests and issues should be of interest to you:

• Try improving the side UI for nested blocks #5658 "Try improving the side UI for nested blocks"
• Refine the up/down arrows to balance visibility with usability better #5400 "Refine the up/down arrows to balance visibility with usability better"
• Increase clickable area for Block controls #4223 "Increase clickable area for Block controls"
• Reorder blocks via drag & drop (v2. using editor dropzones). #4115 "Reorder blocks via drag & drop (v2. using editor dropzones)."
• Add support for non-equal width columns #4902 "Add support for non-equal width columns"
• Adding a block in-between another should be easier than it is #5396 "Make the in-between inserter less aggressive"
• Increasing number of columns causes them to overlap #5130 "Increasing number of columns causes them to overlap"

EDIT: I have now created an issue about the inserter bug: #5889 "Inserter in column adds blocks to wrong column or after columns block".

[karmatosed]

Thanks for your insights @pipdig. As we have issues which more or less cover all the feedback, I think it's suitable to close this issue and focus on those. This feature is experimental but one we're going to iterate on if it does get into core in version one. We can always come back to this and reopen, however focusing on those seems the right move.