UX Lab: How can we enrich the reading experience on a screen?

Written by
Bernhard Staiber
22 December 2010

It seems like 2010 might go down in history as the year reading on a screen went mainstream. I think there are a bunch of good eReaders out there that already give us a great reading experience and a glimpse of the future of reading. Take Instapaper by Marco Ament for example. However, we’re only scratching the surface of new reading interfaces. At intuity we’ve been thinking about how this growing medium will affect our habit of consuming written content. Will traditional page-based metaphors continue being applied to ebooks in the long run?

Besides the many advantages there are still some flaws to most screen reading experiences that are waiting to be fixed. Take the visualization of the reading progress: you don’t sense the actual length of a text. It’s hard to beat the book with its built-in gratification and progress indication. You can see and feel its thickness and you’re able to check your progress while moving the pages from right to left. Btw. something that Apple tried to mimic in their iBooks app. Still they didn’t take the chance to use it for progress indication. The pile of pages just doesn’t get thinner. In the end a frustrating experience. And yes – of course – we’ve got the scrollbar (e.g. the Kindle and the Sanza iPad App use it) but we wanted to have a more sensitive and playful solution.

The task: Enhance orientation and gratification while reading on a screen

We thought this would make a nice little lab project and sketched out a bunch of ideas how to enrich the reading experience on screen devices. We used the iPad as rapid prototpying platform to bring these ideas to life – yet in a quite rough form. We’ve compiled a selection of our favorites to share with the rest of the world. Each idea is commented by the person that actually shaped it. Enjoy…

Prototype A: Blown away – Visual gratification through animation

Matthias: “This solution doesn’t give you the exact progress but for me that’s more than enough. What I find most important is not to disturb the reading experience while providing feedback in a playful manner. Therefore the page numbers seem to bee blown away when you move from page to page. A subtle reward at the end of each page.”

Give it a test drive with your iPad

Prototype B: Vintage – Aging in the digital context

Bernhard: “I thought about what old could mean in the digital age. There are several contexts in which it could be interesting to differentiate content according to time. Should the background texture change the older a blog article gets, for example? What does an old photograph look like? Does an ebook age the longer I own it? And it doesn’t necessarily need to have the negative connotation of getting continuously ragged – growing or ripening could also be visualized.”

Give it a test drive with your iPad (Portrait mode only)

Prototype C: Progress as a pile

Bernhard: “This is really close to the visual feedback when reading a book – left: done, right: to come. Sure it’s more or less a scrollbar, but it reflects the context in a playful way.”

Give it a test drive with your iPad (Portrait mode only)

Prototype D: Using progress indication to support the storyline

Tobias: “I thought about mixing gaming aspects with the book medium. This results in a progress indicator that actually supports the story of the text you are reading and gets you even more involved in the storyline. The parallax scrolling effect gives you a nice visual gratification. This type of ‘progress bar’ might be specifically interesting in children’s books.”

Give it a test drive with your iPad (Portrait mode only)

The bottom line

We’ve learnt quite a bit while sketching these ideas. One outcome is especially interesting to me: The fact that we are not limited to one particular technique or metaphor to present progress to the reader. We can now adapt the reading interface to specific contexts, support the content of the text and engage readers even more in a storyline. As these simple prototypes only deal with one particular aspect of the reading experience one can feel that there are lots of additional ways to augment reading in this digital context. Let’s take a minute to think even further ahead: For example an interesting approach to outweigh the fixed body of a mobile device could be what Fabian Hemmert calls the shape-shifting future of mobile devices. Imagine your e-reader’s weight would slightly move to the left the more you are progressing in your document.

As always we’d love to see your feedback on this. What’s your favorite prototype? Or do you even have a better idea for dealing with this problem? We are curious how the future of reading will unfold…

Sources available – Feel free to remix

All the prototypes have been built using web technologies (HTML, Javascript and CSS). We took advantage of the jQuery library and wrote a little ‘Swipeable’ plugin to handle swipe gestures on iOs. The source code of these experiment is available under the MIT License – so feel free to remix!

Music: “Manila” by Luc Bartoli (Powered by Jamendo)


10 March 2011

We moved the source code to Github. Feel free to remix...https://github.com/intuitymedialab/UX_lab_eReading
08 March 2011

Nice prototypes!!Do you thought about simulated haptic-experience via realtime touchreleased audible stimuli?> parchment-skin illusion (Jousmäki V, Hari R, 1998)> http://www.ncbi.nlm.nih.gov/pubmed/9512426All the best Rainer
23 December 2010

It's been fun to bring these ideas to life and I have to admit that my curren favorite is Prototype C. Love how the sheets animate on top of the pile.

Leave a reply

You must be logged in to post a comment.