Suggestions on improving UI appearance?

I can place buttons and frames well enough, however I struggle making it all look nice and come together. I currently had a friend add in some background images to make things look better, but I’ve recently had some criticism on the UIs.

Criticism

Here are some of the GUIs. For reference, this is for a magical roleplay group with influences from Harry Potter.

Tabs Gui

Help Gui

help

Spells Gui

Customize Gui

Currency Gui

Chest roll Gui

chestRoll

I’ve also heard that the Spells/Customize GUIs were “too childish”. But what are your thoughts on how it currently is, and how it can be improved?

3 Likes

I think the biggest issue here is consistency. Your UI is an amalgamation of

  • really good looking, thematic, image-based frames
  • different colors
  • different fonts
  • different font sizes
  • different outlines
  • square shapes with big, transparent outlines
  • sqaure shapes with small, opaque outlines
  • square shapes with no outlines

And also it is just a bit confusingly laid out.

So those are your two issues – consistency and layout.

For the former, I highly recommend you delete everything and start from scratch. Find your game’s UI style (color scheme, font, font size, outline, frame style, button style, whether it uses images or not, etc.) and go with it and only it.

There’s really no other way to have a good UI – it’s a similar situation with programming, organising, etc. too, so it’d be a good thing to learn to do.

I recommend you keep the sidebar (in essence, remember I said to delete everything), as it’s easy to make and doesn’t need much more topping up to make it a good style. From there, you can expand and do the other UI elements according to your chosen style.

Once you figure out the first issue, fixing the second issue should be a lot easier. The only real rule for layout is to make reading, understanding and using the UI easy.

:+1:

6 Likes

Redesigning them from scratch at this point isn’t really an option. Plan on releasing the game soon x_x

Is there a way to get by with just editing them? If so, what specifically would you change for each one?

This is what I'm considering based on your advice and discussion with my group
  1. The side gui modified by that one friend to be more like a scroll of some sort (or whatever he decides to do, since that’s the one GUI he didn’t modify)
  2. The colors made darker (using more brown/black/tan/etc, and only the red/greens for component items or spell names)
  3. The “Wand Components” and “Spells” ribbons changed (perhaps plain text instead of a ribbon, with the same font for both of them)
  4. The colors for the selection tabs (the “Wood | Cores | Models | All Components” and “Findable | Learnable | Buyable | Special | All Spells”) changed to be white with a black outline, or the component name colors were changed to black with white outline
  5. Removing the “Draconifors” bubbles for the Spells gui, and make the text for it Black
  6. Make the other UI elements (the “Ready”, “Guard Power”, and “All spells allowed” UIs) disappear when something on the side bar is opened
3 Likes

Often it’s better to delay something and have a good final version than pushing it out on time in a bad state. The is something that has become quiet prominent in the wider entertainment industry, and is what has killed a lot of games and other products.

While on Roblox it’s not as much of an issue, it still is one (at least if you want a successful game). Don’t be afraid to delay.

I’m not sure entirely what you mean by this, but I’d consider the sidebar good enough as it is.

That seems like a good color scheme. Consider making red and green less so for specific things and more so for ‘special’ things. Names don’t have to stand out, but sometimes you want to really highlight or something, or want to convey a common feature (e.g. red for close button).

Getting rid of the ribbons would be one of your first steps to redesigning your UI. I’d recommend it, because they use fonts not used anywhere else.

Just make them look consistent with everything else. If you’re basing stuff off the sidebar, give them a similar shade of brown with some brightness differences or a colored highlight to stand out.

No idea what you mean, but lowering the amount of unnecessary information your players need to process is always a good thing.

Sure, but I think your time would be better spent making those elements appear consistent with your desired style. All you need to do is put them in some frames, change their colors and outlines, and maybe their text.
Organise, organise, organise! :slight_smile:

This last answer also answers your question about editing them. Some basic, non-functional property edits like colors, and easy-to-implement changes like putting things into frames can at least serve to hold your UI together while you release.

