10 Design Principles for eReader Apps

Posted: July 26th, 2010 | Author: suzanne | Filed under: app reviews, heuristics | 1 Comment »

iPad eReader apps have only been around for a few months but they build upon a formidable predecessor—the book.  They also benefit from the relatively recent success of the Kindle and iPhone apps like Stanza.  Although there are many models to learn from, the eReader app space is still evolving and will continue to evolve in years to come.  As designers and developers create new versions of eReader apps, I hope the following design principles will serve as a useful reference.  They are primarily based on a screen-by-screen analysis of iBooks, Kindle, and Kobo which is embedded at the end of this post.  Stanza, Comic Zeal, GoodReader, and Instapaper were also reviewed but without as much rigor.

Here are the 10 design principles for eReader apps:

1. Design for the book content.

Reading a novel is very different from reading a web page or a computer manual.  And reading a comic book is surely different from reading a book of poems.  Successful eReader apps will create experiences that are well-suited to the content at hand.  For example, Comic Zeal provides a special Japanese manga mode which supports right to left reading.  If your app supports alternative content types, it should allow the user to choose the desired interaction (more on this in “Personalize the reading experience”).

2. Consider the reading context.

iPad users will read on airplanes, in their beds, on lounge chairs, and more.  Understanding the different contexts may help app designers and developers make informed design decisions.  For example, given the cramped conditions on airplanes, I’ve found that it’s more comfortable to access tools along the top of eReader apps (Figure A), rather than those at the bottom.  I encountered similar problems when I tried to read while lying in bed.   These are just two examples—user research may reveal other opportunities to improve current designs.  It’s probably worth mentioning that Apple recommends this tool placement in their guidelines.

iBooks screen

Figure A. iBooks page with tools “on” (See larger size)

3. Let the book content shine.

While search, annotation, and other tools will be welcomed by many readers they shouldn’t get in the way of the user’s primary task—to read.  Take the iBooks tool icons (Figure A).  They are rendered in sepia tones and tucked into the page’s corners.  They are there when you need them but not intrusive. In addition to the book text, consider subtle ways to let other book content shine.  For example, images are a fixed size in printed books but eReader apps should allow users to enlarge them.  Similarly, if a location is mentioned in a book, wouldn’t it be nice to link directly to a map?

4. Personalize the reading experience.

One of the biggest benefits of eBooks is the ability to customize the reading experience.  Customization may be for accessibility reasons or to accommodate user preferences.  At minimum, eReader apps should support accessibility, allowing users to change brightness, page color, and type size (Figure B).  Other potential customizations may include typefaces, transitions, line spacing, pagination direction, and more.  When possible, be sure to provide previews so users can see how the changes will impact their display.

Kindle Display Options

Figure B. Kindle display options (See larger size)

5. Put the reader in control.

Compared to mediums like TV and movies which have commercials, trailers, and other distractions, reading books is generally a quiet, solitary experience. eReader apps add complexity since they introduce search and other tools that take the user away from reading.   These tools have the power to enhance the reading experience but they can also backfire if the user feels like they’ve lost control.  For example, tools on Kobo disappear after about 8 seconds if the user hasn’t interacted with them.  Similarly, Kindle tools disappear when the user turns the page.  In contrast, iBooks hides the tools only when the user chooses to hide them.  This interaction style gives the user the most control.

6. Support alternative reading pathways.

The printed book has a magical user interface.  Anyone can pick one up and easily page through it, flip to the beginning or end, or thumb to a specific page number.  eReader apps should also make navigation easy and fluid.  This can be accomplished with a combination of gestures and explicit navigation elements.  Gestures should allow the user to page back and forth, but they don’t have to stop there.  Apps like Stanza also let users adjust brightness by swiping up and down the screen.  More explicit navigation elements may include access via a TOC, search, or by entering a specific page number (Figure C).  All of these can add value—the challenge is to make sure they don’t overwhelm the user experience.

Kindle Navigation Options

Figure C. Kindle navigation options (See larger size)

7. Be predictable.

Unless you’re creating a fantasy book or have developed a superior interaction model, your eReader app should follow certain platform conventions.   Following these conventions will make your eReader app easier to learn and use.  For example, tapping the center of the page should display tools along the bottom and/or top, tapping the right/left margins should turn the page, and tapping and holding within the text should reveal options for the selected word(s).   All of the eReader apps reviewed for this post follow these conventions.  If you design an eReader app with a completely different approach, users may have difficulty using the product.  To be clear, this doesn’t mean you shouldn’t try to innovate.  But you should be highly confident that your innovations are clearly better than existing conventions.

8. Provide forgiving tap targets.

eReader apps should be flexible and forgiving when users page through a book.  In particular, they should not include miniature or obscure tap targets.  For example, iBooks users must tap precisely in the margins to turn pages whereas Kobo, Kindle, and Stanza expand the tappable zone into the body.  To help users understand these interactions, some apps overlay the tap zones when the user first loads the app (Figure D).  If precision is required, e.g., to select a specific word, magnification and other relevant tools should be provided to minimize the user effort.

Stanza tap zone overlay

Figure D. Stanza tap zone overlay (See larger size)

9. Speak the reader’s language.

Most users were reading printed books long before eBooks came around.  They are familiar with the book’s organizing framework (e.g., book, cover, TOC, chapter, page) and related objects (e.g., shelf and bookmark).  Users may expect these metaphors in your designs, plus including them may make it easier to use your app.  For example, iBooks tells me how many pages are left in a book but Kindle tells me the percent left.  This may be a matter of preference, but for me, it required more cognitive load to translate the Kindle percent into something meaningful—pages.

10. Delight your users.

Platforms conventions are important but designers and developers should also aim to delight their users.  Delightful elements shouldn’t be gratuitous—successful approaches will clearly elevate the user experience.  For example, Kobo lets readers customize their bookmark.  This builds upon readers current behaviors since they can choose a bookmark for traditional books.  Letting them choose one for their eReading experience may make the book feel more like their own and potentially create an emotional connection to the eReader app itself.  Even better, Kobo should allow users to choose a different one for each book.

Kobo bookmark options

Figure D. Kobo Bookmark options (See larger size)

To understand where these principles came from, you may want to view the detailed UX review in the slides below.  Topics covered include: 1) Tap zones, 2) Display options, 3) Inline options, 4) Navigation, and 5) Visual design.  Also, you may be interested in two other posts on iPad eReader apps. One discusses purchasing books for eReaders, the other covers personal library management.

Note: If you’re viewing this post on the iPad/iPhone you will not be able to see the slides below. If so, please go directly to this non-Flash version on the Slideshare site.

One Comment on “10 Design Principles for eReader Apps”

  1. 1 Tweets that mention iPhone & iPad UX Reviews » Blog Archive » 10 Design Principles for eReader Apps -- Topsy.com said at 3:09 pm on July 26th, 2010:

    [...] This post was mentioned on Twitter by Adam Hill and Adam Hill, suzanne. suzanne said: 10 Design Principles for eReader Apps: http://bit.ly/aChKCy & a screen-by-screen UX review of iBooks, Kindle and Kobo: http://bit.ly/cMVKHj [...]