The upgrade menu

The upgrade menu is the menu that the user can use to upgrade items in their bakery. We needed to design a menu that was easy to navigate, the least amount of effort for the player, and something simple and not over-complicated. We would have to think about how many items we can show at a time. Would we have to have a paging feature? How small is too small?

image1.JPG
First sketch of the upgrade menu

The idea for this first sketch was to put all of the upgrade menu items on the counter top. This would allow the player to easily touch and interact with the menu without ever fearing that they would have to reach too far. Once the player had gone through some menus, they would eventually see the 3D objects of what they wanted to upgrade. Basically like a hologram on top of a table. After pitching this idea to Kyle, he gave me feedback suggesting that putting anything where you have to look down can be potentially a poor experience for the user. This would be due to the fact then when you look downwards in VR it can feel like the headset is going to fall off. Another reason was because when you look downwards in the headset, sometimes you are able to see outside light coming in and it makes the experience a lot less immersive. So it was back to the drawing board.

image2.JPG
2nd idea for the upgrade menu

This time it would be the same idea, but on our order board. I quickly made an animation that would bring the order board closer to the player. I also ended up scaling it smaller to ensure the edges were all reachable by the player without having to stretch. The background of the order board would also have to change to something transparent as it felt very intrusive to the player. Having it more transparent would also allow the player to see things they were upgrading (such as the wallpaper) more clearly.

Pasted image at 2017_01_31 12_35 PM.png

Pasted image at 2017_02_02 10_18 AM.png

There was still one issue we were having with the upgrade menu layout. Everything felt too small and too far apart. I was afraid that if the elements weren’t far enough apart, then players could accidentally press the wrong buttons. Kyle sent over a solution to all the issues we were having troubles with though, and we haven’t looked back since.

UpgradeMenu.jpg
Kyle’s sketch of a new concept for the upgrade menu
Pasted image at 2017_02_02 01_33 PM.png
Quickly prototyping the menu in game

Initially when Kyle showed me his concept I thought to myself “..that’s a lot of iconography… that’s going to take awhile due to how many things we have to include…” BUT THEN I REMEMBERED HOW AWESOME UNITY IS!! So I just took 3D models and slapped a flat unlit white material on it and BAM, looks like an icon with 0 effort.

orderboardupgrade.png
Prototyping the viewing of models (this is a straight on view so it’s hard to see that the objects there are 3D objects that would be rotation around slowly)

This menu system was built in a single day though, so throughout some more dev time it’ll probably change more (for the better) and we’ll ensure that the readability and interactions are exactly how we (as players) want them.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s