No Pineapple Left Behind, currently in alpha, is a fun construction and management simulation (CMS) that doubles as a dark criticism of contemporary American schools. The player oversees a school and has the goal of making as much money as possible. How? By converting students into test-taking automatons, called pineapples, and essentially draining the school of any fun.

Students learn when influenced by a teacher's magic spell.

Using magic spells, teachers can end a child's friendships or stop them from being teased -- removing any distractions from learning whatsoever. Teachers gain experience based on how well their students are learning, and can learn different teaching/discipline skills over time.

While the gameplay itself seems pretty polished, there are some navigational and informational architecture problems rooted in its UI. In this post, I'll highlight some of the issues and provide examples of other CMS games that have organized their content more clearly.

In terms of UI structure, NPLB's problem is threefold:

• The game breaks CSM conventions to its detriment
• The color palette and contrast level of the menus muddy important information
• The game doesn't take advantage of shortcuts

_________________________________________

Breaking CSM Conventions

Evolution of CMS Games (A Brief History)

Though the first CSM game dates back to 1968 with The Sumer Game, the sub-genre did not take off until 1989 with Maxis' SimCity. Following the success of SimCity, Maxis soon released other iterations of CMS games, including SimEarth (1990), SimAnt (1991), SimLife (1992), and many others.

SimCity (1989) Screenshot

Now, let's take a look at SimCity. The topmost bar includes the game information (system, options, disasters, and windows), followed by the city's name, population, and funds.

All along the left are the tools that the player needs to help their city grow, and some additional information exists on a bottom bar. Note the the entire right-hand side of the screen is devoid of menus. 

Age of Empires II (1999) Screenshot

Over time, the UI of CSM evolved to remove the left-hand bar, moving important tools to either to top or bottom of the screen, and framing the rest of the game clearly. Age of Empires II (1999), for example, showed the player's resource count, civilization age, and various menus at the top, and unit and map control on the bottom.

Now, in 2015, the UIs for CSMs have become a lot cleaner and condensed. See the screen for a new load for Cities: Skylines below. Skylines has streamlined its UI such that a top bar is hardly needed, only used for updates and easily finding the settings. 

Cities: Skylines (2015) Screenshot

NPLB Diverges

NPLB breaks from the trend of CSM framing, instead presenting information in all four corners of the screen, and along the sides as well. 

There are two primary problems with this strategy. First, condensing all of the important information into one or two locations makes players' lives easier, in that they don't need to work as hard to inform themselves about the status of their game. Second, eye-tracking studies of web sites have demonstrated that users heavily favor one side of a screen, depending on the site's language (particularly whether a language reads right-to-left or right-to-left). In one study of English-speaking participants, participants spent more than twice the time looking at the left side of the screen than the right.

While I understand wanting to look different from other CSMs, NPLB can benefit from mirroring certain aspects of its predecessors.

Recommendations:

• Refrain from putting important information on the right-hand side of the screen, particularly if the player needs to click on it. (More on this later.)

• Considering using a top and bottom bar, leaving the left and right sides clear without player intervention. 

• When a player opens any menu, have it appear in the top left side of the screen. Then can they reposition and pin it if they so desire. 

• Repositioning the tutorial textbox, as Cities: Skylines does, will allow you to remove the white arrows you've been using to call out certain elements of the screen.

• Essentially, don't try to reinvent the wheel! CSMs have evolved over time to make it easy to review minute details -- as is, you're making it a lot more difficult than it needs to be!

Designing the game such that most menus open by default on the left-side of the screen will prevent this from happening. The picture is a worst-case scenario.

_________________________________________

Color and Contrast Choices

One of NPLB's problems is that its color palette is so similar that it's difficult to pick out the most important information. Everything is so attention-grabbing that nothing is.

Thinking of that, let's talk briefly about what makes images 'attention-grabbing' (salient). The more an image differs from its surroundings, the more salient it is (source). Objects that differ significantly in color, size, shape, brightness, texture, motion, or other low-level features, pop-out to viewers. If you want to grab someone's attention, add a dash of contrast or a bright color -- but woe be to those who overuse these low-level features.

NPLB currently has the problem that nearly every menu features high contrast in the form of bright white, red, or green text on an opaque black background. Such a design not only obfuscates the important information, but also is overwhelming to the viewer's eye.

