User interfaces including selectable representations of content items

Abstract

In some embodiments, an electronic device presents representations of items of content available for playback on the electronic device. The representations are optionally presented in a horizontally-scrollable row. In response to a user input to horizontally scroll the row of representations, in some embodiments, the electronic device presents an animation of moving a cropping frame/border between respective representations to scroll the presented representations. In some embodiments, an electronic device presents representations of auxiliary content related to an item of content in a product page user interface of the item of content. In some embodiments, an electronic device presents representations of items of content in accordance with content consumption history of the user account. In some embodiments, an electronic device presents representations of bonus content items associated with a series of episodic content.

1 . A method comprising:
 at an electronic device in communication with a display device and one or more input devices:
 displaying, via the display device, a product page user interface for a respective content item, wherein the product page user interface includes a first representation corresponding to auxiliary content created for the respective content item; 
 while displaying the product page user interface, receiving, via the one or more input devices, an input directed to the first representation; and 
 in response to receiving the input directed to the first representation:
 ceasing display of the product page user interface for the respective content item; and 
 displaying, via the display device, an auxiliary content user interface that includes the auxiliary content created for the respective content item. 
 
   
     
     
         2 . The method of  claim 1 , wherein the first representation corresponding to the auxiliary content occupies a full width of the product page user interface and includes a first selectable option overlaid on the first representation, and the input directed to the first representation includes selection of the first selectable option. 
     
     
         3 . The method of  claim 2 , wherein the first representation comprises a moving image background. 
     
     
         4 . The method of  claim 1 , wherein the first representation is one of a plurality of representations corresponding to auxiliary content that are horizontally scrollable in the product page user interface, and the input directed to the first representation includes selection of the first representation that corresponds to first auxiliary content for the respective content item. 
     
     
         5 . The method of  claim 3 , wherein the first representation is an image on the product page user interface that includes a plurality of respective representations corresponding to auxiliary content overlaid on the moving image background, and the input directed to the first representation includes selection of a first respective representation of the plurality of respective representations that corresponds to first auxiliary content for the respective content item. 
     
     
         6 . The method of  claim 5 , wherein:
 in accordance with a determination that the first respective representation of the plurality of respective representations has a current focus, the image is displayed with first information, corresponding to the first respective representation, overlaid on the image, and   in accordance with a determination that a second respective representation of the plurality of respective representations has the current focus, the image is displayed with second information, corresponding to the second respective representation, overlaid on the image.   
     
     
         7 . The method of  claim 1 , wherein:
 the first representation is an auxiliary content representation of a first type, is located at a first location in the product page user interface, and corresponds to first auxiliary content, and   the product page user interface further includes a second representation that is located at a second location in the product page user interface, wherein the second representation is an auxiliary content representation of a second type, different than the first type, and corresponds to second auxiliary content.   
     
     
         8 . The method of  claim 1 , wherein the auxiliary content created for the respective content item is video content that is playing when the auxiliary content user interface is displayed. 
     
     
         9 . The method of  claim 8 , further comprising:
 while displaying, via the display device, the video content in the auxiliary content user interface, receiving, via the one or more input devices, an input including a contact detected on a touch-sensitive surface of a remote control device; and   in response to receiving the input including the contact detected on the touch-sensitive surface of the remote control device, displaying, via the display device, contextual information about video auxiliary content and a progress bar indicating playback progress through the video auxiliary content overlaid on the video auxiliary content.   
     
     
         10 . The method of  claim 9 , further comprising:
 while displaying, via the display device, the video content in the auxiliary content user interface, receiving, via the one or more input devices, an input corresponding to a request to navigate back to the product page user interface for the respective content item; and   in response to receiving the input corresponding to the request to navigate back to the product page user interface for the respective content item:
 ceasing display of the auxiliary content user interface; and 
 displaying, via the display device, the product page user interface for the respective content item, wherein the product page user interface is scrolled to a portion of the product page user interface that includes the first representation. 
   
     
     
         11 . The method of  claim 10 , further comprising:
 while displaying, via the display device, the video content in the auxiliary content user interface, detecting that an end of the video auxiliary content has been reached; and   in response to detecting that the end of the video auxiliary content has been reached:
 ceasing display of the auxiliary content user interface; and 
 displaying, via the display device, the product page user interface for the respective content item, wherein the product page user interface is scrolled to a portion of the product page user interface that includes the first representation. 
   
     
     
         12 . The method of  claim 1 , wherein the auxiliary content user interface includes a first full screen image related to first auxiliary content for the respective content item, and a first auxiliary content user interface element that includes information related to the first auxiliary content that is overlaid on the first full screen image and has a current focus. 
     
     
         13 . The method of  claim 12 , wherein the first auxiliary content user interface element includes a selectable option that is selectable to display, via the display device, the first auxiliary content for the respective content item. 
     
     
         14 . The method of  claim 13 , further comprising:
 while displaying the first full screen image related to the first auxiliary content, and the first auxiliary content user interface element having the current focus, receiving, via the one or more input devices, an input corresponding to a request to navigate horizontally in the auxiliary content user interface; and   in response to receiving the input corresponding to the request to navigate horizontally in the auxiliary content user interface:
 ceasing display of the first full screen image; and 
 displaying a second full screen image related to second auxiliary content for the respective content item, wherein a second auxiliary content user interface element that includes information related to the second auxiliary content is overlaid on the second full screen image and has the current focus. 
   
     
     
         15 . The method of  claim 14 , further comprising;
 while displaying the first full screen image related to the first auxiliary content, and the first auxiliary content user interface element having the current focus, receiving, via the one or more input devices, an input corresponding to a request to navigate horizontally in the auxiliary content user interface that is associated with a movement metric; and   in response to receiving the input corresponding to the request to navigate horizontally in the auxiliary content user interface:
 in accordance with a determination that the movement metric is greater than a threshold movement metric, ceasing display of the first full screen image and displaying a second full screen image related to second auxiliary content for the respective content item; and 
 in accordance with a determination that the movement metric is less than a threshold movement metric: 
 displaying, on the first auxiliary content user interface element, a visual indication of the movement metric without ceasing display of the first full screen image and displaying the second full screen image. 
   
     
     
         16 . The method of  claim 15 , wherein:
 the first full screen image related to the first auxiliary content is one of a plurality of full screen images related to a plurality of items of auxiliary content for the respective content item that can be navigated to from within the auxiliary content user interface,   the auxiliary content user interface includes, overlaid on the first full screen image, a visual indicator of a scroll position within the plurality of full screen images,   in accordance with a determination that a number of the plurality of full screen images is less than a first threshold number, the visual indicator of the scroll position includes discrete scroll position indicators that indicate the plurality of full screen images and a current scroll position within the plurality of full screen images, and   in accordance with a determination that the number of the plurality of full screen images is greater than the first threshold number, the visual indicator of the scroll position includes a continuous scroll position indicator that indicates the current scroll position within the plurality of full screen images.   
     
     
         17 . The method of  claim 16 , wherein:
 in accordance with the determination that the number of the plurality of full screen images is greater than the first threshold number:
 in accordance with a determination that the number of the plurality of full screen images is greater than a second threshold, higher than the first threshold, the continuous scroll position indicator has a first size, and 
 in accordance with a determination that the number of the plurality of full screen images is less than the second threshold, the continuous scroll position indicator has a second size, greater than the first size. 
   
     
     
         18 . The method of  claim 1 , wherein:
 the auxiliary content user interface includes a full screen image related to the auxiliary content for the respective content item, and a plurality of respective representations that are selectable to display respective auxiliary content for the respective content item are overlaid over the full screen image, one of the plurality of respective representations having a current focus,   in accordance with a determination that a first respective representation of the plurality of respective representations has the current focus, the full screen image is a first full screen image corresponding to first respective auxiliary content for the respective content item, wherein the first respective representation is selectable to display the first respective auxiliary content, and   in accordance with a determination that a second respective representation of the plurality of respective representations has the current focus, the full screen image is a second full screen image corresponding to second respective auxiliary content for the respective content item, wherein the second respective representation is selectable to display the second respective auxiliary content.   
     
     
         19 . The method of  claim 1 , wherein the auxiliary content user interface includes:
 a first respective representation, of a plurality of respective representations that are selectable to display respective auxiliary content for the respective content item, that is selectable to display first respective auxiliary content for the respective content item, wherein the first respective representation has a first size and has a current focus, and   a remainder of the plurality of respective representations that are selectable to display respective auxiliary content for the respective content item, wherein the remainder of the plurality of respective representations have a second size, smaller than the first size.   
     
     
         20 . The method of  claim 19 , further comprising:
 in accordance with a determination that the first respective representation has the current focus, animating the first respective representation; and   in accordance with a determination that the first respective representation does not have the current focus, ceasing animating the first respective representation.   
     
     
         21 . The method of  claim 20 , further comprising:
 in accordance with a determination that a second respective representation of the plurality of respective representations has the current focus, forgoing animating the second respective representation.   
     
     
         22 . An electronic device, comprising:
 one or more processors;   memory; and   one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for:   displaying, via a display device, a product page user interface for a respective content item, wherein the product page user interface includes a first representation corresponding to auxiliary content created for the respective content item;   while displaying the product page user interface, receiving, via one or more input devices, an input directed to the first representation; and   in response to receiving the input directed to the first representation:
 ceasing display of the product page user interface for the respective content item; and 
 displaying, via the display device, an auxiliary content user interface that includes the auxiliary content created for the respective content item. 
   
     
     
         23 . A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by one or more processors of an electronic device, cause the electronic device to:
 display, via a display device, a product page user interface for a respective content item, wherein the product page user interface includes a first representation corresponding to auxiliary content created for the respective content item;   while displaying the product page user interface, receiving, via one or more input devices, an input directed to the first representation; and   in response to receiving the input directed to the first representation:
 cease display of the product page user interface for the respective content item; and 
 display, via the display device, an auxiliary content user interface that includes the auxiliary content created for the respective content item.