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.

Purchasing iPad Books: iBooks, Kindle, Kobo

Last week I reviewed alternative approaches for managing iPad book collections.  This week I evaluated the book shopping experience on iBooks, Kindle, and Kobo.  Some observations:

• Aside from instant gratification via download, the eReader book shopping experience doesn’t significantly improve upon the web book shopping experience.  In fact, the web is arguably better since more book information and search options are available.
• All of the eReaders provide a “one size fits all” shopping experience.  There are no personalization features though I’m sure this will change over time.
• Kindle and Kobo take the user out of context during the purchase process which could lead to drop-offs.  For obvious reasons–App Store Integration–iBooks is the only eReader that keeps the user within context.

Read below for more details on the following areas: Finding Books, Learning about Books, Buying Books, Accessing Account Info, and Getting Help.

Finding Books

All of the eReaders reviewed let users search and browse for books.  Kindle provides the richest set of options but users must access them via Safari. Going back and forth between the app and Safari is seamless as long as the user stays on track.  If Kindle users wander into the sea of Amazon links, they may have to quit Safari to find their way back.

Kindle Store (full-size image)

iBooks and Kobo let users search and browse for books within their apps.  Search is prominently displayed, however, the browse features are somewhat difficult to find.  iBooks browse options are included in the tab bar along the bottom which blends into the device.  Kobo’s browse options are accessed via the “Jump to” button in the upper left.  This is a shame since the categories and lists are a great resource.

iBooks Store (full-size image)

Kobo Store (full-size image)

Learning About Books

Since Kindle is part of Amazon, the amount of book information (and number of books!) is leaps and bounds ahead of its competitors.  They have extensive reviews, richer author pages, and much more.  However, as previously mentioned, the user must leave the app to access this trove of information.

Compared to Kindle, iBooks book information is limited, containing ratings, reviews, publish date, publisher, seller, category, length, language.  Kobo provides even less information: synopsis, genre, publisher and ratings.

One nice feature available in all three apps is the ability to download sample chapters.  It’s a great way to encourage purchases–worked for me!

Buying Books

Kobo and Amazon users must provide their credit card information–or sign into existing accounts–the first time they purchase books via their respective eReaders.  The process is very straightforward and only occurs once since the information is stored for future purchases. iBooks has a clear advantage since the user’s credit card information is already associated with their iTunes account.

Purchasing books on the iBooks and Kindle apps require five steps minimum from start to finish.  Kobo takes six steps since they show an overlay warning users that they are leaving the app to go to Safari.  (See slides below for the flows).  Hopefully all iPad eReaders–not just Apple’s–will be able to seamlessly integrate payments in the future, without having to cede 30% of revenue.  Better integration will make some of the extra steps obsolete, e.g., warning when launching Safari.

Accessing Account Info

All three apps have different approaches when it comes to accessing account information; iBook’s account information is most integrated.

• iBooks let users access relevant account information from the Store screens; the user stays within the app the entire time.
• Kindle users can access their account information only when they are on the Amazon site.
• Kobo doesn’t appear to provide access to any account information from within their app.

Getting Help

All three apps also approach support differently.  iBooks links off to their support web site in Safari, Kindle provides basic support content within the app (an overlay with web content), and Kobo has nothing!  None of these approaches are ideal.

A few recommendations…

Personalize the shopping user experience. The eReaders reviewed can provide a much more personalized shopping experience, tapping into past purchases but also into what I’ve read, what I’m currently reading, my location, and so on. (Of course privacy issues need to be addressed, as this data must be anonymous).

Consider what other types of book information can be captured and shared via the iPad. For example, it could be interesting to know how many people are currently reading book X or how many actually finished reading book X.  (Again, privacy issues must be addressed.)

Develop alternative ways to present book information. The lists offered on the eReader bookstores are great but perhaps there are other, more visual, ways to present books.  One of my favorite ways to explore books in a real bookstore is to scan the tables laid out with the newest books.  Is there a way to incorporate that concept on the iPad?  Information for individual books could also be improved.  For example, the previews are wonderful but it would be helpful if users could see a few pages before adding books to their library.

