I created the following interactive to show differences between the new and old Brightspace HTML editor. (A work in progress.)
(Note: Click 'Proceed' on the initial landing page.)
Apart from the background image of the old and new editor menus, these are the main elements I've used:
- A blue square or rectangle is used to highlight the old editor icons/menus
- An orange square or rectanlge is used to highlight the new editor icons/menus
- A Tool name text field (that changes at each interval)
- A Comment text field (that changes at each interval, when required)
- Each icon is overlaid with a hidden button with an action to jump to the time in the timeline to show it’s corresponding icon in the other editor
- Additional images of menu options are displayed when required
(As this is a work in progress, I jump around the timeline a bit and there are a few alignment issues with image scaling.)
I'd value feedback on how others would have tackled this.
I'd also be interested in what I can do to make this more accessible.