1

iPad eReader UX Review:

iBooks, Kindle, Kobo

@suzanneginsburg www.iphoneuxreviews.com

2

Thanks for your interest!

Please switch to full-screen view for optimal viewing.

Topics covered in this review

These slides accompany the blog post “10 Design Principles for eReader Apps” (http://www.iphoneuxreviews.com) A quick recap is included at the end of this deck.

Aspects of the eReader user experience that are covered in this review include:

• Tap zones • Display options (e.g., text size and page color)• Inline text options (e.g., highlighting and notes)• Navigation• Visual design

3

Tap Zones

4

5

Tap Zones

“Tap Zones” are places where the user can tap the UI to interact with the

book. All of the eReaders have essentially 5 major Tap Zones—header,

footer, left and right margins, and the book content.

The elements in each zone depend on whether the user is in “reading”

mode or “tool” mode. “Reading” modes are very similar when comparing

the eReaders but there are several differences when in “tool” mode. In

particular, iBooks places the tools on top, whereas Kindle and Kobo place

theirs on the bottom. Placing tools at the top may make them easier to

access--this is also consistent with Apple’s guidelines.

6

Tap Zones: Reading Mode

Kindle doesn’t show page # in reading mode. Better

to include page #.

Kobo shows chapter and page x of x for chapter. Better to show

total for book or both.

Title shown on top for all.iBooks and Kobo show battery in reading mode

iBooks shows page x of x for book.

7

Tap Zones: Tool Mode

Kobo has navigation on top

iBooks has navigation and tools on top. This placement may be easier for users to

access. Kindle has navigation on top

Progress indicator at bottomTools and progress at bottom. I

don’t understand the progress info.

Tools and progress at bottom

Display Options

8

9

Display Options

All of the eReaders reviewed let users adjust the brightness and type size. Some of the applications also allow the user to change the typeface

and page and type color.

Allowing users to customize their reading experience can improve

accessibility and make the technology feel more personal.

Examples are shown on the next slides.

10

Display Options: Brightness

All of these apps use a slider to adjust brightness.

Kindle bundles brightness with other “view options.” This placement may

make it more difficult to find.Kobo bundles brightness with “night

reading” (discussed later)

11

Display Options: Type Size

Kindle’s 5 type size options are explicitly called out. Kobo uses a slider to adjust type size

(8 total are available).

iBooks users tap smaller A to decrease the size, larger A to increase size. (10 total are available)

12

Display Options: Typeface

Users can’t change the typeface on Kindle. Kobo users can choose from 4

typefaces.

iBooks users can choose from 6 typefaces.

13

Display Options: Kindle Page/Type Color

Kindle has 3 color combinations.

14

Display Options: iBooks Page/Type Color

iBooks has 2 color combinations.

User can also get white and black if they choose this option in the device’s accessibility settings.

15

Display Options: Kobo Night Reading

Kobo “Night Reading” option.

Inline Options

16

17

Inline Options

iBooks and Kindle provide a variety of inline text options. Users access

these options by tapping and holding words in the book’s text.

Magnification and “handles” are provided to help make text selections

more precise. Although the initial interaction is the same, the underlying

tools for iBooks and Kindle are different.

(Note: At the time of this writing, Kobo didn’t have any inline text options. I

think they may be coming soon.)

18

Inline Options: iBooks Dictionary & Search

Users can find all occurrences of a selected word. They can also search with Google or

Wikipedia for additional info.

On iBooks, 4 options are presented when tapping and holding words.

iBooks users can lookup words in a dictionary (available when device is offline).

19

Inline Options: iBooks Highlighting

Highlighted text. Highlight color options.Options once text is highlighted. Not sure where dictionary & search went.

20

Inline Options: iBooks Notes

Large form for entering notes. Includes spell

check!

Shows date note entered. Tapping

note brings up form on left. When note

contents are removed, the note is

deleted.

21

Inline Options: Kindle Notes

User chooses Note.User enters Note. Notice how the

form & keyboard slide into view and about 6 lines of text disappears. The

context shouldn’t change!

After user taps Save, the keyboard slides out of view and the bubble

indicates note is present. Very tiny!

22

Inline Options: Kindle Highlight

User taps highlight. One word selected but can use handles to

select neighboring wordsWords highlighted. Options after highlighted. Not

sure why highlight still there.

Navigation

23

24

Navigation

Navigation within all three eReaders has at least four elements:

• Tap to turn pages

• Progress indicator with slider

• Home, TOC, or other buttons

• Bookmarks

Although the eReaders have similar navigation elements, the UIs are very

different. Examples are shown on the next slides.

iBooks is the only eReader that also has search, though I’m sure that will

change in the future.

25

Navigation: Tap to Turn Pages

When users tap the margin to turn pages, each eReader

will present a different transition. iBooks uses the Curl

transition, Kindle uses the Slide transition, and Kobo has

no transition by default. The Curl transition feels the

most natural when reading a novel but Slide may be

better for short articles or reference materials.

This may be a matter of personal preference so the

Kobo setting is a nice touch—Flip, Fade, Curl. That

said, Kobo should consider tweaking their Curl transition

since the implementation is not ideal—it feels as if I’m

flipping through a stapled document, not a book.

26

Navigation: Progress Indicator with Slider

All of the apps provide a progress indicator with a slider along the bottom. Kindle and Kobo

both use a standard widget but the iBooks’ one is custom designed. Kindle and iBooks also

have overlays to present additional information—the Kindle shows the page number and

iBooks shows the chapter title and page number. I found the iBooks information more useful

since it notes the chapter.

Don’t know why Kindle number is in thousands and percent not pages.

iBooks manages to show the most information.

Kobo

27

Navigation: Home, TOC, & Other Buttons

iBooks and Kobo have basic navigation back to the

user’s library and the book’s TOC (next slide). In

contrast, Kindle includes a very powerful “Go to” button

which allows the user to jump to the following areas:

Cover, TOC, Beginning, Location, My Notes & Marks,

and Popular Highlights (see image to right).

The only potential issue with Kindle’s “Go to” feature is

discoverability since the purpose of the icon may not be

clear. iBooks users must go to the TOC to access all of

their notes and highlights for the book. Discoverability

may not be high for this feature either.

28

Navigation: Home, TOC, & Other Buttons

No clear navigation back to where reader the came from. User needs to tap the “<“ icon which I didn’t realize until much later. Chapter titles link to

this TOC which I found confusing.

Clear navigation back to reading.

Clear navigation back to reading.

29

Navigation: iBooks Bookmarks

Bookmark in the “not bookmarked” state

Bookmark in the “bookmarked” state

Bookmarks accessible in the TOC. May be hard to discover.

30

Navigation: Kindle Bookmarks

User can tap + to bookmark. Option at

bottom too.

+ also bookmarks location

Bookmarked page

Can access bookmarks and other navigation tools with

“Go to” menu.

31

Navigation: Kobo Bookmarks

Bookmark in the “not bookmarked” state

Bookmark in the “bookmarked” state

Bookmarks tab accessible at all times.

Bookmark in the “bookmarked” state

32

Navigation: iBooks Search

iBooks users can search for a word occurrence throughout

the book.

They may also search via Google or Wikipedia for more

info. This opens in Safari.

Visual Design

33

34

Visual Design

Hands down, iBooks looks and feels most like an actual book. I’m referring to the

dimensionality created with the stack of pages on the right, the landscape view, the

highlight and notes treatment, the Curl transition---the whole package! I found these

elements pleasing though this might be a matter of preference.

Design Principles

35

36

Design Principles

Here’s a quick recap of the design principles from the post “10 Design Principles for

eReaders.” If you want to learn more go to: http://www.iphoneuxreviews.com/

• Design for the book content.

• Consider the reading context.

• Let the book content shine.

• Personalize the reading experience.

• Put the reader in control.

• Support alternative reading pathways.

• Be predictable.

• Provide forgiving tap targets

• Speak the reader’s language

• Delight your users

Thanks for viewing!

• That’s all for now!

• There are many other notable design details but I’d like to keep these reviews relatively short.

• Suggestions for future reviews are welcome. Please send email to suggest@iphoneuxreviews.com

37

Buy my book on Amazon:

Designing the iPhone User

Experience

http://www.iphoneuxreviews.com

@suzanneginsburg