Grids are a method of organizing information. Not only are they an efficient means of graphing algebraic equations, but they can be applied to pretty much anything. Grids have become such a ubiquitous part of life today, they can at times be hidden in plain sight. And that’s the intention. The average person should not be thinking about the grid. A grid should be so intuitive to navigate that “It just works,” as Steve Jobs may say. It’s how you know how to navigate this website, even if you’ve never visited it before. Or navigate a city. If you notice a grid, either you have a mind of a designer or you’ve come across a bad grid.

Let’s start off with a grid many would be familiar with today; one that is in your pocket right now (or on your desk, charging). Smartphones follow a grid system that is quite similar to that of a desktop computer. In the beginning, this made the transition from desktop to smartphone easier, but it also has a practical side. Take the iPhone Home screen for example (I know, Apple isn’t the only one who does this, but it is what I’m most familiar with). The grid maintains a sense of order. It keeps apps from overlapping each other and affords the user the ability to group apps in whatever configuration would be useful to them. And since the screen is much smaller than that of a desktop, the grid is split into pages, indicated by the small dots that hover above the dock. It’s not entirely customizable, as Apple doesn’t let you leave blank spots on the grid (in between apps) or put folders within folders. But in this manner, they prevent the user from making a convoluted mess of their home screen, as may happen with a desktop. At least, to the best of their ability, as you could still put all your apps within one giant folder.

Moving on to perhaps a ‘less serious’ example. Video games use grids as well. They may have varying reliance on it, but needed nevertheless. Their reliance are in the game menus. An example close to my childhood is Mario Kart Wii. The grid is essentially present everywhere throughout the game, except perhaps the cut scenes. Because the user needs to navigate through a series of choices, such as selecting the game mode, what character they wish to use, their vehicle, etc., there must be structure to follow.

Having the characters mosaicked all over the character selection screen may look cool, but would be terrible for a first-time player to navigate the selection using the directional pad on their controller. If the buttons or information overlap each other, it would then be difficult for the user to see what they are selecting, or what the information says.

If the location of the ‘back’ button changed on each screen, or was overlapped in some, it would be confusing and create a bad user experience; perhaps driving some players to drop the game. Thankfully, Mario Kart Wii does not do this, and continues to follow a very structural grid format with their successor game, Mario Kart 8.

To be clear, bad grids aren’t necessarily found in places that don’t have a grid at all. An interface can use a clear grid system but still feel difficult to use. An example is the mobile game Puzzle and Dragons. It plays out as a mix of bejewel, turn-based RPG, and trading-card game. The trading-card aspect is where the grid is essential to perfect, as players can obtain a sizable collection over the months or years they play the game. Called the “Monster Box,” it was terrible for a veteran player (or a whale user) to navigate several years ago, as the best navigation a player had was a “Favorites” tag and temporary sorting filters. And given the fact that there’s a lot of materials a player needs, their box can become difficult to navigate. Thankfully, around a year ago, the game was updated so users could create folders to organize their cards however they want. The update also automatically created box folders for materials, so that the user didn’t have to manually organize them (and some materials also became stackable, which is SUPER NICE; but I digress).

Box folders was perhaps one of the best quality-of-life features the game developers have implemented. The only strange thing is that the feature is disabled by default, and a user must go into their settings to turn it on. I understand new users may not need the feature as much, but the devs could at least auto enable it after players reach a certain inventory size (for all I know, they could’ve done this, as I’m not a new player).

The game still had other issues, however; and those issues still exist. Besides the Monster Box page, there are other menus in the game. A lot of them. Over the past year, added functionally has added several new menus, one of which forced the “Monster” menu to add a scroll bar (when for the longest time before, it was one page). Now, these updates were good to the gameplay, but navigating them became more of a pain. The biggest issue I personally have is that they all look the same. Although I had some muscle-memory as to where the menus are, the new menus disrupted this reflex as they were added in between existing menus.

Granted, it isn’t a game-breaking experience, and there are far worse examples out there, but better distinguishing the menus would certainly help with this issue I have. There are already some things the devs do to help with this, such as different colored text. But adding symbols or other graphics would certainly be viable options to improving the expeerience.

Though grids are essential to organizing content, their ubiquity can lead to a staleness as users run into similar designs wherever they go. To stand out, sometimes a designer must break the grid, or at least in this next example, appear to do so. Parallax, the effect one observes when when viewing an object from different positions, can be utilized on a web page to add a dynamic experience to the content. One example of such is the web page for Firewatch, an exploration game for PCs and consoles. It uses the entirety of its space above the fold (and a little beyond the fold as well) to display a parallax graphic. As the user scrolls down the page, the landscape mimics real spacial effects of objects closer to the user’s apparent position (the dark silhouettes) displacing more than objects further away (then sun and distant mountains). The rest of the page follows the traditional grid format, but this entry into the content catches the users attention to explore further.

So in the end, the grid is not the be-all, end-all design. But at least considering it, and whether or not to follow the standard grid format, is essential to creating the intended experience for the user in any situation. The last important point I’ll conclude with is to consider the audience for which this grid will be used for. As with anything in design, the intended audience plays an important role in whether or not the grid should be broken for your content. A specifications sheet or menu for a productivity program does not need to have fancy parallax or counter-grid designs. Such styles would be counter-productive for the situation and audience, and would be better suited for magazines or interactive web pages such as the Firewatch example. And on the flip side, a utilitarian approach may not be as compelling for a magazine page that’s meant to jump out and catch the reader’s attention. In all of these cases, the grid is at least considered before moving on to development.