The specifics are up to you – your style, your choice :wink:

5 Likes

I am a really good UI designer. Make them futuristic, with a good border and transparent frame. Making buttons pop up when you hover over them, scrolling frames, and even background music while the UI is open all contributes to the effectiveness of the UI

I can’t tell if you’re joking or not but its pretty clear from their screenshots that making them look futuristic with clean transparent frames would not fit the theme/tone of their game.

2 Likes

First of all, I am not the most experienced UI designer on Roblox, but I have a good idea of what I’m doing. Here’s a long lesson:

TL;DR See conclusion, but I recommend reading this.

It seems the biggest issue here is the design. Some of your UI is skeuomorphic, while other parts of it are flat.

Basically, skeuomorphic UI is designed to look like a real thing, e.g., records, bookshelves, or in your case, paper. It was widely used in the late 90s and 2000s because it let the user know what they were doing if they weren’t experienced with the digital world-- So for instance, a music playing application might show a detailed graphic of a record spinning or something, or a book app might animate page turns and show your library on an actual bookshelf.

An example of skeuomorphism. This is a compressor VST effect plugin.

This design eventually lost steam once there were generations of people basically born knowing how to use a computer. So, flat design became the new standard. Unlike skeuomorphic design, flat design does not try to emulate real-life things like the former. Instead, it uses simple, clean designs that try not to overcomplicate things and clutter space. As such, it is usually much easier on the eyes and simpler for everyone in general.

An example of flat design. This is a sample mail app.

You can even compare them side-to-side:

The signs to the left practice skeuomorphism while the ones to the right are flat:

With the rise of the Internet, skeuomorphism has largely been replaced because it feels cluttered and over-done-- Which is not good UI design. The more minimalist the stuff looks, the better. Which brings me to your UI:

Your UI is practicing both of these designs when it should really only stick to one. The left bar is flat, while the menus and stuff are skeuomorphic. You need to choose which way you want to go, and it’s more than just a design choice. There’s lots to consider:

  1. How immersive do you want the game to feel? If you want the player to feel like they’re opening a scroll, stick with skeuomorphism because it is more realistic. If you want them to feel like they’re just changing a spell or something and aren’t actually opening a physical scroll, try flat design.

  2. How important is the interface? If the interface does not play a crucial role, then you shouldn’t let it take up a lot of screen space, and you certainly shouldn’t make it be filled with clutter. Do players need to change spells fast? Do they really need to have a giant menu in their face? Fancy animations? Flat design is great because it forces you to conserve space and is not distracting. This can be achieved with skeuomorphism, but this design is supposed to take up space and be fancy since it’s emulating a real-life-object. It could be really annoying for players to do stuff when they have a bulky skeuomorphic menu to work with.

  3. What is my playerbase? At this point most kids are totally used to flat design and will probably think skeuomorphism is ugly, but some might think it’s pretty cool. Older players don’t care that much about design, they just really want the interface to be intuitive-- Which coincidentally, is easier to do with flat design. Keep that in mind when choosing the overall look of the interface.

  4. What is my game? Social games tend to look a lot better with flat design, while more realistic games (e.g. shooters) might look better with skeuomorphism. Lately, people have been mixing both to create a simple-to-use interface that still feels realistic.

Overwatch blends the realism of skeuomorphism and the simplicity of flat design to make this eye candy UI:

Fortnite is more cluttered, but still is easy-on-the-eyes:

Clearly, your game can still have some realistic elements in it, but be intuitive. You don’t have to go one-way or the other, you can mix both if you want. Or you can just stick with one. It really depends on how you want your game to feel.

So in conclusion, your interface is actually really important. There’s lots to consider when making it. Don’t make a giant realistic menu just to make a giant realistic menu when players just want to have fun. Focus on the elements that matter the most, then maybe add more details later. And duh, try and keep a consistent look across the board.

Bonus stuff: You can learn about scaling UI to screen sizes and more here:http://wiki.roblox.com/index.php?title=Intro_to_GUIs

