Skin chest lineup

[Daniel86268]

After you open your reward chests you always see your four skins you got, which is really nice. But it kinda hurts my OCD how they are in a one row with 3 and one row with one skin layout. As long as it always keeps being exactly 4 skins each chest I'd prefer like a 2 rows with 2 skins each layout. (Something like the alternative image that I edited. Maybe make the box containing the skins a bit less wide or the skins a bit bigger or something. So it somehow matches.)

[BiddoBams]

A simple change, but a welcome one! It always bothered me too.

[ricardopinto]

Hi everyone! It fascinates me to see you guys talking about this, because it's something that bothered me when I initially laid out this popup. The problem here is there are boxes with 4, 5 and 12 items at the moment (there could be different ones later). So I just used a grid with 3 columns and a variable number of rows.

I thought about making the grid change the number of columns to the amount of items, but it's not trivial. IE:
If there's 3 items, show 3 columns * 1 row. If there's 4, show 4 * 1. If there's 6, show 3 * 2. If there's 8, show 4 * 2. If there's 12, show 3 * 4. But that leaves a few odd numbers looking weird.

I'll take another look at this. I might try to make the number of columns vary from 1 to 5, and then just change the number of rows. That should cover most item amounts. Joe also suggested moving the item name under the image and center it, instead of its current spot, which makes the list look very visually imbalanced.

Let us know about any other UI issues you find! Thanks!

[ricardopinto]

The way I ended up fixing this was:
If there's 2 or 4 items, use 2 columns.
If there's 3, 6, 9 or 12, use 3 columns.
If there's 8 items, use 4 columns.
If there's 5 or 10 items, use 5 columns.
Every other number uses 3 columns.

Which means 7 shows as 3+3+1 and 11 shows as 3+3+3+2. Every other case looks pleasing

I also moved the item name under the item icons.

 

 

[BiddoBams]

@ricardopinto Awesome! It's such a small change but it makes the UI 10x better. I love the new UI in this update (did you work on the new main menu and the forge UI?)

 

(also, boxes with 12 items in them?! is that somthing you're not supposed to tell us yet? )

[ricardopinto]

@Ashkain Thanks. It's still not perfect, since the item name textbox is two lines high, and if the name is only one line, there's more empty space under the last row (between that line of text and the dialog frame) than the top (between the first row of icons and the dialog frame), but I don't really have a way of checking how tall text is, so I can't really fix it. I just added extra padding to the inside of the frame, to make the problem less noticeable.

Quote

did you work on the new main menu and the forge UI?

Yes. I didn't make the main menu animation though  

Quote

also, boxes with 12 items in them?! is that somthing you're not supposed to tell us yet?

Maybe. It doesn't matter, though, since that info can change at any second really.

[Daniel86268]

8 hours ago, ricardopinto said:

The way I ended up fixing this was:
If there's 2 or 4 items, use 2 columns.
If there's 3, 6, 9 or 12, use 3 columns.
If there's 8 items, use 4 columns.
If there's 5 or 10 items, use 5 columns.
Every other number uses 3 columns.

Which means 7 shows as 3+3+1 and 11 shows as 3+3+3+2. Every other case looks pleasing

I also moved the item name under the item icons.

 

 

That system sounds pretty much exactly what I would've done and the screenshot looks REALLY good and is visually very pleasing.
I hope it'll be somewhat like this in the future.

Thanks a lot

[fimmatek]

I like the new layout of the items, it looks much better!  The frames of the texts look a bit strange to me, a bit out of place, but I like the coloring, it helps a lot to see which item has which rarity.

Another thing, I noticec that in the item collections / curio cabinet menu the profice picture of the selected character is partly hidden if the character has long hair. This is the case by Willow, Wendy, Webber and Wigfrid. It would be nice if we could see the whole picture, so I don't know, is it possible to move it a bit? There seems to be enough place left from it.

Is it maybe your field too, @ricardopinto ? And if so, might it be changed, or the picture is designed to be so tight to the character?

(Though it's not the same case as in the OP, it seems to be related and I thought it wouldn't be necessary to open a new discussion about it.)

[ricardopinto]

6 hours ago, fimmatek said:

It would be nice if we could see the whole picture, so I don't know, is it possible to move it a bit? There seems to be enough place left from it.

Aww man, you wouldn't believe if I told you how many mockups there were for this screen and its layout.. Adobe Xd got a lot of use for sure (and it was still in beta too).

There's a visual hierarchy problem in that we have these visual columns:
A - Title, menu, and back button
B - Name, frame, character, and undo button 
C - Item list and item detail views
This seems perfect, since it allows us to keep three items on the screen, with the main one spot on in the middle! Perfect! Except that the middle column, B, has two horizontally-competing elements, the frame and the character.

The character frame represents a character's achievements and personality. The character preview represents you, and its preview allows you to see customization you've done. Which means the preview ends up being quite more important, and it should have the largest relative footprint on the column, and maybe even on the whole screen.

Putting them side by side undermined that importance, and also made the column and screen look unbalanced and awkward. So the frame was relegated to background status, as if it was hanging on a wall behind the character in their wardrobe (at one point there was even a shadow, giving the illusion of the floor the character's standing on and the wall behind them, but that didn't work with the new screen background, so it was removed). 

As to why the frame isn't more to the left, that's because column A has a fixed width across screens (not just this one), and you can see when you hover over the menu items how its focus frame almost touches the character frame.

Eventually, there should be a way to view the frame, maybe by clicking on it and showing it larger, in a lightbox-style screen.

There's a mockup of what column A will eventually change to on this screen, but it's still in progress

[fimmatek]

3 hours ago, ricardopinto said:

Aww man, you wouldn't believe if I told you how many mockups there were for this screen and its layout.. Adobe Xd got a lot of use for sure (and it was still in beta too).

[...]

Thanks for the reply, it was really interesting! I wouldn't have thought that the screen was split to colomns. Now I understand the setup and why this problem (if we can call it a problem) occured. It's amazing how many ideas and work must be behind a simple menu!

I'm really curious how it will be in the final version, but even if nothing changes, I really glad you let us a peek behind the scenes I really like to know what why how works

Good luck with your projects