Integer Chips

I made the following key design decisions about chips.

• Colors: To be consistent with the physical tool, positive chips are yellow, and negative chips are red.
• Labels: To account for color blindness, "+" and "–" are labeled.
• Borders: Borders are added to provide extra contrast.
• States: For various interactions, different states are created.
• Shadows: Drag states implemented shadows to create a floating effect.

Having a Grid

I had 2 distinct designs for the workspace: setting a grid structure or providing students with a freeform space. After discussing with the team, I chose the grid-based approach.

• Grid puts less burden on developers.
• Grid is much easier for students to interact.
• Grid allows us to set a limit of only 20 chips in the workspace.

Don't restrict chip organization within the grid.

An important insight we gained was that students have different preferences for chip placement and organization in the workspace. Therefore, we shouldn't restrict how students can arrange chips within the grid.

It's tricky because the chip bank design directly affects how users add chips to the workspace. We faced 2 design options.

• Its advantages outweigh the weaknesses.
• Accessibility could be challenging, but it's achievable.
• The action bar has many usability issues. There are plans to revamp it soon, which could impact this project.

Adding Chips

• To indicate drop zones, highlights are added in the workspace.
• Upon hovering a chip over a drop zone, a darker highlight would signify the chip's placement.
• Users can add a single chip or a zero pair.*

Removing Chips

The team discussed various methods for removing a chip from the workspace. Ultimately, we settled on the following design, as it closely mirrors the experience of using physical Integer Chips.

• If a chip is dropped outside the workspace, it will be removed. This means moving a chip back to the chip bank will also remove it.
• Chips will turn grey to indicate potential removal.

Canceling Zero Pairs

• To cancel a zero pair, students can choose to individually remove a positive chip and a negative chip.
• Students can also overlay a positive chip with a negative chip to cancel them.

The trash bin is included due to a request from math specialists. Using the trash bin is the recommended way of solving integer subtraction problems. 

I designed 2 types of error messages to provide feedback and hints.

1. Immediate Feedback: If a student attempts an unsupported action, they will receive immediate feedback. For example, if a student tries to overlay 2 positive chips, the message would be "Those chips don’t form a zero pair."
2. Answer Submission: ALEKS will check if the submitted answer is correct. If the answer is incorrect, the error message will give students a hint.

We conducted user testing with 7 middle school students and their teachers. We gathered 2 insights.

1. Trash Bin: All students were confused by the trash bin. It seemed using trash bin was not the standardized way of teaching Integer Chips.
2. Adding Zero Pairs: Only 2 students understood the intended purpose of adding zero pairs, but they still find this feature helpful. Many of them used it as a short cut to add multiple chips at once.

Hence, we decided to remove the trash bin but keep the ability of adding zero pairs.

Making Drag & Drop Accessible

There are 3 popular approaches for making drag & drop accessible.

1. Provide keyboard users a more accessible interaction, such as clicking buttons.
2. Implement a menu that includes all the drop zone options.
3. Use Space/Enter + arrow keys as a replacement for drag & drop.

I chose the third option.

• Disabled users, especially users with visual impairments, rely more heavily on spatial cues than nondisabled users. Thus, a simplified interaction won't satisfy their need.
• If we implement a menu, it would entail more than 20 options to encompass all potential drop zones. Moreover, for sighted keyboard users, this wouldn't offer an optimal experience.
• Space/Enter + arrow keys is a relatively standard drop & drop accessible alternative. Although it takes effort to implement, it doesn't have any huge drawbacks.

Tab Areas

1. Area 1: Chip Bank
2. Area 2: Workspace
3. Area 3: Undo Button
4. Area 4: Restart Button

Visual is just the tip of the accessibility iceberg.

This project immersed me in the complex world of accessible design. Previously, I view software accessibility as simply ensuring the success delivery of visual information. Now, I understand I'm responsible of making information consumable for every user, regardless of their unique circumstances. Some only reply on keyboard to navigate, others zoom their screens up to 400%, while some uses screen readers, I must account for all these scenarios during the design process.

Admittedly, my initial approach often centers on sighted users. This project highlighted that tendency. Even though accessibility was factored in many design decisions, it was often addressed after all other considerations. Accessibility was compromised because the team's prioritization is to ensure a good experience for sighted users. This makes accessibility feels like an afterthought. Could the process begin by designing primarily for those reliant on assistive technologies, followed by considerations for sighted users? Would this lead me to create better designs for everyone? I'm inclined to explore this approach in future projects.