SJRK-281: Provide user feedback when a block is added

Description

Provide user feedback when a block is added in a way that helps them find it, e.g. "Image block added below"

Attachments

Comments

• Justin Obara commented 2019-09-11T09:16:26.426-0400

  Some potential options for the feedback

  • provide a live region to notify ATs of the change, and add badges to the icons for adding blocks that indicate the number of blocks present.
  • use the [Notification API|https://developer.mozilla.org/en-US/docs/Web/API/notification]
  • add a "status" region on UI to display notifications. This will also be used by ATs
  • add status updates as a dialog
    • can be cleared by the user
    • Automatic removal options
      • never, can only be removed by user
      • after some time
      • when a new update is received, it replaces the previous one
      • replaced on update or removed after some time

• Justin Obara commented 2019-09-11T11:04:35.762-0400

  • badge.png is a screenshot of an example using badges to indicate number of blocks per type.
  • notification.png is a screenshot of an example using the Notification API to spawn an OS notification
  • "status area.png" is a screenshot of an example using a status area for updates.

• Dana commented 2020-08-20T14:57:07.765-0400

  Design ideas

  • maintain a total block count that increases each time a block is added. This could also include a block-type breakdown
  • have a notification panel that could also act as a history (if the notifications persist) - need to make sure the new notification is highlighted when added
  • use some kind of animation to show the block being added, that emerges from the button or from the top of the tool frame
  • active state for block buttons could be more prominent - a '+' sign or checkmark appears? (rather than or in addition to the button changing colour)
  • have a zoomed-out panel view of the story, showing thumbnails of all the blocks. This could scroll up as blocks are added beyond the bottom of the frame

• Dana commented 2020-08-26T14:58:36.086-0400

  Gregor's notes from crit: https://docs.google.com/document/d/11NQcq237gHCno0agYZpWWCWEzvICT7d1qtXKs_JABAQ/edit?usp=sharing

• Justin Obara commented 2020-08-31T10:21:52.718-0400

  Similar to the last point a couple of comments up, maybe have an outline view similar to a Google Doc. Although for Google Docs, I think it only shows headings. The thumbnails idea also sounds similar to the minimal in editors like Atom and VisualStudio Code. (see: https://atom.io/packages/minimap)