Official UI wireframing

Let's discuss and make mockups of the UI in the game!

Conceptualize, and create mockups for the different UI screens in the game:
- Game title
- Main menu
- Settings (also within Pause menu)
- Credits
- In-game pause
- Inventory (and cooking?)

Do we need more?

No graphics for now, only wireframes, button labels, what animations they have, and their function.

Card on roadmap

 

For the Main Menu Screen I think it would be lovely to have a scripted animation on the background, showing our main character trying to decide what ingredient on a table to choose for his next recipe, so when the player selects one destination choice (Start Game, Credits or Options) there is a little zoom to the ingredient and the main character does something with it like cutting an onion in half.

The actual buttons would be hovering over the table, close to the ingredients to relate them to the ingredients..

Examples of what I refer as "scripted animation""dunno what's the term used for this.

Yookay Layle's Main menu

Rainbow Six Siege

 

@RurouniKen
that would be a great Idea but if you add stuff like player walking towards/Into the buttons to select it.
Or...Or rotating the character sideways on mouse movement.x axis where the buttons will be all around him, on the ground/table or whatever the place
then you can detect which button the player is rotating/hovering the character's head/eyes towards with the help of Ray-Casts, and with the raycast Info we can check the button which the character is facing to and select it

if you didn't understand what I just said look at this image

 

Yeah that's a nice explanation on how that should work on the technical side which I did not think about. Should we go ahead and do some quick wireframing or wait for more replies on ideas about this?

 

Share the wireframes in this thread, that's how the other official threads are working. That way people can see the ideas and come to consensus.

 

I'm not an artist or UI designer, but maybe its something to start with.
I tried to somewhat combine the 2 layouts above, with the general layout of the second and details of the first.
The buttons have an item or character icon in front of them and can be animated.
I didn't include anything to show the credits, maybe they can be placed inside the options menu, or even integrated in the main scene.

 

I think we should wait and see what others will come-up with, they can have some real good ideas.
Till then let's share the wireframes in the thread like @shuttle127 said and see what happens

@piraente it's a good idea to add the Last-Saved Time and Date to the Main-Menu, I don't know why I didn't thought about that

 

What about a diegetic user interface? Something that would blend in with the universe could be more immersive and bring more character to the game overall.

 

This is an interesting idea, would it take that much more effort than a non-diegetic UI?

The thing that comes to mind to me first for something like this is the cooking interface. When Hamlet reaches a place to cook, he pulls out a piece of paper that has his current inventory on it in one hand, as he's meticulous about keeping notes of what he has "in stock." Then, once the player selects an item, it appears in his other hand to be dropped onto the cooking mechanism. When it's time to use a utensil, he can choose that from his inventory as well and it'll pop up in the other hand, which then maybe for some gameplay we could do a button press to activate the animation?

EDIT: Here's a link to an article about diegetic vs non-diegetic UI.

 

Since I've picked up BotW again for the first time in ages, I've had to remember how the in-game pause menu works. There's definitely a lot going on, but it's pretty straightforward once you fiddle around a bit.

Figured we might want to consider something like that, just need to lay out what different tabs/screens exist. For starters, I was thinking we can get away with just map, inventory, and save/load. Maybe add another for cooking that has known recipes and keeps track of how many ingredients are "in stock" (i.e. in inventory) for each recipe.

The challenge I see from a pause menu like this is we might have to add more keys than currently exist to the control scheme to switch between the tabs/screens (can always move between things in the same tab/screen using arrows). For a keyboard that's no problem, we might even want to make it like an MMO where there are hotkeys for each part of the menu (i.e. M for map, I for inventory, L for save/load). For a gamepad, there's still buttons left, and we can also map button combinations if we need to, as long as they are properly explained on-screen.

I have so many ideas for the wireframes of this, but unfortunately won't have time until later in the weekend to share them, so please let me know what you think to help inform my thoughts.

EDIT: Here's a link (wow, punny...) to one person's suggestions for how to improve the BotW pause screen.

 

