Improving Weavly Through Art Workshops

In April 2021, we met with 9 students in 5 different schools in British Columbia to use Weavly for art making. We had two 1-hour online workshops with each student. During the workshop, students worked with two facilitators from the Coding to Learn and Create team, and had access to one or two school assistants to complete the activities.

Co-designers

Our young co-designers’ ages varied between Grade 4 to Grade 9 and had diverse visual needs. Some of our co-designers were blind and used screen readers, while others had low vision and used CCTV to magnify their screen. Some co-designers were very skilled using their AT, while others were still in the learning process and required some assistance.

Our co-designers had a range of previous coding experiences. Some had worked with unplugged coding robots, such as Code and Go Mouse, or on-screen environments, such as Swift Playground, Scratch Junior, and Code Jumper, while others had no previous coding experience.

Activities

The first workshop was focused on introducing Weavly to the co-designers and exploring different features and functions. During this workshop, co-designers built a program to move their character to a specific spot on the grid. This activity was goal-oriented and required mathematical and directional skills.

In the second workshop, students had an opportunity to explore the sonification associated with different movement blocks. This exercise allowed co-designers to express their creativity and didn’t require any specific mathematical or directional skills.

Improvements for Weavly

Suggested improvements for low visions learners

  • Add tooltips or large text descriptions for each button, block, or toggle.
  • Make sure fonts are 18 or larger and bold, particularly the grid labels.
  • Adjust the colour of the Forward and Backward movement blocks so they are more distinguishable in the default/dark themes.
  • Provide options to change the colour and thickness of the traced line on the scene, or have different brushes.
  • Learners would benefit from an internal option to increase the size and colour of the cursor especially if they are working on a school computer and not their own device.
  • Increase the size of icons on the block’s “Control Menu”.
  • Increase the size of numbers inside move forward/backward blocks and the labels for the scene grid.
  • Learners would benefit from an audio description or voicing option when a block is selected in a program sequence.
  • Add a high contrast theme with colours.

Suggested improvement for blind learners

  • Move the character positioning controls to the world selector panel. Navigation between the Actions panel and the Program panel was not easy to toggle between. There were many elements to move through before being able to add a movement block to the program sequence.
  • Learners can benefit from more keyboard interactions such as
    • Up and down arrows to navigate on the user interface
    • Shortcuts for heading navigation (e.g. tabs)
    • Shortcuts for scene information
    • Shortcut for the refresh button (e.g. Alt-R)
    • Shortcut for the play button
    • Shortcut for adding blocks to the beginning or the end of the program
    • Shortcut for adjusting the speed of program execution
  • Move the refresh button closer to the play control area to avoid unnecessary navigation. Learners had to navigate many steps to refresh their scene before replaying their program. Learners require reminders to hit the refresh button.
  • Set the refresh to occur after running the program, where there is a setting to toggle automatic refresh on/off.
  • Learners expressed that an audio preview for the program sequence would help them find where their character will go on the scene and help with debugging.
  • Adding sound to characters as they are selected can be fun for some learners and aid in selection and navigation of the environment. For example, a ‘woosh’ sound when choosing the spaceship.

General findings

Audio/Sonification

  • Learners with low vision enjoyed the audio labels and kept the audio toggle on.
  • Learners who were blind found the audio descriptions interrupting the screen reader and turned off the audio.
  • Using CCTV on the iPad was challenging. Learners found it easier to rely more on the audio descriptions.
  • One of the co-designers had also enabled the native NVDA sounds. Thus, different movements or actions were associated with a sound and that helped with navigation.
  • Sonification can be improved by:
    • Clarifying the correlation between the number of beeps and the number of movements
    • Clarifying the correlation between the length of the sound and the angle of the turns
    • Clearly distinguishing between the forward and backward sounds
    • Clear instructions about how to get to lower sounds. It wasn’t clear to learners why a sound was changing as the character was moving between different columns on the same row
  • Keyboard shortcuts for sounds
  • Ability to choose different sound packs for each theme, record sounds, record your own voice, and change the speed, tempo, and volume of the sounds
  • A sound tutorial that gets users acquainted with the sounds
  • Option to use a text field to enter VPM and tempo

Themes

  • Although lines were darker on the light/high-contrast grey themes, a learner preferred to use the themes with colours as they provided cues to distinguish the action blocks.

Program

  • Some learners with low vision found select and insert easier, while others used drag and drop to build their program sequence.
  • Option to code multiple characters within the scene
  • The “Replace” action flow needs improvement. Usually the learner selects the “Replace” button first and then goes to the action panel to select a new block. However, this feature was not supported by the current flow and some learners were very confused.
  • When you tap the action blocks in sequence, say the selected block or menu is being selected. Other voiced commands can include “replacing/deleting/moving move forward 1 block”.
  • The block’s Control Menu wasn’t visible and intuitive. Learners either found it by accident or when they were instructed by the facilitators.
  • The block’s Control Menu focus trap grid was confusing and sometimes learners didn’t know how to collapse that menu and required assistance.
  • It was difficult to know where co-designers were in a long program sequence. Learners had to manually go through each block and count them to get to a specific block. There was a suggestion to have the code highlighted or lit up to see/track the robot path on the scene when being played.
  • The “arrows” around the selected robot in the program were seen as a border around the image rather than intentional arrow buttons to one participant.

Scene

  • Information for scene location was helpful

World Selector

  • Option to create own character by drawing or customizing the ones available
  • Option to add different backgrounds.

Actions

  • Students found the share button helpful, however, some of them didn’t know the share feature copied a URL and required pasting. When prompted by facilitators, they didn’t know where the URL was (i.e. clipboard) and how they could paste the URL that was copied.
  • An option to fully execute the program and instantly have the final result would have been helpful for some learners. It was suggested to add an option to indicate how many times a program should be repeated (Loop). Ex. “I wanted to make a million triangles”
  • An undo option could be helpful particularly when they were working on a drawing project and wanted to build a specific shape as repeating their program
  • Older co-designers requested more coding commands, conditions, and ability to connect to robots. For example: being able to create an obstacle course, or create random events
  • An action block to see something random or surprising
  • Suggestion to be able to bring custom blocks from other coding environments, such as Scratch, over to Weavly. Some of these blocks found useful include:
    • Repeat
    • Go to x,y (in grid scene)
    • Animation and sounds
    • When…
  • Learners were not aware that when they selected an action block, it remained selected. Thus, everytime they wanted to add an action block to their programs, they went back to the action panel and selected a block. In some cases, by selecting a block that was already selected they were deselecting it and this was confusing for most of the learners. It would have helped if the audio label for deselecting an action block announced “ movement deselected” instead of saying “no movement selected”.