Finger Tracking in a Digital Reading Experience
Reframing our approach for a core interaction in our digital books, in order to minimize friction and maximize learning.
Introduction
Company
Age of Learning
Product
My Reading Academy
Role
Lead Designer
Skills
interaction design, UX design, design systems, cross-platform design, prototyping, research analysis
Tools
Figma & Unity
My Reading Academy is a cross-platform app which teaches students in Pre-K to 2nd Grade how to read. The program includes effective educational content in the form of fun games, engaging videos, and interactive books. Its adaptive system personalizes the learning experience for each student in real time, delivering content and scaffolding to students that are curated for their individual needs.
TLDR
Delivering proven classroom techniques through digital experiences is at the core of what we do at Age of Learning. But what happens when a particular methodology does not work well in a digital context? The following is a story in navigating that challenge.
“Problems that remain persistently insoluble should always be suspected as questions asked in the wrong way.”
- Alan W. Watts
Project Context
Classroom Technique vs Original Feature
Some of the book experiences include a “drag-to-highlight” slider, which requires students to highlight a sentence with their finger or cursor as they read out loud, emulating a technique commonly used in classrooms.
Sliding their finger or a pointer tool under the words help a young reader track along words and sentences when reading.
In our digital books, the drag-to-highlight slider highlights the sentence as a student holds and drags it across the page.
Because previous usability tests had shown that our students had a hard time interacting with this slider, I flagged this as a high priority item to work on before our upcoming release to schools.
Design Constraints
When first diving into the project, I wanted to know what the original intent for slider was, and spoke to our curriculum specialists and PMs about it’s original goals:
To help a young reader track along a word and or sentence in our ‘Read by Myself’ books.
To have certainty that they’ve read the entire page and measure their reading pace.
To prevent students from “cheating” the book by locking the next page until the student has dragged the slider through all the text, ensuring that they do not move forward without reading.
Stakeholders reiterated that the new design of the feature should still accomplish these same goals.
Understand & Empathize
Reviewing Usability Tests
Next, I reviewed the previous usability reports and recordings to get a better idea of what kind of issues we were seeing.
Students were having a hard time gripping the slider and lost track of it many times as they attempted to slide it across the screen. In some cases, the feature would slow adept readers down, frustrating them in the process.
Additionally, it seemed like the challenge of using the slider was also affecting the way students were practicing reading out loud. When learning how to read, young students slowly blend the sounds that make up a word. (For example, the word “mouse" would be read like “muh..ow..sss) With each attempt at re-gripping the slider students also restarted sounding out the words, which resulted in the entire sentence being a read in a very disjointed manner. This is not an ideal way to practice reading.
What could be the cause of this issue?
Now that I knew what the issue is, I wanted to look at why it might be happening and looked at our user profiles that are differentiated by age. Because children vary so much developmentally by year, I always make sure I have an intimate understanding of each age group that we are targeting for a particular experience. Let’s take a look at our users for our ‘Read By Myself’ Books.
Kindergarten-1st Grade Students
🎯 Goals
Learning & practicing how to read out loud. Their goal in this experience is to read through an assigned book in the app.
🪴 Developmental Context
Students are not yet fluent at reading in this age group. They are also still developing their fine motor skills when it comes to interacting with their hands.
🌟 Aspirations & Behaviors
Kids in this age group are starting to become more independent, and like feeling that they’ve succeeded in something. Not suprisingly, they also like to show off their knowledge or abilities.
The Realization
When examining our user profiles for this project, it became apparent how much bigger this was than just a simple interaction issue.
Reading fluently involves coordinating letter/sound recognition with meaning as coherent pieces of information. Since students are not yet fluent, this often results in skipping letters, words, or even lines during sincere attempts at reading. Students are inherently carrying quite a bit of cognitive load in this experience.
Because of their lack of fine motor skills, drag mechanics are harder for this age group to perform, especially over long distances. Other studies our team has conducted have shown that this becomes increasingly harder on devices with trackpads. This was especially relevant as we were focusing on selling to school districts, where we’ve seen a dramatic spike in the use of Chromebooks in recent months.
We were asking for too much from our students to coordinate both these skills at the same time, by making an already challenging experience even more difficult.
Put yourself in the reader’s shoes: How smoothly would your eyes look through all this text? Now read this while patting and rubbing your tummy!
Defining the Problem
A feature that was meant to act as the training wheels for the reading experience, in reality was so unusable that it got in the way of the most important goal of practicing reading. Further more, it created unnecessary frustration for our struggling and skilled readers alike and undermines their desires to succeed in a task.
The Challenge
How might we redesign the drag-to-highlight slider to be more user-friendly so students can focus on practicing reading out loud?
Ideation
Initial Concepts
Keeping the same goals as the original slider in mind, I explored different designs that avoided dragging an object across the screen, but still signaled to the book that a student was actually reading.
It’s important to note that our team explored integrating speech tech into our system, but decided that it was not the right time to do so.
Some of these initial concepts, while easier to perform than the original feature, still had issues of their own.
Every design has its tradeoffs - but even after exploring multiple different concepts and brainstorming with other teammates, not one felt right to move forward with.
With no strong designs emerging, I had to ask myself a few questions:
Why did none of the designs feel right?
Forcing students input their reading pace still felt cumbersome to the primary goal of practicing reading out loud.
Can we even accurately measure a student’s reading pace without speech or eye-tracking technology?
It seemed that any method would be an inaccurate approximation on how fast a student is actually reading, or if they even are attempting to read.
Can we even design a way to ensure that a student is truly reading the book, and not cheating?
It’s unlikely to be able to fully prevent cheating but we may be able to find ways to discourage that behavior.
It seemed to me that the original design wasn’t the issue…it was the requirements that seemed to conflict with our educational goals.
I felt as if I was at a dead end. But a dead end just means we need to find a new direction.
Redefining the Problem
If there isn’t a way to be accurate in measuring reading pace for a student, then at least, whatever design we do implement should be more beneficial than cumbersome.
We don’t want to add any more cognitive load for a student is trying to learn how to read out loud and need to support this practice as much as much as we can.
The *New* Challenge
How might we encourage the behavior of reading out loud, and discourage the behavior of cheating a book?
Proposed Solutions
By reframing my approach to this task, I was more fruitful in designing stronger solutions for the problem at hand.
The following are the concepts that I proposed to our team and stakeholders.
Proposal 01: Leveraging Existing Book Tutorials
We already have videos that model to our students how to finger track while reading out loud before they begin the book. We can enhance this tutorial by teaching students that they could use their own fingers or cursors as a tool as they’re reading the book themselves.
Additionally we can add VO reminders to read out loud to encourage students again mid-book.
Our activities often have learning videos that precede the book experience.
Some books have mechanical tutorials typically on the first page.
Proposal 02: Custom Cursor
For students using mouse or trackpads, we can have their cursor turn into a finger pointer when it is underneath the word. Students can more freely move their cursor compared to the original drag gesture since it does not involve holding and dragging an object across the screen. This way the cursor can still serve as a tool, but is not a barrier to progressing in the book.
The finger pointer does a better job at modeling the technique than using the device’s native cursor, and having it appear only when it is under the words (along with the previous tutorials) can help communicate its intent.
Proposal 03: Timed Threshold
In this proposal, the next page button has a time associated with how long it takes for a fast reader to read the page. If it’s tapped before then, it will trigger a lock on the page and VO that says “Take your time. Read every sentence before going to the next page. Try again!”
A student that wants to skip pages is motivated by wanting to move on quickly. Our hypothesis is that if doing so actually makes the experience longer, then a student might be discouraged from trying to move forward too soon.
This design can still limit cheating by preventing a user from spamming the next button to finish the book, and gives us an opportunity to teach the kids to read first, then move forward.
Timing of the VO was determined by measuring how fast a fluent reader could read the page out loud. We approximated a shorter time span for each page to lower the likelihood that a reader that was actually reading out loud did not get caught by the VO & page lock.
Asking your stakeholders to reconsider requirements is not an easy task, but with these proposals in my arsenal, I was able to convince our stakeholders to reevaluate the original requirements of forcing a student to input their reading pace for the sake of a better learning experience.
Rather than trade a problem for another problem, changing our perspective resulted in effective ways of approaching the usability concerns that also aligned better with our main goals as an educational app.
Validation & Next Steps
Initial Feedback
Although a formal user test for this feature is slated for a future date, we were able to observe some users go through the new experience in a classroom setting. With the removal of the slider, users were no longer reading in a disjointed manner. We found that the design was successful in teaching students that they need to be reading out loud and taking their time with each page. Although this was promising, we still need to evaluate the feature closely to determine its impact on the overall book reading experience.
Next Steps
When it is time to evaluate the designs, the following is how we plan to conduct our studies to determine whether the design met it goals for encouraging students to read out loud, as well as supporting our high-level goals as an educational app:
Observe differences in finger tracking for desktop and mobile users - Do mobile users use their fingers? Do desktop users find the cursor helpful?
Do we see that kids are practicing reading out loud?
How do students react to the VO prompt when attempting to move on too quickly?
Do activity cancel rates improve or worsen?