C2LC Prototype UX Design Iterations

Prototype: https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/

** This prototype is not complete yet and needs further edits. This link will be updated soon.

• Modified the global menu
• Modified the Command section menu and added Hide/Show for different features
• Added new commands: draw, make music, and follow me
• Modified the custom commands

• What about having more advanced drawing features?
• Do we need to connect this to a robot or can this work as an stand alone program for drawing/making music/choreographing a dance/ etc. ?
• Include a Zoom option for drawing
• When drawing a path using the draw command, where is my start and end point?
• Consider default titles for blocks user is building in case they have difficulty entering their names.
• For making music try different approaches, get inspiration from Creatability
• For making music command, do we need to have time limitation?

Interactive prototype: https://xd.adobe.com/view/303a27da-8d7f-46a4-5647-bdc7c9e278bf-460b/
Prototype: https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/ 

** Please note that these are interaction design wireframes and do not represent the visual design of the C2LC prototype.

Applied the feedback from the co-design sessions at the summer camps:

• Added a global menu for the interface, thus, users can adjust their interface settings, such as language, appearance, view mode, etc.
• Added a menu for each panel thus users can customize their interface based in their specific needs
• Added a feature for building custom blocks (including repeat patterns)

• When in Text mode: make sure there is a way for communicating errors, such as "You have a command that we don't know what to do with"
• Voice commands: talk to people who use voice commands and screen readers to better understand the logistics of integrating voice commands in this UI. for example, If you choose a command by voice, how do you pick the destination for it? how do you select or drag and drop by voice commands?
• Move the "Tracking speed" from the program menu to the global menu. This could be a more generic option for adjusting the speed of the interface and maybe called "speed", "interaction speed" etc.
• Think about the program menu when it's in the text mode. Do we need extra options? how should we modify the current options?
• When running the code, we can show the animation for each symbol
• Add an option for show/hide parameterizing option to the program menu
• Do we need an Undo/Redo feature?
• We need a capability to edit the custom blocks
• Consider using text editor to create custom blocks
• Add options to hide/show features of the programming language in the command panel menu
• Include capability for copying and pasting parts of code - Maybe a loop block that loops everything before it.
• Think about different models of creative expression. Don't be limited by this current model that is applied by most existing coding tools - imagine Mbot following my clapping to build a path, or following a laser pointer to build a sequence.
  • Maybe include other categories in the command section, such as a category for drawing, making music, etc.
  • Enable using different modes of interaction when building a custom block to include drawing, music making, body movements, etc.

Commands Section

• Blocks need colour, need to know the bottom of the arrow, need text and symbol on the command block (or ability to choose) Left & right arrows need to have curves to show the turn
• Adding additional movements, such as backward/down, diagonal, half turns, and 180 degree turns, jump, run, reverse/backwards, poke, spin, light up, flash red, talk, dance, draw, draw more shapes similar to circles, roll in water, go underwater, drive a car, have a schedule, fly, fight against other robots, put bad people in jail, do everything for the camper (i.e. give him a bath, bring him a drink, pull a trick for him, etc.), circle, loop de loop, and rainbow arc (i.e. half circle), make a sound, say hooray, make a burp sound (participants showed great interest in silly sounds or behaviors from the robots).
  
• Adding options for repeating patterns and creating loops, have the robot go to the beach.
  
• Clearly defining how far a robot moves in standard units (i.e. centimetres)
• Keeping one arrow and adding an ability to rotate it in different directions to save space
• There were contrasting ideas about organizing the commands, using categories similar to Blockly vs. open menus similar to Sphero Edu. 
• Adding colors to different command blocks, such as yellow
  
• Adding sound cues for each command and particularly for add and delete commands
• Incorporate blue-colored theme (i.e. blue command buttons)
• Campers like the clear and simple direction of the current prototype
• Buttons to be set further apart (i.e. more gutter/white space) for ease of access to controls on a touch-screen device
• Unique colour for each arrow/command (up in green, left in yellow, red in right, circle in orange, loop de loop in blue, rainbow arc in rainbow and trash in black)
• Add a button to change the colours settings.
• Replace ‘+’ button to ‘ADD’ in green 
• Replace trash can button to a black ‘X’ 

Program Section

• Having different options to build a sequence, such as drawing (similar to Sphero Edu), dragging and dropping, selection, and using controls similar to gaming controllers 
• Ability to highlight a section of code to copy or delete
• Ability to change the interface color
• Ability to track which part of the code is running (use of lights)
• Including speech to text and text input
• Having pop-up menus for available commands once a step is selected
• Hiding the steps when in the drag and drop mode 
• Liked seeing the text in the alternative program but would not code using that text
• One line of selected commands is easy to recognize and follow
• Alternative program (text version) was not useful to users with low literacy skills
• Wanted to build their program the way they did with the Code and Go Mouse (pressing arrow buttons in a sequence directly on the mouse’s back)
• Wanted to have the option to draw their sequence
• Be able to use touch to build their program on a iPad similar to the Blockly app
• Be able to use a physical board like Cubetto’s control panel

Viewing Area

• Adding a grid in the background and defining the scale of that grid (a map grid similar to Cubetto’s map.)
• Relabelling the “Viewing Area” to “Program Area” and “Run” button to “Start”
• Adding “Stop” and “Clear All” buttons to the set of available buttons 
• Campers found the triangle ‘boring’; replace with a stick figure with a smiley face or a firetruck - Ability to change the color of the triangle or change it to a character or avatar (“pick a character any character you want”) and provide a grid of avatars (e.g. stick figure with a smiley face and hat)-Be able to select their own avatar, which includes a silly monster as an option.
  
• Using an arrow instead of the triangle to better indicate the direction of the movement
• Define destinations on the Viewing Area, such as “North”, South”, “Wall” etc. to help building a sequence 
  
• Be able to add landmark items to the viewing area, such as mountains and treasures
• Be able to add background images to the viewing area, such as a forest background
• Include a picture of the connected robot (i.e. Dash) below the viewing area.
• Ability to hide or remove viewing area: a few campers did not use this viewing area because they preferred to see the robots moving with colours. 
• Ability to project the camera-view on large screen (following robot movements)

Alternative Access

• Ability to change language and select commands by voice.
• Auditory previews as the mouse hovers over an item/area on the interface
• Ensuring interface compatibility with access technologies, such as screen readers, mouse, keyboard, and braille keyboards
• Including display adjustments options (i.e. zooming in/out).
• Joystick, joystick, touch screen and a keyboard
  
• Eye tracking / Eye gaze
• Drag and drop 
• Voice commands
• Switch controls
• Kinesthetic movement of the head (to mirror the robot head).

• Updated the visual design to a more wireframy look. We decided to take a step back to avoid a visual representation that looks very polished and final. This will enable our co-designers to more comfortably play with the prototype and change its different components.
• Tried a new layout and added a vertical panel on the left to include a different range of actions- Inspired by Scratch UI
• Added a section to create custom actions. This section can be used to build custom actions as well as repeated patterns.
• Added a mobile view

• Tried a different layout
• Revised the "add step" flow
• Updated the icons and actions symbols 
• Changed the connector line between program steps
• Built a global option for showing and hiding different sections of the UI
• Adjusted the workflows based on the interactions in the current C2LC prototype

• Workflows don't match the current C2LC prototype
• Check boxes for show/hide actions or add and delete steps are too small and can't be easily targeted with eye gaze
• Make the "Example:" drop down menu more generic and move "drawing a square" under that menu and add more examples there
• The connector line between the program steps is problematic. The loop can be confusing for some learners
• Add function for repeated patterns