Crafting Visual Indicators Visual Assets Design Sprint Three - UQdeco2800/2022-studio-2 GitHub Wiki

Final Design

'Crafted!' Popup

image

Quantity Indicators

pixil-frame-7 (3) pixil-frame-8 (1) pixil-frame-9 (1) pixil-frame-10 (1) pixil-frame-11 (1)

Research Process

'Crafted!' Popup

Preliminary research proved to be difficult as search queries was not returning images that represented the function that was intended - an icon popup that would confirm the user crafted a weapon. However the concept is used in different features of many games, such as unlocking achievements and leveling up; which is where research was focused.

Design Inspiration Reference Link
image https://www.pngegg.com/en/png-mrccm
image https://www.pinterest.com.au/pin/244179611026557249/

Quantity Indicators

To further develop the functionality and UI/UX of our crafting menu the team decided to implement quantity counters to represent the quantity of a certain item the player has at a given time. Before designing these visual indicators some preliminary research was conducted to understand how similar crafting menus achieved this functionality.

Design Inspiration Reference Link
image https://geekflare.com/make-bed-in-minecraft/
image https://terraria.fandom.com/wiki/Inventory

As seen above, the most common way to represent the quantity is simply numbers on the corner/side of the inventory box. However this design may not be appropriate for our crafting UI from an accessibility standpoint, which is the primary reason this simple design was not used in our crafting menu. The above crafting inventories have a darker background compared to our inventory (at least the level 1 menu), therefore the visual indicators may be difficult to see on the menu.

Design Iterations

'Crafted!' Popup

Iteration 1 Iteration 2 Iteration 3
To prevent obstructing the view of the user too much, a very minimalistic popup design was initially created. To further integrate the design into the theme of the game, an attempt was made to show the weapons alongside the popup - however this proved to be too difficult to make look clean, and this idea was scrapped. Peer user testing indicated that the texture could be improved, so after removing the weapons and adding appropriate texture to the design the final iteration was completed.
image image image

Quantity Indicators

Iteration 1 Iteration 2 Iteration 3
With the above points in mind, the first iteration of the design was the number inside a yellow circle (to synergise with the design of the level 1 crafting menu). Preliminary user testing with peers indicated that the circle itself could have extra texture, so the design was iterated upon. Another round of user testing was conducted and suggestions to improve the blending of the textures were made. This resulted in the final design.
image image image image image image
Final Iteration
User testing indicated that while the colour palette is suitable for level 1, it does not flow well with the theme of level 2, and a change to a more neutral tone would allow the design to integrate in both levels seamlessly. Therefore the colour was changed to darker grey tones.
pixil-frame-7 (3) pixil-frame-7 (4)

Future Directions

The primary future plans for the crafted popup is to implement animations to further integrate the popup in the design. This includes an animation when it popups, and possibly other animations while the popup is on the screen. The concept of integrating the weapons in the design may return an animation form as well, but the ideation process wil be thoroughly conducted to come up with more ideas.

As for the quantity indicators, the crafting menu was not designed to contain more than one type of item, so the overall UI was not designed with them in mind. If it were to be intended from the beginning, more research and ideation around how visual indicators interact with the rest of the design would have been taking into consideration and the crafting inventory may have taken a darker colour palette. This aspect of the overall crafting UI may be visited next sprint, depending on the current workload and the importance of other features.

Finally, most of the above visual indicators were largely designed around the visual aspects of the level one crafting menu, although it will be used in both level 1 and level 2. This is due to time constraints and other features taking priority, however the characteristic of our designs changing to suit the level theme is important, and if possible will be implemented next sprint.