Keywords

1 Introduction

This paper reports a case study about researching how to enhance mobile gamers’ immersion in terms of a third person shooter game’s user interface design. It is widely accepted by gamers, developers, and game researchers that immersion is one of the most important parts of game play experience [1]. In the general context of gaming, the term immersion can be described as an experience involved and engaged in the imagination space in which the game is played [2].

Since the small-size screen is a mainly influence factor of the immersion experience of mobile games, we conducted a practical mobile game demo to research how to enhance mobile game players’ immersion in terms of user interface design, by developing a game demo named “The Legend of Demon Hunter”, which is a third- person shooter (TPS) and role-playing game (RPG). The primary goal of this study was to test our assumptions about factors, which could increase the sense of engagement and immersion gameplay. We began by reviewing existing notions of engagement and immersion in gaming experience, and then surveyed related practical and theoretical work concentrated on methods increasing gamers’ immersion, in the context of user interface design. Then, we proposed some key factors to enhance the game’s immersion in terms of user interface design.

2 Background

According to Lewis’s report [3], The mobile games have a huge potential market and the total revenue is predicted to increase at more than 10% per year through 2020. Therefore, it will make mobile games as the largest segment of the global video games industry by a wide margin at that time. Extensive previous research about immersion in PC and Console gaming has been conducted (e.g. [4, 5]) since the 1990s [6], however, it still remains unclear whether mobile games have the possibility and potential to be immersive [7].

Several studies support the contention that screen size is an important variable for game immersion. Lombard and Ditton [6] stated that a 52” color television screen with surround sound could bring participants a better sense of participation and involvement than a 5” black and white television with mono sound. Besides, Hou et al. [8] research also supports the greater presence that players could have greater enjoyment and engagement on larger screens than on small portable screens. However, most of these studies only concentrated on passive viewing and for video games. There are also some other factors, such as tasks, internal consistency and fantasy, contributing to games’ immersive experience [7].

From our own experience, the game designers, game artists, and software developers play a relevant important roles during the PC games’ developing. On the contrary, the user experience department is to some extent ignored. Mobile games are different from PC games. Since mobile games’ market owns a variety of games and software packages are relatively small, the players become lacking of patience. If mobile games can’t attract players in a short time, the players will quit the game immediately, and no longer open it. What’s more, players will uninstall the game for releasing the store space. Therefor, except for the game playability, the UI plays an important role in the era of mobile game. In fact, a better quality of game UI can reduce the learning times greatly and give users game immersion deeply. The relation between Game designer, Game artist, Software developer during the era of mobile game and PC game are shown respectively in Fig. 1.

Fig. 1.
figure 1

The relation between game designer, game artist and game developer

Full size image

To sum up, UX plays an important role in the era of mobile game, and researchers and designers pay attention to improve the user experience of mobile devices. For instance, they focus on how to use the mobile Apps efficiently, easy to learn and decrease the misunderstanding, and etc. But most of them are the tools Apps of mobile and seldom focus on the immersion. However, Mobile games as one special kind of mobile Apps, which have difference between game and normal tools Apps dramatically, especially in the immersion area. Hence, our study will focus on the innovation design of UI for improving the game immersion and enhancing the game players’ immersion. In addition, in this paper, we summarize some design methods for readers to learn.

3 Case Studies

Based on the problems mentioned above, we summarize some design methods (or guidelines), which can help designers to improve the immersion of games: 1. Hidden and Highlight Widgets Properly. 2. Combining Widgets Together. 3. Strong Corresponding & Instant Feedback & Motion Design. 4. Operational Consistency (Fig. 2).

Fig. 2.
figure 2

Four methods to enhance the immersion of game

Full size image

In this case study, we conducted a practical mobile game demo to research how to enhance mobile game players’ immersion in terms of user interface design. We designed some game demo’s UIs through four design methods mentioned above. This game demo is named “The Legend of Demon Hunter”, which is a third- person shooter (TPS) and role-playing game (RPG).

3.1 Hidden and Highlight Widgets Properly

Hidden and highlight widgets properly: hiding the widgets when a specific function has not been activated, so that players could pay more attention to the game flow instead of the widgets.

In this game, we improve the game immersion by refining the buff bar. We didn’t consider much about the colour and shape of the buff bar from the very beginning. The buff bar was designed in the normal style, which is filled the same colour from the head to bottom. We can see the new UI design of the buff bar below (Fig. 3). As players don’t need to pay attention to the buff bar in the early time, the buff bar uses the low bright colour that is similar with the game’s background. The players can focus on the core experience of the game- “Charge Shooting”. When the buff’s process bar approaches the terminal point, the shape of the buff bar becomes stronger and the colour becomes brighter, which attracts players’ attention and encourages them to get a buff. Table below (Table 1) shows that the different status of buff bar.

Fig. 3.
figure 3

New UI design of the buff bar (Color figure online)

Full size image
Table 1. The different status of buff bar
Full size table

3.2 Combining Widgets Together

