Personal aims and objectives
As I’ve never tried UI and ICON design in a game before. So this experience was completely new. Although UI design is the part most players care least about, it is an integral part of a complete game, and the process by which the player interacts with the interface is one of the key aspects that affects the overall player experience.
With no extensive experience in game development and design, every time I make a game the process is interesting to me. It’s like constantly polishing my skills and experience through learning. I am looking forward to the experiences and new experiences that this design process will bring to me.
Development process records.
In the beginning, we had three versions of the theme. Finally, we decided to do the brain.
Meeting Minutes
- first level brain mini-feedback (+1 for game development countries) and big feedback (can be split into different layers?) 1. first level elements (following the logic of the card suits)
- the logic of pre’s podcast, the part that completes the narrative, see the art list document for details
- rules for the implementation of the first level of play, with reference to the combination of service cards and phase
- interface art, can be uncoloured, close communication required
- Music and sound effects list
- refine the gameplay of the second level (players get fragmented information, including visuals, music, etc., build theatre and get feedback)
3.2 Meeting notes
3.4 To be solved
[Main rule missing].
A. What are the objectives of play.
eg1- [single game goal] to populate an area so that it has a personalized art presentation; [overall goal] to construct a personalized brain in art + narrative
eg2- [Single game goal] add as much progress as possible to each area to fill it; [Overall goal] successfully fill X areas
……
B. Strategy space is given to players under this objective.
eg1-provides different non-forcing micro-goals (linking into parlays, pairs/different region settings with different counts/amounts required ……)
eg2-provides some sort of compulsory rule (two identical elements must be met to be connected adjacent to each other to increase progress)
……
C. What is the impact of implementing the strategy
eg1-[Different art performance for areas unlocked in a single game] + [Determines which area is unlocked in the next round] + [Goal of reaching a custom build brain after the total number of rounds is completed]
eg2 – [Progress of all areas populated in a single game] + [Settlement of which areas reach 100/100 progress and become interactable after the total number of rounds is completed]
……
In response to feedback on visuals and narrative, the
- extra visual: add pre animation before the first level, the current darker (peiwei mentioned whether it was too dark) robot is actually a children’s companion robot, originally with a very cute (combined with the original cute and creepy visual style) package (consisting of three layers: wrapping carton, cute exterior, core), the player fills it like filling it with one brain partition after another, like cotton.
- First level of in-game visuals.
2.1 The robot’s exterior will have a visual feedback of accumulated colour layer by layer as the partitions are lit
2.2 The individual partitions of the robot’s brain will have a two-frame representation from black and white to colour (implying an excess of black and white from the operating layer to colour in the feedback layer)
2.3 Increased visual representation of the robot’s central control area (novice instruction)
Frame feedback.
- addition of a central control room (foundation for novice teaching)
- characters change as brain partitioning increases (characters coloured layer by layer)
Positive feedback and penalties.
Playtest Records in 09/03
Maddy: Add sound feedback using the visual or the text to tell the player game background Give us aim( why does the player play that)
Abhimanyu: Keyboard control ==> player takes two roles in this game (simulate the icon; link the icon). Maybe just one part is excellent.
David： game background does not clear for the player The Keyboard Space button may be better than Keyboard J Main characters may have the animation when the player does something
Filip: Players can know the game rules but do not know why.
Yiying： Add some audio/music as guidance in the game, add some rhythm to the elements, if the player connects the right elements, it will form a song. When the player plays in the wrong direction, the game can warn.
Personal play test records： The design language of many of the buttons is unclear. The player is at a loss for words. Some are even misleading. The theme is not clearly presented. It was decided to add animations and to refine the design of the UI and the icon.
UI Design
- UI Low fidelity chart design. First Edition
The layout of the interface is also designed like a game process. It is also like a language. The position and size of each panel are purposeful. And the information needs to be communicated to the player in a timely and efficient manner. This is what I need to consider in a low-fidelity diagram. It is also a prediction of player behavior.
After the first playtest, I found that the UI needed a lot of polishing. Many parts of the design and player encounters are not smooth and clear enough. Some of the design languages are not clear enough. And there are many fragmented and ambiguous parts. For example, the computer boot button is too small and does not have clear enough highlighting. The buttons that need to interact with the player seem to be on a level with the background. There is no obvious visual flow to guide the player. Most people would not know what to do at this step.
A large amount of white space that appears in the lower notepad would steal a lot of the player’s attention if there was no output of information or other elements that could be interacted with. But when placing the mouse over the button, the highly recognizable secondary circle appears. This allows the player to easily identify the function. However, the press button in the static state is in need of adjustment.
The frog [or mailbox] is there to remind the player to enter the password for the login process. In the second version, it was placed in the Dock and highlighted. With regard to the ease of use of the interface, it is important to keep it within the range of most gamers and to take into account the habits of most gamers when interacting with the game. As our game is similar to an operating system, we hope that the purpose of this design will be more obvious to the player.
Icon Design
The base shape of the three-button designs should match the player’s habits and reduce the cost of understanding for the user. People are inherently quicker to understand and pick up on graphics than simple text. The graphics need to be simple, clear, and intuitive to display.
In-Game
I have a question, does the layout of this piece need to be modified? This panel is part of the game settings section, the panel itself does not contain a lot of information related to the game content, and the area of the animation is about the same size as the core content at the bottom, from my personal experience, before I read the graphics I would have thought they were game instructions or something else after I identified them I realized they were buttons.
I feel like it should be better to take the text out; or scale the text up compared to the picture and then scale the whole panel down.
Players don’t easily know they are buttons in the first place, attention is stolen by the animation, players may wonder what the image means in the flow of the game, then find out there is text in the image, then know it is a button. Having searched, it seems to be more common for text and graphics to level out the UI.
Critical Reflection
During this collaboration, I always lacked much thought in the output of many design ideas to their implementation. For example, the layout of some of the UI was illogical and I always shared it with my group after it was fully completed. However, they made comments that I, as a bystander, would have been perfectly aware of in the first place. And when I was the designer, these mistakes were ignored by me. So later on in the playtest, when students raised these issues, I would give myself excuses that it was just a matter of finish, when in fact there were issues that could have been avoided at the beginning of the design. So going forward in the design process, timely playtest and lots of thinking and reflection are essential, and they need to form good habits ingrained in my way of thinking. This can greatly improve the efficiency of game production and save time in game development.