October 1 Captains log – UI Design Evolution

GameUpdate: Really busy with audio. Vos lines have been fully added to the game. Honey and Luu are about 80% done and Himeko is over 50%. Running into a few issues that slowed down audio production. On top of that, I am redesigning all my menu UI again to give them the same logic throughout the game.

The last mouth I burnt myself out on audio fixes. So I jumped back into my game to fix bugs and take a break. I hadn’t touched the core code in 2 months (mainly working with a face editor), so when I jumped into it, I found the UI design was really bad for controller support. Officially the game can support Xbox 360 controllers and ps4 controller, mainly because all bullet hell games need controller support and I want to be able to play this game on my couch. Unfortunately when I designed the UI 2 years ago controller support wasn’t an option at the time.

I noticed the issue because I was comparing all my UI to Hollow knight (playing right now) and all their menus flowed and felt like they fit together where mine were drastically different. For example, I had 3 different types of popups and 4 different selection icons.

I figured out the trick when designing UI. The idea is to create a UI that is not input dependent. What I mean by this is creating your UI to look the same no matter input source mouse / keyboard or even touch. This becomes important to keep the flow the same and to limit the learning curve for the player. This involved me removing many buttons and focusing on ways to portray the information in a universal way. One of my teachers back in University said a good UI design is something you can look at and understand how it works. I now also think it important to keep the logic the same throughout the entire experience and to not reinvent the wheel every time there’s a new menu.

Here is the Character menu growth over the last year.

Original menu was called spirit (static menu not input)

Version 2: I spilt the menu into 2 part one to focus on the character stats and the other to show how those stats effect your fighter combat ability (add RPG elements to the bullet hell). To access the ship button in controller mode you had to press “A” or “X” and to access the change window or co-pilot window you need to press X or Y.characterstatmenu1.png characterstatmenu2.png

The reason I change these menu was mainly because everything felt too cluttered and I didn’t utilize pop-ups to store additional information. Also everything is very button focus and controller support had to be very unique to this menu.

Version 3 Still ruff because UI hasn’t been polished my the artist, but the logic is the same through out the experience. Controller buttons do not have unique effect on the menu. “A” (xbox) or “X” (ps4) will active the option were everything else is controlled by the joystick; all the feed back is the same weather it’s touch, mouse or controller. The UI background was redesigned to match the skill model and the planet buttons that have the similar line texture

Screen Shot 2018-10-01 at 8.27.18 PM.png

This menu contains the same information as the Character menu but only displays it when the mouse or controller points to the stat block.

Screen Shot 2018-10-01 at 8.33.42 PM.png

I deciding to go with the yellow hover bar to show menu option because it would universally act the same across all input and after looking at a few of my favorite games they all seem to uses this style.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s