Prototyping several modes of user inputs for a single feature
Contending with touch inputs on mobile, directional game controllers, and keyboard interactions
Summary
SongPop Party, a multiplayer music trivia game, was launched on Apple Arcade in 2021. The following year it became available on the Switch, Xbox, and the Microsoft Store with Playstation and Steam not far behind.
Sometime after launch, we planned to release a canned chat feature.
Paying attention to our needs as a music trivia party game, we designed, prototyped, and tested very specific UX and visual solutions that felt natural for every input type across all the platforms.
Project info
I was the Creative Director for the SongPop games and for this project, I worked with two of my direct reports, the SongPop Party team’s UI Artist and Animator. I established how to best approach the creation of an intuitive canned chat feature through research, prototyping, and testing.
This feature was scheduled to be added after launch and we had lots of time to brainstorm and iterate on the designs. We took our time and completed it within a few months while working on a couple of other new features at the same time.
Context
Illustration by Leonardo Rios Gómez
SongPop Party was originally designed to be a casual party game played on your couch with friends and family. However, the online multiplayer mode became very popular especially as the world was still emerging from the pandemic. Lots of our users were requesting that we add the ability to communicate with each other.
We knew an open chat feature would not be appropriate for this style of game for several reasons:
the game is meant for all ages
the core mechanic is twitch-based interactions (hearing the song clip and selecting the correct answer as fast as possible), so bringing up an on-screen keyboard to type messages would be too much
while it’s an option, most players do not play the game with a physical keyboard
Because of these reasons, we decided to do canned chat using pre-made text and animated emoji.
There were also a fair number of input types to support, more than other games I had worked on before:
Apple Arcade: touch input (iPhone & iPad), keyboard and mouse (MacOS), the Siri remote (Apple TV), and directional input (game controllers paired with any of those devices)
Switch: touch and directional
Playstation/Xbox: directional
Microsoft Store: keyboard, mouse, directional, and touch
We needed to design something usable for each device and input combination while also making sure things felt consistent enough across all the platforms.
Research and Issues
We started by looking at what other games with canned chat were doing, but we couldn’t find too many examples that encompassed all the use cases we had.
The strange world of Mario Kart 8’s online multiplayer mode.
Mario Kart’s online mode is somewhat close, but most of the chatting takes place before a game starts rather than during the game, so the UI is very imposing.
Clash Royal stickers are a close second, but only for the single local player experience.
Clash Royale’s sticker drawer.
For SongPop, the chat feature is mostly for online users, but it also needed to work for local games with online participants. Users could be playing on their phones or in front of a TV with a group.
The UI had to be lightweight because wanted the ability to chat during gameplay. We worked out three distinct experiences that each of the device/input/player combinations fit into:
directional devices (online and local partiers together)
single local player (or more accurately, playing with online opponents only)
touch devices (also online only)
These formed the backbone of the feature and helped keep things not too complex to implement.
Design
The design for directional input was completed first. It included game controllers and the Siri remote.
Our UI Artist came up with a few design variations and everyone agreed that a wheel format made the most sense and fit the gameplay space perfectly. With up to 8 local players looking at the same TV, we needed to fit 8 wheels without overlapping other players, scores, or gameplay buttons.
Chat wheel design for TV screens, seen here in the top left.
Now that we had UI in place, I created a spreadsheet to keep track of pre-made text and emoji ideas, and the entire team had the opportunity to enter their suggestions. For gameplay, the shortlisted suggestions were the ones that most accurately conveyed emotional reactions. For before and after each round, we had separate lists that helped players communicate in each context.
The wheel mode of interaction provided the basis for the single local player experience with directional or keyboard inputs. With Apple Arcade we needed to support game controllers connected to iPhones, iPads, and desktop/laptop computers (or the latter with keyboard/mouse).
The wheel size and placement that was designed for TV viewing would not be usable on a smaller device, so our UI Artist came up with a full-screen version with the same wheel mechanic, just at a legible size. Because this version is only used for one person looking at the device, we felt it was acceptable to briefly cover the screen with a semi-transparent overlay.
Full screen chat wheel design for iPhones paired with a Bluetooth game controller.
For the third experience, touch devices, a rectangular fly out was the solution (much like Clash Royale). Since a wheel didn’t make sense for touch interactions, a fly out provided ease of use and less screen real estate.
Fly out chat menu for touch devices
Testing
Prototyper, a Figma plugin by Aashrey Sharma
The game controller interaction to bring up the chat menu went through a number of iterations.
For this, I asked the team to use Figma plugins like Prototyper by Aashrey Sharma to automate the controller and keyboard interactions. Our UI Artist found an additional plugin that allowed us to test the Siri remote separately.
I arranged some in-person discussions to determine the best combination of button and joystick movements. It was not something we nailed right away, as team members had different opinions on what felt intuitive or usable. The first iteration was a bit unwieldy, holding down two shoulder buttons and rotating the joystick to select a chat sticker to send. While this might have been fine for a player who is used to complex controls, we decided to simplify it so that it was more widely accessible to include:
younger kids
people who may have never used a game controller before (like my parents)
people who may have limited motor control
Once we experimented enough with a variety of controllers in hand, the designs were implemented. We were fortunate to have a beta testing group that could test even further for us, and they were pleased with how the new feature worked overall after having requested it many times.
Results & Takeaways
Adding safe, canned chat is much less intimidating than an open chat feature. For SongPop, the complexity was in supporting all the different device and input combinations.
We ended up with three solid variations of the same functions that felt perfectly at home on each device type or input mode.
A lot of the best testing and experimentation that we did took place in person. For a party game, this makes total sense. While we worked distributed most of the time (spread between three locations), our in-person sessions were very productive and I would arrange that again for any local multiplayer game!