Book Reader Bingo: Which Page-Turner Should I Use?

BOOK READER BINGO:WHICH PAGE TURNER SHOULD I USE?

Eben English, Boston Public Library@ebenenglish

Code4Lib 2015

WHAT WE TALK ABOUT WHEN WE TALK ABOUT PAGE

TURNERS

Source: https://flic.kr/p/6Dpfff

WHAT’S IN SCOPE

• web-based

• open source

• updated in last 2 years

ONE OF THESE THINGS IS NOT LIKE THE OTHERS

Source: http://murlocparliament.com/wp-content/uploads/2010/12/1Of_These_Things.jpg

EVERYTHING IS AWESOME

Source: http://cdn.screenrant.com/wp-content/uploads/lego-movie-poster-1970s-astronaut-570x350.jpg

FOR YOUR CONSIDERATION

• Internet Archive BookReader

• WDL Viewer

• Wellcome Player

• Diva.js

• Mirador 2*

INTERNET ARCHIVE BOOKREADER

https://github.com/openlibrary/bookreader

INTERNET ARCHIVE BOOKREADER

Strengths•lots of examples to draw on

•supports keyword search

•embeddable (via <iframe>)

Drawbacks•harder to work with images of varying sizes

•zoom not tile-based

•lacks: rotation, page # input, structural nav

WDL VIEWERhttps://github.com/LibraryOfCongress/wdl-viewer

WDL VIEWERStrengths•supports search (in a branch)

•tile-based zooming

•image rotation

Drawbacks•search results display “linear”-only

•page # index display reflects image index rather than book pages

•lacks: structural nav

WELLCOME PLAYERhttps://player.digirati.co.uk/

WELLCOME PLAYERStrengths•book-smart page numbering

•supports multi-volume works

•keyword searching, structural nav, item information

Drawbacks•page loading status unclear

•confusing image # input

•lacks: 2-page “book” view, full-screen view

DIVA.JShttp://ddmal.github.io/diva.js/

DIVA.JSStrengths•controls for changing brightness, contrast, rotation

•supports keyword search

•vertical and horizontal reading layouts

Drawbacks•requires IIP Image server

•image vs. page numbering

•lacks: structural nav, contextual info

MIRADOR 2*http://github.com/iiif/m2

MIRADOR 2*Strengths•side-by-side comparison of multiple items

•annotation support

•structural navigation

Drawbacks•no search support (yet)

•controls sometimes obscured by content

•lacks: keyboard shortcuts for page navigation

OTHER CRITERIA(SEE APPENDIX)

• how actively maintained is it?• code weight• documentation• mobile/tablet UX• older browsers UX• implementation process• # of implementations

IIIF PRESENTATION APIhttp://iiif.io/api/presentation/2.0

• API to deliver structural and presentation info

• returns JSON-LD

• abstracting page sequence out of the data passedto viewer functions

• allows for richer structural navigation

• easily share works between repositories

Source: http://iiif.io/api/presentation/2.0/img/objects.png

IIIF PRESENTATION APIranked by level of compliance

• Mirador 2: fully compliant

• Internet Archive BookReader: IIIF-compliant fork(https://github.com/aeschylus/IIIFBookReader)

• Diva.js: branch with work on Image and Presentation APIs

• Wellcome Player: Image API, but not Presentation API (yet)

• WDL Viewer: no known activity?

USABILITY TESTING

• What features do users really want?

• What features are most useful?

• What features are lacking?

• Which book-reader do they like best?

USABILITY OBSERVATIONS

PRINT READING MODELS DON’T ALWAYS TRANSLATE

“If I have to use the Table of Contents, it means something’s not working right.”

Winners: Wellcome Player, Mirador 2


USERS MOVE IN MYSTERIOUS WAYS

•controls should be consistent no matter what view or mode is being used

•reading and research functionality (cite, link, info, etc.) should be integrated

Winners: Wellcome Player, Internet Archive BookReader


FUNCTION OVER FORM...

...but form is still important.

•maintaining the “book” feel adds to the users’ enjoyment of the interface

Winners: WDL Viewer, Internet Archive BookReader


USERS ARE IMPATIENT

• the app needs to be fast

• any image loading should be clearly communicated

Winners: Diva.js, WDL Viewer


MOST VALUABLE FEATURES•keyword searching

•structural navigation

•page # input

•in-reading research functions (download, link, info, etc.)

Winners: Wellcome Player, Internet Archive BookReader


MISSING FEATURES

•selecting and copying text

•printing pages

•annotations

•bookmarks

SO WHICH ONE SHOULD I USE?

• content types are important

• IIIF API support

• mobile/tablet usage will continue to increase

• care and feeding of the code

ACKNOWLEDGEMENTS

• BPL: Steven Anderson, Manny Adumbire

• Simmons College UXPA Group

QUESTIONS

Eben English

eenglish [at] bpl.org

@ebenenglish

APPENDIX

ACTIVELY MAINTAINEDranked by # of commits in the last 12 months

1. Diva.js

2. Mirador 2*

3. Wellcome Player

4. Internet Archive BookReader

5. WDL Viewer

APPENDIX

CODE WEIGHTranked (lightest to heaviest) by total KB of JS + CSS + images (uncompressed)

1. WDL Viewer

2. Diva.js


4. Mirador 2*

5. Wellcome Player

APPENDIX

DOCUMENTATION(subjectively) ranked by comprehensiveness and helpfulness of documentation

1. Diva.js

2. Wellcome Player


4. WDL Viewer

APPENDIX

MOBILE/TABLET UX(subjectively) ranked by user experience on iOS and Android

1. Mirador 2*

2. WDL Viewer

3. Diva.js

4. Wellcome Player


APPENDIX

OLDER BROWSERS UXranked by user experience in IE8

YEP: Wellcome Player, WDL Viewer

NOPE: Diva.js, Internet Archive BookReader, Mirador

2*

APPENDIX

# OF IMPLEMENTATIONSranked by # of forks of GitHub repo


2. Diva.js

3. Wellcome Player

4. WDL Viewer

APPENDIX

IMPLEMENTATION(subjectively) ranked by ease of implementation

1. WDL Viewer


3. Mirador 2*

4. Wellcome Player

5. Diva.js

Education

Book Reader Bingo: Which Page-Turner Should I Use?