Thoughts on in game currency UI

RobloxScreenShot20190107_191932031

I don’t really know how I feel about this at all :confused: I originally had this

RobloxScreenShot20190107_174637757

But decided it was too grey and bland. But, the top one is way to bright and colorful. The game is medieval themed, so I don’t really want bright, vibrant colors, I want more of a professional look.

10 Likes

Personally I think the gray version looks the best. It’s easier on the eyes. The bright yellow and green makes it feel like it’s one of those cheap mobile game microtransaction shops.

28 Likes

The contrast between Robux price and its background is too low in my eyes. I recommend to make the green backgrounds a bit darker.

9 Likes

Try to make both currencies have their own distinguishe color, grey version looks depressing , unattractive and dead.

Give it some personality and life.

Ask yourself would an average Robloxian buy your stuff with that UI?

2 Likes

I also think the grey one is better and cleaner, however the purchase button text is not really readable in my opinion

2 Likes

I prefer the grey version; it is easier on the eyes, and the important details (such as the purchase button) stand out more. You don’t necessarily have to be worried about the colour scheme of it, I think—there’s a good balance of interesting graphics and colours that both fit the aesthetic and appeal to younger audiences.

1 Like

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.

2 Likes

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

1 Like

The first one needs higher brightness and lower saturation (its an odd set of colours)
image
I think its much easier to look at

1 Like

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 image 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.

1 Like

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.

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!

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!

9 Likes

Wow that’s a big improvement! :sunglasses:

1 Like

Ok wow :heart_eyes: 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 :sweat_smile:

3 Likes

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.

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

1 Like

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.

2 Likes

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

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 :smiley:

2 Likes

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?