Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Designs: https://www.figma.com/file/VJuFJNGaVSwdXF2VWiVuZ4oe/NYPL-SimplyE-mobile?node-id=28%3A3

1a. ANDROID Patron browses audio books in SimplyE 

...

Main Flow

Mobile Design

 

 
StepActorActionResultAlternate FlowAccessibility Notes
1patronlogs in and navigates to the library catalog
  • displays header/facet with selectable options for:
    • Books
    • Audiobooks
  • Books is selected by default
  • ebooks are displayed
  • Selectable interface is accessible and can be read by a screen reader
    • Screen reader must announce if selected.
    • Should indicate how many selections in list, ex "Books, selected, 1 of two"
    • Selected state is clear to the user (implementation tbd)

If audiobooks are turned off in the circulation manager for the library, then no entry point will exist for audiobooks. In this case, the facet/header should be hidden.

(Willa will advise if it should say "Format, books" and also display the word format somewhere so that users know what the menu is called.)

2patronselects "Audiobooks"
  • audiobooks displays in selected state
  • audiobooks are displayed in the lanes
  • Audiobook badge is shown on all audiobooks
    • Icons must be accessible: Book format, indicated with small red icon, should also be represented as programmatically accessible text. So a screen reader would hear "title of book"+"audiobook" or "title of book"+"ebook".
  • Screen reader:
    • focus stays on the selected segment (audiobooks)
    • announces "audiobooks selected"
 

If no audiobooks are available at a library, then UI presents a message, "Sorry, no audiobooks were found."


 

