Queue & Autoplay UX for

Google Cast

Detailed notes are available in following slides.

Basic AutoPlay

Up Next Notification

Sender

Receiver

Up Next notifications alert users of upcoming content. This is not necessary for all content types, but is especially helpful for episodic playback (so users don’t accidentally watch a whole season). Receiver ● The receiver displays a countdown timer and the sender displays a static message “Up Next” (to prevent timing issues) ● The Up Next notification should appear at least 30 seconds before the end of the video or immediately when the credits start Up Next notifications include three key actions: 1. Wait = Waiting till the current content ends (e.g. 30sec) will start playback of the item Up Next 2. Play = Immediately starts playback of content Up Next 3. Stop = Stops automatic playback of content Up Next, and finishes content currently playing a. This does not clear the queue b. Automatic playback of queue items can resume on next play

Timeout Notification

Receiver

Timeout notifications alert users to continue playing content. This is not necessary for Sender all content types, but is especially helpful for episodic playback (so users don’t accidentally watch a whole season). Receiver ● The receiver displays a message (e.g. Are you still watching?) and the sender displays a static message “Up Next” ● The Timeout notification should appear at least 30 seconds before the end of the video or immediately when the credits start ● The Timeout notification should stay visible for 10-20 minutes (providing the user enough time to respond if they were away)

Dynamic Playlisting

The Queue button and Now Playing controls

Persistent control

Full control

Queue

Persistent control ● Always display basic control to the user, not matter where they are in your app ● Persistent control should include: title of content, casting to device message, artwork, play/pause, progress ● Tapping on the persistent control opens the Full control view Full control ● Provide a place in your app where the user has all the controls for content in one place ● Full control should include: ○ title of content playing ○ casting to device message ○ cast button ○ queue button (if available) ○ next/prev if queue (if available) ○ play/pause or play/stop ○ timeline scrubber (if possible) ○ volume icon (iOS only) ○ a link to the content entity page or info ○ ...and any other actions or info necessary

Queue

● ●

The queue view is accessed via the queue button (e.g. queue icon in upper right of header in other screens) Queue should include: ○ queue title ○ cast button ○ ability to clear all items (if items were manually added) ○ ability to manually reorder items (if possible) ○ ability to remove items (if possible) ○ ability to play/pause current item ○ ability to see history of items (if possible) ○ ...and any other actions necessary (e.g. shuffle items)

Adding to the queue

Add options

Add / play options

Added notification

Add options ● Top level options for adding to the queue can aid the user in build a queue quickly ● Queue options can always be available or only appear when the users is connected to a cast receiver Add / play option ● Options can appear when the user taps play while other content is already playing ● Options can appear when the user taps the Add to Queue (plus icon) button in the header Added notification ● User is shown a snackbar (temporary notification) after adding an item to the queue ● Snackbar can include an action to undo the addition ● Snackbar does not need to appear in other connected sender devices

Interacting with the Queue

Reorder items

Remove items

Clear all items

History

Tapping on an item in the queue starts playback of that item. Reorder items ● If possible, provide the ability for users to reorder any item ● Only allow items to be reordered if the user touches the dragger icon on the right ● After reordering items, always ensure that the item following the currently playing item becomes the item Up Next Remove items ● If possible, allow users to remove items (e.g. swipe left or right) ● Indicate that they are removing the item (e.g. show a remove icon) ● Provide a confirmation dialog if necessary Clear all items ● Allow users to clear all items from the queue (e.g. action added to options menu in upper right) ● This action does not need to be visible History ● Allow users the ability to see what they previously played ● Indicating previous content with a slight tonal shift will help users identify



history

Up Next notification

Full control

Persistent control

Queue

Up Next notifications alert users of upcoming content. This is not necessary for all content types, but is especially helpful for episodic playback (so users don’t accidentally watch a whole season). Up Next notifications include three key actions: 1. Wait = Waiting till the current content ends (e.g. 30sec) will start playback of the item Up Next 2. Play = Immediately starts playback of content Up Next 3. Stop = Stops automatic playback of content Up Next, and finishes content currently playing a. This does not clear the queue b. Automatic playback of queue items can resume on next play Persistent control ● Display an Up Next notification below the persistent control ● Do not cover up or remove the ability to control what is currently playing Full control ● Display an Up Next notification within the Full control view ● Do not cover up or remove the ability to control what is currently playing Queue

● ●

Display an Up Next notification directly on the list item that is Up Next When users reorder items in the queue, always make the item following what is currently playing become the item Up Next

Now playing controls for music

Full control

Queue

Controls & queuing for music follow the same guidelines from previous slides, with the key difference being that the user may have additional options (e.g. shuffle, loop, etc).