This is how I imagine the start screen and the main menu.
When the player presses any key there is a camera transition zooming in our character and the cooking table with 3 ingredients that represent our 3 buttons: New Game/Continue, Credits and Options.
When the selects one, the main character does something with the ingredient and a screen transition occurs that takes to the player to the selected destination (Settings Screen, Credits Screen or Game Screen).

 

I really like the idea of the pig chef preparing food with his mise en place as the animated background, but definitely think traditional UI button controls should be used. So kind of a mix between what @piraente and @RurouniKen mocked up.

EDIT: Just saw RurouniKen already mentioned animations for the menu choice transitions. I'm on board!

 

Oh sorry I think I didn't explain myself that good but yeah the chef pig deciding what ingredient to choose for his next recipe (running animation on the background) would be lovely to make it to the final build.

 

Ah, gotcha. I thought those were world-space buttons in your drawing (like click the carrot to go to credits), which may be hard to control using the schemes being talked about. You're saying that each of the buttons corresponds to an animation involving that ingredient. Sounds like a cool idea!

 

Sorry, I didn't quite understood that...

So the Dark-Gray_Circles are the Ingredients and when the User/Player clicks one of them, the Animation plays? or the Animation plays when the game starts?

 

The actual buttons are above the ingredients (text buttons) and the running animation shows the Chef thinking about what ingredient to choose from the table for his next recipe, so when the player clicks on a button, an animation is triggered making the pig to do something with the ingredient related to the button.

 

Oh, that's how it is huh
that's a great Idea, waiting for new ideas helped us after all

So when are we gonna start makin it? or should we wait more?

 

The way it's worked in other threads is to do the work you want to do and make a PR for review for the community to judge. Due to the short time-table, it's best to start development as soon as there's a solid plan for it, which it sounds like we have here. Just my two cents.

When I get some time later today, I'll be making some wireframes for the pause menu I described the other day to see what people think.

 

Ugh... meh. Maybe BotW's menu isn't perfect but the one described here isn't great either (imo obv). If the objects are listed vertically it can take ages to reach a certain item stored far down in the inventory, while having them as a grid allows me to quickly see everything that I have with a few trigger presses. Let's say I reached the end of the list to grab an item and now I want to go back? Another 30 seconds of scrolling to get to the first items again. Also, when you need to chose from a large variety of ingredients you might want to have them all displayed at once, letting your eyes bouce back and forth, without having to scroll up and down continuously if your items list is longer than the screen.

(This was the main thing I guess, so I'm not gonna bother explaining why I don't like the others for now... )

 

The Witcher 3, although more complex than most games, solves the navigation problem in an interesting way. The right analog stick navigates through groups of items on the menus. It is a quick way to scan everything on the inventory.

 

All good, I actually posted that just to spur some discussion because I was going to go down the BotW path anyway and just wanted to make a really bad pun.

That should work for gamepad, but how would it work on keyboard with the current control scheme?

=================

Actually came up with these diegetic UI ideas (thanks @pexSky for the suggestion) in addition to the cooking one I posted earlier:

Map:

• When Hamlet first meets Bard Hare (I still like the name Gabbot since he's a talking rabbit, and wouldn't it be funny if people could summon him by shouting "Hey Gabboooottt!" ), he gives Hamlet a magical map of the island that has a small fairy/pixie/sprite linked to it.
• When Hamlet wants to view the map, switch from 3rd person to 1st person view and have the map in Hamlet's hands; this is possible because the map is in Hamlet's backpack.
• The fairy/pixie/sprite floats in the top right corner and magically marks the map wherever Hamlet moves the reticle, kinda like BotW's pins as needed/desired, thus avoiding having to move Hamlet's hand around the map.
• Technically we could fast travel from this map, but meh...

Inventory:

