AuthorTopic: Need some UI advice  (Read 6242 times)

Offline Jedemy

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

Need some UI advice

on: November 01, 2018, 07:08:59 pm
Hi,

i've been working on a Crafting system for my game and now can't figure out how should i continue on this concept. Just wanted to ask for your opinion what can be done to improve this.

Since few days i tried to change this black background to something else but no luck.




I tried to create something similiar to Chaos Engine but got carried away.

« Last Edit: November 01, 2018, 07:15:14 pm by Jedemy »

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Need some UI advice

Reply #1 on: November 01, 2018, 07:27:29 pm
I feel like you could make much better use of the available space. Everything is tiny and some of the text is hard to read because of the size, and yet you have all that unused space.

The gold/brass colour doesn't read very well against the grey background, especially for the smaller icons, more contrast between them would really help. Perhaps the grey could be made darker?

The UI feels disorganized. You have four distinct sections (resource list at the top, the circles on the left, the blueprint area in the middle, and the hangar on the right), and there's no clear indication of which is the most important at the moment, what's related to what, and so on. The resource list is the only one that has a clear purpose and a clear place in the otherwise non-existent hierarchy - it's unobtrusive and clearly there to be looked at when you specifically want that information. The other three sections all fight for attention, especially the blueprint area and the hangar.

The lack of alignment between elements also fuel the visual chaos. Everything's anchored to different points, so it appears as though every element is floating independently.
The hangar is a good example of alignment creating visual groupings - the three ship info cards are aligned and have the same size, so despite the spacing between them, they clearly read as related. The L2 and R2 button prompts are aligned with the edges of the cards, so they also feel related, but because they're smaller and simpler, they also feel less important than the ships and don't clash with them. Size/contrast issues aside, the hangar's good! You should try to apply the same principles to the UI as a whole.


Try to avoid having different icons for things with similar functions. The hangar has tiny white arrows for flipping between pages, but the blueprint has large brass arrows, even though those arrows perform roughly the same function (presumably, they flip between different blueprints). Even though the purpose is clear in both cases, it feels less unified and more chaotic. It could also cause confusion if e.g. the player makes the guess that one type of arrow represents inactive/unavailable pagination.
Similarly, some of the ship circles have highlights, and some don't, which can be misinterpreted as meaningful.

In the circle bar on the left, you have a large green sphere next to one of the big circles. Is that the currently highlighted ship, or...? The green sphere looks a lot like the resource icons. It also doesn't feel thematically connected to the ship-circles, perhaps show selections by changing the circles, e.g. by giving them a brighter frame or a different background colour within the circle?

Offline Jedemy

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

Re: Need some UI advice

Reply #2 on: November 01, 2018, 10:21:32 pm
Thanks a lot Eishiya! I tried to make things clear depending on your critic.

About font size, i just work on 640x360 but min compile resolution is 1280x720.

However i am still being stuck on background issue. What i tried to achieve is brass on polished steel as material but i can't somehow think of anything to attach those elements.

If i keep using black background, it feels too empty. Any suggestions?

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: Need some UI advice

Reply #3 on: November 02, 2018, 01:26:37 am
Fading UI elements is a quick way to create a visual hierarchy, but try to think more on that subject.
It looks less chaotic with the Blueprint and Hangar sections aligned, but it still all feels a bit disjointed. Try to think about how these things connect and how they can be grouped, and how the UI can show these relationships. If there are no relationships, then are you sure all of these things need to be on the screen together?

Consider the theme you're going for. It looks like your goal is something that resembles an actual physical interface that could exist in your setting (as opposed to something abstract). How would such a physical interface be arranged, what would it consist of, how would it be built? These questions might guide you to some effective answers. Don't think of the background as just a "background", think about what it might be in terms of your UI's theme, and think about how you can use the background to show the relationships between the different elements.

Even a solid black background can look good, though! The reason yours doesn't is because the other elements aren't particularly well-composed. Consider perhaps arranging them so that they're a little tighter, rather than anchoring things to the edges of the screen? Dead space far away from the focal areas feels a lot more pleasant that dead space in the middle of the action.

Offline Jedemy

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

Re: Need some UI advice

Reply #4 on: November 02, 2018, 11:19:01 am
Thanks again Eishiya. I will be working on it next days and update the post. Hopefully i will come up with something better organized.

Offline Jedemy

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

Re: Need some UI advice

Reply #5 on: December 05, 2018, 03:01:39 pm
It has been quite sometime since my last edit , was working on some other stuff but i am back to the Crafting system again.

Like Eishiya pointed out, i didn't actually need to show hangar there at all. So i replaces with different kind of blueprint system and reworked on it. It is still WIP but i appreciate any feedback! :)

Thanks!

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: Need some UI advice

Reply #6 on: December 05, 2018, 04:35:11 pm
I really like the improved separation of background / foreground. The eye is more attracted to the content now.
The bronze adornments are not distracting at all.
You may want to try a double-pixel shaded border for edges of the UI. This gives some thickness.

On the dots that look like targets, I think you mean them as a 0-3 count for bomb and I-dont-know-what : You probably overdid the contrast, because "gold+black" is extremely sharp and much more eye-catching then the bomb that gives it context. I would rather use solid gold or black dot, if possible using the same color scheme as the above bar of gold-or-black squares. If you insist on the "target" pattern, then at least reduce the intensity by choosing gold and "darker gold".

The colored dots are painfully non-round, especially on the zoomed one (hopefully just a placeholder).
A square highlight on these dots would look better, because a 2x2 square in this contewt will read as a tiny circle in the viewer's mind.

Offline Jedemy

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

Re: Need some UI advice

Reply #7 on: December 05, 2018, 04:41:31 pm
Thanks for the feedback yrizoud!

Yes those balls are just place holders. :D

I actually didn't understand what you mean with that target "black-gold" part. Do you mean the green colour?

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: Need some UI advice

Reply #8 on: December 05, 2018, 09:42:36 pm
I meant the on/off circles under the bars, the concentric circles made me think of "target" symbols.
Here are some studies / suggestions. I tried to make the squares and circles match, somewhat.
I originally wanted to create a version that kept the "target" pattern (maybe it's informative), but couldn't find a pretty one.

Offline Jedemy

  • 0001
  • *
  • Posts: 62
  • Karma: +0/-0
    • View Profile

Re: Need some UI advice

Reply #9 on: December 06, 2018, 02:36:28 pm
Ah okay now i understand your point. Yeah thanks for the edit, definitely i will be going with flat option :)