Information Design in Board Games - Part Three: Layout

Information design is the practice of presenting information in a way that fosters an efficient and effective understanding of the information. The term has come to be used for a specific area of graphic design related to displaying information effectively, rather than just attractively or for artistic expression.

 

In my previous posts about information design in board games, I talked about the significance of component size and the use of shapes to convey information. This time, I'll talk about the often underestimated yet crucial element of layout, and how thoughtful layout choices can convey information effectively. The layout of text and graphics on a game component can make a huge difference in how players interpret and interact with the game.

The Hierarchy of Information

Much like in a book or a web page, the layout of information in a board game should establish a hierarchy. This hierarchy guides players' attention and understanding. Typically, more important or frequently referenced information is placed prominently, while secondary or context-specific details are presented in a less prominent manner.

Example 1: Ticket to Ride

In Ticket to Ride layout communicates essential information. Destination tickets showcase the points awarded for completion prominently at the bottom right, with the cities the player needs to connect as the title. The point value is made more prominent on the card by making it the largest element, and by offsetting it in its own circle - which brings it into the foreground, making it look like it is set on top of the rest the background, instead of integrated with it. The cities of the route are also important and the rest of the card information is dedicated to those. This layout encourages players to prioritize the point values of the routes, and then figure out where those are on the map.

Clarity and Readability

A fundamental principle of information design is readability. Readability hinges on clear fonts, sufficient contrast, and appropriate spacing. The goal is to make text and graphics easily legible to all players.

Example 2: Carcassonne

Carcassonne's tile layout is a great example of readability. The city, road, and field sections are crisply defined and intuitively designed, making it simple to recognize the type of feature and its potential connections. The ease of readability encourages quick and accurate tile placement.

 

Example 3: Codenames

In Codenames, the word cards' layout is designed for readability. The words are presented in a grid, ensuring they are easy to see from across the table. This lets players quickly scan the words and make word-association connections with their team. Also, the words are printed twice on each card, so that the words can be read right side up from either side of the table.

Information Grouping

In board games, effective layout often groups related information together. This approach reduces visual clutter and supports quick comprehension of complex concepts.

Example 4: Power Grid

Power Grid's power plant cards use information grouping simply, but well. Essential details like the power plant's resource type, capacity, and fuel cost are neatly clustered together along the bottom, in front of a background color bar. This layout allows players to evaluate the power plant's value efficiently and more easily make informed decisions. The big number in the top left of the card is separate from the other icons, since it is referenced at a different time and in a different way - in order to determine when the card comes into the for sale queue as well as a minimum bid.

Some things to avoid

Bad layouts in board games often cause confusion, hinder game play, or compromise the overall experience. Here are some common elements of bad layout:

1. Overcrowding: When there's too much information or components crammed into a small space, it can lead to visual clutter. This makes it challenging for players to interpret the game state. A cluttered board can confuse players and slow down the game.

2. Unclear Text or Icons: If the text is too small, fonts are difficult to read, or icons are unclear, players may struggle to understand the rules or components. This can lead to constant rule-book referencing and frustration.

3. Inconsistent Visuals: Inconsistent graphic design, color schemes, or iconography can confuse players. When similar elements have different meanings or when the same meanings are represented differently, it can hinder understanding.

Conclusion: Layout in Board Games

Effective layout design in a board game is essential for creating a smooth, enjoyable, and immersive gaming experience, and poor layout can detract from the overall enjoyment of the game. From establishing hierarchies and readability to grouping related information, effective layout helps players understand the game and make strategic decisions more easily. 

The next time you sit down to play a board game, take a moment to notice how the layout impacts your gaming experience.

 

Read Part 1: Size  or Part 2: Shape of this series. 

More posts about Information Design.

More posts about Game Design.

Information Design in Board Games - Part Two: Shape

Information design is the practice of presenting information in a way that fosters an efficient and effective understanding of the information. The term has come to be used for a specific area of graphic design related to displaying information effectively, rather than just attractively or for artistic expression.

I played a lot of DungeonQuest back in the day, and then got the third edition much later when Fantasy Flight reprinted it. It plays out in a classic fantasy dungeon-crawl setting. A fun overall game where you die a lot, no matter what edition you play! Yet there were some changes that didn't work well in the new edition. One of which was in the information design regarding the shape of cards.

In DungeonQuest there are a lot of different card piles to shuffle and draw from and put cards into the discard piles of. What they did well in the original edition was to make all the cards different interesting shapes. 

Cards from the original edition of DungeonQuest.

 

