Keyboard Nav UX testing

Keyboard Nav UX Testing

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

Christopher's notes

Christopher 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.

Actionable items from these notes have been transcribed into issue #86; please see there for up-to-date information about any activity resulting from the observations noted here.

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.)