No Pineapple Left Behind Usability Review

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!