Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs or learn how to Submit Your Own Blog Post
This article presents practical guidelines for the design and location of the mini map. Additionally, current conventions are explored.
Note: This piece originally appeared on the Bigpoint company blog.
If you are involved in the game development process, you’ve probably heard about this question before. Especially UX/UI designers are confronted with this question as they are responsible for the conception and design of the mini map, a key element in the user interface of many games. Therefore I was very curious to find out more about their decision-making process, where to place the mini map in the HUD. Is it important at all? Several posts in different game forums suggest that the wrong placement might be a source of annoyance. Or should designers just follow the current conventions? Are there actually any conventions?
In this article, I will try to reveal current conventions by comparing a multitude of games from different genres, identify requirements for a proper placement and design of the mini map and provide design recommendations, so that next time the “where?” question arises, we are faster and more certain in out answer.
My initial thought was that - historically seen - the mini map is an evolutionary branch from the world map, as known from adventure and role-playing games. However, I did not find any clear evidence supporting this theory. Early C64 racing games already included mini maps (e.g. Pitstop, Buggy Boy, Night Racer). Nevertheless, the main function of world map and mini map are similar: Providing orientation, hence easing navigation.
While there are game genres, which manage to get along without a mini map very well like Fighting, or Adventure games and, obviously, Puzzle, Board and Card games, most genres nowadays make use of mini maps: Action, Shooter, RPG, MOBA, Construction, Sports and Vehicle simulation games. Of course there are also exceptions – especially very linear games, such as Heavy Rain or Call of Duty: Black Ops 2 (Single Player), usually do not use mini maps.
Looking at games in general, the only thing that mini maps have in common is the perspective. Mini maps show an abstracted view from the bird’s eye perspective. Furthermore, I recognized genre-typical locations for the mini map. The following conventions are based on a sample size of N=66.
MOBA games place the mini map exclusively at the bottom.
Strategy games use mostly the bottom left for placing their mini map.
MMORPG’s place the mini map exclusively at the right and mostly at the top.
Racing games use predominantly the left as mini map location.
1st person shooters use also mainly the left side for placing the mini map.
There was no genre in which games have their mini map placed on exactly the same location (like bottom right or top left). Even games from the same series are not consistent (not even when the same studio developed the games).
The scope of the mini maps differs per genre: Action, Shooter and Role-playing games show only a limited field of view including your immediate surroundings (or your current sector), whereas in Sports, MOBA and Vehicle simulation games, the mini map functions as a miniaturized world map. Which makes sense because the game world is much smaller in the latter game genres. In games of the first category, the scope is sometimes adjustable to the extent that zooming out of the mini map results in opening the world map. Interactions are sometimes also twisted around: Setting a destination (path) in the world map can be mirrored in the mini map. Funny to notice is also a design difference: Mini maps in RPG’s and Action games (1st and 3rd person) are most often placed in a circular rather than rectangular frame. I suspect the reason to be is mainly aesthetics. Mini maps in games with big virtual worlds often include cardinal directions and a round mini map fits well the metaphor of (a round shaped) compass.
Does it make much of a difference, where the mini map is located? In some cases, yes, it actually does! Learning the UI is one major part of a game and in most cases there is no better or worse between right and left. Though, fast-paced games are recommended to place the mini map on the left (at least from a western cultural perspective), as it gets more visual attention than the right side1. Most games follow this rule. In this sense, a badly placed mini map can not only lead to prolonged reaction times but also to miss-clicks and miss-perceptions (depending on where you place other HUD elements). In order to avoid that, prevent long distances between core game elements and the mini map. This will decrease effort and time to look on the mini map and increase the peripheral visual attention for the mini map. In this sense, it is also recommended to divide areas of the UI in pure information and interaction (e.g. top for information and bottom for interaction). Depending on if your mini map is interactive or not, you should place it in the appropriate area.
Here are some general recommendations. The word “general” implies that it might not fit perfectly to every game.
How should a mini map look like?
Keep in mind where genre-typical games from the competition have their mini map (see current conventions): Some core user might get used to it, develop a preference and therefore be annoyed if they have to learn a new positioning.
Do not cover up essential parts of the playfield. An exception is when the mini map is displayed by a toggle function.
Integrate it well within the UI/HUD in terms of proportions and aesthetics.
Assure good readability!
Choose your colors carefully: Keep in mind vision impairments such as color-blindness.
Use high contrast between distinct elements, e.g. allies and enemies.
Build on known metaphors for your sign language, e.g. a house for your base/home. But keep it simple! Small icons have to be distinct in order to be recognized and understood immediately. If you cannot find an appropriate metaphor, then rather rely on known geometrical forms than on fancy symbols. In the end, no one expects more than dots.
Keep in mind the scalability!
Which information can a mini map provide?
Barriers: Usually represented by dark parts on the mini map, while accessible parts are portrayed brighter. In general, the color white is associated with importance while black is mainly ignored.
The player’s position
Enemies’ and friends’ positions
Points of interest, e.g. checkpoints, domination points, buildings, save points, traders etc.
Fog of war
Unit status, e.g. wounded or dead unit members
Additional terrain information, e.g. altitude differences or other levels
Sometimes, the mini map is used as a hallstand for mini map unrelated HUD icons (e.g. a health bar). These are intentionally disregarded.
A peripheral arrow, showing you where you have to go. Plus, additional arrows or other symbols representing important points, which are not visible yet.
The four cardinal directions (plus the four ordinal directions and eight further divisions)
Your sector’s, city’s or whatever’s name
Which interactions can a mini map allow?
Navigation through the mini map: Setting waypoint by one click and/or drawing the path with the cursor (e.g. Strategy and MOBA games). Only if the map is not transparent.
Setting various kinds of alerts (Pings) like Target or Retreat (especially in multiplayer games)
Tooltips
Zoom out/in
Change the map segment by mouse drag
Change between a fixed and a rotating map
References
1. http://www.useit.com/alertbox/horizontal-attention.html
Read more about:
Featured BlogsYou May Also Like
.png?width=300&auto=webp&quality=80&disable=upscale)
