Inventory UI concept design v2.1 (window based)

[DemonGroover 8836]

One thing to remember when designing UI elements is screen realestate, and visibility. Not only does overlaying the backpack not use potential realestate, but it blocks the players view of the rest of their inventory. If I have my backpack open, and can't see the rest of what I have outside of the pack, it's going to be very annoying to constantly close and reopen it to see everything.

Keep in mind that the game engine and settings can scale and move the UI to accommodate screen sizes, so saying you want to overlay it to save space isn't really the best idea.

I think it's pretty good so far, but I really do have to voice my opinion against overlaying the bag. :)

My God, constructive criticism.

Have some beans, my good sir.

[joeyslucky22 638]

Not only does overlaying the backpack not use potential realestate, but it blocks the players view of the rest of their inventory.

Again, I don't see the problem here? The whole point is to have it "feel" like you're opening and closing a box/bag/backpack and taking an item out of it, to put it on your person or give it away or whatever.

While dragging an item from inside your backpack to the outside, the backpack menu would close, showing your current gear, and once you hover back over the backpack (while still holding an item), the backpack menu would open again. Having another box open along side or above/below causes the layout to grow too wide or too tall, something you need to consider as not everyone uses the same in-game resolution.

[L0G!N (DayZ) 149]

Note to self, i will give some extensive feedback on this inventory tomorrow (this way it will show up in 'my comments' list) as it is realy bedtime for me now ...

In the meantime, I myself made a mockup in DayZ-mod style, it is in the thread linked in my signature, you may be able to get some inspiration out of it, as well as some topics in the list that are item/inventory related. Then this thread showed up recently, you may want to read it, i think it's a fairly completed list of inventory concerned 'issues': http://dayzmod.com/f...haul-newsideas/ ... and i think the actual thread that Rocket linked too has a whole spoiled section on the inventory :) ... this will give you something to do while i sleep on my feedback ;)

tl&dr on feedback, it looks realy crisp/fresh in regards to item textures (like!), as a whole the inventory looks very chaotic/messy.

On TPAM, some people want all inventory spaces right there in front of them, like they are used from their MMO's, all bags open ... don't give in, it's a trap! ... the overlay looks realy nice, wonder if you could do the same with the 'modify-gun' options, it would likely give some more room to work with visually ;)

Edited August 24, 2012 by L0G!N

[Yatagan 62]

Again, I don't see the problem here? The whole point is to have it "feel" like you're opening and closing a box/bag/backpack and taking an item out of it, to put it on your person or give it away or whatever.

While dragging an item from inside your backpack to the outside, the backpack menu would close, showing your current gear, and once you hover back over the backpack (while still holding an item), the backpack menu would open again. Having another box open along side or above/below causes the layout to grow too wide or too tall, something you need to consider as not everyone uses the same in-game resolution.

The problem is that it adds unneeded time and clicks to the inventory management process. What if I want to move several things out of my backpack? If it closes each time then I have to reopen it, find the item again, then drag again. It would add a large amount of time. As for feeling like you're opening a bag, you can still easily achieve that with an outside window. Why must it block my inventory view? When I open a bag I don't stick my head into it, I can still see myself just fine.

And again for game resolution that is not as big of a problem as you are making it seem. The game engine should intellegently scale the UI properly so it fits all monitors. Of course, you do still need to ensure that your design scales well, but in most cases it should.

I'm certain that you could alter this current format to allow room for an additional 'bag' window, perhaps below? (Then move the whole thing up) As for size, and screen size, and space - Look at these.

Now I can't vouch for what what size monitor you have, (As the image is 1688x1152 I'll assume rather large?) but it doesn't matter. This is your current mockup:

Notice how much realestate is wasted. There is a HUGE amount of redspace around it that simply isn't being used. Big screen or small, that's space that could easily be rearranged to fit a new 'bag' window.

Here is an example of a UI that uses screen realestate very efficiently, Borderlands:

This is taken on a 1680x1050 22" monitor, a large monitor compared to most. The fact that it takes up so much space can attest to the fact that it MUST work on even a smaller monitor right? The engine simply shrinks it down to fit. Look at how little space is wasted. The only wasted space is two little bars on either side, which doesn't make much difference. It allows for an asthetic look, while still utilizing most of the screen.

