Paul Henry Smith
Product Designer

Improving Textbooks

Overview: Do students really prefer printed textbooks? Why?

User studies have repeatedly shown that many college students don’t like digital textbooks. In fact, students say they prefer to carry around a heavy, printed book because digital textbooks are too hard to navigate and use. The reasons students dislike digital textbooks vary, but all of them result in impeded learning and comprehension. 

We at Pearson wanted to know what was going on below the surface. After all, students are happy to use technology in their daily lives for all sorts of things. So, why were they avoiding digital textbooks?

The Process

We embraced a hybrid approach combining design thinking and lean UX to ensure that our designs were supported by user research and feedback before arriving at solutions. We started with a cross-functional design workshop to understand and address the problems, and to align internal advocacy around the solutions. 

After the workshop, we went through several sprints to prototype, test and release the improvements in a major re-design of Pearson’s higher education textbook reader apps.

My Roles

As senior product designer, my roles included:

  • Journey mapping

  • Designing solutions

  • Building prototypes

  • Designing UI

  • Working with dev on implementation/content strategy

The Team

The team included three UX designers, a visual designer, a UI designer, two UX researchers, four product managers, and two learning designers. Once the development sprints were under way, the team expanded to include engineering leads.

The Problems

Research showed fundamental problems

Before we began any design activities, our UX research group identified three key insights. When students use digital textbooks, they:

  1. did not have a good sense of their current location.

  2. found it hard to browse and scan the content.

  3. could not estimate how long a section would be.

We kept these insights at the forefront of our thinking throughout the design process to make sure we were actually addressing the users’ needs.

Design Workshop
A few of the student tasks we mapped.

A few of the student tasks we mapped.

Research review and journey mapping

We convened a group of UX designers, learning designers, product managers, UX researchers, and writers for a week-long design workshop. We started by reviewing all of the research, ensuring that we all understood the students' needs. Then, we created journey maps to identify tasks, touch points, pain points, and opportunities for each of the primary use cases we had identified.

Some of the needs identified in the workshop.

Some of the needs identified in the workshop.

Voting for the top user needs

Before getting into any questions of how we might solve users’ problems, we voted on the most compelling user needs. That gave us a shared focus before we began the design stage.

The parking lot full of good ideas.

The parking lot full of good ideas.

Setting aside issues for later

As we expected, many of the needs we had identified were not selected to address, but still, we did not want to lose them. So, we moved them to a parking lot to be recorded and re-evaluated as candidates for future sprints.

Designing the solutions

The entire workshop team participated in creating solutions, not just the designers. That allowed us to include a variety of ideas and opinions, and it generated a lot of ideas as well.

But even more than that, it was important that everyone created design solutions because, when it came to reviewing and prioritizing our concepts, all the ideas were evaluated equally. Each one of us experienced what it felt like to have an idea, explain or show it, and then to have it exposed it to thoughtful criticism.

Although there was a wide range of design skills in the room, there was a close consensus on what sorts of critiques were useful or valid. Including everyone in the process virtually eliminated critiques based solely on taste or authority. Thinking about and articulating why a solution should or should not be developed made for a much more fruitful process that everyone was excited to be a part of.

A small side benefit of this process is that non-designers get to walk in our shoes and see what kind of suggestions, comments, and critiques serves best to evaluate ideas. This helps enable better, clearer, more useful input into future design processes.

Workshop Results: What to design and what to test

The team identified two design opportunities to focus on in our upcoming design sprints:

  1. Indicating progress and location within a textbook

  2. Being able to scan content in an overview

Prototype and Test

UX design sprints

After the design workshop, our design sprints began. The strategy was to start small and iterate rapidly while testing with users to refine our solutions. We met daily to review designs and research results. Frequent testing gave us feedback that helped us avoid making assumptions about what users understood, liked, or needed.

“Sense of Place” – Understanding your location

This need is actually pervasive in almost all digital content experiences, and it's a really tough problem in general, not just in the world of textbooks. The issue is that many of the spatial cues we rely on in the real world to give us a sense of place are not present in digital experiences.

So, for a digital college textbook, with its hundreds of parts and non-linear approach to reading, the same basic need holds true. Having a “sense of place” reduces anxiety and allows students to focus on reading and learning.

Concept 1
“Nodes on a Line”
Making Textbooks More Effective

A familiar starting point

Inspired by the holes at the edge of a piece of spiral-bound notebook paper, I created what I thought was a clever way to show the number, relative length, and the names of sections of a textbook: emulate the torn edge of a piece of notebook paper in an abstract map.

Students evaluated paper prototypes and made suggestions to improve them.

Students evaluated paper prototypes and made suggestions to improve them.

Quickly test using paper sketches

My intention was for this solution to be unobtrusive and familiar—and therefore easy to understand.

