More space-efficient 3-character lay-out

[ahydronous]

Proposed change

Currently, the 3 character lay-out creates a horrendous amount of whitespace on wide screens (desktops, tablets, landscape phones):

By moving the 'Vault' column into that whitespace, a much more space efficient lay-out can be created:

As a 3-column equipment layout could be somewhat inefficient for this in terms of Y-axis (= lots of scrolling), it could be set to 4-columns. We use up a bit a of the X-axis we just reclaimed, but its still an easy 200-300 pixel gain on 1200 pixels (!)

Armor currently:

Armor with 4-slot layout:

An added bonus is that there is now a ton of whitespace next to the 'Vault' emblem, which could be utilized to display more things like resources etc.

(Apologies for the rough crappy edits, I just had an 'eureka!' moment when looking at all that wasted space for the kinetic slot and quickly threw a few edits together)

The end game is that we reduce X-axis pixel and Y-axis pixel use, which means both less scrolling and easier fits on lower resolution screens!

How does this fit into your workflow?

This allows much more efficient navigation of our vault on our desktop, tablets, or landscape phones.

[bhollis]

Yep, we've talked about it before. The tradeoff, as you mentioned, is that the current layout is good for wide screens and putting vault under each set of items would result in a lot of vertical scrolling.

[ahydronous]

@bhollis I mean this lay-out will only be used for the wider type of screen. For anything highly vertical, the current phone style lay-out would be used.

And this layout will actually result in less vertical scrolling, believe it or not.

[delphiactual]

Can you show a full mock-up? Or at least what you think it looks like with more than just kinetic and helmets

[kyleshay]

A different option/setting could be to do-away with the vault (or just show tagged items in that column) and rely on the (+) icon to pull the item you need, chances are you may not scroll through the vault to find the specific variant of an item you're looking for, more likely to search for it.

[kyleshay]

you could also set the character width to two tiles which makes for a better use of space and was the solution we came to in the past.

[ahydronous]

So, I made a full mock up and did some calculation.

2560x1440 27" screen Window tiled half-screen via Windows 11 tiling Browser outer window size: 1294 x 1399 Browser inner window size: 1278 x 1315

Current DIM layout leads to a screenshot dimensions of 1261x4777. My lay-out mocked up leads to screenshot dimensions of 915x4715.

That is -1.3% percent change in the y-axis. Less scrolling, but not significant. The x-axis percent change is -27.43%. This is a vast improvement and would allow DIM to fit smaller resolutions much more comfortably.

Further size improvements possible:

• Not having a full Vault button for each slot category, but having a small icon instead that indicates that section is in the vault, perhaps with a subtle shading rectangle around it.
• Either removing the Settings icon (how often does the average user jump in there per day) since it is already in the hamburger menu, or aligning the Settings icon vertically with the Refresh icon

Obviously this is brainstorming and just a mock-up, but I hope it shows that vast improvements can be made.

@delphiactual your requested mock-ups: Current DIM layout vs my mock-up layout

[burstburst]

Might could split the difference? Could leave the 4th vault column and have the overflow after 3 rows take up the negative space between gear sections? Might also preclude the vault from needing to flex fill too?

[bhollis]

My gut sense is that'd be both harder to implement and more confusing.