Now, one major difference between the two games and potential UI design, is that (In singleplayer) Borderlands pauses when the menu is opened. DayZ wont (I hope!), meaning it may be necessary to maintain a good field of view even with the menu open. However how much is viewable must be balanced. It's okay if it blocks most of your view, it would add penalty to using inventory, discouraging use during a firefight, or in a very dangerous zone. However, ideally the UI will be smooth and intuitive, so the player can open it, flick around then close it very quickly without grinding around and putting themselves into greater danger. One of those dangers and time consumers being the bag window overlay.

Also, may I inquire as to why, in the bag view, the grid is broken? If all items simply take up a number and shape of slots, wouldn't it be better if it was just a solid grid that filled in with the items you have? Kind of like S.T.A.L.K.E.R.?

I'm not trying to heckle or anything, simply trying to give critique and constructive criticism so that you can make a really awesome UI that we all can enjoy. :)

Edited August 24, 2012 by Yatagan

[DemonGroover 8836]

I prefer a much more natural, visual inventory as opposed to names and numbers. I realise the Borderlands inventory is an example. Being able to see every item visually is a Day Z thing.

As for moving several things from backpack to person and vice versa couldnt you just implement the Ctrl key to highlight what you want to drag and drop?

The more i look at the proposed inventory the more i like it.

[Yatagan 62]

I prefer a much more natural, visual inventory as opposed to names and numbers. I realise the Borderlands inventory is an example. Being able to see every item visually is a Day Z thing.

My point isn't the layout of the actual UI in that picture, my point is how much screenspace it takes up. He was saying if he makes it too large it wouldn't fit on smaller monitors. The fact that it takes up 90% of my giant screen in Borderlands means it MUST fit onto smaller screens, so (Assuming the engine isn't 15 years old) he can make his large and it will scale to smaller screens just fine.

[joeyslucky22 638]

In DayZ, I feel it makes the most sense to use as little of the screen as possible for an inventory UI, while still keeping a detailed yet aesthetically pleasing design. You want the player to focus on the equipment, but keep as much of their surroundings as possible still visible in their peripheral.

Also, may I inquire as to why, in the bag view, the grid is broken? If all items simply take up a number and shape of slots, wouldn't it be better if it was just a solid grid that filled in with the items you have? Kind of like S.T.A.L.K.E.R.?

The alice pack has three smaller front pouches. So I broke off three smaller sections to represent them. I'm unfamiliar with the way STALKER does their inventory but the available backpack spaces layout would be unique to each backpack.

[fluffers (DayZ) 1]

I honestly would like to see a choice in the menu, like you could choose from originals, OP's, or any other design. That would satisfy all parties. Also I see you included a pouch, I would very much like to see that similar to the Czech vest (I know this idea is already out there).

Edited August 24, 2012 by fluffers

[joeyslucky22 638]

I honestly would like to see a choice in the menu, like you could choose from originals, OP's, or any other design. That would satisfy all parties.

Unnecessary and would require way too much work.

[joeyslucky22 638]

Also I see you included a pouch, I would very much like to see that similar to the Czech vest (I know this idea is already out there).

Yes, this would be the perfect slot for the czech vest. I made it a fanny pack because... I want my character to store all his grenades in his fanny pack :)

[Yatagan 62]

In DayZ, I feel it makes the most sense to use as little of the screen as possible for an inventory UI, while still keeping a detailed yet aesthetically pleasing design. You want the player to focus on the equipment, but keep as much of their surroundings as possible still visible in their peripheral.

The alice pack has three smaller front pouches. So I broke off three smaller sections to represent them. I'm unfamiliar with the way STALKER does their inventory but the available backpack spaces layout would be unique to each backpack.

But this is where it must be balanced. I think you should try your best to avoid covering any part of the inventory screen with another part (like that bag) at all costs, while still trying to maintain peripheral, which some must be lost, again to penalize the player. So it's an acceptable loss.

And that makes total sense. That I really like. So instead of storing 3 guns in your alice pack, you may only store one, then you have three smaller parts. That's cool. :)

[shiromikan 217]

In DayZ, I feel it makes the most sense to use as little of the screen as possible for an inventory UI, while still keeping a detailed yet aesthetically pleasing design. You want the player to focus on the equipment, but keep as much of their surroundings as possible still visible in their peripheral.

And, you don't stick your face in a bag when going through it. You can still see some of your surroundings. ;)

[joeyslucky22 638]

But this is where it must be balanced. I think you should try your best to avoid covering any part of the inventory screen with another part (like that bag) at all costs, while still trying to maintain peripheral, which some must be lost, again to penalize the player. So it's an acceptable loss.

