Quest: Wander around Yonder

• 

For my first UI related blog post I figured I’d simply start with my newest game.

Name: Yonder: The Cloud Catcher Chronicles
Developer: Prideful Sloth
Genre: Action-adventure game
Release Date: 18th July 2017
Platform: Switch
Engine: Unity

Quick Description: Yonder is a non combative, exploration game that is just incredibly chill. Some of the things you can do is fish, craft, farm and gather items.

I haven’t finished Yonder, and I hope to not have any spoilers in this post, however I’m kinda unsure what would count as a spoiler in this game… I’ll mainly just be looking a UI elements that I captured in the first few hours of game play anyway.

UI Review

Menu Systems:

• 

The menu system is elegant and clean. I love the off-centre sweeping layout for the buttons, with the detailing on the left.

The buttons themselves clearly reflect the colour scheme of the game, as it mirrors the title colours. The highlighted button gets a blue glow, which is mirroring the aesthetic of the ‘o’ in the title.

Above is one of the options menus in the main screen. I’m a big fan of this style of a semi-opaque background box. Its clean, you can see the background image still, and it still allows the information to be clearly read.

I love how they have two colours for the buttons, green for ‘on’ and orange for ‘off’. This is further clarification for the user when presented with a ‘On/Off’ button.
The sliders are petite compared to the buttons. I do like that they are the same length of the buttons.

You can see that in game they have used the same menu style as the options menu above. The buttons are all of the same style also. This kind of synergy is one that I personally seem to neglect in my UI, as I often develop the in game menu first followed by the main menu further on into development. This often means I forget to use the same style and buttons in both areas of my games.

What I found interesting was when you select ‘Quit to Title Screen’ it would take you to it immediately. No prompt to tell you your unsaved progress would be lost and to ask are you sure. Not even a ‘Save and then quit’ prompt button. Not sure if this is due to the auto save feature saving your game often enough to prevent a huge loss of game time, or a design choice to reduce the amount of menu screens in the game. Or another reason entirely.

One of the basic design principles to UI/UX is to have a system that allows users to make mistakes without any serious consequences, by confirm checking any ‘serious’ choices. Such as quitting the game before saving.

The inventory system is my least favourite part of Yonder. I rarely look at it, and when I do it takes me a while to navigate to the item I need as it’s mainly based on the look of an object, and not the name.

I appreciate a grid layout over a list layout for items. And it does contain an information panel about the item over to the right, which is handy and unobtrusive.
The use of a tabs system for different parts of the inventory and crafting system is also key to keeping the layout as simple as possible.

I also noticed that the background of this menu is a very blurred overlay to the game screen. Which is similar to the semi-opaque boxes used for the other menus. I do really like this effect as it keeps the menus more incorporated into the game world, and saves the trouble of having to design a fitting background image for the menu. On the background at the left side you’ll also notice that same sweeping detailing found in the main menu. The attention to small details like this is exactly what I’m hoping to start using effectively in my own game designs.

So above is the crafting section of the inventory screen… and again I’m not a huge fan. If only each item’s name was shown under the image of that item, it would be so much easier to navigate. Instead I’m guessing what the picture is, or going through every item till I find the one I need.

I also fail to see the point of the crafting ingredients list being drawn under the object itself, when the full, more readable list, can be found over to the right. Due to me playing on the smaller screen of the switch I do understand that maybe on a larger screen this little icon list could be helpful, but so many of the symbols are similar and easily mistaken at this small size. I guess the fact that the quantity numbers are red tells me quickly that I don’t have all the items required for this recipe, but again, this information is easily found over on the right too.

I do like the panel on the right which gives you further formation about it. Keeping this consistent from the inventory screen is a good idea. There does seem to be a slight aesthetic bug on this screen, in the bottom right hand corner. There is a crafting symbol that changes with each crafting discipline, and animates when you are crafting something. However the main image is being drawn under the other one, so you can’t see what it is very well half the time.

