Yes, ePublication UX Design is a Thing

Hint: It’s about context

The Introduction.

In an earlier article, I talked about how audiobook sales have cannibalized ebook sales:

“HarperCollins, Hachette, Simon & Schuster and Penguin Random House have all verified that ebook sales have declined by around 5% and the only way their digital unit has consistently seen a profit, is primarily due to audiobooks.” (Kozlowski 2017)*

Who can get angry that that happened? The idea of having a whole library in your tablet is cool in theory, but when you lose the tactile experience of reading a paper copy, you chances of actually finishing that book are lower.

Well, it least it is for me.

If I cannot visually feel my progress, it is easier to move on to the next best looking book in a shared Kindle library and that dooms me to the ever perpetuating cycle of never finishing anything.

So, what do we do?

The Project.

The ePublication is getting it’s lunch money taken by HTML content and web based alternatives. Why is that? Well for one thing, ebooks are so boring because they aren’t technically an innovation.

Think of it, they are literally the unprinted version of the normal book. We have these powerful hand held computers and we use them to demonstrate word processing? I’ll save the $400 (the price of the average iPad) and just spend $20 on a hard copy book I know I will finish.

My approach with this design experiment was to differentiate the ebook from the the print edition. Using our powerful hand held computers we should be able to provide more robust experiences, that enhance the reading of a book.

The trick is to provide an experience that you can’t get from the printed word. You should be able to watch video, see diagrams, and pull information and context of story up on demand. Like those fancy blu ray features where you can pull up features while the movie is still playing, your reading experiences should be similar.

The Approach.

Luckily, iBook author has all the ingredients I need to cook a bomb ebook.

Modern day ebook composers have the ability to embed all forms of media from video, audio, photo, and motion graphics.

But let us not go buck-wild on features like 90’s universal remotes or another explosion in a Michael Bay film. Intention is the sign of good design. The additional media in an ebook cannot feel like “extra stuff” added to an already completed product. They need to merge seamlessly into the experience.

The Nitty Gritty.

Like my audiobook project, I will continue to build upon Candice Millards, “Hero of the Empire” a retelling of Winston Churchill’s autobiography “My Early Life” from a higher level journalistic lens.

I said in the last article that Winston Churchills escape is such a great true story that it almost sounds like a fictitious adventure story. Like “Lone Survivor” and “Seven Days in Entebbe” this is one of those true stories that make you put down the book and say “Dang, they should make a movie based off this!”

In this case, it turns out they already did.

Trailer for the 1972 bio film based off “My Early Life” it essentially covers every part of “Hero of the Empire” Visually.

So I rented the movie and watched it to get ideas.

I thought:

“Wouldn’t it be cool if we used clip with the movie to be strategically placed throughout the book to give a visual representation of what was happening in the text?”

To add to that, I could repurpose the clips to match the silent movie feel I was going for, dialogue cards and all.

The other plan was to use iBook authors popup widget to place key details about the narrative as to help the reader imagine an accurate image of the narrative.

How The Sausage is Made.

To get started, I started using Quicktime screen grabs to get key clips. Because this is a school project, I am not violating any copyright laws as long as I don’t resell what I create. The purpose of this is purely for experimenting on making Hero of the Empire’s experience better.

Once I gathered the assets and played around with how to give them the silent film treatment (see what I did there?) I first had to decide what clips would be made and where they would be placed.

I read the copy and marked where i wanted clips.

When I finished uploading the text to iBooks author I started to skim the copy and mark sections where I wanted supplemental clips. Those annotations, would dictate what kind of clip I made in Premier Pro.

In Premier Pro, I added a mask, some color correction, dialogue cards and a silent film score to create the illusion. I also downgraded the film to 15 frames per second because thats what cameras shot in during that time period.

I used a mask and some color correction to fade and downgrade the film, added a silent film score, and downgraded the frame rate to 15 frames per second (which was the frame rate of old silent film cameras.)

Once the video assets where completed and placed, I needed to create a symbol that would be used as a reference button for readers to press and activate the pull-up feature in the eBook.

I wasn’t sure what I wanted to use because I wanted to maintain historical context, but I eventually came up with a great button after some research. I would create a mock up of the “Queens South Africa Medal” This would be a great representation of the bravado British Colonialism engendered and Churchill's motivations to go to war: to get glory and reputation.

I took the photo on the left and vectorized it in illustrator at 100x100px. It is going to be small.

The pop ups would contain screen grabs of the characters in the movies and maps and diagrams explaining events of the story.

The Build.

With all assets combined, I could start putting together the content. It required reading and re-reading content to make sure that everything was placed correctly and that the timing wasn’t off. I had to move videos around because their content gave away certain parts of the plot too early. I wanted the videos to show up as a recap of of what just happened to ingrain what the reader just read.

I then placed the Medals in parts of the story that would help the reader get context and visuals of the current chapter and help them establish who the characters where. These to had to be in the right place at the right time, like this popup here. That shows a diagram of Winstons escape after he hoped the wall of the POW camp.

The Test.

Since this would be an eBook, I did my testing on my iPad pro which is 10.5" and my iPad mini to see how the experiences differed.

For the first couple of tests, I realized some content was incorrect and I had to go back into Premier Pro and fix some dialogue and clips. When I interacted with certain features I kept asking myself if the content was well contextualized or could be enhanced by a pop up or a glossary term. The video below shows what it would look like on a 10.5" iPad Pro.

Here is a screen recoding of part of my test.

When I tested it on my iPad Mini, the content was spread across more pages. But the message and supplemental material wasn’t misrepresented.

The Conclusion.

The reality is this: you don’t have much control on layout, but you can control the context in ePublishing. UX design for pre-made platforms means there will be considerable constraints on what you can or can’t do. The trick is focusing on using what you are allowed to use to create a good experience.

ePub isn’t dead, it just requires us to add a greater depth of processing to be weaved into the written word. The immersive experience should leave the reader more informed and educated on the subject they consumed. As designers, we can offer that to them.