Summary of Recommendations

Show What’s Next

sender

While the casting content is ending, show a visual indication on the sender device indicating the next content that will autoplay.

Allow autoplay disable

sender

Allow the user to disable autoplay in a menu or settings screen within the sender.

Play immediately

sender

On the sender device, give the user an option to immediately play/cast the next content, without having to wait for the countdown timer.

Stop autoplay

sender

Give the user an option on the sender to stop the next content from auto-playing.This should not permanently disable autoplay.

Pre-buffer

receiver

Begin buffering the next content on receiver prior to the end of the current content, to minimize delay for the user.

Skip unnecessary filler

receiver

When auto-playing episodic content, playback should begin after any intro content, such as “previously on xyz”, as the user just finished watching the previous episode.

Display countdown timer

receiver

Show a countdown timer on the receiver until new content autoplays, with at least 30 seconds for the user to notice and act.

Timeout

sender + receiver

If there is no user intervention for some period of time or number of autoplay events, consider confirming with the user that they wish to continue the autoplay behavior.

thank you

Queue & Autoplay UX Developers

next/prev if queue (if available). ○ play/pause or play/stop. ○ timeline scrubber (if possible). ○ volume icon (iOS only). ○ a link to the content entity page or info.

22MB Sizes 1 Downloads 196 Views

Recommend Documents

Google Cast Gaming UX Mockup Guidelines Developers
Dec 3, 2015 - from each of your platforms (Android / iOS). ... Android 4.4.2+ and part of the Optimized devices for Android Screen casting list ... Page 10 ...

Patient Queue - GitHub
If you are using a Notebook computer with Firefox follow these instructions: .... Claim: this option is selected by a clinician in order to start an exam on a patient. 9 ...

The queue - GitHub
Input file: A.in. Output file: A.out. Time limit: 1 second. Memory limit: 64 megabytes. There is an interesting queue. Cashier of this queue is not a good one. In fact ...

Delay Optimal Queue-based CSMA
space X. Let BX denote the Borel σ-algebra on X. Let X(τ) denote the state of ..... where λ is the spectral gap of the kernel of the Markov process. Hence, from (3) ...

Remote Active Queue Management
work to their Internet provider. The link setup often ... end user's network to the Internet is usually not config- ... deployed in consumer-grade DSL or cable routers.

Data structures part 3 stack, queue, sorting.pdf
STACK – INSERTION- PUSH STACK – DELETION - POP. STEP 1: CHECK STACK “OVERFLOW”. STEP 2: IF TOP < MAX-1 THEN. INCREMENT TOP BY 1.

Contract Advisory Systems Developers and Systems Developers ...
Conducts and/or participates in Operability and System Integration testing of ... Contract Advisory Systems Developers and Systems Developers 2015.pdf.

advanced queue management techniques pdf
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. advanced ...

UX Resume.pdf
Prototyping. Back-End Web Development. Interaction Design. Visual Design. Illustration. Concept Strategy. Business & Competitive Analysis. User Research.

Improving UX through performance - GitHub
Page 10 ... I'm rebuilding the Android app for new markets ... A debug bridge for Android applications https://github.com/facebook/stetho ...

M101P: MongoDB for Developers
Authenticity of this certificate can be verified at http://education.mongodb.com/downloads/certificates/15f46bbaa2244e01a2ac228e5fe9557b/Certificate.pdf.

Singapore Developers
2013E. 2014E. 2015E. Home prices. - Luxury. 2,000. 2,250. 2,800. 2,780. 2,800. 2,800. 2,604. 2,344. - Prime. 1,300. 1,300. 1,600. 1,670. 1,700. 1,700. 1,581. 1,423 ...... SSL Dev. The Stratum. Mass. 900. 827. 9. 57. Apr-12. Nov-12. Kheng Long. Topiar

Google Pay Brand Guidelines for Developers Developers
May 2, 2018 - instructions for using the Google Pay buttons, logo, mark, and text .... Use the Google Pay mark with other brand identities in “credit card” format.

Untitled Developers
Introduction to open source software development. ○ Students have the opportunity to work with real open source organizations. ○ Students earn prizes for ...

2X 7000 Developers
PARKING A BREEZE WITH ANDROID PAY. THE CHALLENGE. Barrier to entry. Parking in any city is tough. Searching for coins is less than ideal. PayByPhone,.

GCC Developers' Summit
GCC requires that both builds use the same inline decisions and similar optimization flags to ensure that the control-flow graph (CFG) that is instrumented in the.

Video Release Developers
permission to copy, host, index, display, route, reformat, distribute, store, ... my child, or my charge; and that, to the best of my knowledge, material included.