10 Design Principles for eReader Apps

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.

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.

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.

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.

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.

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.

iPhone App Usability Heuristics

Heuristic evaluations involve systematically inspecting a user-interface and judging its compliance with a set of heuristics.  This method is a fast and effective way to identify usability flaws, however, the widely used heuristics put forth by Jakob Nielsen were originally created for desktop software.  As a result the language and examples are not always appropriate for other platforms.  Over the years, researchers and practitioners have evolved and expanded the heuristics to meet their needs.  While there are many noteworthy efforts, nearly all of them were created before the iPhone was developed.  With that in mind, I attempted to adapt Nielsen’s heuristics for the iPhone.  I’m certain there are many more useful examples, so I’ll edit this post as I–and my readers–discover more new and exciting apps.  Interested in learning more about heuristic evaluations?  Check out Useit.com’s heuristic evaluation overview.

1. Visibility of app status
The app should always keep users informed about what is going on, through appropriate feedback.
Example: Shazam provides feedback as it analyzes audio.  More common feedback use cases: progress indicator when sending content (e.g., email) or receiving content (e.g., latest news).

2. Match between app and the real world
The app should sense the user’s environment and adapt the information display accordingly.
Example: Compass (lower left of app) changes the map orientation as needed.  Other apps change the display orientation from portrait to landscape when appropriate, e.g., iHandy Level.

3. User control and freedom
Users often choose app functions by mistake and will need a clearly marked “emergency exit.”
Example: “Cancel” and “x” buttons are common iPhone controls.  In the case of “immersive” apps, e.g., video or games, users should be able to tap to access controls and/or exit.  The screen capture below is for the Facebook status update screen.

4. Error prevention
Eliminate error-prone conditions or check for them and present users with a confirmation option.
Example: Spell check has option to reject the recommendation.  The example below is from the built-in email app.

5. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
Example: Kindle uses standard controls for bookmarking and showing progress.  See Apple’s iPhone Human Interface Guidelines for the complete set of standards.

6. Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible.
Example: The Yelp “Recents” tab stores businesses recently visited.  Maps also uses “recents” to enable users to access past addresses and routes.  Other ways to reduce recall (& minimize typing) include remembering the app’s last state as well as previous search results.

7. Flexibility and efficiency of use
Reduce the number of steps required by anticipating user needs and enabling customization.
Example: Urbanspoon provides suggestions as the user enters their query.  Additionally, pre-populating fields can make users more efficient, e.g., the built-in Maps app will pre-populate the “start” field with the current location.

8. Aesthetic and minimalist design
Screens should not contain information which is irrelevant or rarely needed.
Example: Photo controls are hidden when not in use.  The same is true for other immersive apps such as video and e-readers, e.g. Kindle.

9. Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language precisely indicating the problem and solution.
Example: Epicurious explains what content may be available when users are offline.

10. Help and documentation
Help should be focused on the user’s task, list concrete steps to be carried out, and not be too long.
Example: Ocarina provides contextual help upon startup.  The Sketches app has new user tutorials that are both playful & helpful.