When a user selects a new tab, the focus should stay on that tab (is screen reader user isn't bumped back to top of page) KW: this may not be applicable if we aren't using tabs?

WA Note: the focus should stay on the selected segment. – same principle of not moving focus unnecessarily.

When a user selects a new format, once the new books load that is announced to a user of a screen reader. Chat about best approach.

1b. iOS Patron browses audio books in SimplyE

Description: iOS Patron navigates to the catalog and browses by selecting ebook, audiobooks, or all formats.

Main Flow

iOS Design

Image RemovedImage Removed

https://www.figma.com/file/VJuFJNGaVSwdXF2VWiVuZ4oe/NYPL-SimplyE-mobile?node-id=28%3A3
StepActorActionResultAlternate FlowAccessibility Notes
1patronlogs in and navigates to the library catalog
  • displays header/facet with selectable options for:
    • Books
    • Audiobooks
  • Books is selected by default
  • ebooks are displayed
  • Selectable interface is accessible and can be read by a screen reader
    • Screen reader must announce if selected.
    • Should indicate how many selections in list, ex "Books, selected, 1 of two"
    • Selected state is clear to the user (implementation tbd)

 

 

If audiobooks are turned off in the circulation manager for the library, then no entry point will exist for audiobooks. In this case, the facet/header should be hidden.

 

2patronselects "Audiobooks"
  • audiobooks displays in selected state
  • audiobooks are displayed
  • 'audio' badge or icon is shown on all audiobooks
    • Icons must be accessible: Book format, indicated with small red icon, should also be represented as programmatically accessible text. So a screen reader would hear "title of book"+"audiobook" or "title of book"+"ebook".
  • Screen reader:
    • focus stays on the selected segment (audiobooks)
    • announces "audiobooks selected"

If no audiobooks are available at a library, then UI presents a message, "Sorry, no audiobooks were found."

When a user selects a new segment/facet, the focus should stay on that segment (screen reader user isn't bumped back to top of page)

When a user selects a new segment, once the new books load that is announced to a user of a screen reader. Chat about best approach.

2. Patron searches for an audiobook in SimplyE

Description: Patron selects audiobooks format and clicks on the search field, enters a book title, and views audiobooks results.

Main Flow

 
StepActorActionResultiOS DesignAndroid DesignAlternate FlowAccessibility
1patrontaps the search field with "Audiobooks" selected
  • keyboard displays

  • search field becomes active

*Note: there is a bug that shortens the search field. This must be fixed.

 

  
2patronmakes an entry in the search field and clicks 'return' or 'search'
  • Displays audiobooks that match search parameters
  • displays 'All' option in the selection menu/facet
  • audio badge or icon displays as shown
Image RemovedImage Removed 
If no results are found displays a 'no results found' message. 
3patronselects 'All'

Displays both ebook and audio books that match search parameters

audio or ebook badge/icon displays on each to indicate content type

  

Patron clicks "books" tab and it displays all ebooks matching search parameters

IF patron entered search parameters with Books tab displayed, THEN they will be able to click the Audio tab and see all audiobooks matching search parameters.

 

 


3. Patron borrows an audiobook in SimplyE  

Description: Patron borrows an audiobook

Main Flow

iOS Design
Step
Actor
Action
Result
Android Design
Alternate Flow
Accessibility
1patronBrowses or searches for an audio book

Patron searches for an audiobook (see alternate flow for borrowing from details page):

Audio books display in search results with:

  • 'Get' button if available for download
  • 'Reserve' button if not available for immediate download

Screenreader should:

  • reads "get"
  • (nice to have) reads "get" plus the title of book when there is focus on the button  
 

Patron navigates to the details page:

    • 'Get' button if available for download
    • 'Reserve' button if not available for immediate download
    • Message displays in banner: "This book is available to borrow."
 
2patronclicks 'Get'
  • System checks out book
  • System displays:
    • 'Listen' button
      • Accessibility: focus stays on the button and new button state is announced
    • Number of days left displays
      • with focus still on the button, number of days left is announced (just on the immediate state change)

(From a User perspective flow should be identical to borrowing ebooks.)

 

For a screen reader user, the focus should stay on the same part of the page once they hit "get" or "reserve" button. After they hit either of those buttons, the focus stays on the loading area and the state is communicated, ex. "Requesting". Once the book is reserved or checked out and the buttons change, the focus should stay on the new "Read" button. It should also be announced the number of days that the user has until the book is returned.

 

  


Patron clicks 'Get' from the details page:

  • 'Listen' button replaces 'Get'
    • number of days left displays
    • Accessibility: focus stays on the button and new button state is announced
    • with focus still on the button, number of days left is announced (just on the immediate state change)
  • 'Return' button displays
  • message in banner: "Your audiobook is ready!"

For screenreaders:

The focus should stay on the area of the selected book. It should announce a loading message, like "Requesting". Then when the request has been put through, the updated text should be announced, which will be "Title, author, buttons." The buttons will either be "Remove" if the book has been reserved or "Listen" button and "Return" button if the book has been checked out.

There are issues in focus movement when user actives download.

Download progress needs to be announced to users of screenreaders.

Screenreader users need to be notified when Download is complete.

Text display needs to include format.

3patronviews 'my books' page after borrowing an audio book

Borrowed audiobooks display:

  • cover image
  • title
  • audio badge/icon
  • 'Listen' button
  • number of days left

 

 

 

 

Text display needs to include format.

4. Patron views detail page for an audiobook  

Description: Patron views details page for an audiobook

Main Flow

iOS Design
Step
Actor
Action
Result
Android Design
Alternate Flow
Accessibility
1patronclicks on a title that has NOT been borrowed or reserved

System displays details page for an audiobook:

  • cover image
  • title
  • audio badge/icon
  • 'Get' OR 'Reserve' button
  • Message shows: "This book is available to borrow." (with Get button) OR "All licenses of this book are currently checked out." (with Reserve button)
  • Description
  • Information about audiobook including:
    • Published: (date)
    • Publisher: (name of publisher)
    • Category: (mystery, horror, romance, etc...)
    • Distributed by: (distributor)
    • Narrated by: (name of narrator, if available) (Out of scope for 3.0 delivery)
  • Recommended audiobooks (Out of scope for 3.0 delivery)
    • Books by the same author
    • Recommended
   Needs to include visible text of format, not just badge/icon.
1patronclicks on the title to view 'Details' page for an audiobook that IS borrowed OR reserved

System displays details page for a borrowed audiobook:

  • cover image
  • title
  • audio badge/icon
  • 'Listen' button (if borrowed) 'Remove' button (if reserved)
  • Message shows: number of days left (if borrowed) OR 'Available for checkout in less than 5 weeks. #__ in line for __ copies." (if reserved)
  • Description
    • Title
    • Author name
    • Format: (ebooks or audiobooks) (Question - can this fit into the regular view as well? Nice to have for the 3.0 delivery)
    • Narrated by: (name of narrator, if available) (Out of scope for 3.0 delivery)
  • Information about audiobook including:
    • Published: (date)
    • Publisher: (name of publisher)
    • Category: (mystery, horror, romance, etc...)
    • Distributed by: (distributor)
  • Recommended audiobooks (Out of scope for 3.0 delivery)
    • Books by the same author
    • Recommended
 

*What happens if the connection is lost? or if the download is lost?

Jack will give us a download state on the player view.

would this just be a message in the banner "Click Listen."

Needs to include visible text of format, not just badge/icon.

 

5. Patron reserves an audio book in SimplyE  


Description: Patron reserves an audio book

Actor: Patron

Preconditions: Patron logs in with an active library account and navigates to an audio book that is not available for borrowing, but is available to be reserved.

Postconditions: Patron successfully reserves audio book and views reservation in "Reservations" 

Main Flow

 
Step
Actor
Action
Result
iOS Design
Android Design
Alternate Flow
1patronviews an audio book that is available to be reserved

Audio books displays with

  • 'Reserve' button active
  
2patronclicks 'Reserve'

System reserves book

System displays 'Remove' button

  

 
3patronviews 'Reservations' page after reserving an audio book

Reserved audio books display:

  • cover image
  • title
  • author
  • audio badge/icon
  • 'Remove' button
  
 

 

6. Patron listens to an audio book in SimplyE

Description: Patron listens to the audio book they have borrowed

Actor: Patron

Preconditions: Patron has borrowed an audio book

Postconditions: audio book plays on patron's device

Main Flow

Step
Actor
Action
Result
iOS Design
Android Design
Alternate Flow
Accessibility
1patrontaps 'Listen'

System displays audio player with:

  • Top or bottom nav with icons for: TOC, speed, sleep
  • Title and cover image
  • Scrubber bar showing progress through book
  • Play button

Note: user must tap the play button to begin playing book. UX feedback is that the book should not begin playing automatically.

 

Image Removed

this will be replaced by design

 

Audio cannot play automatically. Violated WCAG.

Users should be able to adjust volume of audiobook independent of system volume.

2patrontaps 'Play' button

System plays audio book

System displays:

  • 'Pause' button replaces 'Play' button
  • Scrubber bar moves as book plays
  • Timer count-up (left end of the scrubber bar) updates as book plays
  • Timer count-down (right end of the scrubber bar) updates as book plays
  • Remaining hours and minutes (above scrubber bar) update as book plays
  • "Part ___ of ___" displays the correct track.
  

Stream/download fails (is this the step in which it will fail?)

 
3patrondrags scrubber bar while audio is PLAYING
  • The playhead displays at the new scrubber position
  • Timer count-up and count-down reflect new scrubber position
  • remaining hours/minutes display reflect new scrubber position
  • The audio plays audio corresponding to new scrubber position
 
 

drags scrubber bar while audio is PAUSED

All behavior described in the main flow should work the same except that the player should not begin playing again until user taps "Play" button.

Functionality needs to work for screenreader with feedback on where user is. If moving the scrubber causes audiobook to read very quickly at corresponding place in audio, that may present conflict with screenreader so need to discuss.
4patrontaps 'pause'
  • System stops playing audiobook
  • Scrubber bar stops moving, timer stops advancing
  • 'Play' button replaces 'Pause'
  
  
  skips forward or backward while      
      
          
7patronnavigates away from the player

when patron gets a phone call, or starts using another app, behavior should be as it is for any app, but need to describe it here.
Question: does it pause for all apps or does it let you listen while you are doing other things. How are we controlling this?

When audio is playing and user navigates away from the player to another page within the app, a mini player can be shown so that user can continue listening while browsing another content. (UI TBD)

 

 
    skips forward or backwardQuestion: A skip feature is described in the acceptance criteria, but is not shown in the designs. Is this a feature that we will offer?   ???

7. Patron uses Table of Contents

Description: Patron uses that table of contents (TOC) in an audiobook

Main Flow

Step
Actor
Action
Result
iOS Design
Android Design
Alternate Flow
Accessibility
1patrontaps 'Listen' for an audio book they have borrowed

System displays audio player with:

  • icons for: TOC, speed, and sleep settings
  • Title and cover image
  • Scrubber bar showing progress through book
  • Play button
  


 

Is the cover image being used to convey the author info? This should be conveyed as alt but presents an issue for patrons with low vision and/or color blindness.
2patrontaps Table of Contents icon

System displays:

  • Header: Table of Contents
  • menu showing title of chapter, section, or sub-section
    • if chapter has finished downloading, length of track displays
    • if chapter is still downloading, progress wheel displays
  • UI indicates track/chapter that is currently selected or playing

Note: Chapters still downloading can't be selected

 

How is this announced to screen readers, all apiece? Ie "Forward 24 minutes 12 seconds"

The indication of the current chapter needs to be communicated to screen readers.

The downloading icons/whatever that grey circle is both need to have alts for screenreaders.

3patronselects a different chapter/track from the TOC menu
  • System recognizes new selection
  • Menu disappears, and player is displayed
  • Scrubber for new chapter displays
  • Selection begins playing

Question: should the chapter begin playing as soon as it is selected or does the listener have to click the "play" button?

   Audio should not play automatically.

 

8. Patron adjusts sleep and speed settings on audiobooks in SimplyE


Description: Patron adjusts the settings on an audio book

Actor: Patron

Preconditions: Patron has borrowed an audio book

Postconditions: Settings for speed, sleep, device are adjusted

Main Flow

 

Step
Actor
Action
Result
iOS Design
Android Design
Alternate Flow
Accessibility
1patrontaps 'Listen' for an audio book they have borrowed

System displays audio player with:

  • icons for: speed, and sleep settings
  • Title and cover image
  • Scrubber bar showing progress through book
  • Play button


Is the cover image being used to convey the author info? This should be conveyed as alt but presents an issue for patrons with low vision and/or color blindness.
2patrontaps speed setting icon

System displays:

  • speed icon in selected state
  • menu with speed-of-play options
  • UI indicates currently-selected setting

Note: UI will be as per iOS and Android players

  

The placeholder mockup is depending on context of the list items and color to communicate which menu this is. I would prefer if the sleep icon was not shown, to reduce possible confusion. What is this going to be like for a screen reader? What's the order of the page?

3patronselects different speed setting
  • System recognizes new setting
  • Menu disappears, and player is displayed
  • New selection displays in UI
    
4patrontaps 'Sleep' icon

System displays:

  • sleep icon in selected state
  • menu with sleep timer options
  • UI indicates currently-selected setting

Note: UI will be as per iOS and Android players

Out of scope for initial release: Would be nice to be able to turn off the timer if user changes their mind (or can't go to sleep and wants to listen longer)

Out of scope for initial release: Would be nice to display the sleep timer on the UI when it is active.

 Current setting needs to be indicated to screen reader. See notes in speed menu section about styling.
5patronselects different sleep setting
  • System recognizes new setting
  • Menu disappears, and player is displayed
  • New selection displays in UI
    
6patronlistens until sleep timer goes off
  • System recognizes that sleep timer has gone off
  • System puts the device into a "sleep" state:
    • Player stops
    • Player is grayed out
    • Sleep icon displays 'sleeping' state
  • Note: A true "sleep state" is probably not what's desired.
    This basically turns the phone off, which most people don't do overnight.
    Confirm with Greg or Winnie that this is how the feature should work.

  

 

 

There are a couple accessibility threads we need to confirm for this.

Open Questions

 QuestionRelated toAsked byResponses
1If the user opens an audio book player, opens the table of contents, starts one or more parts downloading, closes the table of contents, closes the player... Are the parts still downloading? If the parts are downloading, this implies that there are one or more instances of the `AudioBookType` that is living somewhere globally in the app, independently of any particular activity, and that parts of the app can get references to them to control them. Mark

Kim: Looking at how Overdrive/Libby does this. If I stop playing the book before it is downloaded I get a "download paused," message. Seems like we should do something similar. Here is a screenshot of how Libby displays a paused download. Will ask Jack to weigh in on this.

Mark: It looks as though that screenshot is from something analogous to our "book detail view" in the SimplyE catalog section. If so, then that definitely does imply that `AudioBookType` instances exist outside of the player activity; if they didn't, then there'd be no way to display the current download status in the catalog.

2If book parts are allowed to continue downloading in the background, how is error reporting actually implemented? Do we just pop up a dialog box anywhere the user happens to be, whenever a book part publishes an error event? That's awkward to implement on Android. Mark 
3How do we implement tabs in the catalog? Last time i looked, the catalog was activity based instead of fragment based... How does this work with tabs?Use Case 1a & 1bMark 
4The requirements talk about being able to "close" the player view and still have the book playing, possibly with a small player view that appears in the catalog. How can this be achieved? If the player instance (not the view) is instantiated in an activity (and the activity "owns" the player), then we lose the reference to that player instance when the activity is closed. References to players are not serializable and can't be passed between activities. Mark 
5When the user borrows an audio book, it's necessary to fetch the book manifest so that an `AudioBookType` instance can be instantiated from it. When exactly is this manifest fetched? Manifests appear to be able to expire (Findaway books in particular have session IDs), so fetching them eagerly and saving them to disk might not be a good idea. Are manifests saved on disk? Mark 


Out of Scope Items

  1. Supporting the web app is out of scope for the October release, but for a later release: need to implement an alternate flow for the web app. so that it displays a message to go to SimplyE to listen. This would be the same downloading most ebooks. Need a design, including accessibility requirements.
  2. After launching 3.0, test whether users expect to see last tab selected when they view catalog.

...