Game UX Guidelines
Transcription
Game UX Guidelines
Cast Games Introduction Cast games use Google Cast to create great multi-screen gaming experiences Players can Cast a game from a mobile device (the Sender) to a Cast-enabled display (the Receiver). Smartphone and tablet games can now be be extended to the biggest screen and best speakers in the house, and the mobile devices serve as game controllers for multiple players. This guide explains the basic UX elements of a Cast game including considerations for multi-screen experiences, and is intended for both designers and developers. Cast Game Principles lay the foundation for designing multi-screen games Game principles provides an understanding of the underlying design principles behind Cast games. This will help game developers determine what kind of game to make and the important considerations when designing a game for Google Cast. Cast Game Elements provide more in-depth requirements and recommendations Whether your game is single player, multiplayer, Cast-required, or Cast-enabled, Game elements is a resource for an in-depth understanding of designing Cast games. Game principles Game principles These principles give an overview of several Cast gaming models, and describe best practices for connectivity, device interactions, multi-screen considerations, multiplayer games, smooth gameplay, and how to create great gaming experiences that cast to the TV screen. Cast-enabled vs. Cast-required games Decide if Casting is required or optional for gameplay. Choosing between making a Cast-Required or Cast-Enabled game is an important rst step in integrating Google Cast. Some models and game mechanics align more with Cast-Enabled use cases, and some lean towards Cast-Required use cases. Cast-enabled games are existing games modi ed to support Google Cast, or they are new games that use Google Cast to extend gameplay to the big screen. Gameplay is enhanced by, but not dependent on Cast. Cast-enabled gameplay Casting can begin at any time during the game experience. Cast-required games are built speci cally to take advantage of the Google Cast model and its capabilities. Gameplay depends on Cast capabilities, like a shared TV screen and multiple private displays. Cast-required gameplay Casting starts at the beginning of the game experience. Game setup Make game setup with Google Cast fast and easy. When players go to connect their sender device to a receiver device using Cast, it should be a simple and intuitive experience. Instructions should be clear, and loading states and error messages should be informative and helpful. Do. Don't. Provide informative instructions Provide vague descriptions of with wait times and clear actions loading states or error messages. the player can take. Available controls Be mindful of the game in progress while providing easily available Cast controls. Cast controls (connect, disconnect, etc.) should be easily available without disrupting gameplay. Typically the cast controls should be located in the Menu or Pause screen with other game controls. Input methods Choose your input method with care. Do. Don't. Provide easy and intuitive access Important game controls and the to important controls, such as Cast menu should not be hidden game settings and the Cast menu several menus deep and should without interrupting gameplay. not hinder or interrupt gameplay. With the mobile device as your game controller, there are a variety of input methods available to your game, from Abstract to Direct. Different controls have different bene ts and drawbacks, which will depend largely on game mechanics. When deciding on the game’s input method, consider the game’s key Input methods characteristics, such as: Input methods fall on a spectrum, ranging from abstract to direct. Pace of play Public vs. private information Single player vs. multiplayer Latency sensitivity For example, if the game is fastpaced, it must support the player’s need to switch focus between the TV and the controller and react quickly. A “no-look” accelerometerbased control (an abstract control) might be most suitable. Abstract control Virtual control Direct control Control objects on the TV screen via Use touchscreen controls to Touch the object directly to broad gestures, such as motion or manipulate game elements on TV manipulate it from your mobile large swipe movements on the (i.e. a virtual joystick or d-pad). device. The player needs to understand how The player’s focus needs to touchscreen. The advantage of this type of control the touch screen is being used, and if temporarily be on the mobile device, is that players intuitively know how to there are speci c touch regions for such as when selecting a potion to do these actions, and gameplay can use, a card to play, or an answer to a different actions. be simple and fun. Mobile devices as controllers Make the device an awesome controller. trivia question. Consider all mobile phone/tablet software and hardware capabilities when designing game controls. While touch screens lend themselves nicely to a number of interactions, there are many more to explore and experiment with when considering the entire device. Explore alternate interactions using the mobile device Other inputs and controls might include: Take advantage of the various sensors and additional capabilities that mobile dev make gameplay controls fun and distinctive. Microphones Accelerometers Cameras Light sensors Pressure sensors Voice processing Dual-screen usage Two screens are better than one. Use both wisely. A Google Cast game enables the use of both a sender screen (typically a mobile phone or tablet) and a receiver screen (high resolution TV/display). Design the game for the tenfoot experience using TV design guidelines and for the one-foot experience using mobile guidelines. Design for the one-foot experience and the ten-foot experience You’ll need to direct the user’s attention to the right screen at the Each screen’s design will support different aspects of gameplay, appropriate for th right time. position of that screen. Direct the player’s focus in very obvious ways at the right times. Having to focus on controls while gameplay is happening on TV can be a frustrating experience. Sender Receiver Provide clear instructions on the Provide clear instructions on the sender to direct attention to the receiver to direct attention to the receiver when necessary, such as sender when important gameplay when a player needs to look at interaction needs to occur, such the TV to start playing. as when it is a particular player’s turn to answer a quiz question on their mobile device. Multiplayer, local and remote Make it easy to play with friends locally and remotely. Google Cast games can be great group experiences. When designing for multi-player gameplay consider nding ways for multiple participants to join (and leave) the game with the least amount of friction possible. Player status should be clearly Multiplayer games can be played with people near and far. communicated to the other players at all times. Designing for multiple players means nding smooth transitions and easy gamep supports players joining and leaving before gameplay starts as well as during the Recommended: consider making single player games provide the option for multi-player games and vice versa. Game elements Game elements overview The following sections provide best practices and examples of important game elements that Cast games should include. While every game will have its own distinct gameplay and experience, the Cast elements must be consistent and help players of your game have the best experience with Google Cast. Some terms you will see throughout the Game elements sections: Sender - this is the mobile device (smartphone, tablet) that uses Cast to connect to a display Receiver - this is the Cast device (like a Chromecast) that displays your game content on the TV, controlled by the sender device. The Receiver is implemented as an HTML page which runs HTML/JS code, or it renders a mirrored second screen stream from the mobile device. Game audio - once connected, game audio should be played on the Receiver, and sound effects can be played on the Sender. Cast button - a Cast UI element that should be present throughout the game experience. Cast menu - a Cast UI element that should be present whenever a player taps on the Cast button Cast Call To Action (CTA) button - used in Cast-required games, this button opens the Cast menu and launches gameplay once a Cast receiver is connected. Host player - for multiplayer games, the player that initiates the game is the host. The host may have speci c roles and controls that other players do not have. If the host leaves the game, host duties are transferred to the next player who joined the game. Non-host player - for multiplayer games, all players that do not have the host role. Game lobby - an interstitial state before gameplay while players are joining a multiplayer game. Speci c Cast UI elements can be found for use in <crosslink resources-anddownloads/resources-and-downloads.html#resources-and-downloads | Resources and downloads>. Game elements Introducing Cast Introducing Cast Below are guidelines for introducing Cast to your players. Introducing Cast in a Cast-enabled game A Cast-enabled game can be played without Google Cast, but can also cast a screen to a Google Cast device. Required: Introduce Cast upon rst launch of the game in a Cast-enabled game. Show a platform-appropriate noti cation to introduce Cast to players the rst time the Cast button appears in the app. This is typically done by Sender Sender noti cation that explains how When Cast is available, the Cast When Cast is not available, the to use it, for example, “Tap the button is present. Cast button is not present. highlighting the Cast button, and showing a tooltip or Cast button to play on TV.” Introducing Cast in a Cast-required game Some games require Cast for the gameplay experience. For games like these, Cast integration and the Cast connection status should be clear upon launching the application. Recommended: Introduce Cast upon rst launch of the game in a Cast-required game. Cast does not need to be explicitly introduced for a game that requires Cast to play. This is accomplished implicitly via the Cast Call to Action (CTA) button. Cast CTA button No Cast device found If there are no Google Cast The Cast CTA button is also the This error screen should say, devices found or if a network start-gameplay button. "This game requires a Google is not detected, then inform Cast device to play, but no device the user. was found. Please make sure you are on the same Wi-Fi network as a Google Cast device, or near a device with Guest Mode turned on." Game elements Cast button Cast button The Cast button is the signature UI element that demonstrates Casting abilities to a player. Using the appropriate icon and animation is essential to keeping the Cast experience consistent and user-friendly. Following these guidelines will help make sure players are always aware and in control of Cast functionality: The Cast button must be discoverable on the rst screen of the game. The Cast button should always be accessible. During gameplay, the Cast button must appear within the game’s pause menu, out of the way of gameplay controls. Cast button basics The Cast button is represented by the Cast icon, which follows the same guidelines as in video and music apps that use Goog Cast. Tapping the Cast button invokes the receiver selector menu, or the Cast Menu. Cast button states When the Cast button is visible, communicate the status of the Cast connection by implementing the appropriate Cast button state. The cast icon can be “wrapped” in a visual treatment that matches the style of game (instead of being free- oating as seen in the image to the right). Examples might include a visual treatment that looks etched into rock or oating inside a water bubble. However, the icon shape cannot be altered. The Cast icon can be optionally color tinted to stand out from the background. Connection animation Sender: Disconnected Cast button Sender: Connected Cast button When the sender is establishing a Missing video: webm. Cast connection with the receiver, the Cast button should show this status with the connecting animation seen to the right. Cast button animation Availability when launching a Cast-enabled game Required: The Cast icon should be visible when Casting is available and not visible when Casting is not available in a Castenabled game. Upon launching a Cast-enabled game, the player should see the Cast button in the top right corner of the application. Sender Launching a Cast-enabled game When the player taps on the Cast button, the Cast Menu opens to show the available Cast devices on the network. The player can then select a Cast device. Sender The Cast Menu shows available Cast devices on the network. A player can tap on select it as the desired Receiver Device. When no Cast devices are found, the Cast button does not appear. Players can play the game as normal, but Casting is not an option when there are no available Cast devices. Sender The Cast button is not visible to the player when there are no available Cast device Availability when launching a Cast-required game Required: The Cast icon should be visible on the Call to Action (CTA) button immediately upon launching a Cast-required gam Upon launching a Cast-required game, the player should see the Cast icon within the Call to Action (CTA) button that starts gameplay. Sender Launching a Cast-required game When the player taps on the CTA button and Cast devices are found on the network, the Cast Menu shows the available Cast devices. Sender The Cast menu shows available Cast devices on the network. When the player taps on the CTA button and no Cast devices are found on the network, an alert is displayed. This alert should provide the player with the ability to retry the connection and learn more about the problem. Sender The alert tells the player that the game requires a Cast connection to play and tha Cast devices were found on the network. Availability before gameplay As soon as the game is launched, the Cast button is available on all screens before gameplay starts unless the sender device cannot connect to the Cast network or there are no available Cast receiver devices. Sender The Cast button is accessible in the top right corner of the screen on all states be starts. If the player connects to a receiver before gameplay starts, the receiver should display the game splash screen or idle screen. Receiver When a receiver is connected but gameplay has not started, display an idle or inte Sender Sender Sender The Cast button is accessible on all The Cast button is accessible on all The Cast button is accessible on all screens before gameplay starts. screens before gameplay starts. screens before gameplay starts. Availability during gameplay Active gameplay is the only time when the Cast button is not visible. This is to keep focus on the game itself and guards against accidental input during gameplay. Sender Cast button is not accessible during active gameplay When gameplay is paused, the Cast button is visible in its usual position in the game menu. Sender Cast button is present on the pause screen Alternate placement of the Cast button Ideally the Cast button is in the top right corner, but if this is not possible because the UI is overloaded with game controls, the Cast button should go in another corner so that it is visible but not in the way of other game UI elements. Sender Alternative Cast button placement Game elements Connecting to Google Cast Connecting to Google Cast One of the most critical design points in making a Cast game, is making the game setup with Google Cast fast and easy. All Cast games should utilize the Google Cast SDK to discover nearby cast devices and automatically present the user with the option to cast as part of the game setup ow. Google Cast SDK and APIs Google Cast SDK and APIs There are two ways to connect your game with Google Cast: Receiver Cast games connect to a receiver device such as a Chromecast, which downloads an HTML5 receiver application to the display. We recommend using the Game Manager APIs to develop this kind of game, where one or many devices are connecting to the receiver. Remote display games use the powerful GPU of the mobile device to render both the sender display and the receiver display, and mirror the receiver display to the TV. The Remote Display APIs are used to develop this kind of game. In all types of Cast games, the presentation is bigger and better when it is displayed on the television, but the user experience between games will vary. To better understand these differences, use the guidelines on this site to help you streamline the process for your gamers. Connecting in a Cast-enabled game Cast-enabled games are enhanced with Google Cast, but can also be played without Casting to a receiver device. Connectin Cast similarly must be an optional process that is available immediately, but not required by game players. Upon app launch, the game should scan for available Google Cast devices in the background. At rst, the Cast icon is not visible. Sender Sender found, no information needs A Cast icon appears when Tapping on the CTA button to be displayed to the player, available Cast devices are invokes the Cast menu. The since the game can be identi ed on the network. If no player can then select a Cast experienced without Google devices are found, the Cast icon device from all available Cast Cast. The Cast icon will not does not appear. devices. If no Google Cast devices are appear to the player. When a cast Device is found, display the Cast button at the top right of the sender UI screen (identical to Chromecast UX Guidelines for video applications). The cast icon can be “wrapped” in a visual treatment that matches the style of the game (instead of being free- oating as seen in the image to the right). However, the icon itself cannot be altered. Once the player selects a Cast device, they need to see clear feedback about the connection status. Recommended: Include Sender Sender Connecting state Cast is connected receiver volume controls in the Cast menu when a receiver device is connected. Connecting in a Cast-required game Cast-required games cannot be played without connecting to a Google Cast endpoint, so beginning the connection process t Cast should be the rst action when launching the game. Upon app launch, the game should scan for available Google Cast devices. If this scanning takes longer than 3 seconds, display a scanning message to notify the player. Sender Sender If no Google Cast devices are The CTA button includes a Cast Tapping on the CTA button found, the player should not icon, indicating that Cast is invokes the Cast menu. The be able to start the game and required to play the game. player can then select a Cast the Cast button should not be device from all available Cast displayed. We recommend a devices. prompt for the player to learn more about Google Cast. When a Google Cast device is available on the network, provide the Call To Action (CTA) to the player. The user can tap on the CTA button to see the Cast menu, or a list of all available Cast devices on the network. Selecting one indicates the Receiver device the player intends to use. Once the player selects a Cast device, they need to see clear feedback about the connection status. Recommended: Include Sender Sender Connecting state Cast is connected receiver volume controls in the Cast menu when a receiver device is connected. Remote Display guidelines The following are guidelines speci c to Remote Display games. Non-gameplay screens must not be directly mirrored to the receiver. Instead an idle screen or lobby screen must be presented on the receiver before gameplay begins. Receiver Idle screen on the receiver before gameplay begins. Gameplay must always be shown on the receiver once connected. To prevent confusion, UI elements shown on the receiver should not look interactive. Receiver UI elements on the receiver should not look interactive and tappable. Game elements Game audio Game audio While the game is running, sender hardware buttons control the sender device volume. Game music and sound effect volumes should be accessible in the game pause menu. For Remote display games, audio is played through the receiver device, and sound effects are played through the sender device. Recommended: provide receiver volume controls in the Cast menu when a receiver is connected. Sender Provide receiver volume controls in the Cast Menu. Game elements Loading states Loading states Clear loading states and progress indications provide players with information about the game’s status and wait times. Cast connection loading states Looking for a Cast device When a player taps the Cast button, Cast looks for available receivers on the network. Once the user taps on a receiver, Cast connects to that receiver. If it takes longer than 1 second to connect, a message should be displayed indicating that the sender is looking for an available Cast device. Searching for a Cast device Trying to re-establish a connection If the connection to Cast has been disabled, messaging should show that the connection is trying to be re-established automatically. The player should be able to cancel the process, returning them to the game launch screen. Trying to reconnect to Cast Game loading states The player’s sender device should keep the player informed when the game is loading. For example, when the game takes time to join, show a state that Sender Sender Joining the game Starting gameplay communicates that the player is joining the game. As the game is preparing to start, players see a countdown that indicates when gameplay is starting. Players need adequate warning before the game begins. The countdown on the receiver should match the countdown on the sender device. Receiver Starting gameplay Game elements Game setup Game setup Character selection After connecting to Cast, players should select a character, if there are multiple characters to choose from. Sender A player selects his or her character. Consider providing players the opportunity to customize their character, for example by enabling them to choose a name. Sender A player names his or her character. After selecting and naming the character, the player should see that they are joining the game. Sender The player joins the game as the newly created character. Game instruction Provide players with clear and brief instructions on how to play the game. This sets expectations and increases anticipation for gameplay to start. Sender Provide players with an informative tutorial prior to gameplay. Game elements Multiplayer games Multiplayer games Using Cast to play games with multiple people opens up new and exciting opportunities. Multiplayer games using Google Cast can be enjoyed by players who are in the same room or halfway across the world. Multiplayer games come with their own set of considerations regarding player ready states, player connectivity, hosting a game, and the frequent juggle of players joining and leaving a game at various times during gameplay. Game lobby When a player starts a game (the host player), the host is placed in the lobby until all players are ready. The host is the player who can start a game, so appropriate messaging should indicate this on the host’s sender device. Sender The host is in the lobby. When a non-host player joins a game before gameplay starts, they are placed in the lobby. They must wait in the lobby until the host starts the game. Messaging should clearly communicate this. Sender A non-host player joins the lobby. When a player starts a game (the host player), the host is placed in the lobby until all players are ready. Required: The lobby must include the following elements: Maximum number of players Current number of connected players Instructions for how the game starts Receiver Who the game host is Each player’s ready state (if The host is visible in the lobby. applicable) A 5 second countdown before gameplay begin When players join the game before gameplay starts, they are placed in the lobby, a waiting area. The lobby shows each player’s name and avatar, their ready state, and may show game tips and hints. The lobby continues to ll until it is full, when the maximum number of players has joined the game. Receiver The lobby lls as players join the game. Player ready states Recommended: On the sender device, players in the lobby can set their status as “Ready” or “Not Ready” from their sender device. Sender Receiver Player ready status Player ready status Recommended: On the receiver device, players’ ready statuses, especially when “Not Ready” should be visible. Joining before gameplay starts All players will be placed in the lobby until the host starts the game. Joining during gameplay Sender Receiver Players are placed in the lobby. Players are placed in the lobby. Recommended: If the game supports it, allow players to join at any time during gameplay. When players join after Sender Receiver Joining a game in progress Player joins a game in progress gameplay has started, they will see messaging on their sender device that the game is already in progress. On the receiver screen, gameplay continues uninterrupted. Messaging should indicate when a player joins the game. Joining when the game is full When a game has reached is maximum number of players, other players that attempt to join will see messaging indicating that the game is full. They cannot join a full game until a current player leaves the game. They should have the option of starting another game. On the receiver, gameplay will continue without interruption or messaging for players already in the game. Sender Game is full If the player opts to start a new game, the player will be taken through the device selection process (Cast menu) to choose an alternate device. Sender Select a different Cast receiver device. Leaving before gameplay starts Hosts and non-host players can decide to leave the game while they are in the lobby (before gameplay starts). Other players will see a spot in the lobby become available. Receiver A player leaves the lobby. Leaving during gameplay The game host leaves the game. When the host pauses the game, other players’ sender devices show a paused game indicating who paused the game. The host’s sender device shows a paused game. Sender Sender Required: The host has The host pauses the game. A con rmation modal before functionality that other players do not have: the “End game” button ends the game for all other players. If the host selects “Leave game,” a dialog appears, con rming that the host wants to leave the game. Host duties are transferred to another player who can unpause the game. leaving the game. When the host pauses the game, the receiver device shows a paused game, with messaging to communicate who paused the game. Receiver The game is paused. After the host leaves the game, gameplay can resume. The rst player that joined the game after the host is given host duties. Messaging on the receiver communicates this to the rest of the players. Receiver The gameplay resumes and host duties are transferred. A non-host player leaves the game. When a non-host player pauses the game, other players’ sender devices show a paused game indicating who paused the game. Sender Sender A non-host player pauses game. A con rmation modal before Required: A non-host player does not see the functionality leaving the game. to “End game,” which is only for the host. The player selects “Leave game” and sees a dialog con rming that the player wants to leave the game. Upon exiting the game, gameplay resumes for the remaining players. When non-host player leaves the game, gameplay continues uninterrupted for the remaining players. The receiver shows messaging that the player left the game. Receiver Gameplay continues, uninterrupted. Messaging indicates who left the game. Game elements Pausing and interruptions Pausing and interruptions Pauses and interruptions to gameplay may occur intentionally or as a result of lost connectivity. Whether gameplay is intentionally paused (for example, a player chooses to pause the game) or unintentionally interrupted (for example, a critical player is disconnected from Cast or receives a phone call), the other players in the game need to know the game status and how to resume gameplay. A player pauses the game Sender device pause states The key components of a Sender’s pause state include: Cast button Game settings An indication of who paused the game When a host player pauses the game, their own sender device shows a paused state, indicating that they paused the game. The host Host’s sender device has functionality to end the game for all players. The host’s device shows a paused screen. Other players see a pause state that indicates that the host paused the game. When a non-host player pauses the game, their own sender device shows a paused state, indicating that they paused the game. Other players see a pause state that indicates which player paused the game. Player’s sender device The player’s device shows a paused screen. Receiver device pause state When any player pauses the game, the receiver shower a paused state with messaging to indicate who paused the game. Receiver The game is paused. Disconnecting from Cast Intentional disconnect A player can disconnect from the connected Cast device by tapping on the Cast button from the pause screen. This opens the Cast Menu, which Sender Sender In the Cast Menu, a player can A con rmation modal appears to see the connected receiver inform the player that unsaved Upon tapping Disconnect, the device, receiver volume controls, data will be lost and their device player should be shown a and a Disconnect button. will be disconnected from the shows the connected receiver device and an option to disconnect from the receiver. con rmation dialog, with messaging that indicates that all unsaved data will be lost and the sender device will be disconnected from the receiver device. Accidental disconnect receiver device. If the Cast connection between sender and receiver devices, and the affected player is the game host, gameplay will pause while the Sender Sender see that his or her sender If the Cast connection is After 30 seconds of trying to device is trying to reconnect. interrupted, the player sees reconnect, a modal appears to messaging indicating that the inform the player that the If the Cast connection connection is trying to be re- connection could not be re- between sender and receiver established. established. Options include host’s sender device attempts to reconnect. The host should devices, and the affected player is not the host, gameplay does not pause. Other players will see in-game messaging that the affected player is having connectivity issues. The affected player sees that his or her sender device is trying to reconnect. Recommended: If the sender device does not successfully reconnect within 30 seconds, the player is given the option to Retry or Cancel. Tapping “Cancel” will return the host to the game start screen. Cancel and Retry. When the host player is disconnected, gameplay pauses. When a non-host player is disconnected, gameplay Receiver Receiver players see message about When the host player is When a non-host player is the affected player. disconnected, gameplay is disconnected, gameplay paused for all players. continues. Players can see continues and remaining messaging within the game that the player is having connectivity problems. Interruptions Gameplay is interrupted by device alerts, phone calls, or the app is backgrounded. If the affected player is critical (the game host or the only player in the game), then gameplay is paused for the other players. The host role migrates to the next player and the new host can resume gameplay. For Remote Display games: gameplay is paused when the app is interrupted. Sender A critical player experiences interruption. Other players see a pause screen that in paused the game. If the affected player is noncritical, then gameplay continues with messaging on the receiver device to communicate that the other player is not responding. Receiver A non-critical player experiences interruption. Game elements Game results Game results At the end of a game, all players (whether it is a single-player game or a multiplayer game) should see their own personal results on their sender device and all players’ scores and standings on the receiver device. A player should see: His or her ending position in the game (i.e. 1st place, 2nd place) Total points The ability to Leave Game or Play Again. Sender End results screen The receiver device should show each player’s: Name Avatar Position at the end of the game (i.e. 1st place, 2nd place) Number of points Receiver End results screen