Designing Better Character Sheets - Part 2: Organizing Information Effectively

Updated: Sep 14, 2019


Now that we're armed with the knowledge of how we become overwhelmed, how we're driven to categorize, and how we quickly scan for information, we can begin the fun process of organizing!


Let's KonMari this shit.



Organizing Information Effectively


Before we start an exercise of designing a character sheet's framework together, there are a few things I want us to do.


1. We need to ask ourselves, what is the goal?

What is this sheet for; campaign or one-shot? What outcome do you envision your players having? What is important? What is necessary?


2. We need to constantly think about the player.

Get into their mind. Really think about how they will be using the sheet.


3. We need to think of the character sheet in terms of active and passive instruction.

We’ll be building information hierarchy around what is being actively/proactively and passively/reactively used. Then we organize from most to least often referenced.


4. We need to abandon the idea a character sheet should be contained to 1 page.

The "less is more" mentality is not especially useful when it comes to containers of information.

Especially if there is a lot of information that will be poured into said container.


Alright, the sheet exercise we’ll be looking at is one I was requested to redesign for one-shot purposes.


Blades in the Dark by John Harper

My friend Josh asked me to turn the playbooks for Blades in the Dark into simple pregen one-shot sheets.


When you start to design or redesign a character sheet, you should ask yourself what’s the goal?


Josh's goal was to have his players sit down and immediately get into the game; the only decision they would need to make to start playing would be, "What kind of heist trope character do I want to play as?"


He spent a lot of time asking himself, “Okay, what will my players really need in order to play this game as a one-shot?””


Designers need to employ thoughtful reduction in order to emphasize the important areas of focus for a game.


Thoughtful Reduction


Since this was for a one-shot Josh developed, he knew for the game's purposes what players would not need. Josh chopped and pared the original character sheet down.


He took out:

  • Crew information

  • Background or Vice

  • Trauma

  • The List of Special Abilities

  • Coin and Stash

  • XP

  • Planning and Load

  • Etc as shown in the image above.


Eventually he created this spreadsheet:


He kept:

  • Playbook name

  • 2 playbook abilities

  • Stats

  • Resistance

  • Stress

  • Harm

  • Load

  • And items.


At this point, he was ready to turn the spreadsheet into a play test version.


Enter Amber.

First wireframe.

Thankfully he already did a lot of the organizing for me up front and I could see right away 3 different categories:

  1. Who the character is/What makes them who they are.

  2. How they do what they do.

  3. What can happen to them/Resources they can use.


Before getting into this exercise, I mentioned thinking about character sheet categories as active and passive and using that to build our hierarchy.


Of the 3 categories I came up with for the Blades sheet, 1 and 2 are active pieces of information.


The first item people tend to look for on a pregen character sheet is who that character is and what they can do; typically before even looking at the stats [depending on the game]. So playbook name and ability went to the top.


How they roll is active as well. This information will be referred to a lot as they make decisions on what they want to do. Stats go next.


The Harm, Stress, and Load are passive. These are things that happen to a player. They can also be a resource they might not always need or something they would refer to only occasionally.


This part of the structure design process will greatly help the visual design later on.


Active vs Passive


I did get an excellent question during my panel at GenCon 2019 which I would like to address in this article. The question was "Well, if they are filling in harm, marking down their HP, tracking stuff, wouldn't that be active? Because they are actively doing something."


When using the terms active and passive I'm speaking strictly in terms of mental cognitive load.


Do the players have to make a proactive decision? Or are they reacting to something that happens to them?


Typically the passive/reactive information is not something players will be using to make proactive decisions. However, there's a good argument for resources being a more active/proactive element but...

...it depends.


There will always be exceptions depending on the game, its mechanics, and the design structure that has already been established.


What I mean by that last point, as an example, is if a website moved the search bar to the bottom left of a web page, we'd most likely become confused. We're conditioned by an established design structure to look in the top right for the search bar.