I'm going to have to disagree with you there. I don't see why there needs to be a penalty to a player's peripheral for opening a bag? Isn't the extra click for opening it enough? Another thing, for the amount of items and the size of those items being stored in backpacks, I really don't see a way of showing another player's loot, the items on the ground, the players on-person inventory, and the backpack inventory all on the screen at once without it looking "cluttered" and without using a "scroll-able list" of items as having to go through a list of items is what cripples the current UI.

And that makes total sense. That I really like. So instead of storing 3 guns in your alice pack, you may only store one, then you have three smaller parts. That's cool. :)

:thumbsup: Thank you, I thought so too!

[Zeppa 562]

At first that system seemd so complicated and weird. After taking 30 seconds to go it through its logical and clear!

I would like that, and the separate clothing, belts and stuff is awesome!

It would be also great if you could modify your gun to have that strap so you can swing it to your shoulder, that way you coud carry like 2 on each, but then taking our weapon would be much slower and you would drop the orher one and so on :P

So there could be like maximum "weight" that your char can carry.

Same way you could so that you are friendly, just swing weapon to your shoulder... just 1 option, sure you could lower it too when you are unsure about the intentions of the other..

Edited August 24, 2012 by Zeppa

[shiromikan 217]

People on reddit are pissin' me off.

[BennyBoy 16]

without it looking "cluttered" and without using a "scroll-able list" of items as having to go through a list of items is what cripples the current UI.

How do you see inventory changing when interacting with vehicles/tents - these can contain far more items than a body, it looks like it might not be possible to avoid a scroll list. For example, the URAL holds hundreds of items easily.

[joeyslucky22 638]

How do you see inventory changing when interacting with vehicles/tents - these can contain far more items than a body, it looks like it might not be possible to avoid a scroll list. For example, the URAL holds hundreds of items easily.

It could very well work the same way as the "on the ground" portion works (dropping item thumbnails into an area, disregarding the amount of spaces it requires)

[joeyslucky22 638]

some new changes:

Checking inventory

Opened gear menu

Opened backpack

Using item hotkeys

Small quick tooltips when hovering over items

[DemonGroover 8836]

Nice

[Daerk 8]

In DayZ, I feel it makes the most sense to use as little of the screen as possible for an inventory UI, while still keeping a detailed yet aesthetically pleasing design. You want the player to focus on the equipment, but keep as much of their surroundings as possible still visible in their peripheral.

The alice pack has three smaller front pouches. So I broke off three smaller sections to represent them. I'm unfamiliar with the way STALKER does their inventory but the available backpack spaces layout would be unique to each backpack.

Ok, I neglected to think about the fact that while I'm browsing through the inventory screen an infected could be crawling silently up my six for a bite of lunch. I like keeping the interface as minimal as possible on screen realestate, in this case. Let me see WTF is going on around me without windows popped up all over the place.

Maybe on hover, each item hovered over could "zoom" to fill more of the inventory window? Allowing a more "in depth" or "examination" view of that item? Just like in real life, I'd want to carefully look over my flashlight to see if the bulb was broken, etc.

[L0G!N (DayZ) 149]

Ok, as promised my feedback, as mentioned before i felt that the inventory as you made it, looks a bit messy. Upon pondering about the 'why' i noticed that it only somewhat follows the natural 'body' placement of items, the head/neck are not centered, the shoulder is in a weird spot, and some other slots too... So, i took the liberty to cut/paste some stuff around :)

sorry for the lousy quality but i have a forum limit to deal with here :P

- I switched the top stuff around to place head & neck in the center, and putting backpack and shoulder next to eachother. The shoulder also got a bit bigger so the gun going in it can be displayed in full ornate.

- Next is obviously the upper body (I wanted to ask if i can interface with the shirt-slots still? similar to how i access the backpack?), and next to it the ammobelt, that happened to turn out one slot larger due to 'replacement' of other slots/buttons. In regards to the 'ammobelt' slot, i would like to suggest it to hold various objects, like f/e the vest pouch, changing the slots to hold items, or a shotgun-belt, holding shells, and even a rope, etc. Currently it holds a belt for ammomagazines, as per your example...

- Then the biggest change, i think, i 'cut up' the primairy slot into 2 sections for left/right-hand, as long as items don't exceed 8slots, then everything can be held in them. It's placed nicely in the center grabbing attention, and obviously it is placed where 'hands' somewhat are on the human body. more on hands below...

- a side the hands one side with the fixed stuff, and the other can hold an armbelt (f/e clansigns, or a medicbelt, or some other belt), and below that a wrist/watch slot.

