Thoughts on in game currency UI

[2Dry]

As most of the others have already mentioned, the grey one is more pleasing to the eye to look at. Adding onto that, the mix between the really bright green and the white text makes me have to squint with my eyes to see anything.

Try to make what really matters stick out. Tone down the background and use vibrant colors to make the player feel an urge to buy something. I’m not going to go in-depth on color psychology myself as I’m by no means an expert, but you should check it out yourself! It really comes in handy often.

[DevAwesomely (Awe)]

I prefer you should change the color of the background in grey, but maybe change a little transparency?

[ConnorVIII]

The first one needs higher brightness and lower saturation (its an odd set of colours)

I think its much easier to look at

[wind_o]

I always think color can really make a huge difference in UI, and I like what you’ve done with the first picture. Maybe tweak the colors just a little so they’re less bright. Also, I’d recommend putting the name of the currency at the top of the frame, so people can quickly tell what they’re looking at.

Other than that, the green buttons are way too light. You should give them a darker shade of green, because people won’t be able to read this properly on a badly calibrated monitor. In fact, I can barely read it on mine.

[Affenity (Visual)]

Personally I find the grey version more attractive than the other ones (due to my minor photophobia - sensitivity to bright / light themes)
Don’t get me wrong, I like the first shops too, but the grey is way more easier on the eyes.

Otherwise, the design, alignment looks alright, but I would have placed the currencies on the top.

[rooboo14]

Personally I prefer the dark theme. However, I think you could a good color contrast by using one color for the background instead of two different colors. Also not a huge fan of the light green buttons. Otherwise I think it’s pretty neat, good work!

[iacxx]

As you yourself said, the green and yellow in your OP is quite bright and colourful. The buy button also contrasts with the green background.

Meanwhile the darker version, while its easier on the eyes, it looks a bit dead and not an inviting place to buy currency. I had a bit of free time and quickly mocked up this(sorry for bad positioning of things as well, very rushed);

Starting from the top, I’ve removed the “currency store” text and put it into two different sections. I’ve also put a line under it but it isn’t necessary.

Moving downwards you can see I’ve put backgrounds on nearly everything, starting with the main white background, then moving onto the yellow & green backgrounds which host the currency tabs. This just creates a nice contrast rather than having one single colour as the background.

Onto the currency tabs, I decided to change them up a little bit and went for a rectangle with the buy button dropped down, though this design does seem quite largish. I decided to copy your currency tabs but make them skinnier which looks a lot more pleasant imo.

I think an issue you had was how to highlight to the user how much currency they would receive, hence your font size been so big. Its much easier to just make the digits in a bold font and the text in a lighter font. (it also looks cool)

I’ve also decided to keep your robux text on one line instead of two as it looks a lot cleaner. Anyway, moving on towards the bottom of the gui I’ve put a background on how much currency the user already has. It seems I’ve also forgot to put some icons there, whoops.

Anyhow, I kept with your colour scheme of white, yellow and green but have toned them down and turned them into much nicer looking colours, also much easier on the players eyes and a more inviting place to buy currency. I’ve changed the buy button to blue as it sticks out well on both backgrounds(yellow and green). (Also because I got sick of picking a colour that works well on both.)

Good luck!

[RuizuKun_Dev (Kitsune)]

Wow that’s a big improvement!

[NinjoOnline]

Ok wow I kinda just redid it all and basically just copied that cause that’s really good XD

I just put 2 for each for the time being (the lowest amount and the highest amounts)

Mostly looking at the robux side, any tips to make the text look a lot more uniform, instead of the 50 being really big, and the 4000 being really small? Using Scaling and all that, but not sure if like UITextSizeConstraint would make much of a difference? Or am I being too OCD, and the robux text is fine looking like that

[iacxx]

Looks good in game! I see what you mean about the text difference, its not just you, it does seem a bit off putting.

I’ve got a few suggestions here depending on which one you decide is the best;

• Shrink the coin/gem images down and move the “250 gold” text to the left a bit more and increase the size of the buy button

• Shrink the font size of the “250 gold” text down and increase the size of the buy button.

• This will probably take a bit more time the others but will not affect how the design is.

Increase the entire size of the GUI in width, so increase the white background as well as the yellow one, then increase the size of the buy button to the right. I prefer to use a separate textlabel for buy buttons as it gives me control of how big the box is. I’d then find a nice, clear and legible text label size that works well for 4000 as well as 50, and place that in the center of the buy button.

Edit: Just wondering if you’re using UIAspectRatio as well for the gui? With the rounded tabs some things might look a bit weird on other resolutions.

[NinjoOnline]

I am not using UIAspectRatio as I got no clue how it works XD but I use Dummiez method for scaling UI, which when I change between like an iphone to console resolutions it stays all scaled properly

[NovaCoepta]

Many people have already done a good job talking about the colors, but a UX standpoint I would recommend combining the two columns to scroll as one, but even more than that I find it distracting to have so many options to choose from; I recommend not having more options than what you can fit without requiring scrolling.

[NinjoOnline]

Thank you everyone for the amazing feedback! Huge thanks to @iacxx for basically creating a really dope design that I just stole Hope that’s ok

Also ended up removing scrolling as @NovaCoepta mentioned, there was too many options to pick from. So simplified it down to 6 (that seems to be what most other games use as well)

Here’s the ‘final’ design! Still open to comments, thoughts, opinions, whatever

[BenSBk (Ben)]

The “MOST POPULAR!” and “BEST OFFER!” seem a bit ugly placed directly against the top of the button with no padding. Perhaps you could include a small background behind those tags or place them above each button, rather than inside, instead?

[PlayAsync (aaa)]

If you want to show the player that a deal is on for example right now you have the “MOST POPULAR” or “BEST OFFER” label you could instead have a prompt when the user joins telling them that an offer is available. On some games I see Guis that show when I join the game saying there is an offer on coins or something along those lines. The style of the Gui is great however so keep it in its current form.

[AmyKusanagi]

Like others have replied before, the grey one is much more easier on the eyes.

To add on to this, I think it would be a good idea to change up the text a bit on the buttons by adding a faint text stroke transparency, maybe 0.7 or 0.8, so you won’t have to look real close to see what the text says on the buttons.

On a final note, I think you should change the text of “Shop” above the cart icon to white.

Edit: You should also place the MOST POPULAR! and BEST OFFER! tags a bit more upwards so it would look cleaner, and going off of what @Dandystan said, I also think you could perhaps add a small background behind them or place them above each button.

[PlayAsync (aaa)]

Yeah transparency may help. Did you see his newest version of the coloured one? it seems that one is nice and on level with the grey one.

[Aquaventurer (aqua)]

I think the numbers that shows how many Golds/Gems you get and have should not be centered. Maybe make it align from the left instead? (idk the proper word for that lol)

Also, the buy buttons can have different colors; darker yellow for golds and darker green for gems, perhaps?

Overall, cool design! I like it

[JuztHoney (Corey)]

The grey version looks a lot better imo. Adding a script to automatically add commas to the currency amounts at the bottom would look nice. Or a shortened version. Example: 2,500 would be 2.5k.

[CreepySins (Creepy)]

Very vibrant. I really like the bottom one just a little more than the top one though. The top seems a little “over-the-top” in my opinion. However, I’m more of a minimalist.