Paper Shadows: Co-Creation Session

This'll be a different kind of post, so bear with me here.

I've started conducting user research for Idle Action Studios, the creators of Paper Shadows. After some discussion with the team, I decided to run some co-creation sessions to help make Paper Shadow's UI elements (of which there are few) more intuitive. This post is about the process and results of the co-creation study.

First, I'll give you some context about the game. Paper Shadows is a highly stylized and artistic platformer built in Unity where the player controls two characters: the masked character and the lantern-bearer. On its website, Idle Action Studios describes Paper Shadows as a game about "separation and reunion," a theme strongly supported in the game. In order to progress in the game, the player must frequently separate the two characters. The tall, masked character can jump much higher than the lantern-bearer, and so often must go ahead to activate levers so that the lantern-bearer may continue. But some platforms are only revealed when they are within the lantern-bearer's light radius, so often the masked character must return to the light.

In later levels, the player finds talismans, ability-giving items that the characters may carry and trade. Up until the introduction of talismans, Paper Shadows is simple -- the player is easily taught that the arrow keys and WASD control the two characters.

Talismans throw a wrench into the works: to access talismans, the player has to press and hold spacebar to open the talisman menu, and then use the arrow keys to activate, swap, or deactivate talisman abilities. The developers, knowing it to be unintuitive, asked for my feedback on the talismans. I decided to put together a co-creation session to help brainstorm a new UI for the talismans.

1. Research Questions
   The developers and I created a list of four research questions to better understand how players expect to be able to interact with the talisman menu:
• How do players imagine being able to equip/activate talismans?
• How do players imagine being able to swap talismans between the characters?
• What do participants think the inability to exchange talismans due to distance would look like?
• How would the participants show that only one talisman can be active at a time?
2. Acquiring Participants & Setup
   I gathered three participants familiar with platform games, gave them access to the demo level, and asked them to complete the first level. I also asked the participants to write down any "passwords" they saw in the level so that I could tell whether they completed the level (there was one at the halfway point, and one at the end).
3. Scenario Development
   To answer the research questions, I developed scenario-based tasks for the participants to complete. These were:
• You just acquired your first talisman. Is it automatically equipped to one of the characters? If not, what happens to it?
• The tall character has the monkey talisman, and you want to give it to the short character. How would you do that, and what would that look like?
• A character can hold multiple talismans at a time, but can only have one ability active at a time. How would you switch the active talisman?
• How would you visually display which talisman is active?
• Visually, how would you indicate that you're too far away to swap/switch talismans with the other characters?
4. Explaining Talismans
   Since I didn't want to explain talismans in the context of opening menus (how it currently is), I decided to use pens & pencils as props to explain how players can interact with talismans. 
• Giving/taking talismans: I gave one of the pens to a participant, and then took it back.
• Swapping talismans: I exchanged the participant's pencil for my pen.
• Talisman distance restrictions: I moved backwards and tried to exchange pens with the participant, but couldn't reach far enough to switch (and thus the exchange didn't happen).
• Activating talismans: I could hold many pens, but could only write with one at once. 
• Deactivating talismans: I stopped writing with the pen and went back to holding it.
5. Session Overview
   The co-creation session ended up being about two hours long and was conducted with three participants and one of the developers in attendance. I prompted the participants to draw their ideas on paper, writing down both what they thought it would look like and the buttons they would press to accomplish the tasks. At the end, I let the developer who attended the co-creation session ask additional follow-up questions.

Now for results. 

How do participants imagine being able to equip/activate talismans?

Scenario 1: You just acquired your first talisman. Is it automatically equipped to one of the characters? If not, what happens to it?

The players imagined that it would be automatically equipped to the character who first interacted with the object (pressed the down arrow/D key when next to the talisman). 

Scenario 2: The lantern-bearer is holding the bat and monkey talismans, and has the monkey talisman active. How would you activate the bat talisman instead? 

All three participants said that they would open a menu to change the active talisman. The three menu buttons they suggested were Tab, Spacebar, and T. Pressing this button would pause the game and add a faded overlay showing the characters with the talismans displayed horizontally over their heads. The players would then use the character's respective movement keys to navigate the talismans.

• Press Spacebar, Tab, or T (for 'talismans') as the menu key

• Horizontal bar with talismans