Combining widgets together: combining the widgets with similar function together to be an independent widget, which enable them to be browsed and used easily. Especially for some widgets that have important effect on players’ experience, make sure that they are designed tidily enough, so that making more space for the game graphics.

The figure below illustrates the difference “Charge Shooting” widgets between before and after. Before, the progress bar of charge shooting and sight are divided as two parts respectively. Because their distance is not near, player’s eyes must pay attention to both the progress bar and the sight. Hence, player’s eyes must up and down to see whether the process bar is finished. Obviously, the player’s flow is interrupted easily. For improving this design, we iterate the UI design and design a new one, which makes progress bar and the sight as a combined widget, so that players can more focus on the target and enhance the game immersion dramatically. Besides, the game will have more space for showing the graphics instead of UIs (Fig. 4).

Fig. 4.
figure 4

The different “Charge Shooting” widgets between before and after

Full size image

3.3 Strong Corresponding and Instant Feedback and Motion Design

Strong corresponding: the color of the ammunition is the same with the shot. When players touch the fire ammunition button (B), the color of the shot button (C) is orange too; when players change the fire ammunition to the ice ammunition, the shoot button’s color will switch to purple, which enhances the relationship and correspondence between them (Fig. 5).

Fig. 5.
figure 5

The explanation of operational buttons of game (Color figure online)

Full size image

Instant feedback & motion design: When gun is loading ammunition, the decoration of the small angle behind the button will walk around. On the one hand, the motion of instant feedback tells the user that the current button has been clicked. On the other hand, it makes the game more interesting and more like real shooting game, especially when the ammunition filled the charger one by one and action synchronized with the role, which seems very authentic. Besides, it will reduce the user’s boring feelings as the loading lasts 2 s during which time player can’t do anything. Hence, focusing on motion of UI will transfer user’s attention and enhance the games’ immersion dramatically.

In addition, instant feedback also includes the special status’ feedback, which can enhance the games’ immersion as well. In this case, we design three special status UIs, such as lacking of blood, shooting tip and damage texts. There are three special status UI examples shown in Table 2. (1) Lacking of blood: When player is lacking of blood, the screen corners will shows red. It is directly to tell the player that the role is lacking of blood. It makes the players feel more tension. But when the players kill the monster finally, it will build up toward a climax. (2) Warning tips: Warning tip is a good way to remind the players to do some important actions. On the one hand, it makes the player feel nervous. On the other hand, when the tips come out with the special game sound together, it contributes to enhance the immersion. In this case, the monster makes the roaring sound, and the left of screen shows a shooting tip (Shoot head, hurry!) simultaneously so that remind the players to have a “charge shooting” to interrupt the boss’s roaring. Otherwise, the players will get critical damage from the monster. (3) Damage Texts: The normal damage is a small text with white color. On the contray, the critical damage will show a big text with red color. Because of the contrast, the players get a great sense of accomplishment and enhance the sense of immersion.

Table 2. The UI examples of special feedback status
Full size table

3.4 Operation Consistency

Operation consistency is a way to reduce user’s learning time and promote user’s flow. When we design the UIs of the case game - “The Legend of Demon Hunter”, we think that most people use right hand. As a result, in the early design phase, we determine the right hand as the main operating hand. At the same time, the main operating buttons are placed in the right side of the thumb’s fan-shape hot area so that users can touch the button through the right thumb efficiently. In addition, the information layers are displayed on the left. When we design the game’s UIs, this principle is executed from beginning to the end. There are three game UI examples shown in Table 3: Main operating UI, Chapter choosing UI, game results UI, which are the most familiar UIs in the TPS mobile game. It illustrates that the main operating buttons of game users’ interfaces are placed on the right and the information contents are placed on the left.

Table 3. The UI examples of right-hand operation
Full size table

4 Discussion and Future Work

In this study we developed a TPS mobile game and concluded four important methods for enhancing the immersion in terms of game user interface. According to these methods, people can not only design the immersive game UIs quickly but also examine the game UIs efficiently.

However, designing game UI is a complex process, especially when designer want to attain a good immersion of game. These four aspects mentioned above are just a small part that can enhance the immersion of game. In the future research, on the one hand, we will explore more design methods of game UI. On the other hand, we will evaluate our game demo by conducting a qualitative evaluation study. During the evaluation study, we will involve 30 participants who have different degrees of prior experience of playing mobile games. We measured participants’ immersion by letting them complete Jennett’s 31-item Immersion Questionnaire [9] after playing the game.

5 Conclusion

This paper reports an case study about researching how to enhance mobile gamers’ immersion in terms of a third person shooter game’s user interface design. We explored some new methods for improving the immersion in designing UI of hardcore mobile game area. Four methods for strengthening the immersion of mobile games below:

  • Hidden and Highlight Widgets Properly.

  • Combining Widgets Together.

  • Strong Corresponding & Instant Feedback & Motion Design.

  • Operation Consistency.

By using these methods, designer can design the game UIs efficiently, no matter design new UIs or iterate old UI versions. Most importantly, the game will obtain better sense of immersion, especially when these methods guide the designers to design game UIs.