Reducing visual dissonance in double-headed interactions

How do you build an interface that is equally readable from both sides?

I am an unapologetic board game geek. During college, I spent many nights playing board games until the wee hours when I should have been studying. I have tried to pass on my love of board games to my daughters, but they lack the fortitude (or, possibly, the interest) to stay up all night– fighting sleep to play one more round and try out that new strategy. Nevertheless, I persist.

Recently, I brought home a new game, Codenames by Czech Games, which I’ve quickly discovered is one of the greats. And I mean “great” not only by my standards; Codenames has become one of the highest rated board games of all time, winning the Spiel Des Jahres in 2016. It’s a party game that can be played with any number of players split into two teams. In order to allow the teams to read the 25 cards around which the game is based, designers made the cards double-headed — players are supposed to be able to read them from either side. But I can’t get over what I find an obvious design flaw in the cards– they all look like they’re upside-down.

At first glance, Codenames cards all look like they’re upside-down

Designing to the double-headed interface

I first experienced the challenge of designing a double-headed interface on a project for Google in 2014. It was a true blue sky project. Google asked us simple question: how can a salesperson be enabled with the same volumes of data that the shopper has access to? Shoppers had recently begun arriving in stores with a world of product data at their fingertips and salespeople were feeling outgunned and potentially irrelevant.

At first, we thought the answer was obvious — build a smartphone app for the salesperson. During our research, we discovered a trend which continues to grow more prevalent today– joint in-store, online shopping. In several stores, we saw that when a shopper asked a question of a salesperson while pointing at her smartphone, the salesperson would invite the shopper behind the point-of-sale terminal to browse purchase options. Together, they would shop, considering both items on the sales floor and items that would need to be delivered.

The two actors needed a neutral virtual space where they could shop together. The shopper’s phone was too small and touching the phone was too intimate an act for the actors to be comfortable with. Point-of-sale terminals are installed for the use of the cashier, not the shopper. The screens are small, the resolution is low, and the shopper must stand behind the counter to have a view of the screen.

My team invented a large touchscreen interface for the salesperson and shopper to jointly explore the store’s offerings.

We tested multiple configurations with potential users before deciding that standing across the table provided a sense of privacy without requiring an uncomfortable level of engagement.

Visualizations by Eugenia Lee

In our initial testing of our paper prototypes, it became clear that a horizontal orientation would be the most comfortable for both the salesperson and the shopper. Moreover, the two should be standing on opposite sides of the table, as if it were the actual sales counter. Participants found this configuration provided a sense of privacy without requiring an uncomfortable level of physical engagement.

Pavel testing the hi-fidelity prototype with a veteran Macys salesperson

With the collaborators on opposite sides of the table, the interface would need to display in both directions. Each participant could retrieve a detailed view of a product by dragging a product card towards them across the display. These detail areas would only show text right-side up, because the screen real estate is close to the viewer. The shared product card between these areas could be manipulated by either party, so there needed to be text facing in both directions. We decided to put the right-side-up text of the card closest to the reader just as we put the right-side-up text of the screen closest to the reader.

The design tested terribly. We unveiled our interface in a Wizard-of-Oz test on the actual 55-inch screen.

Everybody who tested that initial version had a similar response.The cards looked upside-down, even though we provided text in both directions.

How could we provide a card that was equally readable from both sides, without causing the visual dissonance of upside-down text?

The Texas Hold-em Revelation

The answer came to me, as so many answers do, in the midst of an all-night gaming marathon (this time, the game was Texas Hold-em). During a particularly bad beat I noticed that when the dealer flipped up the cards, both I and the winner (on the opposite side of the table) reacted instantaneously. Playing cards are perfectly double-headed.

Playing cards can be seen from both directions, and players never get confused.

Our product cards would be readable if we followed the heuristic established by playing cards and put the right-side-up text at the top of the card from the user’s perspective. Here, the solution lay right in front of me.

Applying the pattern to the digital interface

In retrospect it seems obvious. We’ve all seen the Nielsen’s eyetracking heatmap showing that scanning on the web is strongly influenced by the layout of the page and formatting of text. Our card layout separates the page into many objects, each of which the user begins to scan in the upper left-hand corner. Users were uncomfortable with our first version because they were tracking the upside down text first — This led them to incorrectly assume that object was for the other party.

In our final version, the upside-down text is now hidden from the end user on the cards, which can be manipulated by either party.

Notice that our final version maintains an area of the screen which is upside down. This area is reserved for the other party, and therefore we want the user to scan the text and immediately move on to another object.

In the final version, the user sees right-side-up text for all screen objects that are intended for the user.

The Codenames redesign

So from a card game I learned the heuristic and to a card game I will apply it.

Flipping the text is a good place to start, but it reveals how the designers tried to solve the same design challenge we faced.

The designers highlighted the text previously facing the dominant direction by bolding it and surrounding it with a white box. That highlight now draws attention to the upside-down text, re-introducing the visual dissonance we are trying to alleviate. By removing that highlight and left-justifying the text, we magically make the upside-down text disappear.

It is hard to imagine how Codenames could have been more successful in the eyes of the designers. The game reached the #17 (out of more than 84000) position in the BoardGameGeek ranking of games of all time, and #1 position in the BGG party games ranking. I can’t help wonder, though, if a simple redesign like this might encourage my daughters to play with me more often.

—

Codenames has been published in over 50 languages. How might this pattern change in your native tongue?

Please leave comments on how to improve them further.

I am grateful to my teammates on Team Aria for the lessons they taught me during our project with Google. Eugenia Lee, April Hsuan Yang, Ramya Mallya, and Pavel Samsonov.