Keyboard Nav UX testing

Keyboard Nav UX Testing

On 28–29th November, members of the Micro:bit Educational Foundation conducted two days of user experience testing with children ages 8–14.

Christopher's notes

[Christopher][https://github.com/cpcallen] observed the testing and made the following notes, divided roughly into bugs (in the keyboard nav plugin and/or Blockly), feature requests, and topics for discussion.

Bugs

Problems that were noted that seem to be straightforwardly bugs:

• Hidden tab stop between scenario drop-down and Blockly workspace
• Highlighting of workspace (when tabbed to) should be clearer/darker
• Second colour picker doesn't work on first try
• No visual indicator when you press esc to leave workspace
• Something funny about cut/copy/paste—awaiting repro from Lucy or Kirsty
• Disconnect shortcut broken, probably by cursor -> select change
• Shortcuts help should all fit on one page (if possible), or scroll with arrow keys
• Newly-created blocks should not overlap existing blocks
• Can no longer click on workspace to focus
• Cursor does not follow mouse selection
• Can't select topmost next/previous connection in sub stack
• Cursoring up does not select intermediate connections

Feature requests

Ideas for making keyboard navigation easier and more intuitive:

• Visible button (to which one can tab) for shortcuts dialog
• Tab to toolbox/workspace/out—without needing to enter/escape
• Auto-prompt shortcuts help the first time you use keyboard shortcuts
• Insert key should do something useful
• Left arrow takes to toolbox (perhaps requires enforced tidyness)
• Instead of marker: open a space (as if insertion marker) and take cursor to toolbox directly to choose block to place
• Pop-up shortcut help when you press (or hold) control / command?
• Copy and paste to place blocks from toolbox
• Should be possible to get to toolbox directly from other parts of the page
  • Probably best done by tab stop, since 't' shortcut might cause issues for surrounding app.
• Pop-up hint (to use escape/tab) when you try to arrow out of the workspace / toolbox?
• Some affordance to hint to users that they can use right arrow to access fields/inputs on a block.
• Some affordance when the cursor is on a connector (esp. with simple reporter shadow blocks) to help users understand that they can move to the block/field.
• Drag blocks with keyboard
  • Affordance (3d shadow?) to indicate bock being dragged?
• Affordances for inserting/replacing blocks:
  • Open a (small) gap while chosing a statement block from the toolbox.
  • Move existing value block aside (possibly with linking line) while choosing a value block from the toolbox.

Must not be fixed

• Clicking block on flyout (in categories toolbox) drops it onto the workspace
  • Emergent behaviour, not intentional.
  • Depended upon by many instructions on how to use Blockly apps.

Other / for discussion

• Marker is not intuitive
• Use copy and paste for placing blocks?
  • Enter to copy, pop up message inviting you to paste where you want?
• "/" is probably not a good help shortcut, as "?" is not always on "/"
• Educational materials will direct users to the toolbox first, not to the place that the new block is going.
• What should happen when you press enter on a block?
  • Select (for copy/paste)?—if block is not already selected by virtue of cursor movement.
  • Move cursor to toolbox to replace?
  • Move to first/only field (possibly on shadow block?) and edit it?
• Should Blockly workspace be greyed out when it does not have focus?
  • Probably not, as would be weird if using mouse.

Ideas for future testing

• To get them more confident with using keyboard nav, start early in session with nav active and ask them to delete some certain bit code.
• Follow this with opening a new tab and then getting them to navigate to the code editor.

(These were tried with some later participants.)