Posts tagged icons

Evolution of the World Map Icon

Oftentimes, the smallest details present the largest design challenges. For example, the “World Map” icon in Ramps, which underwent six revisions before a solution was decided upon.

The first version of the icon was created early on, and used for much of the development process. I’d grown so used to this symbol in Angry Birds that I incorrectly assumed the rest of the world would make the same association. During the beta for Ramps, I witnessed some confusion among players in deciphering its meaning, which kicked off the redesign process.

Sometimes it helps to borrow design conventions the player may already be familiar with just from using the device itself. I noticed that iPhones and iPod Touches often used text-based buttons like “Back” to return to a previous screen, and click-wheel iPods use the word “Menu” in lieu of iconography. While this made sense in my head, in practice the result is far too sterile, and it stuck out like a sore thumb next to the other icons.

I wanted to avoid using any sort of globe or planet icon because of the association with networking and web browsing, which I thought would hinder the player’s ability to decipher the meaning. Instead, I chose a symbol even more weighted with contradictory meaning (oh, the irony!). This felt too much like you’d be returning to the main menu instead of the world map, so I scrapped it quickly.

After realizing the error of my ways with the house symbol, I admitted defeat and tried out a globe. I thought it was cute, but the aforementioned concerns over its implied meaning remained.

A friend suggested I use a loopy line similar to the shape of the water on the world map, which was a great idea, but it just didn’t translate when the shape was small and monochromatic. Still, I thought there might be something to the idea of a literal “map,” which led me to this option. It still relies far too much on verbiage, and it doesn’t look friendly enough.

I returned to the globe, but wanted to see if I could differentiate it from networking icons with some extra details. Although I like the result, ultimately those details are superfluous; they don’t make it any more understandable in the context of the game.

I tried out nearly all of these variations on family and friends, but ran into a problem. For every person who disliked a particular solution, there was always an equal amount of people who preferred it! It was a draw every time.

The icon we included in the final game is the simpler globe (the fourth variation above). Aside from feeling it meshed stylistically with the rest of the game (which is, as you may have noticed, heavy on circles), I also liked that it depicted a “world,” which is the term we use to refer to each map of levels.

That said, I always reserve the right to change my mind later on. What do you think? Did we make the right decision?