Consider the following picture -- where do you look first on the screen? (I'm curious, tell me in the comments!)

When an image/screen looks much the same, important information can be lost. At first glance, I didn't know what I was looking at, and wasn't positive where I should be looking. If you want a player to do a task, make sure they can find it without prompting!

Recommendations:

• Very seriously consider changing your color scheme entirely. The sea of black and white is overwhelming.
• In general, people find reading black text on a lighter background easier to read than inverted color schemes. White on darker colors is typically used to signpost information -- so at the moment it looks like everything is important. 
• For the map, consider shifting the map to the right, placing the 'achieve' box on the left (and changing the colors!) I'd also have the map fit the same color palette as the school itself (the light grey, reds, greens, etc., not black/white). 

_________________________________________

Shortcuts

Like many simulators, NPLB allows players to fast-forward time and take very detailed control over the sims' lives. But at the moment, navigating all the various menus and controlling time is clunky, due to a lack of keyboard shortcuts. While NPLB allows the player to pause and unpause the game with spacebar, it doesn't offer the navigational nuance that it truly needs.

One of the better sim navigational setups I've seen are from Banished, a medieval city sim that came out in Feburary, 2014. Players can open any menu and sub-menu using the function and number keys. In the picture below, for example, I pressed F1 to open the time menu, and 2 to pause it.

Now, one of my earlier suggestions was that NPLB shouldn't concentrate information on the right-hand side the screen. The exception is for a menu bar, as Banished does.

So long as players don't need to click the menu buttons to get them to open, a menu bar can be put in the right-hand side of the screen. The reason behind this is because not only is a keystroke faster than a click, but a player won't have to look at the right-hand side to activate the menu. If a user presses F2, 4 to open the workers page, he or she can continue to look at the left side of the screen (as it will open top left).

_________________________________________

Final Thoughts

NPLB is quirky, and I like it. It's a bit depressing, though! I don't want to break friendships and make kids lose their humanity (that's how they become pineapples). I also want the game to be organized more clearly and easier on the eyes. 

Oh, if you're asking yourself, "Why pineapples?" The designer told me that it references a bizarre test question given to New York State students in 2012.

And after this long post about color and font and such, I think I'll actually look more into color theory, organization, and fonts in game design. I think it'll be a fun topic to explore.

Thanks for reading!

Evolve, by Turtle Rock Studios, is an asymmetrical shooter where players can either play in a team or as a terrifying monster whose goal is to eliminate all of the Heroes. Simplified, Evolve is a complex 4 v. 1 cat-and-mouse game where the monster gets stronger as the game progresses.

A game published by 2K, a publishing company with dedicated user researchers, Evolve is sleek, easy to learn, and difficult to master.

__________________________________________________________________

Sleek and Clean

Menu navigation is clean and intuitive in Evolve-- every option is easy to find, understand, and use. Part of the ease of use can be attributed to the size, type, and coloring of the fonts used on Evolve's menus. The fonts are easily read from a distance (as is necessary for console versions) and clearly mark cursor location by highlighting the menu bars as the cursor passes above them.

Starting Menu, with the cursor hovering over 'Solo'

Where I think Evolve excels is its use of contrast (colorful/monochromatic, bright/dark, text/no text, etc.) in establishing screen architecture. For example, the starting menu uses bright hues on the left and muted, faded, or dark colors on the right. The bright red creates a focal point on the left, establishing that important content is on the left.

__________________________________________________________________

Easy to Learn, Difficult to Master

I was *terrible* at the monster tutorial.

Evolve is quick to teach new players the basic controls -- as soon as a new player begins the game, they are moved into the monster tutorial. The game incentivizes tutorial use in the form of badges/achievements -- the faster the player moves, the more badges and XP she or he gets.

Later, after players have picked a character to play in a match (that they have not played before), they are shown a quick tutorial video about their selected character's abilities.

Players are also able to find additional, advanced tutorial videos for every available character. From what I could tell, each character has its own quirks and challenges.

__________________________________________________________________

One issue... Bots? What Bots?

Really, the only issue I had in Evolve was knowing if or how bots would be joining the game. Not the kind of person who enjoys highly competitive games, I decided to invite a friend and play with two other bot AIs.

... Problem was, we weren't sure how to start a bot game. Unlike other games (such as DOTA 2), which clearly label bot matches, we just had to muddle along hoping that bots would join. In the following screenshot, for example, we were seven seconds until loading into the unknown (into the game? into another screen? We weren't sure, since it was our first time playing) and we didn't have bots assigned.

Loading map with 7 seconds left.

I was genuinely concerned that I hadn't pressed the correct button somewhere, and that we'd load into a map two players short. We didn't -- thankfully, because even with a team of four we got curbstomped by Goliath -- but for a minute or so, I was more concerned than I was having fun.

Recommendation: instead of assigning bots at the end of the map setup process, put 'bot' nameplates into the 'empty' slots on the match screen shown above. If a new player joins, one of those bot plates can be removed and replaced with the player's badge. This serves the purpose of showing the players that bots will be joining the game.

____________________________________________

Happy Labor Day, all. I have an idea for a non-review post -- specifically about the role and importance of clear typography in video games and elsewhere. I know I talk about font sizes, colors, types and such a lot in my posts, so I think I might explore that topic a little further.

Thanks again for reading!