(UX Design) Methodology of keeping cross-hair design on track

In shooting games, when designing battle HUD, developers can't avoid considering what is the good design of crosshair. As shooting game players, we can always see that some of the streamers’ crosshair have been customized into various shapes.

                                                   Crosshairs that steamers often use

                                                       Crosshairs that pros often use

If we take a look at the Proview of some professional players in the competition, we will also find that most of the crosshairs used by them are not the original ones.

So, will designers of these games wonder, why should the players do everything possible to change the original crosshair? Is the original one not good enough? Or does every player have different needs for crosshair, and the basic one just cannot meet their needs?

As we all know, the forms of UI is designed according to their functions. From the basic function of the crosshair, that is, assisting the player to aim and shoot, we can analyze how players use the crosshair to aim and finish shooting.

There are two steps when using crosshair in-game:

1. Find the crosshair on the screen and move it near enemies

2. Fine-tune the aiming and trigger the fire button to shoot

                                                           Find enemy

In order to complete these two key steps, how do developers design the original basic crosshair in CSGO?

We can see that the solid green crosshair is used to help players complete the first step of searching for enemies and aiming roughly. While the center point is used to help players aim more accurately. The dynamic short crosshair help players judge the range of bullet movements in the current state (such as player moving, hopping or sweeping).

In the fierce battles in-game, if the crosshair is too small, it will happen that the player can't find it in the camera movement, so it is necessary to have a high recognition of the crosshair. When aiming at medium and long range, too large crosshair will likely block players' sight, while in this case, smaller crosshair can meet their needs of precise shooting. After being trained, professional players have extraordinary pre-aim ability and bullet diffusion judgment experience. So, they simplify the crosshair, leaving only the accurate part of it--that is, the static mini crosshair we often see in professional competitions. However, steamers use super-large crosshair, which is more of a gimmick. We can see that the crosshair works normally when they fight at a close range, but it is difficult to aim if they use too large a crosshair in medium and long ranges shooting.

We can draw a conclusion here: for most players who have not received professional training, the default or original crosshair can help them to complete the aiming action better and can adapt to most situations in-game to complete shooting.

After understanding the relationship between aiming and crosshair, can we start to design a proper crosshair? But the answer is obviously no.

In addition to the core functions of aiming, we should also consider different weapon type, player status, shoot feedback, obstacle prompt, aiming feedback, and trajectory prompt when designing a better crosshair:

1. different weapon type

The static and dynamic appearance of the crosshair can play an important role in conveying information and telling the player the intuitive feeling of the attack type of this weapon at present.

When we design the crosshair, we often choose whether to use the circular or cross one for assault rifles. Here is a small tip:

A cross-shaped crosshair is helpful for players to pre-aim the horizontal headshot line. For weapons that need precise shooting, the cross-shaped crosshair is more suitable for players to pre-aim; Whilst the circular crosshair is often suitable for dominant weapons. It can completely show the diffusion range. If it is a shotgun, the meaning of "putting the enemy in the small circle and then shoot" is easier for players to understand. If every bullet from your dominant heavy machine gun, it is understandable to use a circular crosshair. After all, under the super recoil, the player's demand for accurate shooting and pre-aim of headshot line is much weaker than that for understanding the bullet diffusion range.

In many games, we can see that the type of crosshair can also convey the settings of bullet shooting and flying: whether it is projectile type bullet.

If the trajectory of a weapon is influenced by obvious gravity and the initial velocity of bullets, it is very important for players to predict the falling point of bullets and the pre-aiming of target movement if they want to hit enemies in medium and long-range. Crosshairs can prompt this information by adding scale marks.

It can be observed that the above crosshair is a combination of an assault rifle and Grenade launcher. From the shooting rules, we know the positioning of this weapon: three bursts with the left key and one grenade with the right key. Therefore, the designer designed the left key crosshair into a cross in the style of assault rifle, and combined it with the Grenade crosshair.

It is worth mentioning that the crosshair of the assault rifle uses a clever design technique, which evolves from the negative aspect coming from the real gun and the scope:

As a player's visual center in battles, crosshair can effectively convey the information of gun type. When designing crosshair, we should fully differentiate it of different types of weapons. When a player pulls out a weapon in a fierce battle, the crosshair should tell the player what kind of weapon is currently used to a certain extent. Therefore, that play is helped to avoid checking the weapon type by scanning the weapon information on the HUD or the character model.

2. Status information

The concept of the visual center is mentioned in the above content, and in most shooting games, the visual center falls on the crosshair. Therefore, displaying as much information on the crosshair is also an effective way of information transmission. In addition to aiming, the crosshair will often show several states of current character: running, loading, or accumulating power.