Lastly, keep the user within context as much as possible. It’s jarring to move from the app to Safari, Mail, or other applications.

Want to read more?  See my other review about managing personal book collections on the iPad.

Managing iPad Libraries: iBooks, Kindle, Kobo

A few people asked me to review some of the popular eReader iPad apps. As I started to dig into them, it became clear that the topic was too broad to adequately cover in one review. Instead, I’ve decided to break the UX review down into three parts. This first part will cover personal libraries (books downloaded to the iPad), the second will cover the bookstore, and the third will cover the reading experience. iBooks, Kindle, and Kobo were chosen since they are widely used and have some interesting design differences.

Viewing & Previewing Books

All three app libraries provide Cover and List views.  The main difference in the Cover views is that iBooks and Kubo are on “shelves” whereas Kindle books are in a plain grid that supports the pinch gesture to expand or shrink covers.  Visual details also differ when comparing the Cover views.  iBooks covers have an indentation that looks like a book spine.  Kindle books appear three dimensional against a background that changes according to the time of day.  Kobo has put forth the greatest effort in terms of visual details, letting users customize both the bookshelf and bookmark appearance.

iBook Cover View (full-size image)

Kindle Cover View (full-size image)

Kobo Cover View (full-size image)

List views, on the other hand, differ mostly in the amount of metadata provided for each book.  iBooks provides title and author information plus the genre; Kindle provides the title and author.  Kobo provides a tight two-column layout and has the most information: title, author, whether the book is currently being read, and how much of the book has been read.

iBooks List View (full-size image)

Kindle List View (full-size image)

Kobo List View (full-size image)

Getting additional book information—TOC, summary, ratings—is only possible in the Kobo UI.  Users can tap and hold the cover when in the Cover or List views.

Kobo Preview (full-size image)

Organizing & Filtering Books

All of the apps include some level of filtering but their approaches are very different.  iBooks is the only app that provides searching, which will become critical as users build larger book collections over time.  In addition to Search, iBooks lets users sort by “Bookshelf” (most recently purchased), Title, Author, or Category (genre).  Unfortunately, these search and sort features are only available on the List view.  It would be preferable to enable sorting on both views, as done by Kindle, which provides sort by Recent, Title, Author.  Kobo sort values are essentially the same, except “Recent” indicates recently read.

Removing Books

Kindle users may tap and hold to remove books from the Cover or List views.  On Kubo, tap and hold brings up Delete as well as the TOC and book overview. On iBooks, users must tap Edit to choose which books to delete.  This interaction difference could be problematic for users moving between apps.

A few recommendations…

Capture more metadata to improve the user experience. Goodreads.com lets users mark books—read, currently-reading, to-read—and uses this information to create bookshelves.  Kubo does this to some extent with the “I’m Reading” view, but it can be taken a step further.  Other possible metadata to capture are notes and personal ratings.

Leverage known metadata to help users filter through their collections. For example, Delicious Library doesn’t treat all books the same.  They alter the cover size based on the paper book’s actual dimensions.  Students at UC Berkeley’s iSchool also explored this concept in the Virtual Shelf project.  Visual cues such as these may help users pinpoint and choose books to read.  Similarly, the book stores for these apps do not have to be islands.  Reviews and other content may be of interest to users even after purchase.

Allow freeform organization of book collections. In addition to providing more automated views, consider letting users create their own bookshelves, as done on Delicious Library.  Users may want to organize books based on their interests (e.g., work or pleasure), family members (e.g., for themselves or their children) and more.

Design for growth. As users’ collections grow, search, tagging, and other filtering mechanisms will become increasingly important.  At the same time, user interface options, e.g., the ability to resize book covers as done on Kindle, will make it easier for users to manage large collections.  These should be introduced now, rather than waiting until collections become unwieldy.

Want to read more?  Just posted a review about purchasing books on the iPad.

iPad UX Review: Adobe Ideas vs. SketchBook Pro

iPad UX Review: New York Times vs. USA Today

