Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. iPad eReader UX Review: iBooks, Kindle, Kobo @suzanneginsburg www.iphoneuxreviews.com 1
  2. 2. Thanks for your interest! Please switch to full-screen view for optimal viewing. 2
  3. 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. 4. Tap Zones 4
  5. 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. 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. 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. 8. Display Options 8
  9. 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. 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. 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. 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. 13. Display Options: Kindle Page/Type Color Kindle has 3 color combinations. 13
  14. 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. 15. Display Options: Kobo Night Reading Kobo “Night Reading” option. 15
  16. 16. Inline Options 16
  17. 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. 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. 19. Inline Options: iBooks Highlighting Highlight color options. Highlighted text. Options once text is highlighted. Not sure where dictionary & search went. 19
  20. 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. 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. 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. 23. Navigation 23
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. Visual Design 33
  34. 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. 35. Design Principles 35
  36. 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. 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. 38. Buy my book on Amazon: Designing the iPhone User Experience @suzanneginsburg http://www.iphoneuxreviews.com