Feedback: Game UI

I believe the UI to currently be the weakest link in SC:O's presentation.

Let me start from the end: I am strongly hoping for a complete redesign of the UI into something a lot less flat looking. I'll use several examples to demonstrate what I like and don't like about it.

 

First, the screen I feel most comfortable with:

UI_Conversation

This is the best-looking scene, in terms of UI. The purpley color "extends" from the line selection footer under the subtitles and blends into the actual scene. It makes sense for the selection area to be a large rectangle occupying this much space on screen. The font looks nice in this size, and generally looks neat.

However, those buttons... they look like something the belongs in a custom WinForms library. I especially dislike the outer orange border. The buttons probably would be a lot more acceptable to me without it, but they'd still be bad-looking, IMO. I think that the orange doesn't play very well with the purple. It's fine for the separator between the selection area and the scene, but otherwise looks out of place.

 

Next up, exploration:

UI_Exploration

Buttons, same problem. The orange border is fine I guess around the Launch button, but is fugly around the Cargo Bay and Captain's Log buttons. Also looks like for some reason those two buttons have the small hexagons in their background, but the large one doesn't.

The biology/cargo etc. bars all look bad. Really don't like the changing hue. It cheapens the look. These need to either have real "presence" in the form of being in 3D or 3D mock-up, but that gradient thing just looks like a PowerPoint experiment gone wrong. I'm also not sure how I feel about the round edges, for the bar containers as well as the buttons themselves.

The planet name and line under it I guess are fine. Not too shabby.

I have lots to say about non-UI elements here (like the pick-ups and the large blue circle around the ship), but that's another topic so I'll leave it out.

 

Ship Designer:

UI_ShipDesign

The tab buttons ("All", "Downloaded", "My Designs") - ugh. Font here is too tiny. There is barely any space between My and Designs. It looks cramped. There's enough width here to use, why make them so small? The tabs should occupy the entire width of this "window". Don't like the button-y nature of everything here either, including my dissing of the outer orange border.

The "Ship design list" header - what's that for? Do we not know what screen we are on? It feels out of place (and looks bad).

Finally, the ship info panel on the right... soooo small. Why? Needs to be much larger and nicer looking. I also think the ship thumbnail should be larger.

 

Super Melee:

UI_SuperMelee

So we've seen the new crew dots, which are nice. But I really don't like the presentation here. Again, tiny font with flat buttons that seem out of place.

I feel like the purple panel on top of which each ship's own panel is placed shouldn't be there at all. Why not enlarge each ship's panel so they take that space themselves? This is just wasted space with a bland background that limits my view of the super melee scene without any reason.

There's also too much distance between the health and battery bars, which makes them sort of hard to read (in addition to being too small). I've noticed (and others have, too) that my eyes have to move a lot during SM to keep track of what's happening. These need to be really easy to read without straining the player. I don't recall if you're opposed to simply having them under each ship in 3D space as bars, but now I'm thinking it might not be a bad idea.

The R/L controller input looks bad. Not much else to say other than I don't believe it even needs to be there.

I suggest to turn the ships to face north, instead of south-west. This would make them take less horizontal space and would allow for the bars to be closer to each other. Also generally it would free up more screen space for the super melee scene itself.

Finally, I don't like the species image, but I know that's going to be replaced by bitstrips. I am really hoping these would be larger than the current image, and would actually respond to player actions such as turning the ship, firing, etc., just like they did in SCII (Androsynth pulling different levers, etc.).

Generally I want each ship's panel to be bolder. For its data to be easily readable, and for the future bitstrip to occupy as much space of it as possible - this will give that section of the screen a lot more character and would make it really cool.

 

I'd love to hear everyone's opinions. Maybe I am the only one bothered by this, but I really do believe the UI needs serious improvement across the board. Sorry UI person for being so harsh ._.

TL;DR: The flat buttons with the outer orange border look very bad, attempts to make the flat UI appear less flat by using gradient coloring and panel placement provide negative results, and generally the current UI scheme doesn't benefit the player in almost all scenes, with the exception of the conversation screen. I believe the UI needs a major redesign that would make it look more professional, easily readable, and less bland. Think about Starcraft's footer UI for each of the races, I'm thinking maybe something like that.

29,886 views 15 replies
Reply #1 Top

General:

I completely agree with Gildon on the button design issue. Of all the buttons the larger Launch button and the Battle SM button work well with the outer braces. The other don't. If all that is done at a minimum is to change the smaller buttons to that style (braces not joining), it may be enough of a visual difference. Currently it feels as though there are four button designs through out the UI.