• Hamlet also receives a magical scroll from Bard Hare to keep track of his inventory, with a small fairy/pixie/sprite similar to the map.
• Each item that is picked up is handwritten on the scroll with name, quantity, and small thumbnail/icon.
• The player can press specific buttons to sort alphabetically and/or by item type.
• For each sort there is a small animation triggered by the fairy/pixie/sprite, for simplicity the same effect just different colors.
• If Hamlet wants to use something in the inventory, the fairy/pixie/sprite can talk to him and recite the item(s) and quantity.
• I envision this being functionality to be more just to see what items are "in stock," not necessarily where the items are used; that'd be in a cooking-specific interface. Unless there's some other use for items?

Save/Load:

• At first I thought about tying this basic functionality to the map, but that would make it too busy and confusing.
• This scroll works the same as the others (i.e. with miniature magical helper in first person view), but Hamlet finds it himself when he first arrives on the island.
• I envision something like the BotW System screen, where the magical helper does a controls tutorial on first use.

=================

While these ideas would be a fun addition, there's probably not enough time to get them all done, which is why I'm working on non-diegetic wireframes that'll be pretty similar to what I've just described, just used as a full-screen overlay minus the magical helper.

 

Figured I'd start with the inventory tab/screen overlay, as that's really the only "necessary" one right now. Notice it's basically BotW's with different words, and the buttons are for gamepad and subject to whatever works best, as I'm not an expert on gamepad gameplay. Check it out:

• Utensils - knife, pot, tray, whisk, thermometer, etc
• Ingredients - spices, fruits, veggies, meats, etc
• Meals - cooked food
• Special - cane, map, clothes, other key items?
• The blocks under Utensils, Ingredients, Meals, and Special are icons for each category.
• The blocks in the ITEM GRID are the popup menus when the player chooses an item in each category.
• Tiki is the name of the Phoenix Chick (i.e. Hamlet & Tiki: Lost and Ground, one of my buddy duo title suggestions).
• The "Recipe" popup looks exactly like the one in BotW.
• The "Carry" UI only appears when player is in the Ingredients category, and, if we have time to develop it, the PIG CHEF MODEL will update like Link in BotW.
• ITEM INFO OVERLAY populates with the name, icon, description, and brief flavor text for the active item.

STILL TO DO:
I'd like to have a "Recipes" tab/screen where there's a list of known recipes, their ingredients, and whether or not Hamlet has enough of each item to make each recipe. This would be really cool with my diegetic UI idea above, but probably a bit too much to ask. After I get some feedback on this wireframe, I'll start cranking out the proposed "Recipes" one as well. Up for ways to incorporate that into this if you think that's better too.

 

Very nice ideas, @shuttle127! I am particularly very fond of having an "assistant", though I'm not sure if the fairy/pixie/sprite would be the most appropriate. Maybe Phoenix Chick could have this role on the UI, since it's the main character's partner in crime.

As for the non-diegetic inventory suggestion, I think it is a bit overcomplicated. Opening the inventory has basically two functions: showing the collected items and cooking. I suggest splitting them into two zones, while other not so used elements could be divided into other tabs. I'll try making some wireframes to demonstrate this idea.

Another option is to have (again) a diegetic approach, since cooking is a big part of the story. I was thinking on something similar to The Forest's crafting system, with the ingredients scattered around a pan or something like that.

I also think we should separate the in-game pause menu from the inventory/cooking menu (The Witcher 3, Darksiders III and other games take this approach). On a gamepad, the inventory could be open pressing the "Start" button and the pause menu pressing the "Back" button. On keyboard and mouse, we could bind the "I" and "Escape" keys accordingly.

 

I like this idea, saves on characters and could have it shoot different colored flames for each different type of marker on the map.

I’ll have to draw up my wireframe ideas for the recipe and cooking UIs to see if they align with these ideas too.

I’m down for this, what would be in the pause menu then?

 

What suggestion and ideas about this

First of The main screen, when the game launched

Second of Main Menu

 

