Skip to content

Instantly share code, notes, and snippets.

@kwhite
Last active December 14, 2017 18:19
Show Gist options
  • Save kwhite/22cf005d0a23f3c66dd8df62a6bde574 to your computer and use it in GitHub Desktop.
Save kwhite/22cf005d0a23f3c66dd8df62a6bde574 to your computer and use it in GitHub Desktop.
Tab-based usability feedback on Gutenberg navigation.

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.
@karmatosed
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment