GUI Design

[mor2]

This thread remains the place to discuss new artistic themes, though, so please continue as you were. I only want to make it clear that new artwork won't likely be implemented soon unless a complete set of graphics exists to replace the currently-used graphics (as they fit into the current UI layout). Suggestions that require new UI layouts or functions are still very much welcome, because I think this thread has generated a lot of interesting ideas.

obviously (i never thought my brownish theme had any chance) although this thread objective is unrealistic you will never get a complete set without feedback, you dont really expect anyone to waste his time redoing everything before he has a go, which requires a lots of steps a head.

which is why i told you the "design" (its not PHP nuke, its some games screenshot from google image) is un important only the schematics behind, the rest can be easily fitted in photoshop (gradients and overlays makes life so much easier).

[Bartleby]

i mean the movie. cant find a good picture right now. was the commandshipnavigation.
but whatever gui is a bit transparent and doesnt make the screen smaller is good. not that all thing should be transparent, but the space between a small border an the buttons should be half-transparent. or buttons without border like in wow. well... im going to sleep now, maybe more later.

EDIT: cant find better link atm.

the wow interface is also great: http://www.ullebambulle.de/images/wow_002.jpg
or deus ex: http://thisgamesucks.files.wordpress.com/2008/11/deus_ex_002.jpg

EDIT: i dont play wow, but i like the interface.

[Borsti67]

the wow interface is also great

Why? I see a sh*tload of pictures meaning nothing to me (as a non-WOW-player). THIS would certainly NOT let my ever try it...

[mor2]

we have a lot of great ideas and approaches through the thread about layout, functionality, accessibility, graphics, etc
the way i see it, we can roughly put the interface in 3 categories:
1. weapon control, we had a lot of ideas here and on this thread as well
2. soldier selection, we had very little discussion on this.
3. everything else, their placement depends on the above and changes to their functionality doesn't effect the global scheme.

considering that  in the future the soldier selection panel needs to support 16 soldiers, its will be the biggest most space consuming panel and we must decide how to implement it and where to put it.

we have few options:
A. stay on course and have 1-16 blue buttons.
B. replace the buttons with bar showing either soldier portraits or their function(or both)
in which case we need to decide how big soldier slot should be, since 16 of them takes some space as it can be seen here

so we need to either decrease the slot size, use sliders, put few rows etc, here is a few solution put together:


we also need to decide what (if any) additional info the slider should show, like names, weapons, 3 stats (see H-hour bar on p.8 for nice multi function slider suggestion)  and equipped with this knowledge we can finally do some damage  and place everything together


some other games research background for reference: Enemy Unknown and other UFO interfaces aftermath, afterlight , aftershock also UFO:ET and JA2 (which we all know)
and my personal favorite X-com apocalypse altough its not something we can expect, even if someone agree we need groups it will have to wait until they restructure the current troop scheme.



so any ideas, thought, critics, like/dont likes, one liners/life stories regarding any of the above or new directions will be welcome.

[bayo]

if we continue to use the current hud, i think we would use character (a, b, c, d), or veryvery small heads instead of number. Especially for this problem of digits.

The 2. need too much work, and ask too much questions. I can develop.

I think 3. is better than 4. and 5. but, there is a but. It must allow to drag the panel with a click-and-move on the soldiers heads. Without this feature all of this one will be very annoying to use.

6. is the more easy to create.

7. i dont like multi rows cause... i can't argue.

[mor2]

well, here is my latest progress, noting big but many little touches.

i am going to stick with lower panel, the left/right arm will be toggleable exactly like in the a.hud
the soldier selection bar will show 8 soldiers at a time with buttons to show next 8 (hopefully in the far future it can be expanded to teams like it was in XCOM APOC)

[Kildor]

It is not a good HUD design. It is very unintuitive, small and is not fitted to translation needs. Also, if I understand this mockup right, is row above soldiers used for level-switch? This is not a good idea, current version is better and more logical.

[mor2]

i would say its small, at least i dont think it buttons are smaller than the a.hud version, for example to shoot you click the weapon icon, so while the total surface area is smaller(so you i can see more) the buttons/function area is bigger.
there are few problems like the weapon button switch but its small in the a.hud as well, still i already made it bigger and probably will make additional adjustments in the future.

"is not fitted to translation needs" - agreed, i'll try to refrain from using it but at the moment i am still keeping it to make it self explanatory what everything does (since an image doesnt have an tooltip)
as for the floor selector i just placed him there to fit it in, here it is a screen from the other thread with it in the traditional position i also made an a.hud like suggestion, what direction you prefer?

in either case it doesnt intended to replace the default version but server as another hud version a mod if you like, here is the idea i had for the default layout with minimal change.


and most importantly can you please be more specific regarding what make it feel unintuitive an illogical to you, thanks.

[H-Hour]

I like the background for the soldier selection panel, but is it possible to have an image as the background (or a transparent background) for a rendered model node?

[Origin]

I think the main problem with that suggestion is the frames, the draw way too much attention, with the shiny crome and details that draw the eye.

Another thing im not a big fan of is the small dots on portraits and buttons. I guess they are meant to indicate if a character or ability is active, but I think there are better ways of achieving that. The dots are just too small and abstract. (I realise that illustrating how a UI works with just a static image is a challenge so i might be wrong here.)

On the positive side of things, the layout is greatly simplified, and instead of having elements spread all over the screen, its nicely organised in a bottom bar, wich I personally think is the way to go,

Please dont take offence at criticism, as none is intended. I dont think anyone has a complete image of what we need/want/is doable right now.



I dont know if any of you have ever played the Silent Storm series, so im gonna post a pic. I think there is some inspiration to draw from there




The tab system for soldier selection is slick, and makes it easy to track the status of soldiers at a glance.

All actions are gathered on the right side of the screen, and should be familiar to anyone who has ever played an rts.

Simple level select with a vertical layout that makes sense, and doesnt take up alot of space.

Color coded buttons that indicate what type of action the button represents at a glance. (in this case red=offensive blue=movement black=modechange & misc)

Buff/debuff window to the right of portrait, enables user to quickly see any effects applied to the currently selected character (such as stat changes due to injury, or status changes such as stunned or panicking)

Clickable spotted enemy indicator, allows user to quckly center on a spotted enemy.

Fairly anonymous frame, with little to no "bling".

Not saying that its perfect (or doable ), but i think that we should look into most of those things.

I like the background for the soldier selection panel, but is it possible to have an image as the background (or a transparent background) for a rendered model node?

Yes, I tried this with just replacing the existing frames.

[Kildor]

I really like SS`s feature «Showing which turn is now». And hope there will be some like this in ufoai. Also, I want to have normal combat-log, may be with turn indication. May be one day I`ll try to do something with it.

[mor2]

Please dont take offence at criticism, as none is intended. I dont think anyone has a complete image of what we need/want/is doable right now.
...
I think the main problem with that suggestion is the frames, the draw way too much attention, with the shiny crome and details that draw the eye.
...
Another thing im not a big fan of is the small dots on portraits and buttons. I guess they are meant to indicate if a character or ability is active, but I think there are better ways of achieving that. The dots are just too small and abstract. (I realise that illustrating how a UI works with just a static image is a challenge so i might be wrong here.)

1. its the other way, i love it. especially the attention to details.
2. i noticed its bright and doesnt fit the mood well but its easily adjustable and will be done at the end after i see how it fits with the rest of the graphics (for example here 2sec frame adjustment).
about the details, you mean the pure graphical ones or the additional info causing information overload?
3. i have tried to get feedback on that bar for ages, the bar dots are actually h-hour idea from p.8, they suppose to be small and un intrusive and their whole purpose is to bring attention to soldiers who has yet to be moved. (with 16 soldiers i assume its will be a pro)
the other dots on the stance/RF are an indication if the action was reserved to avoid this tiny button, i just combined the two buttons together (L.click use, R.click reserve)

The tab system for soldier selection is slick, and makes it easy to track the status of soldiers at a glance.
...
Simple level select with a vertical layout that makes sense, and doesnt take up alot of space.
...
Color coded buttons that indicate what type of action the button represents at a glance. (in this case red=offensive blue=movement black=modechange & misc)

1. agreed, i to want a normal sat's bar instead of that 3px line i manged so far but its my understanding that people wanted portraits and the 3 stats in their selection bar.
and portraits do take a lot of space...
i was toying with idea of simplified and advanced view toggleable by a button/key(ctrl?) but i am getting over my self here, in either case i am not looking for the plain default hud look but i am exploring ways to present additional information better. nice big buttons are nice for "streamlined design" but i am not going to cut down on information. in hopes the game will continue in the path of tactical shooter instead of point and click.
what i do like about the interface as whole it's simplistic big design, i may not have choosen this path but if required more space to make it more easy on the eye, i'll make it bigger (vertically).

2. i like a.hud style better but its simply a matter of if i have h.spaces on the bottom, otherwise i prefer a side option without a background.
3. well we dont need most of that, we use the mouse to do it, for example the 'move' button is pointless, even the default hud doesnt include those. as for the nicely colored icons for the buttons, its would be a blast, if only we had someone who can do it  

Buff/debuff window to the right of portrait, enables user to quickly see any effects applied to the currently selected character (such as stat changes due to injury, or status changes such as stunned or panicking)
...
Clickable spotted enemy indicator, allows user to quckly center on a spotted enemy.
...
Fairly anonymous frame, with little to no "bling".

1. this is not something we can do, this why we have the big stats bar.
2. we already has an button for it on both huds.
3. its only a bling if it doesnt serve any purpose and i do like the hitec'y style in my opinion it fits better with 2070 advance.

[Bartleby]

many people like me today use widescreens. thats why i like interfaces that also use the left and right side of the screen.

mor2, i dont like the dots very much. i liked ure version with the active soldier having a normal border more.

[mor2]

the active soldier does use normal border to distinguish him from the rest, the dots has nothing todo with the active soldier, they mark the soldier who are yet to move... (maybe i'll move it or play with stats colors)

the dots over the RF/stance will be replaced with something more informative since there are more than 2 reservation options and the weapon will have a better indication.

i already has most of it working, now i am working on the code and then moving to the little things.

[mor2]

ok i am done with playing with the code and now that i implemented it, i know that i can do it not only talk about it  
now i am back for the design board.

looking at this older mockup i think the active soldier portrait should be moved to the lowe panel as well, the stats panel should be butchered and inc operated or add to it the status panel.

any other suggestions and everything goes, yes even changing to plainer simpler background (for the background some kind of illustration that fit the current color scheme will be greatly appreciated)

I dont know if any of you have ever played the Silent Storm series, so im gonna post a pic. I think there is some inspiration to draw from the
Not saying that its perfect (or doable ), but i think that we should look into most of those things.

something like this perhaps 

many people like me today use widescreens. thats why i like interfaces that also use the left and right side of the screen.

any suggestion that i can look into?