About one year ago, I posted a UX review of the New York Times and USA Today iPhone apps. At the time, I was interested in exploring the different interaction models for reading news on the iPhone. Now that these companies have ventured into the iPad space, I thought it would be interesting to take a closer look at their iPad apps.  Overall, both apps are well-designed and provide a reading experience far better than their web and iPhone counterparts. Areas where the apps differ are discussed below.

Navigation: Hierarchical vs. Exploratory

The New York Times iPad app (Figure 1) uses a hierarchical navigation style very similar to its iPhone app: tab bar along the bottom plus “back” arrows on each article.  Pagination, however, is completely different on the iPad.  Instead of scrolling down, users swipe across to access additional pages; the small dots along the bottom indicate how many pages are included (there are only two pages in Figure 1).

Figure 1: New York Times iPad start screen.

The USA Today iPad app (Figure 2) has a similar underlying hierarchy—news sections link to article views—but the user experience feels more fluid and exploratory.   For example, instead of the tab bar, users can navigate to the other sections by tapping the logo in the upper left-hand corner.  Although this control has potential usability issues—its function may not be evident at first—I think it’s a step in the right direction since it feels more integrated than the tabs.  This approach can also scale when USA Today adds other sections.

Figure 2: USA Today iPad start screen.

Another key difference in the designs is that users must swipe across to access additional article pages on The New York Times but scroll down on USA Today.  USA Today provides a fine rule to show where the next page begins as well as a page counter (Figure 3).  When the user drags their finger down to view the next page, the page snaps into place.  If users swipe across, they can access the next article from that section.  This interaction difference could be problematic if users move between the apps–they need to scroll down with one and swipe across with the other.

Figure 3: Navigation at bottom of USA Today articles.

Lastly, I think USA Today’s navigation feels more playful and exploratory since it uses overlays (Figure 4) for bite-sized pieces of information, such as weather, sports scores, and polls.  These are accessed from the modules on the left-hand side of the section pages.  Of course these can be overused but USA Today effectively limits them to the bite-sized content.  To my knowledge, overlays are not used anywhere in the New York Times app.

Figure 4: USA Today Snapshots overlay.

Two-columns vs. Three columns

The New York Times has three columns; USA Today has two columns.  Personally, the number of columns didn’t make a big difference for me—both were easy to read.  That said, the leading (the space between the lines of text) was greater on USA Today which made it slightly more readable; I also prefer their light weight typeface.  At the end of the day, users should have more control over the text presentation; I’m mostly speaking from an accessibility standpoint.

Custom User Interface Controls

While standard UI controls are generally preferable since they are easier to learn and use, custom controls can be very effective.  For example, in an effort to focus on the article content as much as possible, both apps created more subtle Back button designs (Figures 5 and 6).  The USA Today Back button changes its accent color depending on the section you came from (e.g., red is for Sports.)  I doubt many users will pick up on this small distinction, but it’s a nice touch.

Figure 5: USA Today header with “back” navigation.

Figure 6: NY Times header with “back” navigation.

Feature Parity & Growth Strategy

When comparing the two apps, there’s a noticeable difference in iPhone & iPad feature parity.  For the most part, USA Today’s app has at least the same, if not more, features than its iPhone app.  Plus, they clearly have many more features in the works, as shown by their “Coming soon” modules (Figure 7, left half of image) on the Life and Business sections.  I think they did an effective job with the language and imagery—it made me feel excited about what’s to come, not like I have an incomplete app.  Of course my opinion may change if coming “soon” is not for several more months.

Figure 7: USA Today “Coming soon” module.

In contrast, The New York Times app is missing many features that were on the iPhone (see list below).  Companies often need to restrict version 1.0 features because of budget or time constraints.  This is completely understandable, but some of the omissions are questionable.  For example, the New York Times app doesn’t show the article dates which gives the impression that everything within the app is from that day, when in fact the article may be several days old.  They also don’t show when the app’s content was last updated, a must-have feature for a news app, in my opinion.

Features not included on the iPad app but available on the iPhone:

• Wide range of articles (iPad limits the content to the “Editor’s Choice”)
• Navigation between articles (must go back to start screen)
• Article dates (not all articles are from the current day so this should be included)
• Ability to share articles via Twitter & Facebook.
• Ability to customize tabs
• Ability to change type size
• Last update info & refresh button
• Search