You can read about skeuomorphism here: Skeuomorph - Wikipedia

You can read about flat design here: Flat design - Wikipedia

3 Likes

I didn’t notice it was for a Harry Potter-themed game. My bad. I thought he mean’t UI in general

Alright, let me first say sorry you have to read all of this but I hope you learn.

Your UI is completely inconsistent. Looking at your images I would’ve guessed the UI was designed by 3-4 different people. The font varies wildly between every menu, the design of some menus is similar while the design of others is very different. Shadows and textures are inconsistent and take away from the overall design, and the layout is different in situations where it could be similar.

Now I’ll go through your images and critique what I see:

Tabs:
Spacing and size of buttons on the left is inconsistent. The “gamepasses” text is right up against the edges and the button is smaller than the rest. Additionally, it doesn’t make sense why you wouldn’t have that included as a tab in the shop, same goes with currency. The “Information” title is not necessary and is in a completely different style than the rest of the menu, making it stand out but also look out of place. If you need to include a title for non-style reasons(I’ll get to this in a minute) then the only reason to have it is if people wouldn’t understand what they’re looking at, which should be fairly obvious in this case. A title kept for style reasons could be to fill empty space, help people to understand what they’re looking at, and to keep an overall theme if you use titles elsewhere. One way I like to think of using titles is if somebody that did not know the game were to come up behind me and look at what I’m looking at, would they understand what I’m looking at unless I explained it or there was a title?

The text does not stand out too well from the background and the color difference between buttons and the background is unnecessary until they hover over it, but really doesn’t take away from the style. The label that says “MLE off duty” does not belong above the tabs as it doesn’t belong with a list of menus. The tabs panel could be hidden off screen and when somebody moved their mouse to within a certain distance of the left side of the screen you could tween it in so that it’s not always in the way while they’re playing and not necessarily using it. You’re hiding screen real estate unnecessarily. The ready button doesn’t fit with anything else, same with the “all spells allowed”. I have no idea what they’re used for though. If the “all spells allowed” label is to let a user know if spells are allowed in a certain area, I would say put this as a small text label at the top-middle of the screen. Both the “ready” and “all spells allowed” text labels don’t match any sort of theme and are not too easy to read as there is no shadow behind them or TextStroke so if you were to look at the text over a background of even a remotely similar color, it would be impossible to see them.

The “guard power” button doesn’t make sense where it is, especially if the user could have more than 6 items in their backpack.I would suggest sticking it wherever you would move the “MLE” label to and change its style to match the rest of the ui as well. The galleons label is out of place where it is and unnecessary. If you want a user to be able to see their money at all times I would create an icon for the galleons and just put the number next to the icon in the corner where it is now. It’ll be smaller and seem less out of place. The font for the amount would have to be larger and bolder so that it’s easy to read and doesn’t seem out of place. This wouldn’t have to match any specific theme really. I would also suggest making a custom backpack and leaderboard as the default Roblox ones are useful for basic games but for a game that needs a nice and consistent ui feel they definitely don’t belong. Also I wouldn’t use a white or grey team color because it’s difficult to read the header in the leaderboard, just saying.

Help:
Not too many complaints here, but I would say make the previous and next buttons slightly smaller so that they don’t feel like they’re taking up the bottom of the pages. The table of requirements is completely out of place with a colored background and colored boxes, so I would design it in the same way as the rest of the book is. The triangle icon on page 3 is also out of place as it is really close to the top edge of the page and is not the same color as the text, not making it feel as if it is printed onto the page with the text. My other suggestion would be put the title page on the right page and leave the one to its left blank so that it feels like a proper book with the copyright page(the blank one) on the left and the title page on the right and then all the contents follow. The table of contents could also have this as the back of the title page is usually blank, but these are just nitpicky and you don’t need to really worry about them. I would also put the close button inside the book but not make it a giant red X but maybe just a small X in the corner being the same color as the text in the book.