My suggestion is to either push it towards a more modern UI theme, or push it further towards a HUD. My personal preference is a HUD. Currently it feels like it sits somewhere between and (sorry to be blunt) buttons from a poor XP theme.

Purple and orange coloring is fine by me.

Conversation Screen:

This screen should feel like a HUD. The buttons need either at minimum a styling improvement (as mentioned above) or feel joined to the sides. We haven't seen any transition work on this screen to others yet - if controls do slide away (buttons to side, main panel down?) then I would prefer them to be larger and possibly attached to the side, even if only the braces are attached.

I would like the center dialog selection area to feel like a touch panel. Hell, even better if it works with touch. If the outer brace theme is continued through the UI, this is not an unreasonable place to use if for current moused over item.

Exploration:

Like the Conversation Screen, needs to feel like a HUD. It may be enough to adjust the button styles (as above).

I'm a bit 'meh' about the top left bars. Not overly fond of gradients, but I don't have a preferred suggestion.

Ship Designer:

Buttons should look like buttons, tabs should look like tabs, and filters should look like filters. Fix the tabs/filters on the parts listing by making them look different from buttons and sizing up the fonts.

Overall the designer workflow isn't easy to navigate on first attempt. The exit button in the bottom left under the design lists, and the new design button in the bottom right away from the list? Come on, that is UX 101. I would prefer to see this with a minimum number of buttons and move the design process to a wizard or workflow process, it should step you through. It feels odd to be able to 'Design' a ship and, once complete, then 'Outfit' the ship - which is separate from the 'Edit' button, and also located on the opposite side of the screen.

Super Melee:

I found this old screen shot showing that the side panel has changed.

 Early SM

I believe that the change is to pull the two ship panels closer together, reducing eye movement to scan between both ships. Agree with that. What I don't like is the size of the purple panel that was inserted - suggest making it come out only to the center of the ship cards. Also, have the cards join out to the side of the UI by rounding out, not in - it will make it feel more like a HUD that way.

The crew dots are great, but could be a little larger. This may compensate the concern of the distance between crew and batter. I actually like the old crew and battery icons over the replacement words.

I would believe the Primary/Secondary notation has been added so you know what the opponent is armed with - useful when going against custom ships. It should probably stay, but needs to be larger. There is definitely enough vertical height to deal with it.

Suggest the purple nebula gets darkened. Everything feels very purple on this screen.

Loading Screen:

I noticed the new Tywon hyperspace loading screen. I like it. Be great if we could get a mixture of different high res screen shots or scenic game shot that are randomly used.

Summary:

  1. Consistent control design
  2. Controls should look like the controls they are (I'm looking at you tabs!)
  3. Less purple
  4. More HUD like (that is more of a personal style preference)

That's my first cut. I'll think on it some more, may be mock up a few suggestions.

+1 Loading…
Reply #2 Top

So many good points I hadn't considered or noticed. Great feedback, I pretty much agree on everything.

I also believe that a HUD-like GUI would be more fitting. I wish I knew anything about what I'm talking about here (^_^' ) so I could offer mock ups or more concise suggestions. I do have an eye for noticing flawed design but I find it hard to articulate what exactly is wrong. So thanks a lot for doing much of that for me.

P.S. I'm hoping this has been brought up early enough, so we don't end up with a debacle of Human Commander proportions (pun intended ;P ).

Reply #3 Top

Quoting Inferno83, reply 1

Suggest the purple nebula gets darkened. Everything feels very purple on this screen.

Honestly, this is my biggest comment, and I've said it before both here and on discord. I am not a fan of the purple SM background. I'm hoping that it's just static in the SM beta but that the full game wont always have the dull purple nebula backdrop - never thought I would miss the black starfield of SC2's SM, but I think that looks much better than the constant purple. I wouldn't mind if it was random and maybe that's the plan - some battles take place against a purple nebula, some across a black starfield, some across some other form of spacey-looking backdrop, and so on. But my preference would be for the "different" backdrops to be occasional and the standard one that you see most often being the black starfield.

Reply #4 Top

The overall UI seems like a bunch of ideas thrown together to figure out what looks best. Rounded buttons with "fancy" borders on a straight and modest backdrop is just a poor UI elements combo. Orange and Purple... When was it ever a great color combo? Also, it's 2017 - even in Fallout 4 we could change our UI color... I must say that I like hexagonal "texture" of backdrop elements. It does look neat.

