Case study: The future of audiobooks

Do audiobook users enjoy the nostalgic aspects of owning a book and watching it age?

Anushka Jain
Bootcamp
9 min readJan 10, 2021

--

A mobile sitting on an open magazine. The mobile screen flashes a screen from an audiobook app. The name of the app is aloud.
Aloud Audiobooks — UI/UX Case Study

I recently listened to my first audiobook, “My Gita” by Devdutt Patnaik. I later found out that many readers felt listening to audiobooks is like cheating. But, a love of reading shouldn’t have parameters or rules as to what type of reading “counts.” I have found an advantageous common ground in my reading life with audiobooks and reading.

Back in the 1800s, the household of the great Bangla novelist Bankim Chandra Chattopadhyay would host a Jatra in the courtyard where members of the family would be gathered. He read out Durgeshnandini (1865), his first novel, to such a gathering of people. This might be an example of India’s first audiobook!

Today, audiobooks and podcasting are the fastest-growing audio segments on mobile. It’s not just the convenience that has seduced readers — the best narrations are a joy in themselves. Then why do people feel guilty about listening to them? I wanted to dig deeper into this problem.

I read an article on the web that contradicts this guilty feeling. Adding to that is an excerpt from Austin NPR’s Two Guys on Your Head, where Dr Art Markman and Dr Bob Duke said, “On audiobooks: “Because you can’t go back and reread something, you’re much more likely to do a better job of trying to extract the gist of what someone meant when you’re hearing them than when you’re reading”

But what if you don’t extract the gist of what someone meant at the first go, and need to revisit some sections of the book? How can audiobooks solve this issue?

Creating Better Experiences

“Being read to is a really intimate and comforting thing, a human connection at a time(2020) when a lot of people are feeling isolated from one another.”

To make audiobook experiences even better, I started looking for differences between the usual books and audiobooks. Reading a physical book and listening to an audiobook are two paths that lead to the same destination. Each creates differing experiences and memories- but I wanted to make audiobooks feel more like their hard copies, if not better. I felt this would lessen the uncalled guilt of audiobook users.

A small research

For the first part of my research, I used Audible as a reference app to understand audiobook users' major pain-points. I listened to audiobooks and tried to use all the features of the app. Then, I asked 15+ friends their views about audiobooks - if they had listened to them and how was their experience. From all this, I found some interesting results:

  1. Most of them had never tried Audiobooks. One of them even said that she likes listening to music and reading books. Listening to books would make things monotonous and reading> listening. Users think of audiobooks to be similar to music when it should be analogous to books.
  2. One of them told me that Audiobooks are suitable just for fiction or stories. It isn’t a convenient option for non-fiction, because they require more attention to details.
  3. Another felt that if you stumble over words or accents sometimes, you have to go on anyway because there’s no other way to figure out what the narrator said. Users face language and accent issues while listening to audiobooks leading to a sense of discomfort.
  4. Illustrations play an essential part in educational and non-fiction books, a popular genre among students. Audiobooks do not provide justice in this area.
  5. Navigation through an audiobook is a huge pain point, especially when you’re trying to write a book review using them. Also, users cannot highlight excerpts or take notes from audiobooks. It becomes impossible to visit important extracts of the book later.

I felt some pieces were missing from audiobook experiences on mobile. But, I did not redesign any audiobook app, mainly because of two reasons.

  1. Even though I did a little research on the Audible app, I didn’t wholly know its agenda, target audience, or plans. For example- what if Amazon decides to merge Kindle and Audible to launch a brand new product!
  2. What I present before you might not be the best financial approach to the problem. I’ve assumed that I have the copyrights of the ebook and the audiobook for my solution, which is hypothetical today.

Another point of view

Audiobook services are offered by many apps like- Audible, Google Play Books and Spotify. They have almost the same interface and features. The audiobook's main interface is like a music player.

I felt the audiobook’s main screen should be different, and feel more like a book. So, I looked at this through another point of view and discarded the usual interface to design one on my own.

After a LOT of iterations, I finally came to a design, which, I feel, is appropriate for audiobooks.

The main screen has subtitles of the audiobook, with the current audio marked in bold.
Audiobook Main Screen

I’m sure you’ve had an experience where someone says something and you’re not really listening. Then you can tell from their intonation that they’ve stopped talking and asked you a question.

You’re like- oh, shit, I totally was not listening to this person - and you say, ‘I’m sorry, what?’

At that moment where you say, ‘I’m sorry, what?’ — you’re able to recover what was said. You did not listen. Yet you still heard, and there is a wisp of a memory of that, which is still banging around inside your mind.

In the time it takes you to say, ‘I’m sorry, what?’ — you are consulting the little memory store, your echoic memory, and you get the last second or two of what was said. Daniel Willingham compared this to the visual system’s eye regressions: In both mental processes, your mind ticks back to what it just consumed, to double-check the meaning. But, sometimes it’s not that simple. You might not retrieve what was said, and consequently, miss out listening to, in our case, the audiobook further. To solve this, I decided to add subtitles to audiobooks to help users with echoic memory issues, language and accent.