I was a bit disappointed in the crafting menu for this game as I am such a big fan of crafting in games. But going through this menu system for crafting does diminish the fun for me somewhat. I hope to do more specific reviews on other crafting games in the near future to compare their crafting menu systems, so that if I come to create my own, I’ll know exactly how I would like to lay it all out.

Game UI:

On to the game UI. This on the whole is very simple, with mainly context sensitive prompts which keeps the persistent information on the screen to a minimum.

 The UI is pretty much constrained to the corners, with a bottom left corner mini map. I was surprised at the location of the mini map, as generally I thought they were top right corner elements. However this is coming from games such as MORPGs, where the bottom right corner is reserved for a chat box.

Along with the mini map is a very cute and simple way to show the date and time in game. It’s inconspicuous, yet clear when needed. I like how the text is aligned respectively, to the right or left, with a simple line breaking up the information.

Top left corner is where the current tool is displayed. A simple ‘L’ and ‘R’ helps indicate that the shoulder buttons should be used to switch tools. The whole tool system is pretty cool too. The thought bubble above the player’s head appears when you’re near objects that can be interacted with. The needed tool is displayed in the bubble, and matches the symbol for each tool in the top right.

The top right corner holds the quest log, which unfortunately is always displayed as far as I can find. Even with no quests selected it tells you to select one, as you can see in the image below. For a game which inspires freedom and not pushing you to complete quests immediately, it’s a tad disappointing to not be able to hide the quest log. In the same strain it would be great to hide the mini map too for a more ‘explorative’ experience.

This game has made me realise I take for granted games that let you hide UI elements, or even more, customise them. I feel games such as Final Fantasy 14 Online has spoiled me for this, with its incredibly customisable UI options.

I do find it strange that the mini map for Yonder did not feel intrusive and in the way, yet the quest log did. This could maybe be down to the location of the quest log, or that I found it frustrating to look at a UI element that contained information that I didn’t need.

Other UI:

There is another screen which is a tad different from others I’ve talked about which is the quest complete screen. Completing quests in Yonder can take some exploring and quite a bit of time. But you’re rewarded with a fun ‘Quest Complete’ screen which animates. It uses the semi-opaque blurred background style once again, and some simple lines to frame the text. As far as screens go I really like the simplicity of this one. The use of thin straight lines that taper at the ends is far more elegant than a box.

Another additional element that I really appreciated was the use of text colour to emphasise keywords in the text. Blue would be a tool/feature, Beige would be an NPC’s name, Green a location name, and Purple an item. Even though there aren’t large blocks of text in Yonder, it still helps draw your eye to the key information on screen.

One of the smallest UI elements within Yonder is a small popup text/image that appears when you pick up any item in game. Once again it uses the small symbol that represents each object, which isn’t always easily identifiable, and the amount you received. This is especially handy when you are smashing random crates around the world and receive items that you don’t get to see in the world before they are added to your inventory. It is also a less obtrusive way than a popup text box that could tell you when you have found an item.

In fact Yonder still has a popup text box for when you have first discovered something, which allows you to pretty much know when you are finding new/rarer items over your bog standard items. But every other time you find that item after you get the simple little hover image/text for a second or so.

I am a fan of how Yonder keeps a lot of the pop up and context sensitive UI elements focused on and around the player. It’s where the player’s focus is most likely to be, and keeps the UI clean and simple around the edges.

As a final last point about Yonder, I shall put my favourite captures from the game so far. These utilises the game’s ‘Photo mode’ which allows you to mess around with the camera’s zoom and focus, and more importantly, allows you to hide the UI elements for a moment in order to take a great, unobstructed image of the wonderful environments in the game.

 I hope you have enjoyed my review of the UI in Yonder. I’m still feeling my feet with blogging, and finding it difficult not to structure my writing in a style for a University assignment piece. I keep having to remind myself that I’m not writing for marks but for my own use later on. I’m thinking it would be nice to edit the captures I have taken with additional annotations to more clearly label what I am talking about in future posts.

Quest: Wander around Yonder – Quest Complete

Rewards:
2 x Hours on Path of Exile =]