At first it seems like over elaborate theming. But when you compare the play experience to the Fantasy Flight third edition, where all the cards are differentiated by just an image on the back, you realize the shapes in the original edition serve an important function: they let you know by shape where each card goes back to. This is less relevant when drawing, since you see where it is coming from (but still a little relevant since the shape reinforces the game "function") but it is hugely relevant when you need to know where to discard the card to. 

DunegonQuest third edition. All cards in a row there are the same shape. Different shapes would have helped identify them.

 

In the third edition, when it comes time to discard a card, you look at it, try to see if you can guess which pile it came from, don't usually succeed since there is a lot of overlap in the game content in each deck, then flip the card over to check the back, scan the eight piles of cards to see if the image matches any of them (those murky images didn't help either but that's for another day), and then discard it to the right pile. At the end of the game, you have to check all the piles to see if any cards were mis-discarded, which is often the case, and them put them in the right piles. This never happened in the first edition, since the unique shape lets you know instantly where it gets discarded.

Both editions used shape and size to differentiate the character cards from the rest of the cards though, so it was easy to visually pick them out on the table amidst all the other things.

Character card from the third edition of DungeonQuest. Larger than other cards, also oriented sideways relative to them. Makes it stand out.

Character Card from the original edition of DungeonQuest. Long and thin and larger than the other cards, so it is easier to visually find.

 

 

 

So why does this matter? Because you want a player to be involved in the core aspects of your game, such as the strategic choices, or the imaginative immersion, or the flow of the experience, or the social experience, or whatever your goals for the game are, instead of focusing on the "interface", which in board games is highly connected to information design, as well as rules clarity, game mechanics, and ergonomics.

The less a player has to struggle with, or pay attention to, the "interface", the more they can play the game.

 

This is part 2 of a 3 part series. Read part 1, about size in information design, here. Or continue to part 3, here.

Information Design in Board Games - Part One: Size

This is part one of a 3 part series on Information design in board games. Part two is Shape, and part three is Layout.

Information design is the practice of presenting information in a way that fosters an efficient and effective understanding of the information. The term has come to be used for a specific area of graphic design related to displaying information effectively, rather than just attractively or for artistic expression.

The size of something tells us things about it, whether we have designed that or not. The larger it is, the more important and/or powerful it is. The smaller it is, the less important and/or powerful it is. So you can have size hierarchies in a game that tell which things to focus on, be afraid of, etc. Size can be overall size, vertical or horizontal size. Ie, something can be wider or slimmer, taller or shorter, more or less massive.

Good Examples of size hierarchies:

Star Wars Rebellion. Those death stars loom over everything!

 

Star Wars Rebellion - the death star and big battleships are much larger, and it lets you feel and know they are more powerful. Also, the standees with the heroes in them are very large, which lets you know they are an important focus of the game. The standees are cardboard, so they are not in the exact same hierarchy as all the plastic pieces. Also the death star and star destroyers are on pedestals, putting them literally above every other piece. Really great usage of size hierarchy.

Scythe: your main mini is larger. The mechs are larger than the workers. These size differences let you know the focus of the game and story.

Blood Rage Minis. Those monsters are huge!

 

Rising sun/Blood Rage: The monsters are bigger, meaning they are more powerful, more fun, more cool. You feel that when you get a larger monster on your team. That is part of the imaginative immersion of those games.

 

Examples of missed opportunities to use size hierarchies:

Xia minis. Some of these are NPCs, but you can't tell from the height.

Xia: The PC and NPC ships (and comets), all are meant to go on clear stands. If you do that, it is harder to differentiate between the PCs and NPCs, especially since the models are not very iconic, being more realistic. An easy fix is to not use the stands for NPCs and put them directly on the board. It creates a size hierarchy among the pieces, helping you focus on the PCS as well as differentiate them from the NPCs. Another thing that could be done is have the NPCs on half-height stands.

Runebound Second edition. A PC on the left, and an ally on the right. No way to tell them apart from size.

 

Runebound Second Edition: The character cards are the same size (bridge sized) as the items, allies and monsters. If they made the characters twice as large, it would have helped differentiate them when in your play area, find them amongst the clutter easier, let you put more counters on them, as well as help highlight the importance/focus of them in the story. I think in Descent and Runebound Third edition, they did this.

Continue to part two: Shape

More posts about Game Design.

More Posts about Information Design.

I'm Hoping for a Day... (state of mobile gaming)

I am hoping for a day when there will be no more gold, gems and also mega-gems in games. No coins, tickets and also blue super-mega tickets in the same game.

 

I am hoping for a day when there will be no more waiting 5 minutes to a day for your energy to regenerate so you can play the game again.

Don't Do Mystery Math!

