Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Reverted from v. 53 until we have a chance to go further..

...

Description: Patron navigates to the catalog and views ebook or audiobooks using the context switchertabs.

Actor: Patron

Preconditions: Patron has selected a library that contains multiple catalog contexts (in this case, ebooks + audiobooks)logs in with an active library account

Postconditions: Filtered view displaysPostconditions: The chosen context displays the applicable catalog

Main Flow

StepActorActionResultiOS Design (not final)Android Design (not final)Alternate FlowAccessibility Notes
1patron

User navigates to the Catalog tab, either from launching the app,

or from another location / switching libraries / etc.

logs in and navigates to the library catalog
  • displays tabs for:
    • Books
    • Audio
  • ebooks tab is selected by default
  • ebooks are displayed
  • Tabbed interface can be read by a screen reader
    • For Screen reader, tabs
  • Allow a user to switch contexts between:
    • ebooks
    • audiobooks
  • ebooks context is the default
  • Other than the new context-switching UI, the ebooks catalog will effectively remain unchanged from current product
  • Context Switching interface will be fully accessible
    • Each context must announce if selected.
    • Should indicate how many total contexts there areSeparation and selection of contexts should be strong (color + other additions) to satisfy accessibility needstabs in list, ex "Books, selected, 1 of two"

 

 

  • Selected tab needs to be indicated with more than color (Note, Android mockup currently using just color)
2patron2patronselects "audiobooksAudio" contexttab
  • audio books tab displays in selected state
  • audio books are displayed with 'audio' badge or icon as shown
  • Icons
  • it is clear to the user that a new context (audiobooks) has been selected
  • audiobooks thumbnails are easily distinguished from ebooks
  • Icons and any other distinguishing characteristics 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".

1b. Patron searches for an audio book in SimplyE

Description: Patron navigates to the catalog, switches to the audiobook context, and searches for an audiobook

Actor: Patron

Preconditions: Patron enters a title in the search field

Postconditions: Search results are displayed and can be filtered via facets

Main Flow

StepActorActionResultiOS DesignAndroid DesignAccessibility
1patron

User navigates to the Catalog tab, either from launching the app,

or from another location / switching libraries / etc.

(refer to 1a)

 

(refer to 1a)(refer to 1a) 
2patronselects the audiobooks context

(refer to 1a)

(refer to 1a)(refer to 1a) 
3patronwithin the audiobooks context, clicks the 'search' field
  • keyboard displays and search field becomes active
  • patron clicks 'cancel' and is returned to step 2

 

n/an/a 
4patronmakes an entry in the search field and clicks 'return' or 'search'
  • Displays audiobooks that match search parameters
  • audio badge or icon displays as shown
  • All / eBooks / Audiobooks are filtered via the existing facet interface (not shown)
  • Searches with no results are clearly delineated to the user
Image Removed

refer to existing android search and facet UI

 
5patronselecting the "All" context via the facet interface
  • Displays both ebook and audio books that match search parameters
  • The type of the result is clear to the user (ebook or audiobook)
  • Facet UI allows a user to filter between the types offered
  • Search queries are agnostic to the type of the content
Image Removed

refer to existing android search and facet UI

 
 

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)

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

1b. Patron searches for an audio book in SimplyE

Description: Patron navigates to the catalog, tabs to audiobooks, and searches for an audiobook

Actor: Patron

Preconditions: Patron logs in with an active library account and enters a title in the search field

Postconditions: Search results display for audiobooks, 'All' tab displays

Main Flow

StepActorActionResultiOS DesignAndroid DesignAlternate FlowAccessibility
1patronlogs in and navigates to the library catalog
  • displays tabs for:
    • Books
    • Audio
  • ebooks tab is selected by default
  • ebooks are displayed

 

Image AddedImage Added

 

 

 
2patronselects "Audio" tab
  • audio books tab displays in selected state
  • audio books are displayed with 'audio' badge or icon as shown
Image AddedImage Added  
3patronwith 'Audio Books' selected, clicks 'search' field

keyboard displays and search field becomes active

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

  

patron clicks 'cancel' and is returned to step 2

 
4patronmakes and entry in the search field and clicks 'return' or 'search'
  • Displays audiobooks that match search parameters
  • audio badge or icon displays as shown
  • Displays 'All' tab
Image Added If no results are found displays a 'no results found' message. 
5patronclicks 'All' tab

Displays both ebook and audio books that match search parameters

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

Image Added 

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.

 

 


2a. Patron borrows an audio book in SimplyE  

Description: Patron borrows an audio book

Actor: Patron

Preconditions: Patron logs in with an active library account and navigates to an audio book they have not yet borrowed

Postconditions: Patron successfully borrows audio book

Main Flow

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

Audio books display in search results with:

  • 'Get' button if available for download
  • 'Reserve' button if not available for immediate download
    
2patronclicks 'Get'
  • System checks out book
  • System displays:
    • 'Listen' button
    • Number of days left displays
    • If user clicks 'Get' from detail

...

Description: Patron borrows an audiobook

Actor: Patron

Preconditions: Patron navigates to an audiobook they have not yet borrowed and chooses to borrow it

Postconditions: Patron successfully borrows audiobook

Main Flow

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

Audiobooks display in search results with:

  • 'Get' button if available for download
  • 'Reserve' button if not available for immediate download