So even if the website's designer had a good organizational reason to move the search bar elsewhere, they might have to make an exception because the user's expectations are so firmly in place.


This is why UX/playtesting is invaluable.



Okay! We've got our categories established.

Let's talk about arranging them on a page.



Ah yes. We've come back to the Pathfinder character sheet.


I showed this to a coworker of mine and she physically stepped back. She’s never played a role playing game before and she stated, “That looks like a lot of work. It’s for a game?”


Immediately our brains are trying to process what is happening on the page.


There’s a lot of color and the contrast makes our eyes vibrate. Everything is close together; there are many boxes of varying sizes. What is what? And where do I start?


Clutter is Confusing


These are instructions for a child’s electronic toy that I show for my professional work presentations.


I don’t have to tell you that it's very visually dense. There’s nothing that really breaks up the massive blocks of text. It’s almost suffocating to look at. Our brains are struggling with visual cognitive overload.


So what are ways to overcome that? Well for one thing if you employed thoughtful reduction and organized your information well you should have a lot of available white space.



White Space


In these instructions for a video camera, white space is used more effectively. We can see the information is organized well. As we quickly scan the page our eyes are able to differentiate the categories.


Earlier when looking at the Blades sheet, we used our UX brains and thought about the user and what's important to them and employed thoughtful reduction. That gave us the ability to use more white space!


It’s not necessary to cram every inch of paper with information we might think is important.

White space is necessary in reducing visual overload. It gives our eyes and minds room to breathe.


That's why I want to get rid of the notion that it's better for everything to be on one piece of paper.


Maybe for your game, there's a lot of active/proactive information; enough of it to fill a whole piece of paper. That's fine. Spread it out on one whole sheet if it all belongs together. Some games have obvious phases. Combat. Social. Skills. Magic. Travel. Resources. Maybe there is enough information for each phase to have its own sheet.


Progressive Disclosure


You may think that adding more pages is counter-productive to reducing cognitive load. It’s actually not, as long as each page is well organized and easy to follow. The amount of pages or containers of information does not affect cognitive load. How well the information is organized and presented does.


There's a good article by Jakob Nielsen of Nielsen Norman Group about progressive disclosure.


It's a term in UX/Interaction design where information and actions are spread out across several screens, and it's used to help combat the overwhelmed feeling we get when we see a bunch of information all at once. This can also apply to print design.




Gestalt


With this available white space, we’ll be able to leverage a really cool set of psychological laws I love to say. The Gestalt laws of perceptual organization!


This set of laws addresses our natural compulsion to seek order amid disorder and categorize.


Specifically for our purposes, I want to touch on the law of proximity. We see things that are near each other as grouped together; that the overall whole is greater than the individual pieces that make up the whole.


So in the image above, at the top right, we see 2 columns of dots and not 48 individual dots.

Having the available white space in order to create these divides in information helps build strong defined groupings which reduces visual load.


This character sheet from Familiars of Terra uses white space effectively and we can identify well defined groups. The lines are the same length, thickness, and spaced equally which our brain processes as grouped. We don't see 49 lines, but instead 5 distinct areas.


This is a reason why the Pathfinder sheet becomes chaotic when we look at it. Everything is close together and there are a lot of boxes of varying sizes. We're not able to visually breathe and it's harder to visually establish well-defined groups.


When you build a character sheet, you should be asking yourself:

  • What is the goal?

  • Am I employing thoughtful reduction?

  • How can I categorize the information?

  • Is this Active or Passive information?


Doing so will help lay the groundwork for better arrangement of the sheet elements, allowing you to use the power of white space.


Alright, we've talked brains, we've talked organization, next up:


Part 3: Making Good Visual Design Choices


See you next article!

1,077 views
  • Twitter
  • Instagram
  • YouTube
  • Tumblr

© 2019 by amber marie.

Proudly created with Wix.com