Finally a visual update has come up on the dockett. A UI update has been in the works for about a month now, starting with a prolonged concepting phase. I cut short the concepting phase, as my resident artist had a tendency to get stuck in the details, attempting to perfect every element with animation, layers of detail, and complex effects. While I appreciate the work put into the minutiae, I felt that the needs of the prototype would be best served by a practical workup, based on the previous concepting phase to produce something usable in short time.
The original concept was quite a rough workup, mostly blocking out key elements as well as adding minor silhouetted detail. It had a rough idea of placement of the Inventory, Deposits, Some Storage Potential on the right as well as some detail to add flavour on the bottom. It did not however contain any space for the informational UI, the consumable slots or leave space for other elements such as future resources.
The next iteration moved a little closer to a usable UI, within the same concept. It did however continue to work with the original design, and therefore had similar issues.
Next we moved on to attempting to implement a more practical UI, I requested some assets and after a few days began constructing the new design.
With the new UI, I transferred from using 6 consumable slots to 4. This was to allow for the potential of controller support in future. The idea of the UI was for it to collapse into frame as it was opened. The inventory collapsed down, the consumables and description collapsed up, and the deposits fell in from the side. I used collapse and fell as I was using a tweening ease that made the elements bounce before coming to rest in place.
The issues with this setup were clear to me immediately. While it felt nice to see it all collapse together, the code was more complex than I’d like for such a simple function, and made repeated opening and closing look awkward as the animation was not built for spamming. It also meant I had to keep track of all elements and how they collapse in, making changes to the UI by myself or my team very difficult.
Additionally I wasn’t using the screen space very well. The vertical nature of the collapsing UI meant that the elements had to share a very limited space, and that meant limiting the informational display UI. It also meant lots of unused space towards the sides.
A final problem identified was that the layout wasn’t as intuitive as I’d have liked. The resource deposits were on the opposite side from the resource UI, and quite far from much of the inventory. It also left little space for other UI features in the base UI, as the majority of information was on the bottom of the screen, limiting my ability to use that area.
For this reason, we called for a short while to discuss a shakeup.
I worked up a small brief for the new design that better captured our needs. The deposits were moved to the left of the screen, closer to the new inventory and resource UI, and the inventory and information display were joined together to take up more horizontal screen space, leaving room for other features at the top and right side if needed.
From these mockups, I saw a lot of promise in the designs, to be combined for the final UI design. Primarily they were a strong aesthetic update from the previous design, the framing sprites were toned down as I had requested, as they were bringing a bit too much visual noise to the overall design. The updates to the state and resource areas were also pleasing, as they had been quite flat before this.
As we began to put in the elements, I realised that there was an issue with the consumable UI. While I wanted it to be clearly accessible from the inventory, it’s position at the bottom made it asymetric to the primary UI, as well as taking up screen space at a key area of visual interest.
Studies of MOBA UI that I have seen, as well as eye tracking data show that the key areas of the screen where players eyes are most likely to dart are bottom left, and bottom centre. I wanted to put more important moment to moment information in that area, and therefore decided to move the consumables.
The new setup keeps the inventory at the centre of the screen, with information displayed to the right. This information will be expanded upon as more mechanics are added to the inventory.
The Consumables on the right were easy to drag to and from the inventory, and the deposits for fuel and scrap were close to the resource UI to make them more intuitive. On top of this hovering over them gives a short description of what they do.
Finally, I added a depth of field effect when the Inventory is opened, this focuses the player’s perception on the inventory when it is opened, as before it seemed that the inventory did not feel removed enough from the active gameplay.
This concludes the rework, future work will be done before playtesting, to enhance some of the elements, but final touches are needed on the gameplay itself before playtesting can become available.