My personal UI preferences:

1. Keep it simple and clean - less "fancy" borders. Just look at Win10 UI. Soo much better than anything M$ had before.

2. Have your UI elements geometry in simple/proper geometrical figures - straight lines, circles, equilateral polygons. Proper ellipses or parallelograms if you wanna fancy it up a bit.

3. Stick with proven color combos - if you wanna go with purple as your main color, I'd suggest replacing orange with white. If orange has to stay, than I'd use dark blue instead of purple. On a sidenote: the forum now looks better than before. ;)

4. Use capital lettering on UI elements and keep Letters/Element proportion "sensible" - no tiny or XL letters over average size buttons.

5. Ship design screen: Tabs over buttons - it feels better. It feels like you're working with physical folders.

 

If only we could get a color slider for at least 2 UI colors.... Mmmmm mmmmmmmm mmmmmmmmmmm.....

If Crew Dots were scaled up a bit, they'd look perfect.

 

One of my favorite UIs of late (Endless Space):

Though I'd prefer Ship Parts Panel to be vertical just like we already have it.

 

Melee background needs variety:

Reply #5 Top

Quoting Hunam_, reply 4

Melee background needs variety:

Yes yes yes! I mentioned this in another thread, and fully agree with you - I love the pics you included, but I would also like to see the plain black starfield ala SC2.

Reply #6 Top

To get this back on track (though I do agree and have talked at length about the blandness of the current starry background needing a complete overhaul):

Current, modern design in 2017 is all about flat. Flat buttons. Flat icons. Flat, not 3D. Check out Google's material design. Windows 10's completely flat interface. Apple uses color now, but the buttons are also flat. They don't have the pretense of being a 3-dimensional object anymore. The buttons don't "press in", they aren't shaded to have any form. They're just flat. Gradient is sooooooooo yesterday. Like Hunam's Endless Space recommendation (which is cluttered as shit and I NEVER have any clue what the buttons mean, which I think is shitty), everything is flat and clean, without any simulation of being an actual, physical button or panel. 

I feel like SCO is trying to straddle that line between flat objects, and fully-formed 3-dimensional onscreen objects. They need to choose, honestly. We either need a completely flat UI, and embrace the simplicity that such a UI offers..... or go super 3-dimensional and have an actual viewscreen, with computer buttons and tablets and the idea that you're looking at a console, while talking to the aliens. Tubes, transistors, wires, panels with screws in the corners, etc. A little bit like ol' StarDrive conversation screens, only BETTER:

But, the buttons in their current incarnation adhere to NEITHER of those design theories. SCO currently has a mostly-kinda-flat UI with gradients, as well as 3-dimensional buttons. It's time to choose one way or the other.

Side-note: It should be said that the hexagons, while passable, REALLY look like a riff on Microsoft Office Themes in excel/word/outlook - especially the Geometry theme. See the hexagons in the top right? And how they fade off the closer you get to the center of the screen:

I suppose this isn't surprising, considering Stardock started by theme-ing Microsoft's Windows, but I think it's a bit cheesy and not at all relevant in any way.

Another issue I'll echo is that Purple... and bright orange.... just don't really LOOK good to me. It looks off. I'd like to suggest a much more Indigo color than straight up purple. That, coupled with the purple of the menus, buttons AND background starscape? I just see purple, literally, everywhere. 

Therefore, I'd like to recommend a color that's easier on the eyes: #1A237E

It's still got the purple, but looks a bit more like... appropriate to deep-space, to me. Just a suggestion.

Endless Space is generally considered to be a stellar UI. But I do have one problem with it, demonstrated by Hunam's screenshots: I don't know what a single one of those goddamn meaningless icons mean. I hate them. I hate them in every game that uses them. Some sort of graphical, meaningless icon in place of any sort of description. If a button takes you to the menu, it should just say "MENU" instead of a silhouette of a door opening, with some feet running out of it, and an arrow pointing out. Endless Space has them in DROVES: A spaceship. A medal. A... golden chalice? Another spaceship, this time with a "?" next to it. Another spaceship with what appears to be a fish. A wrench twisting a bolt. And then that same damn spaceship, now in front of some sort of sword weapon? And the shipbuilding screen? OMFG, don't even get my started.

