Behind the Scene
- 1 Visual/UI/UX Designer: Me
- 1 Game Designer
- 4 Engineers
My ResponsibilitiesAs the sole UI/visual designer in this team, I was responsible for all artistic work. In my understanding, a user interface can be considered well-designed only if it is both nice looking and user-friendly. My objective was to design such a user interface that could push our product to the next level.
Target UsersAll gender from age 10 to age 40.
User Scenario StudiesIn order to target a user group with a wider range of ages, I have done a lot of research on game design. My research concludes that male players prefer games with action and strategy while female players are more attracted to puzzle and social casino games. After my user survey, I found that it's more acceptable for females that if the action game's operation is simple, and its interface looks beautiful.
PremisesOur game is called InkFighter. It is a single-player 2D action and adventure game on iOS platforms. Character position movement is controlled by a virtual joystick on bottom left of screen. Cast spelling and attacking movement are triggered by finger touching around the character. The entire game is built with Unity game engine.
ObjectivesThe global goal of the game is to stay alive under enemy attacks and kill target enemies. In story mode, a player needs to pass stages along the storyline. A non-stop mode would be added to the game later. In non-stop mode, the task is to stay alive and kill enemies as long as possible. The gameplay will focus on player’s tactics and strategies.
Key FeaturesBased on our studies, we intend to make a game that has the following features:
- An artistic and neat interface
- Relatively easy game mechanics
- Game context
- In-depth game exploration
WireframesIn order to make the whole game process clearer, I create the wireframes for InkFighter.
Our First UI PrototypeAccording to the components mentioned above, I design our first prototype, which set the general style of InkFighter. It allows people to get an immediate sense of game style at a glance. The prototype would be revised and refined in the actual design process.
ResearchesResearch has been done during UI design of InkFighter with areas including but not limited to:
- characteristics of traditional Chinese calligraphic painting.
- human movement
- classic ancient Chinese weapons
- Characteristics of traditional Chinese calligraphic painting:
The typical elements in Chinese calligraphic painting are uniquely shaped trees and stones as well as the warm colors. Those elements would be the main items that constructed our map.
- Human movement:
Various types of human movements including running, walking, attacking with axes, and shooting archers are analyzed in depth. The studies of human movement helps me create the animation sprite sheet for our character's movement.
- Classic ancient Chinese weapons:
The classic ancient Chinese weapons mainly contain sword, axes, wood sticks, spears, bows and arrows, and etc.
Problem 1: How to control movement??Since a player has to use right hand for attack, we assume that the movement cannot be controlled by the same hand. We brainstorm a number of movement systems, such as touch/drag and gravity control.
- Solution: We select virtual joystick to control the character's movement.
Joystick can control the movement very easily and accurately. A player may use his or her right hand to draw patterns on the screen. Therefore, the placement of joystick would be on the left side of the screen. The player should use left hand to control the joystick.
Problem 2: How to let players know there's a range of attack?Various obstacles may show up in the game world, such as rocks and trees. The existence of obstacles improves game difficulty and player experience of the game. In order to let the user enjoy the complex map we designed, we have to limit their attack range. Players have to go through the obstacles to be closer to enemies. An enemy can be destroyed by drawing patterns on screen when they are in player's attack range. But how to let players know the attack range?
- Solution: We make the attack range slightly brighter than the other areas.
By doing so, a player is able to visibly know what the attack range is. A slightly difference in brightness is enough to deliver the information but not distractive.
Problem 3: Ink TrailAt the very beginning, we made a decision that player may only draw patterns inside of the attack range. The patterns (ink trail) they draw can not go across the attack range. However, after usability tests, I found that cutting off the ink trail created a non-smooth gaming experience.
- Solution: We allow player to draw outside of the attack range. However, the part of the pattern outside of the attack range would be noneffective, and the color of that part would be slightly lighter. This can improve player experience while keeping the game mechanics.
Problem 4: How to Create an Eastern-Western Style Typography?According to our design prototype, the game style is based on element ink, specifically, Chinese calligraphic ink. The entire art design will be of Chinese artistic style. However, InkFighter is also an English language game, which raises a question: how to make the English font to contain the essence of Chinese typography?
- Soulution: We apply Chinese characters' stroke features to English letters
Usability TestsWe hold three rounds of usability tests. During each round, we let 20-30 users play our game, and obeserved the following issues:
How easy is it for users to accomplish basic tasks the first time they encounter the design?
Once users have learned the design, how quickly can they perform tasks?
When users return to this design after a period of not using it, how easily can they reestablish the proficiency?
How many errors do users make? How severe are these errors? How easy can they recover from the errors?
How pleasant is it to use the design?
Since our game has a quick tutorial, 80% of users understand how to play this game after they pass the tutorial level. 20% of users thought there should be a background story to increase users' interests to this game.
100% of users can perform task as soon as they passed the tutorial level.
We invited 10 users to play our game in our first round of usability test. After two months, in our third round of usability test, we invited them to play our game again. 100% of them can reestablish the proficiency rapidly.
70% users felt that the experience is not smooth enough because they can only draw patterns (ink trails) inside the attack range. They wanted to draw ink trails wherever they want.
80% users can't notice the ink reduced in the ink bar unless we told them. In another word, there's not enough information to let them know their HP/MP was low and they were about to die in the game. We are currently working on providing more feedback to the players' about HP/MP status.
100% of users were pleased with the artistic style and the content of InkFighter. All of them thought InkFighter was a fascinating game to play and they were willing to download it once it went to the App Store.