I have been playing this tower defense game, Guardians, on the iPad for a few months now, and I am up to level 526 (?) and I was thinking about how a score is calculated in a game. In Guardians, I have no idea. I just finish the level and there is a score. Sometimes 1000, sometimes 10000.

As I was wondering about this, I noticed a "?" in a circle next to my score for the current level. I was like, "Oh, maybe I can click it!" (Which says a few things: 1. I hadn't noticed it in over 500 wins of the game, and 2. I wasn't sure it was a button. Maybe they could have made it larger, and shaped like all the other buttons in the game...) 

 

So I click it and it takes me to a screen which tells me the general idea of how to get a good score: finish fast, use as few towers as possible, and a few other things. And... I am still in the dark about how my scores are formed, since they made a mistake that is particularly easy to make in digital games  (as opposed to board games) which is not showing the numbers. I wrote about that here. 

Without numbers, you can't really evaluate, or weigh the different elements in your score. Was finishing fast more or less important than using fewer towers? I will never know because they didn't show the numbers! That screen would have been a great spot to show the exact numbers for each section, and then the total, so if I wanted, I could try to maximize my score. Which I don't, since I don't care. I just like to finish the levels.

Mystery math is that behind the scenes calculation that comes up with a score for something. Don't do it. Always tell the players the numbers that form their score. Or better yet, ask if you really need a score in your game? Can you just record if they finish a level or not? Or maybe the three stars thing? You know: one star for finishing, 3 stars for finishing without losing any health, and 2 stars for... for... some other random thing. Which I also hate, but it is slightly better than a mystery score.

My favorite thing for tower defense games, since they are real-time, is to simply record how fast you solved it. That encompasses a lot of different elements of the game, and has an easily understandable result.

If that is not the feel you want for your game, is there any other one number element that you think determines the core elements of the game? Maybe the best score in your game equals spending the least money, ie, being the most efficient.

Me and my game night buddies came up with the "Mystery Math" phrase while playing board games on Board Game Arena. Since the end scoring of a game is automated, it just starts adding up behind the scenes things and showing the end result. Albeit usually afterwords with a chart breaking down the categories, which does really help. But in many games the interface is hard to follow and you're still not sure what happened, especially while it is happening. This is a particular interface problem that comes from "porting" a real life game to an online game. Really, new interface elements have to be thought about and added to make the game play well on the new medium. Like light up outlines, and animations to help draw your eyes to whatever element is being referenced.

When playing a board game in real life, you get a better sense of the numbers that add up to your final score since you have to add up the categories by hand. (Sometimes, like in Carcasonne, with those &%$^ farmers, you still aren't sure why you lost or won.) 

I understand why many modern board games obscure each player's total points until the end. It is so that you can't tell who's ahead exactly, and be discouraged about it. It can let a player feel like they might catch up. It can help a player focus on the game dynamics and experience and not the competition. It can keep dramatic tension high until the end. Who will win? But it also feels like mystery math until the end, even though you could often do the math during play.

Its not my favorite, but I don't hate it, at least, in board games. I prefer point-threshold games (when someone reaches X points, they win), and goal oriented games. Or just whoever has the most points at the end wins. No mystery math in those.

 

Mistakes in Card Layout - 4 More Points

This is a collection of other common mistakes made when laying out cards for board games, to end this series on the blog.

1. Low contrast. If you have gray text on light gray background it is going to be hard to read. Make sure you use high contrasting colors between your text and the text background. White on black or black on white is the best.

2. Not enough White Space. White space is the gap between the edge of your text and the box it is in or the sheet it is on. When there is too little, your eye will "catch" on the bounding box, and make reading slower.

The text is too close to the bounding box on this card from Smash Up. They also centered the text which additionally slows down the reading and comprehension.

3. Text Background box over graphics is too transparent. So the fun graphic you put behind the text box shows... but also interferes with the text. Make the box opaque or only very slightly transparent. The goal is the most readable text.

This card from the Resident Evil deck building game is a good example of a transparent text box behind text, done right. They have the right side, where there is no text, more see-through than the middle, where the text is.

One other problem with the layout is: title not at the top. It would increase the immersive feel to have "Jill Valentine" at the top of the card, especially instead of "[Character]" which is dull as well as useless to have there.

This card is never used in a hand of cards, otherwise I would say it has a full bleed problem. See my next point.

4. Full bleeds! This is when the graphic on the card goes all the way to the edge of the card, instead of being interrupted by a border of some kind. It sure looks nice, but it blurs where the edge of the card is, and can result in making it hard to differentiate between individual cards, especially from the back when they are overlapping. If your cards are always face up on the board, and never overlapping, maybe this is ok, but if they are overlapping, held in a hand multiples at a time, then it is not. If you HAVE to have the image go to the card edge, at least put a pseudo border around the edge by darkening or lightening the image there.

 

These cards from Thunderstone Quest illustrate my point. See the middle left of the top card? Very hard to find the edge between it and the card below it, so it becomes a usability issue in terms of differentiating and picking up. But the white text on blue background has good contrast.

See what a solid border does to differentiate the cards? From Magic the Gathering.

 

See the other entries in this series: 

Mistakes in card layout - Titles not at the top! 

Mistakes in card layout - Centered Text

Mistakes in card layout - Mixing symbols and text

9 Ways to Stress Test your Mobile Game

So many games (and apps) seem like they are developed in a perfect environment: the best hardware, the best lighting, and with the best accessories like stands and headphones. Unfortunately, most of us don't use the games in anything close to those environments, so in order to address that, I have made a list of ways to stress test a mobile game, for developers to follow and make their games more usable to more people.

 

1) Play on the couch, while eating a bag of chips. 

