Role Selection Interface Design Iteration
Interaction design | Aug. 2021- Sep.2021
The purpose of this iteration
Through efficient communication, improve the configuration of the player team to enhance the strength of the team and increase the probability of winning.
Role Selection Interface Analyse
The analyse of flowchart
Find Pain Point
Pain Point 1
No social features to help players match roles
Pain Point 2
The role selection function is not obvious, it is difficult for novice players to find
Pain Point 3
The role selection box is too small to click and view
Pain Point 4
The skin information is too complicated, and the skins that have not been obtained or listed will also be displayed
Pain Point 5
After selecting the skin, the character is covered and the complete image of the skin cannot be seen
Choosing Competing Products
Summary The Game Style
Choose a role in the game
Roles have location attributes
Competing products choose
Competitive Analysis
Pain Point 1
No social features to help players match roles
Role position on the map
Clear role classification
Communicate with teammates to choose roles
Role position on the map
Player’s position clearly
Unreasonable allocation prompt
Click ‘Unreasonable configuration prompt’, and the missing characters will pop up directly, which is convenient for players to choose
The role details and role selection are divided into two pages to provide novice players with a clearer understanding of the role
Summary of Useful Points
At the top of the communication role position function, prompt the team's current configuration problems, and the feedback is more direct and clear
Click ‘Unreasonable configuration prompt’, and the missing characters will pop up directly, which is convenient for players to choose
The location assignment on the map and the player’s role needs to be functionally classified, so that the player knows more clearly what type of hero is needed
Select a role through the secondary interface
Pain Point 2 & 3
The role selection function is not obvious, it is difficult to find; The role selection box is too small to click and view
The interface is clearly distributed and the cost of understanding is low.
Mainly to show the role image, the function classification is also divided into Choose the role, Role’s information & Configuration, Team configuration this three part.
Select roles through the secondary interface, which is clear and intuitive, and also makes room for scene-based packaging design.
Summary of Useful Points
Role details and configuration are combined into one function
In the scene-oriented interface, the role selection is integrated into the book, which has the same characteristics as the style of Tom & Jerry
Pain Point 4 & 5
The skin information is too complicated, and the skins that have not been obtained or listed will also be displayed; After selecting the skin, the character is covered and the complete image of the skin cannot be seen
Separate interface process to select the skin, the role skin effect is clear and intuitive.
Players can buy skins at the character skin selection function, so all skins will be displayed in the page.
Summary of Useful Points
The character image and the selection box do not overlap.
The purpose of displaying all skins is to facilitate the purchase of players, or the limited number of skins does not affect players’ viewing.
Logic Flowchart
Roles Selection
Choose Roles/ Skins
Integrate characters and skins on the right side to increase operating space and reduce information acquisition costs
Roles Selection
Choose Machine Mouse
The machine mouse belongs to the skin type and is screened in the skin link.
Team needs
Team configuration reminder
Integrate characters and skins on the right side to increase operating space and reduce information acquisition costs
prop using
Skin Experience
Select the number of days to use. If you don’t want to use it, click the blank area.