Players don't use crosshairs to aim all the time. When running, reloading, taking medicine and so on, the crosshair should have a different shape to prompt the player's state.

3. Shooting feedback

There is a significant difference between shooting games and fighting games in terms of control feedback: fighting games come from actions, time frame exaggeration or compression, special effects on screen etc. while shooting games mainly come from hit feedback, crit/headshot feedback, and kill feedback.

                    Hitting enemies in Overwatch

             Crosshair when killed a enemy in Overwatch

When designing the shooting feedback, we should also fully consider whether the gameplay is suitable to use hit feedback to tell players if they hit an enemy or not.

In Escape from Takov, which focus on the realism, even if the enemy is hit or killed, the player will not receive any UI messages. Players are confused: Has the enemy been killed and whether you need to continue hiding behind the cover. This experience is the product of pursuing hard-core realistic gameplay, which is not necessarily suitable for all shooting games.

Even if there is no crosshair in Tactical Realism mode of Call of Duty 4, the white cross will still be displayed as the hit feedback when shooting the enemy, and the red cross will still be used when the enemy is killed.

The former abandons shooting feedback and pursues absolute hard-core realism, which brings a special psychological game experience to players. The latter strengthens the player's feeling of pure shooting and brings a potentially different game experience.

4. Obstacle prompt

With the development of shooting games, the flight process of bullets in many shooting games is becoming more and more realistic. In PUBG, if the character model stands behind the wall, while the muzzle may be blocked by the wall, and the player can be able to aim at the enemy who is outside the wall with crosshair, but actually firing will only hit the wall in front of it.

In CS series games, the muzzle of weapons will never be blocked by corners or window edges, because the game mechanism determines that the bullet in CS is a ray emitted from the character sight.

The flying speed of bullets in this type of game depends on your network speed. As long as your network speed is fast enough, you will have certain advantages when confronting enemies with guns.

But in a more realistic game, the bullet at the speed of light is obviously not realistic enough. Therefore, the designer really simulated a bullet shooting from the gun barrel, which was influenced by the real initial velocity and gravity, and formed a bullet trajectory parabola.

In this type of game, it is inevitable that the picture on the right will happen from a special angle: the model of the muzzle is blocked by the wall, and maybe the crosshair is outside of it, but the bullet will still hit the nearby wall.

If this information is missing, it will be a great blow to the players.

If a bullet is fired from a muzzle, whether it is a first-person or a third-person game, the muzzle should be blocked by the wall when designing the crosshair. It is necessary to give the players sufficient information to avoid negative emotions.

5.Aiming feedback

                                        Crosshairs in Ace Combat and Death Stranding

In many console games, aiming at the enemy will change the color of crosshair. This design can directly reduce the shooting difficulty of players, but one thing that needs to be careful when designing this function is that if the crosshair changes color or locks after the player aims, the player expects that the bullets will definitely hit the target. If bow and arrow type weapons and parabolic weapons utilize this function, when shooting medium and long-distance targets, direct use of aiming feedback function is more likely to mislead players to make wrong control-aims, and then the crosshair changes color, and the bullet will fall just right in front of the target.

A principle is: if there is no guarantee that the player can hit the target with high probability, it’s not recommended to use the aiming feedback function.

6. trajectory prompt

It is the most intuitive design method to draw parabola trajectory directly in three-dimensional space and show its trajectory when facing the firearms whose bullets fall severely.

The above content describes the functions that need to be considered in crosshair design. Let’s make a summary of the crosshair design methodology:

1. Determine the appearance: Based on the type of weapon, consider the different appearance  

2. Functional design: determine which functional information needs to be displayed in the core vision position of the crosshair

3. Status design: fully design for the feedback of hitting and killing, the state of loading, and the display of blocking obstacles.

4. Dynamic Storyboard design: improve and archive the crosshair design in the form of time and dynamic storyboard, and test it

Tips:

1. When designing a crosshair, don't forget the most fundamental function of it-aiming assistant. Otherwise, you will find that players will try their best to replace your pre-designed multifunctional crosshair with their own plain one.

2. Don't make your burst shooting crosshair look too accurate.

3. Don’t forget the hitting feedback

4. The same context should be expressed in a unified way in design. Once the crosshair has multiple functions, it is necessary to keep the consistency of similar functions in the same game. Players learn to understand once, and then they can identify the similar functions of the whole set of designs in the game and establish a cognitive association.

5. Investigating more weapons gets you tons of inspiration