Take the iPad you are testing on out of the stand and go sit on the couch holding it. Put a bag of chips next to you on the couch. If you hold the iPad with one hand, can you reach all the game controls with the other? Ie, do you need to have a two handed grip because there are buttons on each bottom corner in landscape mode? Check for constraints like that. Maybe your game can't be played with one hand. But then it also can't be played while eating chips, which is a serious trade-off!

Now try laying down on the couch and playing it. Go ahead, just do it.

A screen shot from Gravity Rider on the iPad. Notice the controls are on the bottom left and right. You need two hands to play this. No eating chips and playing this one! (Also the pause is in the upper left... you will probably crash your bike often trying to get up there in time!)

 

 

 

 

2) Play it on the tiniest screen you can find. 

I know you can play it on phone or tablet and it is the same game, but  go try it on the phone for a long time and realize you might need an interface there that is different because it is so much smaller. 

A fingertip sized button (and buttons shouldn't be much smaller than that!) takes up so much more room on a phone than a tablet.

 

3) Turn off the sound and play it! 

Many people play with the sound turned off or very low, because they might be in a group setting or it is night or something. Are all the things the player needs to be notified of (especially in a real time game) clear enough without sound? Do you need to make the animations bigger or more central when something happens? Do you need to pause the game with a pop-up dialog?

 

4) Listen to the music of your game... for 3 hours. 

Did it drive you crazy with its repetition? Because most in-game music does that to me, and I shut it off after the initial play or two. If your game lasts a long time your music should ideally keep up. Maybe you need a dynamic soundscape or computer generated music.

 

5) Listen to the sound effects at a medium volume, not on headphones!

Are they annoying? To you or anyone nearby? Ask yourself for real. The same goes for the voice acting. Bad voice acting ruins everything. I played Smallworld 2 on the iPad, but the voice-over they had for the die roll win and loss was SOOOO gratingly bad, I had to turn off all sounds. (Partly because there was no option to just turn off the bad voice acting.)

Ok, not this old!

 

6) Play it on an older tablet or phone. 

Many people hold onto their old hardware until they are forced to upgrade. Does your game take that large audience into account? How did your game function on that older tablet? Was it slow? Did it crash randomly? Did it work at all? Maybe you can't make it work there, but maybe you can. It is something to think about.

 

 

7) Give it to someone who doesn't work with you and who you don't know. 

Watch them play it, and don't tell them anything about it. What are they not understanding? What are they not doing? If they are frustrated and acting stupid, that's probably your fault as the designer, not theirs.

I like to playtest a game with people that don't play games much, because it gives me a certain kind of feedback that is more useful and different than from people who play games a lot and have ingrained ideas and preferences.

 

8) Play your "tutorial" 10 times, and see if you hate the world after, or anytime during it. 

Do you really need that "click here, click here, click here" thing you are calling a tutorial? Because most people know how to play a mobile game. And if your interface is too complex to figure out, maybe you need to have a better interface rather than a boring tutorial that people click to get through and don't learn too much from anyway.

I have quit an enormous number of games due to these type of tutorials. I like if I am given an option to try the tutorial, or just start the game, and I really prefer the term "how to play" to "tutorial".

 

9) And as I usually recommend, play that game for 100 hours at least. 

And another couple hundred hours after that. More or less, depending on how complicated your game is. Notice anything that becomes tedious in the mechanics of the game, or in the use of the interface, and revise them! Try weird strategies, do random things while playing. 

Games are a dynamic medium and have many pathways through them. This is what makes them unique and interesting compared to other media. But it also means you have to put in more time traveling those pathways in order to make a good game.

If you like board games and this post, go read 7 Ways to Stress Test you Board Game.

Or read more about Digital Games and Design.