Screen-by-screen review of the iBooks, Kindle, and Kobo iPad eReader apps. Topics covered include: 1) tap zones, 2) display options, 3) inline text options, 4) navigation and 5) visual design.

1. iPad eReader UX Review:
iBooks, Kindle, Kobo
@suzanneginsburg
www.iphoneuxreviews.com
1

2. Thanks for your interest!
Please switch to full-screen view for
optimal viewing.
2

3. 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

4. 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.
5

6. Tap Zones: Reading Mode
iBooks and Kobo show
Title shown on top for all.
battery in reading mode
iBooks shows page x of x for Kindle doesn’t show page Kobo shows chapter and page x
book. # in reading mode. Better of x for chapter. Better to show
to include page #. total for book or both.
6

7. Tap Zones: Tool Mode
iBooks has navigation and tools on top.
This placement may be easier for users to
access. Kindle has navigation on top Kobo has navigation on top
Progress indicator at bottom Tools and progress at bottom
Tools and progress at bottom. I
don’t understand the progress info.
7

8. 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.
9

10. Display Options: Brightness
All of these apps use a slider to
adjust brightness.
Kindle bundles brightness with other
“view options.” This placement may Kobo bundles brightness with “night
make it more difficult to find. reading” (discussed later)
10

11. Display Options: Type Size
iBooks users tap smaller A to decrease the size, larger
A to increase size. (10 total are available)
Kindle’s 5 type size options are
explicitly called out. Kobo uses a slider to adjust type size
(8 total are available).
11

12. Display Options: Typeface
iBooks users can choose from 6 typefaces.
Users can’t change the typeface on
Kindle. Kobo users can choose from 4
typefaces.
12

13. Display Options: Kindle Page/Type Color
Kindle has 3 color combinations.
13

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.
14

15. Display Options: Kobo Night Reading
Kobo “Night Reading”
option.
15

16. 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.)
17

18. Inline Options: iBooks Dictionary & Search
iBooks users can lookup words in a
dictionary (available when device is offline).
On iBooks, 4 options are presented
when tapping and holding words. Users can find all occurrences of a selected
word. They can also search with Google or
Wikipedia for additional info.
18

19. Inline Options: iBooks Highlighting
Highlight color options.
Highlighted text. Options once text is highlighted. Not
sure where dictionary & search went.
19

20. Inline Options: iBooks Notes
Large form for Shows date note
entering notes. entered. Tapping
Includes spell note brings up form
check! on left. When note
contents are
removed, the note is
deleted.
20

21. Inline Options: Kindle Notes
User enters Note. Notice how the
form & keyboard slide into view and After user taps Save, the keyboard
User chooses Note.
about 6 lines of text disappears. The slides out of view and the bubble
context shouldn’t change! indicates note is present. Very tiny!
21

22. Inline Options: Kindle Highlight
User taps highlight. One word
selected but can use handles to Words highlighted. Options after highlighted. Not
select neighboring words sure why highlight still there.
22

23. 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.
24

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.
25

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.
Kobo
iBooks manages to show the most
information.
26

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.
27

28. Navigation: Home, TOC, & Other Buttons
Clear navigation back
Clear navigation back
to reading.
to reading.
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.
28

29. Navigation: iBooks Bookmarks
Bookmark in the “not Bookmark in the Bookmarks accessible in the
bookmarked” state “bookmarked” state TOC. May be hard to discover.
29

30. Navigation: Kindle Bookmarks
User can tap + to
bookmark. Option at
bottom too. Bookmarked page
Can access bookmarks and
+ also bookmarks location other navigation tools with
“Go to” menu.
30

31. Navigation: Kobo Bookmarks
Bookmark in the Bookmarks tab accessible at all
“bookmarked” state times.
Bookmark in the “not Bookmark in the
bookmarked” state “bookmarked” state
31

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.
32

33. 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.
34

35. 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
36

37. 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

38. Buy my book on Amazon:
Designing the iPhone User
Experience
@suzanneginsburg
http://www.iphoneuxreviews.com