Pokémon Platinum (don't remember if the other games do the same) represents saving through a daily journal that the player keeps, where he writes all the things that he does. When you open the game the next day, the first thing you see is the last page of your journal, so you can read all the main things you did during the last play session. We could have a simple (maybe hidden, like in the Pokémon game) quest/objective system so that each time you load the game you can see the ones you completed last time.

 

Sounds like we're going more and more diegetic UI for this game with all these ideas. I envision this could be something like a scroll/notepad that Hamlet keeps in his backpack and pulls it out as the first thing he does every time the player starts the game again, just to remind himself where he was. We could also get silly with it and put little thought bubbles depicting what he sees/remembers from last time; or Phoenix Chick (I still like the name Tiki like the torch) could hop in the scene to chirp some cute things (or maybe it talks back and forth i.e. "So Tiki, what's next? ... We were trying to do X..."). Just spitballing again.

 

What about this for inventory?

If anyone is not able to understand my handwriting, please write here

 

I like the idea of keeping the UI simple instead of complicated, but using Animated background would be a good idea

something like this would be great

imagine, 3D environment as background and adding Animation to the player/pig-char when the user clicks on a button like start/continue, options, credits etc...[/QUOTE]

 

Was trying to think how to make inventory look like a little notebook, but this is simple enough to work. Few questions:

• Are items in specific slots and only appear once Hamlet has found one? If so, does that mean there's no way to sort?
• Is that "all the items" arrow that points to (2) a button to select all?
• How do you toggle between tabs in (6)?
• Is the button below (2) the Cook/Select to give to NPC button?

 

Yeah I also think we should go for a Non Diegetic UI. Maybe we could just give it a "Diegetic" feel by using a 2D Illustration of our character holding the notebook, something like the example below. (Without the animations).

 

It says that it is the slot which you can use to assign an item to a button for a quick select

 

Acknowledgment:
@ChemaDmk Thanks for the feedback and simplification of scope.

Further Inventory Discussion:
It looks like @Harsh-099 's wireframe is more along the lines of basic functionalities, taking what I presented and removing the popup menus, the extra navigation to other tabs/screens, and the carry UI, all while reducing the total number of action buttons.

I still think it'd be useful to have the categories (utensils, ingredients, meals, special (aka cosmetics)) as a way to organize ingredients, just not sure how the "Use" functionality would work if a recipe calls for both a spoon and some berries, for example. Can the player click "Use" multiple times? If so, how would they get out of the inventory menu itself, a Close/Back button?

Other Inventory Idea:
Along the lines of the Life Is Strange UI, what if the background was just a notepad, and each item was displayed using its name and a scribbled picture, as if Hamlet was writing/drawing it along the way? Then we could have a simple eraser animation when he uses a consumable item, and then upon getting a new item, a writing/drawing animation could be shown. This could help with immersion, as the player is actually seeing Hamlet updating his inventory manually, although something like this would not lend itself to having a button to sort inventory in any way.

Recipe UI Idea:
I like Chema's recipe paper suggestion. Combining that with the person that first suggested Hamlet's purpose was to create the greatest cookbook of all time (apologies for not being able to find the original to quote here), what if every time the player brought up the recipe UI, they see the front cover of the cookbook and would then have to flip through the pages to find the right recipe? While it might be a few too many button presses, I think it could add to the immersion, just have to make sure it's not overcomplicating the UI.

Additional Random Thought:
Will there be any indication to the player when Hamlet acquires a new item, like perhaps a simple popup saying "<item> obtained/acquired"?

EDIT: Hah, I must've taken too long to post this, @ChemaDmk already beat me to it!

 

Yes, they only appear after Hamlet have collected them, if they are all finished it will show 0
Sorting is done by different categories. The tabs beneath change the grid above with items or ingredients for that category.

No, it is just an arrow overdrawn the image to help you understand that all the items belonging to the selected category tab will show in the grid. Items can be moved anywhere in the grid.

Just be clicking them. It will highlight it and the grid will update.

It is just a slot to map a keyboard button to use that item by pressing the key as @NicknEmart said

 

Just thought about accessibility, and using an icon to denote category instead of a background color might be easier for more people to view and understand if the icon is big/clear enough to see and differentiate.

A concern I have with separating items by category is how to select items from multiple categories at the same time?

I see two possibilities:

Option A: Tab for each item type

1. Select an item in 1 category
2. Item shows as selected in right side
3. Switch to a different category's tab and choose another item
4. Right side switches from image/asset to simple text list of selected items, or maybe thumbnail images instead

Option B: Add category icon to top left of item icon

1. Every item is in the same grid, just with an extra icon on it (category on top-left, quantity on top-right)
2. There could be a sort-by-type button to help organize
3. Multiple selection could still work like Step 4 of Option A

As @itsLevi0sa suggested in the Official Dialogue and Narrative thread, keeping track of ideas, even if they don't make it into the game, would be cool to show how much thought went into the process. Would also be a good example of how many things tend to hit the cutting room floor to get any game out the door.

 

@shuttle127 , this is the wireframe of mine inventory, looks line my hand made drawing is not so much understandable

 

I want to propose another option for the Inventory.
Maybe the Customisation-Items could be an unlock system instead of actual items.
Completely seperated from the cooking part without a generic inventory.



The same with the utensils. Only the ingrediens will have an inventory system behind them.
The only problem i see, it will basically void some of the work already done with the inventory system and item types, but could open a new system for unlocks.

edit: I forgot the dishes as items. This could be beneath the ingredients and probably used as ingredients, too. (Maybe they could have the action button to eat them)

(Icons: Font Awesome by @fontawesome - https://fontawesome.com)

 

so this is the google doc we've been using to organize the cooking thread.
https://docs.google.com/document/d/1kGQXAkZul-dptwB6cXT71QrpBMDb8iQW3sdVfDaQ26g

a few notes right off the bat, the cooking system as it is now is a simple combination system, similar to breath of the wild, and does not feature utensils. Of the proposed cooking systems that did involve utensils, they were mostly focused on allowing certain actions rather than being objects you would combine things with in a menu, so I question the inclusion of a dedicated "utensils" panel.

I've seen some talk of a 'diegetic' ui. I think it would be pretty cute if the UI kinda looked like a cookbook, maybe even opened up like someone pulling a cookbook from off-screen. That said I had been anticipating a GUI similar to something from animal crossing, which displays the inventory contents without obscuring the game world too much. This would allow hamlet to visibly cook a recipe without having the GUI take attention away from the game world. This would be important as unless the cooking menu pauses gameplay, enemies could still sneak up on hamlet.


another kinda-sorta issue is some of these screens having 16+ open inventory slots.
The main gameplay loop would involve getting a prescribed 'goal' or 'quest' recipe and then going through the environment collecting the ingredients for it while making dishes to help against sudden 'impromptu' challenges like enemies or obstacles. If you give the player too many inventory slots they could collect every ingredient they find and not have to think about what to pick up when (again, similar to animal crossing's pocket size limits) which could possibly lead to breaking the intended critical path through the game. I was thinking 6-8 items would be a good number? but really this would probably be something we'd need to adjust in response to testing

Something that I do think needs to be included is a list of known recipes. If we included it on a different tab from the ingredients we would be rewarding memorization and it would keep the UI clean, but it might be frustrating not having the recipes visible on the same screen as your selectable ingredients. That said, I believe the current goal recipe should always be easily visible to serve as a reminder of what the player needs to be doing at the moment. Anyway, that's my $0.02 for cooking GUI

 

This isn't a bad idea but it has to thought about carefully.
Limiting inventory space can be very dangerous, I think, because it can very easily lead to backtracking. We don't want the players to go all the way back to the start because thay left behing that one item they thought was useless but it actually wasn't.
The important thing here is that finite space should limit quantity, but not quality. This means that, if we decide to have fewer inventory slots, we should let more items have the same or similar effects, or put important items in more that one place so that players can easily access them when they need them.

For example, in BoTW, no one asks you to have that one specific weapon with you, but every puzzle has many solutions. Need to break a mineral ore? Use any of your heavy weapons, or just about any weapon actually, some might just need more time. Need to cut a rope? Use an arrow, but also a boomerang, or throw your sword, or don't cut the rope at all and do something else. To burn those leaves you can use a torch, or a fire arrow, or start a campfire, or... you get the idea. Same for the dishes tab: it is limited (yes, it is limited) but you'll probabily always have in it something that fits the situation. And even if you don't, it's not a big deal.

 

I mean that's exactly the behavior I was planning for. I'd want the player to explore the world and remember what ingredients are where instead of relying on a menu. Furthermore, having a larger inventory doesn't mean the player wouldn't do this anyway because they didn't know to collect everything in sight.

The issue of "not having the ingredients you need where you need them" is actually something the cooking thread thought about. The solution is, decide which gameplay challenges an area will require, make sure that area has the ingredients needed. Different areas have different challenges, different areas have different ingredients.

This is different however, from quest dishes, which are the reason you're exploring the world and going out to face the different challenges. These would be the dishes you backtrack for.

Again, the inventory size limit will probably need to be tested with, I just wana make sure it looks good with only a few items present.

 

@Zold2012 I don't think we should limit the inventory space, but i strongly agree with the suggestion to not show empty slots.
Question: Is the cooking UI seperated from the inventory?
Like using a workstation in the world to open a seperate UI.

However someone in the inventory thread stated, the UI shouldn't tell how the system works. So this discussion should be finalized in the cooking thread and the UI changed accordingly.
In addition to not showing empty slots, we could simply add a "1/8" counter above the grid to indicate the inventory limit, which could also be used when we decide to add items/unlocks to enlargen it. (this is quite common I think)

Also in response to the shown miro board in the livestream. Maybe we shouldn't put the name of the item inside the grid, but inside the information panel of the currently selected item. Otherwise the names could break the grid, especially when having different languages.

(I played some genshin impact the last couple of days, they also have a cooking system, maybe we can get some inspiration from it. The UI looks very clean)
The recipes in their UI look exactly like the inventory items, only showing some additional information.
This could be a good way to show discovered recipes. (separated tab)
I will try to post some updated mockups tomorrow.

 

I used miro to create the new mockups: https://miro.com/app/board/o9J_khW4sLg=/

Looks like we still use utensils, according to the livestream.

 

May be good compromise between unlimited inventory space and "stupid" backtracking. Will be using the term - weight, not very realistic as in "hardcore RPG" (Arma3 and so on).
But simple - one slot = one unit of weight. Inventory slots can be divided on two-three parts and used to make more realistic use of inventory space and also can give possibilities for addition interesting mechanics (damage of Hero => less space in inventory).
Main (the big part) the minimal carrying capacity in the worst case. Second part can be filled in case only "normal speed" with "good health", and Third in case "only low speed" with "good health".
It can save from harvesting all things what can be found and from "ridiculous returning for a small thing".

 

Hey All,

I've seen a lot of discussion and I think we've been closing in on an initial design. Just wanted to see if we were at the point where we could code something up to get this first draft into the game? @ChemaDmk @cirocontinisio

 

Design aside, the first step I'd like to cover with the menus is using both the gamepad and the mouse, as discussed in the Controls thread. So as a first step I'd like to see a very simple menu with maybe 4 buttons laid out as a square, where:
- Gamepad moves the selection
- Keyboard moves the selection

- Confirm button activates the buttons
- Mouse can click on buttons (and activates them)

- When mouse moves, the selection disappears, only to appear when the mouse hovers on a button
- If the selection has disappeared as a result of mouse movement, it will reappear (at a logical point) and allow the user to resume using keyboard/gamepad

These are the unfortunate requirements of a menu that works with both mouse and gamepad :/

Before we venture into this, thoughts?