So, we printed it out and tested it with college students. Using paper let us quickly get ideas in front of real users to learn what they thought. It also subtly gives students permission to treat the ideas as mutable, making testers perhaps a bit more forthcoming in their criticism and suggestions.

Interactive prototype incorporating what we learned from user testing.

Interactive prototype incorporating what we learned from user testing.

Interactive Prototype

We used what we learned from testing to build an interactive version. Each node on the left edge represented a section. Hovering over a node showed its title and other information, like the due date. Its minimal appearance would not be distracting or make the reading experience feel cluttered.

InVision Prototype

This concept didn’t work.

Students did not like this concept. In fact, few even understood it. To them it felt abstract, distracting, and even a bit random. Students did not understand that the distance between nodes reflected the length or size of a section of their book.

Here is why it didn’t work.

The core of the original problem is that when students have to keep a map of a digital textbook in their mind, they easily get confused, beleaguered, and frustrated. When there is no way to actually see a book overview, students have to try to remember where things are, not by some physical cue, which is what they like about printed books, but by a more taxing method: by associating it with the chapter name.

However, holding in mind that you are “somewhere near the end of section 4.2” requires some mental effort to recall the link between the visual memory and such a label. This solution didn’t reduce that effort at all.

In short, even if students might eventually understand how to use it, the “nodes on a line” solution was still be information-poor. And as such, it was scarcely an improvement over the simple scrollbar, with which it also competed for attention.

Lesson: Visual directness vs. abstraction.

First of all, having a clever solution is not important. If no one understood the reference to notebook paper, and if the abstract presentation of information actually caused more cognitive load, then there was no value in also being “delightful.”

In the students’ view, this concept was just unclear and didn’t work. It gave them no way to actually see what the content looked like, other than by clicking to open a chapter. In that sense, this solution was no better than the plain old table of contents that they already had available to them. Moreover, the fact that we presented them with a new abstraction to “figure out” simply traded one extraneous cognitive load for another.

Concept 2
“Quick View”
Quick view provided variable height, expandable thumbnails.

Quick view provided variable height, expandable thumbnails.

The next solution we designed was called the “quick view.” This gave students an indication of their current location, an overall sense of relative length and type of content, and provided a way to browse and scan the textbook as well. In short, the solution solved all of the problems identified as top priority in the workshop.

I chose to accurately represent the contents in scaled-down form because that was most intuitive and direct approach. However, unlike uniform-sized thumbnails you find in other applications, the key to this solution is that the various sizes of the thumbnails actually convey information: A long thumbnail instantly shows that a particular section has more content in it than a short thumbnail.

I also designed the behavior of the quick view to smoothly update the current location indicator as the user scrolled and navigated through the textbook. This gave continual visual reinforcement of the idea that the user’s current location was being reflected precisely on the thumbnails.


Interactive prototype exploring a way to indicate both current (blue) and most recent (red) locations.

Interactive prototype exploring a way to indicate both current (blue) and most recent (red) locations.

Interaction design

Before testing this concept, I wanted to be sure the relationship between Quick View and the problem we were addressing would be clear. A paper prototype would not suffice for this. Fortunately, prototyping tools like Principe and Framer allow for quick, yet sophisticated interactions and UI elements to be built for testing.

I created Principle mockups showing how the main content and Quick View could relate to each other, and how the current location could be indicated. Early versions validated that students understood what was being indicated and how the thumbnails related to the main content pane.

Students intuitively understood this solution.

Students responded enthusiastically to this design and felt that this offered a novel solution to key pain points in digital reading. I created an interactive prototype in Principle that students could run on their own computers during the testing.

During testing we saw that students wanted to actually read the content in the thumbnails before clicking to navigate. So, I devised a way for students to zoom in just enough to make out headers, certain graphics and labels, but not quite enough to actually read the body copy.

It was important to keep it clear that the entire view contained a main pane and a secondary one, and not two copies of the same material, vying for prominence. Yet, the need to be able to actually read headings in the thumbnails themselves made them that much more useful and precise as indicators.

Simply translating the web approach to mobile did not work.

Simply translating the web approach to mobile did not work.

Mobile prototype

What is the relationship between Quick View and content?

My first approach to creating a mobile version of Quick View was to simply replicate the UI and interaction I had created for the web version. One problem with that approach is that the width causes the main window to hide the right side of its content. Additionally, the Quick View itself, is too narow. That was a problem when we tested the web version—students wanted to be able to read headers in the strip itself.

A different approach for mobile was needed.


Quick View on iPhone showing a collapsible list of sections.

A better mobile solution


Instead of a side panel, Quick View on iOS and Android is launched on top of the current view as a full-screen modal. Unique to the mobile version is a new ability to collapse Quick View to show only the textual labels, without thumbnails. The reason for this feature (shown in the video) is to allow readers to quickly jump to a particular section instead of having to hurriedly swipe up or down.

