What would your first impression for this interact display be?

Hey, so I’m working on a universal game project, that works on all platforms.

This interact bar would be for PC players and also for mobile. It’d look the same for controller players as well, the only difference would the “E” would be their controller button.

Now, I’m designing this so you can also interact by pressing the button directly. If you were playing this game on mobile, do you think you’d be able to infer that you could press the interact button instead of having to press ‘E’?

Other feedback regarding this is appreciative as well. In terms of the red text color, I figured I would make it so the text color varies on the color of the keypad the player is attempting to interact with.

Thanks :slight_smile:

EDIT: I also think the ‘Interact’ text, isn’t really necessary. Please let me know if you either agree or disagree with removing it.

The Inventory button could use some work. Maybe some repositioning, more rounded, but other than that it is great!

Also does the Interact come up when you go to like a door or something?

1 Like

Yep! Exactly.

-30charsssssssssssss

1 Like

The inventory should take up less space, as the screen should have more space for the gameplay itself, and important UI. I can see some noticeable anti-aliasing issues with the interact black circle image. If the white text isn’t a part of the image, then I would recommend just setting the image color to Color3.new(0,0,0), as that will remove the anti-aliasing (I believe). I would also increase the size of the interaction button, and reduce the surrounding texts size. Maybe try to make the transparency of the text stroke for the red text higher, but it may look worse.

Even with the aforementioned issues I stated above, I think your UI will work for your game, and I would like to see how this turns out. Good luck!

1 Like

Thanks for your feedback! I whipped up the interaction button really quickly in gimp, I might go back and replace it. The thing is, I needed a circle shape (obviously) and instead of creating many different images for different input, I figured I could do that from within studio by modifying the Color3 of the image, and also including a white outline on the exterior of the circle. It didn’t turn out great, but it works for the time being I think.

And you’re definitely right about the UI clutter. Right now absolutely everything is placeholder just for the sake of functionality, I already have a UI designer reworking everything.

I’ll also definitely make the changes you suggested to the interaction display.

Thanks again :slight_smile:

Some mobile players might get confused, so it might be better to replace e with tap, which might make the button easier to tap, and remove the need for it saying interact.
And for computers and console you could replace interact with press or hold if your game has different types of interactions.

2 Likes

If you want to avoid the “E” interpretation on mobile, you can check for MouseEnabled and TouchEnabled via UserInputService.

I know there are some odd exceptions, but it’s likely that if a mouse is connected there’s probably a keyboard too (probably want to double check with trackpads but that’s a mouse so it should still behave the intended way). If for some reason a player has no touchscreen and no cursor, I’m pretty sure they wouldn’t be able to play your game or click anything.

1 Like

Looks good. Inventory is weirdly placed, the top thing is unspecific and the interact red key card display looks like an eyesore.

1 Like

The idea behind the color on the key card text would be so it matches with the color of whatever keypad door they’re attempting to interact with. (and they need specific color keycards to access those doors.) So I figured it’d work.

And yeah, I’m having some one redesign the layout of everything so it looks more in place. As I said previously, everything is placeholder, so I can code it without having to worry about design.

Good idea but I think you should remove the whole text and put something in the corner showing your card and how much you have (or something alike this?)

1 Like