Thoughts on this ordering system UI?

Hello!

I have created this UI which will be used for my tech company. I am not very good at UI so I thought I would ask for suggestions for things to add and remove.

3 Likes

Overall it looks good. There are some inconsistencies, though. For one, there are several different fonts, which can sometimes work, but with the style of the frames I would recommend keeping it down to one font and variations (light, semi-bold, bold, italics, etc.) of it if needed. Secondly, some frames are rounded while others aren’t. Again, this would work if used properly. I would recommend rounding all the buttons and inner frames, while keeping the outer frames (like the main background and top bar) as they are.

As far as spacing goes, it is generally okay. However, I would change the buttons on the right side so that there is spacing between the borders of the buttons and the frames they are located inside of. Also, for the “Submit Order” button, I would recommend shortening the text to “Submit” or scaling the text differently so that the ends of the letters aren’t right at the borders.

A final thought is to implement some sort of close or exit button. Though I do not know what other frames exist nor how this frame is to be toggled. That said, this implementation is optional depending on how you planned to work the GUI.

I hope this helps! Best of luck in your interface design.

3 Likes

Nice Layout, tho the colors are a little weird considering you are ordering food, maybe make them a little more exciting

I made the colors dark for a reason. I am unsure if you are familiar at all with RP groups (e.g a cafe theatre) so I plan to create this UI for these types of groups. Most of them want professional looking products which are neat looking (so I don’t think more exciting colors would be better). Also only staff who are taking someones order can see the UI so I personally think it’s fine.

The only thing about the colors which I am unsure about is the below where you select options.

image

2 Likes

I don’t quite like the fact that the button is rounded and you can see the edge of the frame. So what you could do is also apply the UiCorner to the frame.

Yea I do have to agree with you on that. I don’t massively like how the edges are pointing out. This was really just a mock up version on figma.

1 Like

Hi there.

There are a few things I can spot:

  • There are more than 2 fonts being used (try to keep it to a regular & a thin version of the font and add another font if necessary/it makes sense)
  • There’s tangents ( the rounded buttons kissing the edges of the square item frame + the r on the submit order button is also kissing the edge)
  • It’s quite desaturated for a food ordering menu.
  • Lack of images ( if there’s a food item I’ve never heard about, I would want to see what it looks like before ordering it )

I’d try to look at other ordering system UI’s and take inspiration. The UI doesn’t even need to come from other Roblox games, it can come from real life (image attached is the McDonalds Delivery App).

Otherwise, it’s really simple & easy to digest and it looks like it’s easy to navigate! Good job!

The whole system is designed for staff to order (like a till system) not for customers so I don’t really think the lack of images is a problem and I kinda wanted it to be simple and easy for staff to use.

I do have to agree with the rest of your points.

Sorry for a bump here, feel free to take layout inspo from my ordering system.
I just believe the UI here looks like the older and no longer used ordering systems mainly because they are just impractical to add things too and don’t meet the new UI expectation.

1 Like