We observed too much frantic scrolling during testing when students wanted to get to a far away section of the book. This “mini table of contents” provides a way to alleviate that problem.

Launch & Beyond
Final version of Quick View

Final version of Quick View

Percentage of textbook users who prefer digital instead of print

Among app users who had the option of using a printed version of their textbook.

8%
Before the re-design
48%
After the re-design

A successful launch

Providing developers with options and alternate solutions

Like many design projects, this one also risked losing important information in the translation between design and implementation. No matter how extensive annotations are, no matter how clear the UI prototypes seem to be, developers almost always have questions.

I worked closely with our engineering lead and UI developers at each step to ensure that implementation came as close to the intended experience as possible. To their great credit, our team persisted through several points where it looked as if we had reached a technical roadblock. I had proposed fallback, scaled-down design modifications to keep things moving forward, but they took the initiative and solved these problems, allowing us to execute the agreed on design.

That was absolutely the right thing to do, because, as we had learned in our research, there is a tipping point for this kind of new feature. If it is not quite working as intended, users may find it baffling and even annoying. But, if the design is clear, simple and familiar, students can intuitively grasp what it is for, and take to it quite naturally. Fortunately, that is exactly what the development team did. Quick View did not have to be perfect, but it did have to be understood and useful in the very first version.

Soon after its release, Quick View became the second-most used feature.

Design lesson: Trust the power of seeing.

The most important lesson for me as a designer was to trust the power of seeing. I had assumed that students focusing on a textbook would not want to be distracted by anything visual. That initially pushed me toward creating an abstract, partially hidden UI (the “nodes on a line” concept).

But the real problem we had unearthed was that students were not able to form a mental model of their textbook.

Therefore, it was a mistake to give them yet another element (an abstract line with dots on it) and expect students to be able to understand its relationship to the corresponding textbook. The reason they could not do that was because they had no mental model of the textbook’s structure and content to begin with.

Another thing I learned was that dividing content into variable-height thumbnails you could see at the same time was a very good idea. So many ebook apps show thumbnails as all the same size. Why do they do that? Perhaps it is simply easier. And it may make sense in a slide presentation app, like PowerPoint or Keynote, where all the slides actually will be the same size. But in a textbook with widely varying section lengths, the varying size of thumbnails can actually carry important meaning.

As soon as we presented testers with thumbnails that were different sizes, they could immediately form a picture of the book or chapter in their minds. They did not have to do arithmetic to determine how long a section was, or count how many thumbnails were in this or that section, or remember where a certain image was. They could simply see a direct visual relationships: bigger or smaller.

It is better to avoid abstraction whenever possible and give people direct, orderly, visual access to the information they need. If the basics of visual design (grouping, comparison, color) help to convey the information, the solution will be even better.

Are there better solutions?

When I stepped back to look at Quick View, I realized that it still carried vestiges of the print paradigm with it that limited its effectiveness. For example, all of the content shown in Quick View is always presented as immutable. It never changes, except to reflow to match the viewport dimensions.

It occurred to me that the notion of “flipping through” works well in a printed book because printed books simply do not have the powerful tools we are used to using in the digital world. Think of Google. You used to have to “flip through” search results to find, say, an image you were looking for. But then Google offered a filter to show images only.

How might that work in a textbook? And could we take advantage of those already-learned expectations and search patterns?

The experience of finding what you're looking for can be substantially improved by better search.

Here are some wireframe explorations that offer students ways to search and explore content by offering adaptability and filtering:

  • type (text, image, video, quiz, instructor note)

  • location (in the book, in my notes, glossary)

  • recency (which chapters are coming up in the syllabus, and which have we already covered)

  • relevance (raise visibility of content related to the syllabus)

  • frequency (make prominent search matches I have followed before from the same query)

  • social (which other students in my class, school, the world, have searched for this, highlighted/bookmarked that?)

More powerful search capabilities for digital textbooks, including filtering, grouping.

More powerful search capabilities for digital textbooks, including filtering, grouping.

Going beyond search

Different reading modes

A digital textbook could be much more than a printed book could ever be. It can morph to fit what we need or want in the moment. We can imagine (and create) a textbook that can…

  • Show only the material I’ve highlighted.

  • Hide chapters not on the syllabus.

  • Hide material I’ve already been tested on.

  • Show what’s likely to be on tomorrow's test.

  • Show what most of my classmates are studying now.

  • Show what has been highlighted by the best performing students.

  • Show material others in my class/my instructor find useful.

There are many more ways to improve reading, studying, and learning with digital textbooks. Many of these are now feasible because the underlying content has become malleable (no longer PDF), because machine learning, or adaptability, have become possible, and because social/sharing behaviors and patterns that users understand and use have emerged.