So, you want to build a tvOS game
We knew that we wanted to build an app for tvOS, but what to build? It was obvious from the keynote that the possibilities were significant. (The MLB tvOS app in particular was very inspiring). We decided to take the opportunity to explore a genre that we normally don’t work in: party games.
We began by researching existing TV apps on other systems and reviewing (and of course playing with) current board games. Shortly afterwards, we focused on a humorous word party game and settled on a set of rules:
- Players are presented with a sentence that has two separate words, or sets of words, removed. As such, the sentence is displayed with two blanks.
- All players, except for one, fill out these two blanks.
- One player is designated the judge. For that round, the person does not submit an entry, but instead chooses the best entry.
- Once all entries are submitted, the judge chooses the best entry. The person who submitted the winning entry is revealed and awarded a point.
- All players move onto the next round and a new judge is automatically selected.
Since we wanted game to feel lighthearted and casual, we drew upon 50s style diner signs, menus and interior decor for our visual style.
TV & Phone experience
Knowing that our game would involve both the Apple TV and iPhone/iPad apps, we delved into the experience around this multi-device usage. To get us started, we studied Apple's tvOS Human Interface Guidelines and its platform standards. Also, my colleague explored the tvOS development kit to determine technical possibilities and constraints. Armed with better knowledge on how to design and implement for the platform, I began to sketch a device experience sequence and took the following into consideration:
- Multi-device interaction. The sketches I created depicted how the multiple devices interact with each other and when. (For example, when players are entering in their answers on their phones, what appears on the TV?). This flow served as our experience hypothesis and would set the foundation for our design and implementation efforts.
- Player Attention. There are times that a player's attention should be on their iOS device, and other times when it should be on the TV. To facilitate gameplay, we designed various cues in both the TV and iOS apps.
- Discovering nearby games. Ideally, we wanted users to be able to open up the iOS app and automatically detect nearby games - this would eliminate the need for a game name or ID entry on a mobile device. However, this option was not easily available on the initial tvOS development kit; users need to enter in a game ID in order to join.
- Manipulating the TV from the app. As many Apple users know, there is a separate Remote app that allows them to manipulate an Apple TV device; we wanted to provide the same option for our users. However, this functionality isn’t available out of the box for developers. We could have built the feature ourselves, but we decided to wait until we were certain it significantly improved the user experience.
Design Decisions
Like I mentioned earlier, a 50s diner experience was the foundation of our visual design.
- tvOS layout. Arguably the most important difference is how users interact with a set of items; on iOS apps, users can just tap on an item, but on tvOS apps, users have to manually move through the list in order to get to the one they want, highlighting each item in the process. As such, the tvOS layout had to provide enough space for each item to appear highlighted as users traversed the list.
- Animation. To add to the playful visual theme, we sprinkled in bits of delightful animation throughout the app, for example: the iOS app title quickly slides out of the visible viewport, to expose the numeric keyboard, but then elegantly returns when the keyboard is dismissed; when the iOS app indicate to users that they need to wait for others to finish their entries, music records spin into the screen.
- Color pallete. I combed through images and color swatch combinations to find an appropriate color set. The tvOS guidelines encourage app designers to avoid colors that are too bright and saturated; they tend to appear the worst on lower quality television displays. I kept that in mind and settled upon the color scheme you see in the screenshots below.
- Backgrounds. Something I really liked in some 50s themed designs is the subtle use of a patterned background. I felt it added a more interesting visual depth that what just typical drop shadows could convey.
Final Design
Now what?
The app is live in the tvOS app store in what we consider a silent beta: we haven't marketed it yet, but it's live and free for users who happen upon it. We plan to conduct a round of ethnographic studies with our friends and family; observing their interactions will help guide future adjustments.