Spells:
Wow where do I start? It’s just a hodge-podge of different themes, inconsistencies and unnecessary stylizations. The ribbon that the tabs are on is unnecessary and causes the menu as a whole to feel unbalanced as the ribbon is sticking off the left side but nothing is sticking off of the right. The tabs text could be brown and slightly more bold so that it looks like it’s text written onto the canvas itself. I would sugges a brown/gold font here as it would look like ancient text on a canvas rather than the printed text on a book like the help ui. The title ribbon is shaded meanwhile the rest of the ui seems rather flat or has dropshadows rather than surface shadows. I would suggest making this a small piece of canvas that looks like it was attached(staples or pins would be cool) to the background canvas. This should also be centered as the whole menu feels off-centered because of this.

There should be a padding to the description, which could be written directly on the background and doesn’t necessarily need a box to be in. The description could also be larger so that it’s easier to read. The preview image in the top-right should have the same background it has in the menu itself because it just looks weird being on a white background. Again, it doesn’t necessarily need a background behind the image/title. The power, defense, etc. labels could be slightly more spaced out horizontally as everything to the right of the vertical bar seems rather cramped. Maybe put two spaces on either side of the bar or even replace it with a dash? This text should also be the brown that I suggested the tabs be in and should be slightly inset of the description(a few pixels further right than the description is) so that there is no easily noticeable straight line that everything is lined up with.

The equip, sell, can’t buy/buy and quit buttons should all be the same style and have consistent shading. The quit and can’t buy buttons are noticeably darker than the equip and sell buttons due to their shading. Also I would not overlay the can’t buy button on top of the buy button, I would just replace it. These buttons I would put closer together and maybe make slightly smaller. You really need a custom scrollbar, the white stands out like a sore thumb. The title font doesn’t have to be different than the rest of the fonts, it seems out of place the way it is.

Customize: (I’m assuming you accidentally swapped the images, but I’m describing what I see in the order you put it)
The title ribbon and tabs should be the same that I described above for the spells ui. Again, the spells title doesn’t need to be a different font and the font size is much larger than the spells ui title’s so it seems very odd when comparing the two. Change the CanvasSize in the “how to obtain” and “spell description” boxes so that you don’t see the scrollbar if the font isn’t long enough. Also you really need a custom scrollbar. Move the obtain box down towards the bottom and move the description down as well but space them out a little more, seems way too cramped the way it is. The title bubble should be moved down just to be inside of the canvas itself rather than stick out the top like it, doesn’t fit well like that. I don’t mind the design of it but add a bit of a drop shadow to the text (this could be done by making the TextStroke color 0,0,0 and setting it to .7 transparency). The design of the spells buttons is way too noticeable and there is no individuality in the buttons. There should be at least 2-3 designs and some of the rotated 180 so that it looks like there are 4-6 different designs. This would make the buttons look better as there wouldn’t be the same style to every single one. The text should also have a bit more padding and be slightly more bold if possible.

Shop:
Way too cartoony in comparison to the other uis. I would use the same style you used for the Spells and Customize menus. I would also throw in the gamepasses here as well and change the name on the tabs panel to just be “Shop.” I am not going to spend the time critiquing it if I already told you to change it entirely.

Chest roll:
The scroll looks nothing like the canvas you used above. I would suggest finding a piece of scroll that looks more like the canvas. The shadows are way too dark and it doesn’t fit the theme that the canvas menus defined. The icons don’t need that gradient behind them, that’s way too dark anyway. I would use the same colored background you used in the canvas menus. The label is too dark and hard to read, I would replace this with the small scroll you used for the item titles on the side of the canvas menus and making the font the same that you have there.The confirm button is just one of the default Roblox themes, baby what is you doing here. This should be replaced with one of the buttons used in the canvas menus. The arrow shoudl be a little bit lighter so that it doesn’t seem so dark and out of place when the rest of the ui is lighter. I would also make it smaller because it’s unnecessarily large right now and also overlaps with the confirm button which doesn’t look too great.

I would also change the colors of messages in the chat as they are too dark and hard to read.

2 Likes