Tab-based usability feedback on Gutenberg navigation.

wcus2017-gutenberg-feedback.md

Gutenberg Feedback 2017-12-03

Terminology

In my feedback I’m defining things this way:

• Items - Individual block types in a list.
• Sections - Groupings of Items with a semantic title
• Tabs - Recent, Blocks, Embeds

Block insertion controls

Ultimately… I think the editor navigation would make more sense with a “rule” that tabs move you from “unit” to “unit”, and arrows move you within (and between, if they are nested) sections/units. It gives the interaction more of a consistent rule and I feel like it would help because people are transitioning between mental states if they’re perusing a list of Items vs jumping from Recent to Embed, for example.

So by that logic….

• Leaving the search bar should be a tab action, as it is now.
• Navigating between Tabs should be a tab action, not arrows. (I’m not doing this with a screen reader and that may require this experience, I don’t know.)
• Navigating INTO a Section should be the down arrow.
• The down arrow should also take you into the following Section, ideally. I know that sucks and it’s hard to do, but it would really help.
• Keep the convenience of tabbing between Sections within a Tab. That’s great and really useful.
• However, it’s currently disorienting when tabbing between Sections within a Tab; rather than being taken back to the last Item I had highlighted, I’d rather be taken to the top of the Section so I know where I am.
• The Section title needs to be visible when you are tabbing back UP through the Sections. Right now it ends up hidden by the Tab navigation bar.
• The right/left arrows need to work as well as the up/down ones for navigating between items within a section. If they are visually in two columns, there will be some users who intuitively think of them as right/left based.

Embeds Section

• Using Section labels would be helpful here; it looks like we use the most popular embeds at the top and then show the rest in alphabetical order. Splitting these out with clear labels would be helpful.
• "Speaker" Item in this section... is this SpeakerDeck? I ask b/c it worked with a SpeakerDeck embed; but if that's the case, the name should be updated.

Block "Inline" Editor

• There's a larger issue that @jdelia and I logged here with regards to block insertion with a keyboard, but regardless... when you do get the controls for a block on tab in, it feels a little counterintuitive to shift + tab to go "back" to a link that didn't exist before. Technically I am not sure there's a good fix for it, though.

Tickets opened:
WordPress/gutenberg#3782
WordPress/gutenberg#3783
WordPress/gutenberg#3784
WordPress/gutenberg#3785

Navigating between Tabs should be a tab action, not arrows. (I’m not doing this with a screen reader and that may require this experience, I don’t know.)

Note that this would defeat the purpose of the tabbed interface, as the expected interaction is switching tabs via arrows. The advantage is giving users the ability to jump directly from the active tab to its panel, without having to tab through all the tabs. Just imagine a tabbed interface with a dozen of tabs... See https://www.w3.org/TR/wai-aria-practices/#tabpanel

Worth noting that's also the way tabbed interfaces work in our operating systems, for example in macOS any tablist in System preferences:

or, on Windows, the task manager:

where it is only possible to navigate through tabs with arrow keys.

Thanks for this. I see a lot has been made into issues, props to you both for that.