Design for Readability
A conversation with Nick Lum of BeeLine Reader
BeeLine Reader uses a cognitive visual trick of an eye-guiding color gradient to pull your eyes from one line to the next, increasing reading speed and enhancing focus. To experience it, click here. I spoke with it’s creator, Nick Lum, who explained how it works.
How did you get the idea for the gradient effect?
When I was in college, I came up with this idea. The idea was not actually, “Let’s use a gradient.” The key idea is the continuity of color between the end of one line and the beginning of the next one, which pulls your eye to the correct spot on the page when you’re making a line transition. The gradient is a necessary byproduct of that.
“This is along those lines of imagining how you can surpass books, as opposed to just mimic the book interface.”
We could have achieved this by having the first half of a line of text in one color and the second half of the line in a different color, but it would be very distracting to read that way. So the gradient is a byproduct of desiring color continuity across subsequent lines, while simultaneously creating color discontinuity from the end of line one to the beginning of line one (to prevent line repeating), and the end of line one to the beginning line three (to prevent line skipping). So, to achieve the necessary continuity, without having a distracting discontinuity mid-line, we use a gradient that makes this possible.
Nick Lum, founder of BeeLine Reader
The notion that this could make reading on screen easier was not based on prior research, just an intuition. I realized that reading has shifted from paper to screen, but the user interface for reading has remained basically the same. That is, the screen of an ebook reader has been designed to mimic what a paper book looks like. In fact, until recently you could even find some newspapers whose websites displayed articles in multi-column view—even though this forces the reader to scroll inefficiently in every direction. Only in recent years have we added different color backgrounds, night mode options, and other novel enhancements. My goal in creating BeeLine was along these lines—thinking about how we can create a digital reading experience that surpasses books, instead of just mimicking them.
Hear about upcoming conversations:
Is there a cognitive basis for how the color gradients work?
When your brain processes a visual scene, the first thing it assesses is color. This is followed by shape and motion. But color is the very first thing. Because your brain decodes color so quickly, it is an efficient way to send a signal to your brain. That’s why stop signs are bright red—we can easily recognize them, even out of the corner of our eye, and can take the appropriate action very quickly. We use the same concept to help the reader make quick, effortless, and accurate line transitions.
This might seem like a trivial task, and not necessarily one that ripe for optimization. But it turns out that when you move your eyes from the right side of the page to the left side of the page, it may feel like you’ve made one smooth motion, but in most cases you’re actually making multiple eye movements. As you pull your eyes across the page, your eyes often overshoot or undershoot the right location, and you have to make “corrective saccades” to get to the right place. Having color as a guidepost makes these line transitions easier, which can reduce the strain on working memory and therefore lessen the overall cognitive load associated with reading.
Regular text
BeeLine version
When you move from one line to the next, one thing that your brain does is determine the likelihood that you’ve found the right line. For example, if the last word on a line is “filet” and you move your eyes to a line that starts with “mignon,” then your brain will be fairly confident that you’re in the right place. On the other hand, if you land on a line that starts “green,” then you’ll realize that you’re likely not on the correct line. Holding the last word or two in your head while you make this transition increases the working memory demands of reading. With color as a guidepost, your brain can let go of this extra task, while remaining confident that you’ll get to the right line.
This is especially important on mobile, for a couple of reasons. First, mobile screens are much narrower than computer screens. So a paragraph that would have been four lines on a computer monitor will end up as eight or nine on a smartphone. This means you’re making double the number of line transitions, with double the impact on your working memory. Furthermore, we’re often in motion when we’re reading on a mobile device, and motion creates challenges for visual tracking (both along a line, and from one line to the next). Compounding this tracking challenge: the size of text is much smaller on mobile than on a computer.
Does this have application in print?
The technique works on both screen and paper, but if you are printing, it’s no longer dynamic. Printed materials are tied to a single color scheme instead of giving the reader options, so it’s a little clunky in that regard. Nonetheless, we have been contacted by a major printer manufacturer that is interested in integrating our technology into their printers as a speed reading print mode, so we may be partnering with them in the print media space. We’ve been contacted by people who want to print their book formatted with the gradient. So it does work printed out, but it’s not as seamless, because it’s no longer dynamic.
Is there anything particular about the BeeLine Reader default color schemes that makes them work best?
That is the default “bright” color scheme, which uses bright blue and bright red. This combination is the most popular, and it’s used by about half of our users. The other half of our users use other presets, or create their own. Other popular choices are blue and purple, and dark red and blue. I’ve found personally, as my devices change, my preferences for which color scheme I use changes. For example, I moved from an older laptop to a newer laptop. The screen of the newer laptop is much brighter, and I find that I use the bright color scheme less now. Age is also a factor. People who are older tend to develop cataracts, which is a yellowing on the eye, and when you have cataracts removed, you realize “wow, the world is a slightly different color now.” People who are older tend to use our brighter color schemes. We let users choose from presets, and they can also create their own, so its infinitely customizable.
Are there aesthetics at play? Or is the way the colors come together purely functional?
“What we have developed is a very helpful assistive technology for people with certain types of learning disabilities or vision impairment. ”
I remember when we first became popular, it was being tweeted about, and there was a tweet from someone in France, that said (in french) “It's ugly, but it works.” I think for many people, this sums up what we do. Other people find it to be very nice looking. I don’t know if they just like the functionality so much that it overcomes any aesthetic challenges, but it is something that is functional first.
Are there any groups of people that get more out of this effect than others?
This was originally designed as a speed reading tool. It was designed for people who are reading at least at the high school level, and who spend a lot of time reading on screen. It was designed as a way to optimize that experience, and make people more efficient. After we launched into that market, we got good traction there, but we also found out that what we have developed is a very helpful assistive technology for people with certain types of learning disabilities or vision impairments.
That was quite a surprise to us, since it wasn’t designed as an assistive technology. But it turns out that many people have reading difficulties that our approach dramatically ameliorates. So BeeLine Reader is very popular among people with dyslexia, ADHD, vision impairment, and traumatic brain injury (which can cause impairment specifically related to visual tracking). Our approach has been adopted by Bookshare, the world’s largest accessible ebook library, and we recently received an award from the United Nations for our work in disability inclusion.
We have learned a great deal about how this new way of formatting text improves the lives of people with disabilities. For example, traumatic brain injuries are surprisingly common (they include stroke, sports injuries, and bike/car accidents), and they often create enormous difficulties with reading. In some ways, the TBI-related reading challenge is even more burdensome than dyslexia. This is because a person who has grown up with dyslexia has found ways to cope with their reading difficulties—and they probably don’t work a job that requires tons of reading. But someone who was in a car accident might be a lawyer, consultant, or other professional who reads all day long. So a TBI-induced reading disability creates a different type of challenge in their life. It is amazing to hear from people with TBI things like “I haven’t been able to read this easily since my injury,” because it shows how we are helping get people back on track. And the best part is, our approach is also popular among non-disabled readers also, so it’s more of an inclusive design strategy than a pure assistive technology.
To learn more, visit www.beelinereader.com