This is just an assistive feature. The user can look at the subtitles whenever required, and forget about it the rest of the times. The sentence being narrated is highlighted in bold. Also, the user can scroll to navigate through the book.

Hamburger menu which shows configurational settings and the contents of the book
The Hamburger menu- It lets you navigate through the book and track your progress. You can also set your book configuration preferences here.

The configuration settings are moved inside a hamburger menu, as it is a secondary feature and user would change settings deliberately by choice. So, increasing a step here wouldn’t affect the natural flow of the user.

Why isn’t the text hidden?

While thinking of relevant solutions, I came across some apps that let you read and listen to news articles, podcasts, etc. They use different screens for these actions- a player screen, and a reader screen. The text is essentially hidden, and has to be discovered by the user.

I decided to show the text on the main screen because hiding text in another screen doesn't serve any useful purpose but rather adds complexity. Some users won't even know about this feature if it’s well-hidden.

Along with this, I introduced some “text features” to justify my choice.

Text Features

  1. The first issue I came across while listening to audiobooks was that I could not highlight text in any form like I can in a typical book. So, I attached a tooltip which activates on long-pressing any word. The tooltip provides you with four options- highlight/add to the dictionary, search on the web, copy and share text.
Selected text in pink color and a tooltip with 4 options-a search button(search on web), highlight, copy and share.
Text Selection and attached tooltip

2. The users can play the audiobook from any sentence, by dragging it from left to right. This feature helps the user to listen to small excerpts of the audiobook. Here is a small video explaining this interaction-

GIF showing how a user can play the audiobook from any sentence by dragging it from left to right.
Playing the text

Searching an audiobook

Sometimes, while listening to the book, you might want to go back to a specific part, to listen again, but you don’t know it’s the exact location. You might then need something like a Search bar in this situation.

The Search icon is at the top right corner of the screen. The video below explains how this feature works:

GIF explaining how to search through the audiobook by tapping on the search button and typing the desired word.
Searching through an audiobook

Illustrations and Audiobooks

85% of educational and non-fiction books are illustrated to elaborate and clarify the meaning of the text. Sadly, the lack of illustrations in audiobooks is a missed opportunity. Occasionally they will have a supplemental pdf or something that can be accessed at the author's website, or the app, but generally, the illustrations and figures are left out.

It makes audiobooks unsuitable for certain types of books, but the authors tend to recognize this, and as a result, the book isn’t offered in audiobook form. Educational audiobooks are popular among students nowadays, so it becomes crucial to figure out a way to incorporate illustrations in them.

I thought of a mechanism to show illustrations on the screen like this:

The first screen shows illustration popping up in the audiobook, second shows how it looks after it is moved up.
Book Illustrations

When an illustration appears on the screen, it stays there up there as long as in context and can be moved up to view the text behind. *This feature requires some help from the narrator’s side -they have to add illustration timings and some introductory audio, such as figure 6: threading the movie projector, while recording the audiobook.

With all these illustrations and highlights, it becomes difficult to organize them properly. So, I thought of another new feature- Notebook. Every audiobook comes with a notebook. It is divided into three parts: illustrations, highlights and vocabulary. The illustrations tab is prefilled with all the book illustrations, organized according to their timestamps. The highlights and vocabulary sections fill up according to the user’s actions.

The first screen shows a list of illustrations, the second shows highlights of the book, and the third shows vocabulary list.
Notebook- Illustrations, Highlights and Vocabulary lists

A good book speaks to you Aloud.

I started with the motivation to make audiobooks feel more like physical books. Little did I know that it would turn into a complete mobile app concept that aims to bring even more utility to the user than a book ever could. After designing and iterating a huge amount of screens, I’m proud to call this app - Aloud.

I made a user dashboard, discover section, library, a book details page, and an author’s page- to explain major user flows through this app. Here is a small glimpse of the same:

A showcase of Aloud audiobook app, with the user dashboard, library, discover and book details screens.
Aloud Audiobooks- UI/UX Case Study
Dark mode of the audiobook app with the same screens in showcase.
Dark Mode

Wrapping Up…

This case study attempts to think about the future scope of audiobooks and how the design would play an important part in that context. Audiobooks are a great way to savour your favourite stories in yet another form. As we know, they could be reaching people who had previously eschewed books altogether but are now devouring this new medium.

Thanks for reading.

Special thanks to Saptarshi Prakash for his Motion Design Masterclass, which introduced me to the world of motion design.

Edit, one year later- This project was shortlisted under the Top 25 Merit list for the CII Young Designers Awards 2021 for innovation in design. Unfortunately, I couldn’t attend further screening rounds due to my end term examinations.

--

--

Anushka Jain
Bootcamp

Outreachy '22, The Fedora Project | Product Design Intern @Swiggy, x-Razorpay | Undergrad at IIT Roorkee | Art Aficionado