May 29th, 2020

Owned by Crystal Chan
Last updated: Sept 18, 2020 by Sepideh Shahi
2 min read

Activity Summary

At this session, a participant with low-vision interacted with visual and functional components of the existing prototype with the addition of adding/removing loop.

  • Link to prototype:
    www.figma.com
  • Script for using the prototype: 
    • Open the Program Menu
    • Select the check box to show “Large Add Buttons"
    • Close the menu
    • Insert a Loop to the first Add Button on your chain
    • Select the Green Forward tile to open its control panel 
    • Select the Move left button inside the control panel to move the tile inside the loop
    • Close its control panel 
    • Select the red turn right tile to open its control panel
    • Select the Move Left button inside the control panel to move this tile inside the loop
    • Close the control panel
    • Make this loop for 10 times (change the number to 10)
    • Go back to the program menu
    • Hide the Large add buttons
    • Close the menu
    • Make it loop forever

Goals

  • To test the visual and functional aspects of current prototype settings
  • To determine how to support low-vision user with loop functions in developing a code sequence

Notes from the session

  • User expressed a strong preference for high contrast shades (e.g. black and white) for main content
  • User with low vision strongly prefer bigger sizes to text and buttons/actions. The suggested size for text is 24-27 pt
  • User had difficulty locating the setting panel, changing ‘settings’ to adjust size of buttons and closing the ‘menu’. Trash bin could be interpreted as the button to close the ‘menu’ panel
  •  “Start Loop” and “End Loop” appeared as locations for actions
  • Blue flashes on action buttons hinting at next possible action/step could not be identified
  • User found the user interface presented at this session to be the most challenging to navigate

Notes for C2LC design

  • Colour contrast in User Interface is needed to see buttons/settings.
  • Provide colour change to icons. Avoid grey (e.g. white, black, dark blue) for menu items (e.g. arrows, trash can, comment) to increase contrast and allow for colourful options to be selected for loop background
  • “Add” buttons can be moved apart on program line (more space between)
  • Indicate “menu” to settings (i.e. icon with three lines) and increase the size