Gutenberg: Table block UX - to discuss or not?

[rosswintle]

Issue Overview

I don't want to start by going into too much detail in case it's not necessary. But I really don't like the table block UX. My initial questions are:

1. Is there an issue for this already? I can't find one.
2. Is this the place to discuss it?
3. Are you aware of UX issues with this block? Is it a work in progress?

Expected Behavior

_Will add later if necessary_

Current Behavior

_Will add later if necessary_

Possible Solution

Related Issues and/or PRs

[karmatosed]

There is no specific ticket about the table UX. However, lets maybe pan out a bit and look at what you are thinking is the issue, because UX is a wide term. Is this from self discovery? Or do you have some usability testing to feedback on this? It would be great to dig in a bit more, thanks.

[rosswintle]

Sure. I guess my initial question was "is this being dealt with already?".

I think this falls into "self-discovery". This is just something that I found coming to Gutenberg for the first time - most of the block's settings made pretty good sense. But I really struggled when I added a table.

The high-level overview is that it doesn't really behave like any other embedded table-in-document interface that I've used, and I don't think the drop-down for modifying rows/columns is "discoverable" enough.

Examples:

• I could not work out how to add or remove a row or column.
• I expected the tab key to move between cells
• I expected right-click to give me options (I appreciate this may not be fixed, but I flag it as it was an expectation)

Eventually I found the table-editing button with a drop-down of actions:

and that enabled me to do the things I wanted to do. But until I found that I was struggling and even for a while thought that the table block must be a work-in-progress that was waiting for add/remove row/column functionality. I basically gave up using tables because, as far as I could tell, they didn't work.

I think if it behaved more like other embedded table UI's (such as Word's or Pages's) then actions on Gutenberg tables would not need to be as discoverable.

And if actions were more discoverable then it wouldn't matter so much that it works differently.

So, ideally we'd both make it easier to discover how to take these actions and make them similar to tools that people are more familiar with. But I can see how improving one of these aspects might reduce the need to improve the other.

Hope this all makes sense and is useful.

[rosswintle]

As a reference, here's some of Word's online, browser-based tables UI:

https://cloudup.com/c69TkDhH9BA

Google docs doing the same thing:

https://cloudup.com/cn6YmDmDASF

Pages on a Mac, which doesn't have right-click, but has a nice affordance for adding rows:

https://cloudup.com/cBVUbLPAyyo

And me acting out the first time I played with Gutenberg:

https://cloudup.com/cgC2niX_fKw

[anna-harrison]

@rosswintle : you raise a few excellent points here, thanks heaps

• In terms of actions that can be performed on a table, what you see today will be extended. We are waiting on a new table library from the TinyMCE team #1470
• Looking at TABbing specifically as a way to move between table cells, we do have this feature built into the block, but have turned it off in order to meet accessibility requirements #1938
• Regarding the UI, there is scope to play with the icon set that is used in the table dropdown (see below). Possibly, no icons, just words, could be a better solution ( @melchoyce should this be pulled out into a separate issue?). This lends itself to A/B testing
• On the table interactions, the way that a table is inserted - i.e. the default table is 2x2 with a black outline, no headers - also lends itself to be improved. With a 2x2 table as a starting point, adding rows/column could become quite cumbersome (as this has to be done one by one by clicking the buttons on the toolbar). I have added this as a separate issue #2620
• Table formatting has not been raised yet, but for now we have assumed that this will be set though properties in the sidebar ( @EphoxJames @melchoyce )

[rosswintle]

Thanks. I don't have the kind of time that's going to be needed to be involved in a deep way, but I appreciate you taking this feedback on board.

I think I'd still like to see some improvement on the "affordances" (I hope I've used that term correctly) for adding rows and columns. I liked what Pages did with this (see https://cloudup.com/cBVUbLPAyyo if you haven't already) and it seemed relatively touch friendly.

I totally appreciate that some of these things are hard problems to solve, especially when you take into account touch screens and accessibility. So thanks again.

[karmatosed]

Just a note, lets remove the feedback label until we have something mocked to give feedback.

[karmatosed]

What do you both feel out of this discussion are good baselines to have implemented? Lets think of small wins here.

[rosswintle]

I appreciate that the priority of this is probably pretty low given the technology discussions that must be happening.

And generally, I think the table UI is going to be HARD.

I think it comes down to the fact that I'd like to have some kind of in-line control for adding and deleting rows as I feel like the drop-down menu for this is too hard to find and not discoverable.

Here's a mockup of something you might do:

My thinking is that these could appear to add/delete rows/columns when you are hovering over a cell. I appreciate that there are issues with touch devices and possibly issues with touch/tap control sizes too.

Something like this would be my quick win here.

[jwold]

Just left some comments/suggestions on https://github.com/WordPress/gutenberg/issues/2620 for the default styling for tiny changes we could do on table block.

There are tons of awesome ways we could approach the table block, here’s some suggestions that we’ve been chatting about (including an initial sketch with lots of different options):

Bigger suggestions

Beyond what’s suggested above, there are some additional things that I’ve been chatting with Brendan Woods and Anna Harrison about. I’ll outline them below. Been looking at tons of other table options out there.

1. Making adding a table a 2-step process - See a lot of benefit from having an intermediate step. Similar to how we have done with some of the other blocks, where I can make a few thoughts ahead of time for rows/columns, maybe header rows (not shown), and a few other options. We could go quite far with this, or keep it super simple.

One option:

Another great sketch/suggestion from Brendan on how the initial state could look:

Another option (as shown on tinymce.com and on Google Docs)

Could also look like this (Thanks @jasmussen):

1. Easier editing of rows and columns - Great suggestion from Ross Wintle: https://github.com/WordPress/gutenberg/issues/2609#issuecomment-332538313 on adding some interface buttons. There might be some other options to explore here, but I feel this is a great starting point.
2. Borders - Being able to turn borders on and off, and eventually control some styling aspects of them.
3. Adding images to cells - Would be awesome for creating comparison tables.
4. Styling options - Styling text color, font size, heading font and text color,
5. Alternate rows shading
6. Tabbing to final cell generates new row
7. Improving the toolbar (regardless of whether it’s fixed or not) to provide better context for the table block:

Thanks to @brendanwoods-xwp for helping think through all the options for how we could approach this, and for your awesome sketches! Also thanks for @annaephox @EphoxJames for your great feedback and thoughts through this.

[karmatosed]

I feel we're splitting things between 2 issues on tables. Could we merge them into focusing on #2620? Let's close this for now and focus on there - we can always reopen as any UX improvements would go into defaults right?

@jwold I feel adding another step to the inserting isn't UX friendly. Let's discuss in the other issue but I really don't see that as an improvement. Similarly I don't think adding yet more things like images, borders, styling and images helps with UX. Sure they are nice features but they don't improve the experience.