- I chanced the 'belt' up a bit, see, having either a belt or a 'frontpouch' doesn't change the functionality of the belt. And given you use the 'flipover (bagpack functionality) for every kind of bag, you could just click that bag and interface with it's space. I would also like to mention that you could use both 'civilian slide through pouches', as well as militairy clip on pouches (for the militairy belt) on the belts. Both could have similar functionality, but not fit on eachother...

- The pants have moved up a bit, giving some space for the boots, i added 2 small spaces for them seeing you can clearly stach something in various kinds of boots...

- Legbands, i have added 2, for every leg 1, these could be used for leg armor plating, clan signs, (diving)knife holsters, quivers, chaps (horse riding leather), etc...

- The buttons have moved all the way down, this is pretty much a design paradigm, interface buttons are pretty much always on the bottom of an interface, placing them anywhere else confuses the user. Buttons on the top row are pretty much always 'tabs' to access different menu's or contain actual interface buttons, but seeing those do not apply in this interface...

- I added in a way to deal with 'interfacing' with different objects in the 'on the ground' part of the interface. Changing colors and transparancy is a great way to prevent users from making mistakes, and gives a clear change and indication of the object that is interacted with...

On Hands

So, you will likely think, where do my weapons go. Well, i felt it was most natural (also based upon how characters carry primairy in Arma) to have any two handed gun slot on the shoulder slot. Any secondary gun can be placed anywhere there is space. Once a two handed gun is 'utilized' by loading it into one's hands, a 'copy' would stay on the shoulder, unless it is actually placed in the hands using the inventory. Loading anything else in the hands would obviously place it back on the shoulder, or drop it on the ground if there is no space for it.

How does 'upgrading' work, well i personally think you should indeed show that a weapon can be upgraded, but only let a player do 'work' on it, by putting the gun into their character's hands.

Basically the hands setup needs a designers set of mind to utilize those hands as a normal person would, This would obviously also give options to put away all guns, and free up those hands to carry anything else. It goes a bit far for me to put all examples up here, but i am fairly sure you can see how the 2 handed gun is now stached away on a shoulder slot, and how the secondary just goes anywhere, quick access is through the shortcuts. And hands are now free to be utilized as humans use hands ;) (for example to hold the flashlight and an axe ;) ) ... placing items in the hands can also function as a way to start a crafting interface pop-up (like backpack). etc...

ps. I hope you can realize this slightly altered interface in your 'crispy' way, and i hope you can see how the changes use the 'setup' of the human body as a guideline to slot placement. Hope to hear what you think :)

Edited August 24, 2012 by L0G!N

[IncrediBurch 22]

Nice work Joeyslucky22! While I'm with you on the Resident Evil thoughts, I'm thinking more Resident Evil 4. Specifically the attache case grid so people can move around items and arrange them to fit things together. The current inventory system is already very reminiscent of the pre-RE4 games, but certain aspects are off (ex. Uzi's taking up as much room in a backpack as an Assault Rifle is unfortunate).

I do think there needs to separations for certain persistent gear, like tools. Going off your design, I'd have the tools take up the number spaces as you accrue them. You're also taking into account a lot of other customization aspects that aren't really part of the game (yet).

My suggestion to you on your design is get things grouped a little more intuitively. Leave out some of those aesthetic bridging lines. One specific point on organization, get all the character appearance options on a single page, and have it just be that. You have tools, weapons and other gear mixing in with it. Makes it look really cluttered.

Otherwise, your effort has inspired me to create actually visually create my own inventory idea. Can't wait to see your refined version.

[scoffield77@gmail.com 192]

This is really nice, but with all the stuff. it's a tad bit confusing.

What if you had some Tabs "Base Layer", "Outer Layer", "Back Pack" at the top and you could cycle threw them

I think this would add some space between the items and wouldn't be so crammed all together

[Photolysis 25]

It's better than the existing interface, but does feel too cluttered. I much prefer the rough mockup in the suggestions sticky.

[L0G!N (DayZ) 149]

I notice a lot of people are complaining about the interface taking some effort to use, i think this is actually great, it should! You should go to a save spot to go through your backpack f/e and not be able to grab all sorts of stuff out of it while running and shooting infected. Same goes with all sorts of other bags... And in this regards i realy like how Lucky used a quickaccess bar, so players can link various items for quick access :) but for all other stuff it should be 'complicated' to access your stuff, as that is fairly authentic ... so i realy hope the Dev's won't give in to all the people asking for 'easy all bags open' interface ...

Edited August 24, 2012 by L0G!N