Drag&DropCover.png

Drag & Drop

1-LaptopDrag&Drop-01.png

The goal

Drag & Drop is a version of Lynnette (algebra tutoring software) which was created with the intention of being a quicker and more entertaining alternative to the standard interface. My job is to improve the interface as much as possible and prepare for upcoming user testing. This project is currently in progress!

The users

Middle school students who enjoy and and don’t enjoy algebra are the primary users. The tutor is used in a computer lab setting during school, so the teacher is also a user.

The team

I am working at CMU’s Human Computer Interaction Institute on an interdisciplinary team under the direction of Vincent Aleven and Jonathan Sewall.

 

Process

Since this project is ongoing, there are no final deliverables yet. A key challenge throughout this process is including usability principles without doing students’ algebra for them.

Drag&Drop

This is the current prototype, implemented by an engineer, that I have been tasked with improving.

Given the number of hard transitions the current interface has, I wanted to first map out all the user inputs as a first step for smoother feedback and a better user experience. There were many opportunities for animations, but I didn’t want to significantly slow down a student’s problem solving process.

Operation Animations

The first interaction I focused on was with mathematical operations. I wanted to visually show the operation being applied to both sides in order to be algebraically accurate, while keeping the animation as simple as possible.

Subtraction Iteration #1: Slider

My first iteration felt as though the white input boxes were created independently from the subtraction operation, so I wasn’t satisfied.

The initial interface used a red flash to indicate an incorrect answer. I felt adding a “check” or an “x” for correct and incorrect answers was a necessity to avoid confusion and improve the interaction’s accessibility.

img005.jpg

Subtraction Iteration #2: Bottom-Up

Although this clearly demonstrated that an operation had been applied to both sides, the combination of horizontal and vertical movement felt quite busy.

Subtraction Iteration #3: Fade-In

The slower fading animation was smoother than having no transition, but lead to a confusing in-between moment where the user sees duplicate numbers.

Subtraction Iteration #4: Insider Slide

Figuring out a way to visually transform the blue mathematical operation tile into a white input box was the key to my final iteration.

While this animation hasn’t been finalized yet, I believe it accurately represents the mathematical operation being applied to both sides without taking too much time.

Division: Insider Slide

The “Insider Slide” animation also works for division and multiplication.

Multiplication: Insider Slide

Errors

In the problem: “9 = 4 + x”, a student subtracting “4” from the left side is correct, but only if they also subtract “4” from the other side too. Finding the right moment to assess whether or not the student has forgotten to apply the operation to both sides and provide feedback at that moment is crucial.

Method #1

To avoid ambiguity, one method is to automatically mark any attempt to type into an input box as incorrect if the student hasn’t applied the same operation to the other side yet.

Method #2

This method is more explicit in showing students the nature of their error, but relies on a pop-up. An ideal solution visually represents this type of error as being correct, but too early in the problem solving process.

Method #3

This method has the danger of over-scaffolding what next step the user should be taking. However, the feedback for this error remains visible, in the form of the greyed out “9” and “4”, which is an improvement over the first 2 methods.

Interface Buttons

I initially wanted to create a “back” button, in accordance with Nielson’s UI Principles, but based on the back end of the tutor, it’s quite difficult to implement. Instead I placed a “restart” button as Drag & Drop problems are relatively simple.

While considering sizing and placement of a hint button, I wanted it to be easily accessible without being in the way of the main equation.

When a user became stuck, they would often drag the same mathematical operation which didn’t work or try different operations. Thus, I wanted the hint button in close proximity to the operations while clearly being a different shape than the operation tiles, implying it’s different functionality.

Web 1920 – 22.png

Conclusion

User tests at schools will be occurring soon! More updates to this page will be coming.