Gluon Disruptor? Don't know what that is, maybe the icon will tell me..............nnnnope. Looks like a horseshoe being thrown at 12% of lightspeed. Ablative Wave Shield with... some sort of honeycomb, but some of them are lit up, while others are not? Is this telling me anything?! It's all nonsense. A button that has gears and says auto-upgrade, but what's that have to do with gears? And in the top left? You've got some sort of portal. Does that leave the shipbuilding screen? Then there are bird-wings, which.... looks a bit like the medals on an admiral's coat. A microscope, which doesn't make sense since we're building a ship. Is that a Syreen Penetrator icon???? It's nonsense, and it really increased the learning curve, while simultaneously serving to drive away n00bs who haven't played for being way too complicated-looking. It's like they let "simplicity" take over to its maximum effect. It ran the show until everything was so simple, nobody had a clue what the hell was going on ------- and just ended up confusing. It needs to be simple, and easily understood, or you WILL have people (lame people) say, "Nah, looks too complicated. I don't want to spend 3 hours in tutorials just to figure out how it all works."

Okay, I think that's it for now. I'll come back if I have any other thoughts.

Reply #7 Top

A lot of good points have been aired above. I don't feel making an sprawling input of my own would do more than just rethread what was said.

I will say this, though: playing on a Surface Pro 4 seems to be an objective. Surface tablets have touch screens. I don't believe touch screen controls would support the WASD+primary+secondary gameplay itself, but I'd see it as ideal that the UI buttons themselves, all around, would be compatible with fingerpresses.

I often switch between keyboard and touching the screen on my Surface. I'd be ideal in my eyes to consider the UI for use in both capacity.

(I am not suggesting for WASD+primary+secondary input on the touch screen like some tablet/phone games have.)

 

Reply #8 Top

I probably should've mentioned that I like the style of Endless Space UI a lot, and not necessarily the buttons execution. So cuore's points are totally valid.

Just don't make Text only Buttons in SCO. There shouldn't be any buttons on the screen in my estimation anyway. Space for inventory, Tab for Log. What do you need on-screen buttons for?

Reply #9 Top

^ It's true - overall, Endless Space's UI is phenomenal. The clicks are so clean, the sound is perfect, high-pitched TIC, the animation is smooth, and it's all completely 100% flat. It's a masterpiece, to be honest, and a work of art. Still needs work, but it's stellar overall.

Reply #10 Top

Never heard of Endless Space but might have to check it out..those screenshots look interesting.  I do like the UI, but I don't think the planetary info window would fit in SCO.  Too much hand holding as is.  Other than that it's nice an clean.

I don't want to see too much time and money wasted on SM backgrounds.  To be honest I can't even tell you what the background is currently.  I'm focused on the battle.  Needs some asteroids though.

Reply #11 Top

Problem is, Alverez, it'll be the same background when you're just flying around the system, looking at the sights...

Reply #12 Top

A very quick pass on one of the UI's based on my own thoughts and discussion above:
UI Suggestion

Explanation:

Went with a triad colour harmony (Original hex values before transparency/effects: 5207ad [purple]; ffb52c [orange]; 209e4c [turquoise[), as I believe complementary schemes are more for impact/contrast, and people may have this UI present for hours while crafting ships. Among other reasons.

Tried to make it more sleek, while keeping some of the more retro feel that I think the original was going for. Also feel like fleet selection is similar to building a card deck (as that's how it felt especially with the Rock Paper Scissors of SC2 ships), so tried to give the ship stats area more of a special card feel to it. Kept a balance between flat and still having some subtle texture from the background nebulae through slight transparency on everything but outlines (which also makes the whole thing feel more integrated/part of the same whole). Hover highlights/active tabs are done with orange borders/full opaque for navigation clarity.

I also assumed there must be some sort of tag assignment system for ships, to allow for the "my designs" and "downloaded" tabs, so thought in the "All" selection it would be useful if there was a small visual marking to indicate the original (so the small triangle in the upper left shows source, and the highlight on the tabs acts as a key).

Not sure if it will please anyone, but just my thoughts/take on what might look good :)

Reply #13 Top

^ Star Citizen inspired?

Reply #14 Top

Ah, not deliberately, though it might be in my subconscious/I've been to their site often enough. The diagonals, little bits of rounding, etc, are pretty standard sci-fi though (especially those touched a bit retro). The Endless Space UI has some diagonals too probably because of it.

*rummages on a guess* Thought BSG might share that design concept, and indeed it does. Example:

Reply #15 Top

Some very enjoyable feedback.

I agree about the backgrounds in particular.