Advertising

Both apps have a banner ad along the bottom of their “front” and section pages, though USA Today’s is slightly narrower.  Additionally, The New York Times shows two larger ads: a square one on multi-page articles (Figure 8.0) and a full-page ad one between certain pages.  I suspect they are testing the different formats to come up with the magic formula.  For reference of what not to do, The Wall Street Journal iPad app is worth looking at—they went over the top with the ads, ruining the user experience in my opinion.  Their app has loads of other problems; their ad strategy is just one of them.

Figure 8: NY Times ad; appears on second page of article.

In summary…

Based on this brief analysis, here are a few recommendations for similar apps:

Leverage the iPad platform; do not simply rearrange your iPhone app content and controls.  You’ll create more engaging and innovative user experiences.

Be sure to emphasize the content and minimize the controls.  In some cases this may require creating custom controls that work well with your content.  If they look very different from standard controls, make sure there are affordances that indicate how the control works.

If your application will be used on multiple platforms—web, desktop, iPhone, iPad—be sure the features and experience are appropriate for the given platform.   Although I think the New York Times app fell short in terms of features, this level of parity may not be necessary for all apps.

Good luck with your apps!

UX Review: Gowalla vs. foursquare

Art Beat Inc launches two iPhone apps

Art Beat Inc offers art event listings for New York City (http://www.nyartbeat.com ) and Tokyo (http://www.tokyoartbeat.com).  A dedicated team of art experts and enthusiasts update the content daily, covering a variety of mediums—painting, photography, drawing, sculpture, video, and much more.  Art Beat also offers rich personalization and community features such as favorites, reviews, and recommendations.

Although the Art Beat web sites have been tremendously successful, like most web sites, they do not translate well when viewed on mobile phones.  As an interim solution, Art Beat created mobile-friendly versions of their sites.  These were effective but they didn’t take advantage of one of the key mobile benefits—knowing the user’s location

In an effort to improve the mobile user experience, Art Beat recently launched two native iPhone apps—NY Art Beat and Tokyo Art Beat.  Ginsburg Design was part of the team that launched the apps which included the following key features:

·      Maps and directions to nearby art events.

·      Ability to browse events via a variety of rich metadata, e.g., location, media type, and “smart” lists.

·      Quick access to the most popular events in the app’s area.

Event list  view.

iPhone apps seem simple on the surface but creating an app is a significant undertaking.  If you plan to develop an iPhone app for your service or organization, consider some of the lessons our team learned along the way.

Try to limit the scope of version 1.0.

Although it’s always tempting to have your app do more than less at the beginning, fewer features means a more timely release and an opportunity to listen to user feedback before developing the next version of your app.

Sort out API issues first.

If your app requires access to an API (Application Programming Interface), make sure the API requirements are fully defined before design and development begins.  If you don’t take the time to do this, you’ll slow down your software developer.

Don’t skimp on specifications.

Although iPhone apps often have less functionality than web or desktop apps, they still require detailed documentation.  Documenting the user interface and backend requirements will keep everyone on the same page and save time down the road.

Mobilize don’t miniaturize.

Don’t attempt to cram every possible bit of info onto the small screen. Choose which pieces of information are most important for the mobile user and prioritize them accordingly.

Allocate ample time for field testing.

If you have a location-based app, it’s critical to test it in the field before launch.  You may uncover user experience issues that are difficult to find in a usability lab environment.

Develop a marketing plan.

Having a great app is meaningless if no one can find it.  Art Beat was fortunate to have a built-in user base and loyal Twitter following but even that’s not enough.  Be creative and adapt your strategy as you discover what works and doesn’t work.

Visit the links below to learn more about the apps:

NY Art Beat: http://bit.ly/NYABapp

Tokyo Art Beat: http://bit.ly/TABapp

Press Release can be found here:

http://prmac.com/release-id-11221.htm

UX Review: NY Times vs. USA Today

UX Review: Urbanspoon vs. Yelp

User experience review of two similar iPhone apps–Urbanspoon & Yelp–that launched in late 2008. Best viewed in full screen mode.