The In-Game UI You Need to Make your Twitch Extension Awesome
If you’re designing a marketing-focused extension, worries about in-game feedback or UI needs aren’t really necessary. However, if you create a Twitch extension that directly impacts gameplay and requires that a link be made between your Twitch extension and the game, this article is for you. It’s not necessarily obvious what type of in-game UI you may need to add to make the extension experience seamless between viewers, streamers, and your game. Hopefully, by the end of this you’ll at least have some of our learned knowledge to help guide you when creating in-game UI that powers and expands on your Twitch extension. The overlay part of the Twitch extension is just one piece of the entire stream experience. The overlay and any related notifications provide information and feedback to the viewer. But the Twitch extension experience isn’t complete without adding in-game components that help the streamer fully interact with their viewers. Streamers need in-game UI to:
I think the need for in-game linking and setting up controls is clear. There’s no in-game interaction or information without this link. Setting up in-game interactions directly from settings can be a perk to the streamer, I’ll get into that later.
Without this UI, the streamer would have to guess which actions viewers are taking. Adding in-game notifications makes it clear not just to the streamer, but also to people watching the stream later as a video on demand or clip.
If there’s no UI for a streamer to run a poll, it would have to just start automatically when triggered to begin. A streamer would need a second computer with their stream playing to even know what was going on.
Matchmaking is a bit more flexible, but I’m going to make the argument here that making it happen in the game is the best possible path.
Let’s get into it.
UI to Link the Extension to your Game
Muxy’s platform uses an SDK to connect your game to the Twitch extension. To authenticate the extension to a specific Twitch user, we use PIN authentication. The viewer copies the PIN from the Twitch configuration and needs somewhere to enter and verify it in the game. So where should this go?
Add a Twitch Extension Setting Tab to your In-Game Menu
This is the best place to put this UI as it’s always accessible to the streamer. The only downside is that it isn’t immediately obvious that the code the streamer grabbed from the Twitch extension configuration goes here. We’ll talk about where else this can go later or how to guide your streamer to access this panel. This UI is fairly simple: Text String like “Twitch Extension Authentication”
Text Field to Enter the Code
Authorization button
Confirmation Message
Authorize button changes to Deauthorize button after Authorization And that’s it!
Add a Twitch Extension Link Section to Your Homepage
You can also put this directly on your main menu with UI like Text String “Link to Twitch Extension”
Text Entry Field
Authorization Button
Mirroring the above UI OR
A text string that says, “Link the Game to the “game string” Twitch Extension”
Which would direct the streamer to the in-game settings. My preference is to combine these two methods. Have a text string link to your in-game settings making it explicitly clear that this is for Extension Linking to not confuse players who aren’t also streaming your game. The advantage here is that it immediately helps streamers locate where to link on launching the game, then takes them directly where they need to go with the fewest clicks possible. It also reveals the next section!
UI to Set Up In-Game Actions
There are two places you can put the UI that lets a streamer control what extension actions they’re allowing in their streamer. You can put it directly below the Extension PIN Authorization (covered above) or on the Twitch Extension Configuration. In an ideal world, you can put all the extension controls in the same location as the PIN linking. This empowers the streamer to immediately change what they are and are not allowed to happen to their gameplay within the game as it’s occurring without needing to open another window or have the extension config open.
But the streamer will still potentially need to access the extension config during a stream if they want to adjust Bits cost. We’ve seen this happen specifically with Hinder actions: an audience will get hyped about a more destructive feature and overuse it, having the ability to ramp up the Bits amount discourages audience use of the feature. This is an advantage especially in a more difficult fight or section of a game.
It’s vital that a streamer can decide what type of interactivity they allow because it’s their audience; they are the experts on what type of experience their audience is seeking. Streamers desire an arrangement of controls from positive to negative, audience controlled, or partially-streamer controlled. Giving the streamer that flexibility ensures they have an exciting time playing and engaging with their audience via your extension. Not giving this flexibility can cause a negative connotation and experience with both your extension AND your game, no one wants that.
So, what’s the best way to surface this UI? Toggles. Just let the streamer turn the interactions off and on. And the more you can simplify it, the easier it is for streamers. If you want, you can always do “Basic” and “Advanced” settings to allow streamers discrete control if desired.
Muxy Interactivity is primarily Help, Hinder, and Neutral actions; voting operations, and Matchmaking.
Help, Hinder, Neutral Interactivity can just be toggled off and on here with an advanced option to show all Help, Hinder, and Neutral Actions. If you do want to allow that, I’d recommend setting it up as a tabbed table, especially in the case where you have MYRIAD available actions. You can really go ham setting this type of stuff up if you want.
Voting UI should mostly exist in line with the vote interface. So, all you really need here is an off/on toggle.
Matchmaking, similarly, should happen where you create lobbies. So, all you need is an off/on toggle for matchmaking.
If you’re designing this on the extension config?
I’d recommend also using toggles and the same type of interface with one addition.
Each Action toggle gets a field for Bits amount. Similarly, to the above you can do this in a Basic (Help, Hinder, Neutral) and then Advanced for more flexibility.
Voting and Matchmaking do not need a field to enter Bits amounts. We recommend not having this type of interactivity require Bits as you want AS MUCH engagement with this type of interactivity as possible. A huge queue to play is exciting af. Similarly, seeing oodles of people voting for a dialogue option increases the tension for viewer and streamer alike making it more powerful.
Viewer Feedback on Actions
When you design an extension, it’s always useful to have an Action Log or History for viewers to see what other viewers are doing to impact the game. This History usually has viewer actions and poll results, but not necessarily Bits to Coins conversions. But what about the streamer? The streamer needs some type of UI in-game, so they can see and call out viewer actions. Streamers DO care when a viewer gets Coins to spend on their channel, so they can thank them. Streamers need to know WHO is impacting their gameplay so they can cheer or jeer them. Streamers WANT to see the results of a poll in real-time, so they can persuade the chat or interact with the chat and influence the vote (more on that later). So, what should these notifications look like? Here’s our recommended format:
Bits purchase: [Twitch Username] + “has bought” + [Bits amount]
Coins Conversion: [Twitch username] + “Has Converted” + [Coins Amount]
Game-Impacting Actions: [Twitch Username] + [Action Name]
Where should these go?
It depends on the UI of your game mostly; however, we recommend aligning them to the middle-right side of the game UI. Here’s why:
You don’t want to put them where your UI usually exists. And most game UI is in the corners, top, and bottom of the screen.
You don’t want to put it in the top 30px of the screen for another reason: there’s a gradient on Twitch streams that would interfere with causing your notification to be less visible to the viewer and streamer. The streamer may be able to see the notification, but it would be odd for only one person to see that.
Don’t put it in the lower left, this tends to be where streamers put their camera when gaming. Let’s be real, this isn’t a guide for Just Chatting.
So, this leaves the center-right of the screen or center-left. Here’s a straightforward way to figure out which of these sides you put the notification on: whichever is the opposite of where your extension lives. If your extension is on the right? Place these notifications on the left. Extension on the left? Position them on the right. If you’re developing with Gateway, we are currently locking the extension to the left-side of the screen, so your viewer action notifications should appear on the right.
Streamer UI for Running Votes and Polls
In order for polls to work, viewers have to be able to notice, interact with, and see the results. When you’re building your extension, you have to make this UI if polling is involved. But what about the streamer? How does the streamer control voting? Based on what we covered previously, streamers will have controls for voting either in-game or in the Twitch configuration. But these largely cover if voting is off or on. When a vote is triggered, we want streamers to be able to take a variety of actions:
Start/Stop Vote (button UI)
Auto-Accept Vote or Choose (toggle)
Accept Audience Vote or Decline Audience Vote (button) These actions help them to control the vote and their stream. These really should be considered essential. But that’s not all the UI a streamer needs to properly engage with a vote. They also should be able to see:
Timer for the vote (either a progress bar or a countdown timer)
The vote question to which viewers are responding
The answers with up-to-date results (either percentage, vote count, or both)
The final results of the vote
The first set of UI lets the streamer control their stream for their audience. The second set of UI lets the streamer react to the vote and create exciting moments in their stream. Tension, upset, a tug-of-war between chat are all possible as long as the streamer can see this UI.
Tip: For both the Viewer Action Feedback and Voting UI, make the design look similar to the actual game UI (shapes, button styles, etc.), but add some accent colors that are different. This goes for both the viewer- and streamer-facing UI. Making this minor modification removes confusion over what is typical game UI vs UI specifically related to streaming.
Streamer UI to Create and Run Matchmaking
This is the second type of UI that can exist both in-game and in the Twitch extension configuration. Ideally, you can put it in the game, but if not, we’ve got you covered! Regardless, the basic UI is the same, but where it appears is the only difference. UI to Run Matchmaking In-Game
So, to do matchmaking you need to have some basic controls:
Start/Close Twitch Lobby (button)
A List of all the Twitch Viewers in a Queue (table)
A title for the UI of all the Twitch Viewers in the Queue (text string)
Ability to add a Twitch Viewer to the Game Lobby (button)
Ability to Block someone in the Twitch Viewer Queue (button)
So, here’s where the UI differs a bit. For the extension configuration, ability to start/stop matchmaking and all the other controls should exist as their own section of the configuration page or as a tab on the extension page. There are arguments for both based on whether you’d prefer a cleaner UI or everything accessible without clicking to a different view.
For the game, it should start when you’re setting up a Custom Lobby to play. Odds are there will be multiple places you are adding people from such as Online Steam Friends, Online Console Friends, etc. Put the UI listing the Twitch Queue and all the related UI here. Put the button to open a Twitch lobby either a) near the open lobby button; or b) next to the Title for Twitch Lobby and expand the table once it’s open. There are other ways to do this that work well for your specific game, but if you’re adding in matchmaking this should be the least you have available.
And that’s it! The front-end of your extension UI isn’t the end of your design. To make the best extension possible, we recommend following these guidelines.