n/an/a  
2patronclicks 'Get'
  • System checks out book
  • System displays:
    • 'Listen' button
    • Number of days left displays
    • If user clicks 'Get' from detail view, then 'Return Now' button appears in UI

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

n/a

n/a  
3patronviews 'my books' page after borrowing an audio book

Borrowed audiobooks display:

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

 

n/an/a 

 

If wifi drops, show inactive/loading version of the listen button.

There are issues in focus movement when user actives download.

       

Accessibility Tech Debt in current version of app:

  • There are issues in focus movement when user initiates a 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

    Question for UX: does this page display like the "All" tab with both ebooks and audiobooks shown and icons indicating content type? or is there a tabbed interface in my books?

       

    Text display needs to include format.

    2b. Patron views detail page for an audiobook  


    Description: Patron views details page for an audiobook

    Actor: Patron

    Preconditions: Patron logs in with an active library account and navigates to an audio book details page

    Postconditions: Details page displays

    Main Flow

    Step
    Actor
    Action
    Result
    iOS Design
    Android Design
    Alternate Flow
    Accessibility

    2b. Patron views detail page for an audiobook  

    Description: Patron views details page for an audiobook

    Actor: Patron

    Preconditions: Patron logs in with an active library account and navigates to an audio book details page

    Postconditions: Details page displays

    Main Flow

    Needs to include visible text of format, not just badge/icon.
    Step
    Actor
    Action
    Result
    iOS Design
    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)
    • Recommended audiobooks (Feed does not display unless one or more audiobooks are found)
      • Books by the same author
      • Recommended
       
    1patronclicks on the title to view 'Details' page for an audiobook that IS borrowed OR a title that has NOT been borrowed or reserved

    System displays details page for a borrowed an audiobook:

    • cover image
    • title
    • audio badge/icon
    • 'Listen' button (if borrowed) 'Remove' button (if reserved)Get' OR 'Reserve' button
    • Message shows: number of days left (if borrowed) OR 'Available for checkout in less than 5 weeks. #__ in line for __ copies." (if reserved"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)
    • Recommended audiobooks (Feed does not display unless one or more audiobooks are found)
      • Books by the same author
      • Recommended
     Image Removed

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

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

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

     

    2c. 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
    • audio badge/icon
    • 'Remove' button
       

     

    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
    • 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)
    • Recommended audiobooks (Feed does not display unless one or more audiobooks are found)
      • Books by the same author
      • Recommended
     Image Added

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

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

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

     

    2c. Patron reserves an audio book in SimplyE  

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


    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
    Accessibility2patrontaps 'Play' button

    System plays audio book

    System displays:

    • 'Pause' button replaces 'Play' button
    • Scrubber bar moves as book plays
    1patron
    taps '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.

    Might want to use the same styling for the progress bar for both e-books and audio books.

       

    Audio cannot play automatically. Violated WCAG.

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

    views 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
    • audio badge/icon
    • 'Remove' button
       

     

    3. 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
    1patrondrags scrubber barThe audio plays accordingly and the playhead displays the location appropriately   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 'pauseListen'

    System

    stops playing audiobook
  • Scrubber bar becomes inactive (is this right? or can you drag the scrubber to start the audiobook playing again?)
  • 'Play' button replaces 'Pause'

    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.

    Might want to use the same styling for the progress bar for both e-books and audio books.

       Need to discuss this interaction with scrubber bar.
    5patronnavigates 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?   ???
    4. Patron adjusts settings on audio books in SimplyE

    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
        
    3patrondrags scrubber barThe audio plays accordingly and the playhead displays the location appropriately   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 becomes inactive (is this right? or can you drag the scrubber to start the audiobook playing again?)
    • 'Play' button replaces 'Pause'
       Need to discuss this interaction with scrubber bar.
    5patronnavigates 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?   ???


    4. Patron adjusts settings on audio books 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

    *These are placeholder designs. The player functionality in the app will determine UI.

    Step
    Actor
    Action
    Result
    iOS Design
    Android Design
    Alternate Flow
    Accessibility
    2patrontaps '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
     Image AddedImage AddedIs 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.
    3patrontaps 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

     Image Added 

    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?

    4patronselects different speed setting
    • System recognizes new setting
    • Menu disappears, and player is displayed
    • New selection displays in UI
        
    5patrontaps 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

     

     Image Added 

    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.

    6patronselects 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.
    7patrontaps '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.

     Image Added Current setting needs to be indicated to screen reader. See notes in speed menu section about styling.
    8patronselects different sleep

    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

    *These are placeholder designs. The player functionality in the app will determine UI.

    Step
    Actor
    Action
    Result
    iOS Design
    Android Design
    Alternate Flow
    Accessibility
    2patrontaps '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
     Image RemovedImage RemovedIs 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.
    3patrontaps 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

     Image Removed 

    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?

    4patronselects different speed setting
    • System recognizes new setting
    • Menu disappears, and player is displayed
    • New selection displays in UI
        
    59patrontaps 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

     

     Image Removed 

    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.

    6patronselects 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.
    7patrontaps '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.

     Image Removed Current setting needs to be indicated to screen reader. See notes in speed menu section about styling.
    8patronselects different sleep setting
    • System recognizes new setting
    • Menu disappears, and player is displayed
    • New selection displays in UI
        
    listens 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.

     Image Added

     

     

    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.

    Image Added

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

     Image Removed

     

     

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


    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.

    ...