• Left/right keys to select a talisman

• Down (arrow or D) to activate a talisman

• Up (arrow or W) to deactivate a talisman

• Press the same menu key to accept the change and close the menu

Follow-Up Question: Would you want a way to quickly change what talisman is active?

Participants said no, they wouldn't feel the need to quickly change the active talisman. Since the game is slow-paced, they said they would not feel the need for some kind of shortcut to quickly swap/activate a different talisman.

One participant's sketch of the talisman menu

How do participants imagine being able to switch/swap talismans between characters?

Scenario 3: The lantern-bearer has the bat talisman, and the masked character has the monkey talisman. You want to swap these two talismans. How would you do that?

Participants would first open the menu to switch/swap the talismans, and then use the arrow keys to select what talisman they wanted to trade. The participants did not reach consensus on how they wanted to accomplish this, but some themes appeared:

• When choosing what talismans to send over, they use the arrow keys to highlight a talisman. The highlighted talisman would be the talisman that would be given or swapped. 

•  The 'highlighted' talisman could either by marked by a colored aura (glowing), raising the talisman above the talisman bar, or otherwise separating the selected talisman from the rest. 

•  The talismans would also be swapped by either pressing a specific swap key (such as T) or by using the arrow keys again to move it. One participant suggested pressing the 'up' key twice: once to move it above the horizontal bar to say that it's selected, and then using the 'move' key to give it to the other person. 

The three 'selection' visuals by participants

Follow-Up: Let's say the lantern-bearer had the monkey talisman active when you decided to swap it. Once swapped, is the monkey talisman now active on the masked character?

Participants said that a talisman, when swapped, would not automatically become active. One participant compared this process to World of Warcraft saying, "In WoW, when you trade a pair of gloves, it doesn't automatically get equipped when it goes in your inventory. You need to equip it." 

What do participants think the inability to exchange talismans due to distance would look like?

Scenario 4: The characters are too far apart to swap items. Visually, how would you indicate this?

Participants agreed that there would need to be a clear way to show that distance affects the ability to trade talismans. One of the first suggestions (before participants agreed the either Spacebar, Tab, or T would be good keys to open the menu) was that the menu could only be opened when the two characters were close enough to press their 'down' keys together. If the characters were too far apart, and X would appear.

Upon learning that the menu can be opened when the characters are apart, this simultaneous down arrow idea was scrapped.

How would the participants show that only one talisman can be active at a time on a character?

Scenario 5: The monkey talisman is currently active on the lantern-bearer. How would you visually indicate this?

In the talisman menu, all three participants agreed that the active talisman would 'glow.' Only one talisman can glow at a time. If a player highlighted another talisman and activated it, the previously-glowing talisman would stop glowing.

Outside of the talisman menu, participants said they would want a visual indication on characters what talisman was active. So the character with an active monkey talisman would have a monkey tail as part of its silhouette. If a talisman is not active on that character, there is no such visual indicator.

Recommendations:

1. Use the Spacebar as the 'talisman menu' key. It's a good mid-point between the two control schemes, and players can easily tap it with their thumbs, rather than reaching for the Tab. The 'T' key could also work. Let this be a 'press' button, not a 'press and hold' button. It's more easily discovered that way.
2. Display the talismans horizontally, rather than vertically. All three users drew out the menu this way, and said it was more intuitive than a vertical design.
3. Each talisman could have its own location (for example, the monkey talisman could always be the first circle). 
4. When a character is not holding a talisman, grey out its location. 
5. Use the left/right keys for each character to highlight various talisman slots.
6. Use the down arrow to activate a talisman.
7. Use the up arrow to deactivate a talisman.
8. When a talisman is traded, do not activate it on the other character, let the player decide what to activate or deactivate.

Since Blogger is bad at entering photos in between bullet points, here's a few images I drew out:

________________

Thanks for bearing with me, folks! This project was rather fun to undertake, and it's possible I may run another co-creation session in the coming months. It is still to be seen. 

I apologize that I've been writing far less frequently -- I started a new job in late September, and have been super busy since then. I'm also going to be in a play in December (17 performances, whee) so my blogging time will be limited then, too. I hope to return to a regular, bimonthly schedule by January. That's the goal, at least.

Thanks again to you, my readers, and to Idle Action Studios for letting me run the co-creation session!