UI Adjustments: Battlescape

[H-Hour]

This thread is an attempt to start a slow, step-by-step process of re-evaluating the UI. The GUI Design thread in the Artwork forum has long been throwing around ideas, but there's been no focus on any one thing nor a clear sense of what is do-able at the moment. This thread will focus on the battlescape and I will modify this first post to keep track of what we're working on and what has been settled on.

This will be a heavily moderated thread. Posts should make clear proposals or constructive comments on existing proposals. Posts should also focus on what is do-able in a short time frame. This is not the place to completely revamp the whole UI, and for now the GUI Design thread remains the place to suggest new art styles for the UI. Mockups don't need to be drawn in the existing UI style, but should be able to be implemented in the current style.

Current Focus: Reducing the buttons and complexity
The current default HUD has a lot of buttons on the screen. Let's try and figure out some better ways to group the functions and reduce the complexity of the interface. In addition, there are some features of the althud which reduce the buttons as well as some additional information (particularly soldier stat bars) that should be incorporated in the default HUD.

Specs

• The HUD should be designed within an 800x600 frame. I think our overall UI minimun will likely be 1024x768, but working towards a smaller frame may help us compress where we otherwise might not.
• The proposed HUD should be implementable with the current art style.
• All HUD work has to be approved by Bayo, our resident UI man. He more than anyone else knows what is POSSIBLE.

[H-Hour]

First, I want to do a little bit of where-we're-at-now, so that everyone sees what is already available. Proposals should reference a specific change to the default HUD. Attached are screenshots of the default HUD and the Alt Hud, with some notes on what might be used/changed.

The default HUD

• There have already been some productive suggestions for how to streamline the weapon selection, one from Kildor and one from mor2.
  
• It might be worth thinking about how we can combine the soldier's information, including buttons for popups to inventory/stats, in one location in the bottom bar.
• Also, I think it could be a good idea to try and find a good way to combine all the time reservation buttons. The standing/crouching reservation is particularly unclear without the tooltip.

The Alt HUD

• The level selector really reduces the complexity of finding the right level and the space it requires on the screen. I suggest we try to incorporate it in some way.
• Grouping the buttons that don't actually control actions on the battlescape -- the end turn and options button (what's the other one?) -- is a good idea, I think.
• Having the player stats for health, TU and morale is very good and should be used.
• The buttons below the weapon may be too compressed, because it's not entirely clear what all of them do.

[H-Hour]

I have a couple questions for Bayo to start:

1) We can do horizontal bars for health/etc, but is it possible to do vertical bars as well?

2) Is it possible to insert a button onto the edge of a container, as the attached image shows, and would this break with the existing UI style too much?

3) Is it possible to have a box that collapses when not in use? I'm thinking of the left-hand weapon. If there is no weapon, can you change the size of the box or is this not changable based on such parameters?

[Bartleby]

and the new gui should work with 16 soldiers, not?

[H-Hour]

and the new gui should work with 16 soldiers, not?

I think it should work with 8 but be easily expandable up to 16 when the time comes. If Bayo is happy with this, I'll add it to the specs above.

[H-Hour]

I decided to first focus on the weapon panel, pulling together the ideas both Kildor and mor2 have put up in the GUI thread. I wanted to concentrate all weapon-related functions/information together without creating too many buttons. The only thing missing I think is reaction fire reservation, but I think all TU reservation should be concentrated in an overall soldier-status panel instead.

* Button style is just a mockup and could be done as the current blue buttons or any other way.

[Kildor]

> We can do horizontal bars for health/etc, but is it possible to do vertical bars as well?
Yes, it is possible.

> Is it possible to have a box that collapses when not in use? I'm thinking of the left-hand weapon. If there is no weapon, can you change the size of the box or is this not changable based on such parameters?
I think it is possible too.

> Is it possible to insert a button onto the edge of a container, as the attached image shows, and would this break with the existing UI style too much?
It will be very unintuitive, have you ever seen 2.2.1 geoscape? There were 3 buttons like that, and many questions on the forum about «ufopaedia», «new base» and «options».

[mor2]

i love aesthetic and minimalist design but it should get in the way of accessibility, functionality  and user friendliness. the way i see it the
interface functions should be clear and consistent, with big buttons and clear icons, all this to avoid mistakes and speed up the interaction for both new and experienced users. op top of that its important to locate and group commonly used functions in place them together in a logical order.

we dont want to headshot those buttons, miss click change stance instead of reserve, run around the screen doing a routine stuf and shuning new users because its just to confusing to remember what does what and where.

[mor2]

for example, here what i mean (please ignore the art style its irrelevant to the topic @h-hour i'll make a "current art style" version after i see an answer to your third post)



first from the design perspective, i tried to make it clear, easily understood and distinguishable (over every terrain)
instead of many small buttons, i prefer few big buttons that combine multiple functionality and provide me with more information.

after selecting a soldier, i focus on the stats(TU/Health/moral) the weapon/ammo, fire mod TU cost, reservations etc.. so all those was grouped together and i tried to arrange them logically, here: (i had it done already)



so you click on the weapons to fire, on the ammo to reload on the stances to set them, any simpler than that?
also its not shown in this screenshot but clicking on the that arrow near the weapon/ammo will open the inventory just above it. it is the same location where a window for fire/RF mods opens it there consistently and at the same time it doesnt obstruct the main view.

i hope my rumbling helps.

[H-Hour]

> Is it possible to insert a button onto the edge of a container, as the attached image shows, and would this break with the existing UI style too much?
It will be very unintuitive, have you ever seen 2.2.1 geoscape? There were 3 buttons like that, and many questions on the forum about «ufopaedia», «new base» and «options».

I haven't seen the 2.2.1, but I have no problem turning them into the standard blue buttons. To me, placing them on the edge like I have makes it more intuitive that they will pop-up, but maybe that's just me.

we dont want to headshot those buttons, miss click change stance instead of reserve, run around the screen doing a routine stuf and shuning new users because its just to confusing to remember what does what and where.

I'm not sure if I understand you here. What do you mean "headshot those buttons"? If you're making a comment about my proposal, please be specific about what it is you're talking about.

If you're saying the buttons are too small, they can certainly be made larger. I think the whole box is probably a bit small.

Thoughts on mor2's proposal
These may be a bit obvious because I've taken what I like and discarded what I don't like from your proposal in mine, but here goes. I'll just comment on the weapon/ammo part because I want to stay focused on one thing and I think both of our proposals still group the same functions under the weapon/ammo area.

1) I don't think there should be so much text/numbers. We should avoid representing things in text/numbers as much as possible on the main screens (ie - anything that doesn't pop-up and is always there). This is why I chose the bar graphs to show ammo count and TU-cost of weapon fire. Numbers force players to do math (is 6 ammo a lot or almost gone?).

2) I think there needs to be a clear separation between clickable buttons and information display. This is the main problem I have with your reloading function. There is no clear indication that clicking on the ammo will reload the weapon and having an icon like stance/rf mode to say "I'm clickable" seems to me to create more clutter. Also, it would be quite easy to go for "fire" and accidentally hit reload since they are visually linked closely.

3) I do like the idea of displaying the ammo cartridge in the same box as the weapon, and the popup with weapon firemodes and info. It seems fairly intuitive to me the way you did it and I incorporated both things into my proposal as well.

ps - You don't need to do your mockups in the current art style. Certainly don't redo anything just for that.

[mor2]

1. i love how he put all the important stuff in together but it will be confusing to a lot of people.
2. i prefer bigger stats indicator over the useless huge soldier model.
3. there is a dead spot in the corner.

4.  i really prefer the old level selector, this one makes me spend more time clicking it,  going from floor to floor will be hell espcialy if you missed the floor by fast clicking, plus going from floor to floor means annoying flickering (probably the GPU may not like it as well.
5. i like the soldier selction bar with portraits but how will it work with16 soldier, slider? i prefer no portraits at all over shrinked ones.

on personal note, in UFOAI i have no "personal" connection, in other words i dont care about the individual soldiers, they are just functions to me, which is why i liked you bar with heavy/sniper/assult/two handed... icons. the soldiers just die (instead of being hospitalized for really long) you cannot arrange them, you cannot equip them(they part of ship crew) and many other little things that makes it so.



1. i prefer numbers over bars(or numbers with bars), the indicator on the map and the fire mod and every tool tip gives you numerical indication so bars alone just dont work.
2. its might be a very good idea to separate the TU from the other stats, it certainly gives much more room for maneuver.
3. as i said before i dont see the need in the small reload and aim buttons, when the ammo and weapon icons can be used for this for this instead of just looking pretty but its just my opinion and might not be technically applicable.
4. the info in your fire mode selection screen is more helpful than my copy/paste stats and i like that you too decided to place all the screens in one place.


EDIT: you just keep posting just before i do   in my previous post i just explained my general approach because up until now i was mostly posting screens without the why, so that now we can discuss them (p.s. by headshot i meant small buttons that require hard work to "hit" them)  and in this post i referenced other works.

[H-Hour]

mor2 comments on my proposal:

1. i prefer numbers over bars(or numbers with bars), the indicator on the map and the fire mod and every tool tip gives you numerical indication so bars alone just dont work.

Numbers can appear in tooltips that pop up on mouseovers.

2. its might be a very good idea to separate the TU from the other stats, it certainly gives much more room for maneuver.

I think there may be some confusion here. The TU display under the weapon is not a replacement for the overall TU indicator. It is meant to indicate remaining TUs and TU cost of current fire mode.

3. as i said in my previous post i dont see the need in the small reload and aim button when you can use the ammo and weapon for this (but its just my opinion and might not be applicable technically)

There is some more confusion here. The player would fire by clicking anywhere in the weapon panel. The aim button (far left) is only the fire mode/stats popup button.

[mor2]

don't think there should be so much text/numbers. We should avoid representing things in text/numbers as much as possible on the main screens (ie - anything that doesn't pop-up and is always there). This is why I chose the bar graphs to show ammo count and TU-cost of weapon fire. Numbers force players to do math (is 6 ammo a lot or almost gone?).

i agree bars are much more user friendly but lets not forget the experienced players that would like those numbers especially since the rest of the interface uses only numerical representation. so unless its only indicators like in the stats of the new soldiers selection bars, we should stick to numbers or both.

in other words, when i select a soldier i want to know how much TU will it cost me to fire or how much TU i want to keep while choosing a position on the map considering i want tobe able to make 2 shots.

This is the main problem I have with your reloading function. There is no clear indication that clicking on the ammo will reload the weapon and having an icon like stance/rf mode to say "I'm clickable" seems to me to create more clutter. Also, it would be quite easy to go for "fire" and accidentally hit reload since they are visually linked closely.

does your weapon button indicates that clicking it will select the fire cursor? at best its a learning curve thing, at worst we just make a button outline around them both.
on other hand it seems to me that making a lot of additional small buttons or big, seems like clutter or at least waste of space.

I think there may be some confusion here. The TU display under the weapon is not a replacement for the overall TU indicator. It is meant to indicate remaining TUs and TU cost of current fire mode.

in that case if its not like the main TU indicator you should clearfy how will it work with the TU reservation and the map cursor thing and not be confusing?

p.s. i still think that this might be a good idea trying an interface with TU separated from the holy stats trinity.

3. as i said in my previous post i dont see the need in the small reload and aim button when you can use the ammo and weapon for this (but its just my opinion and might not be applicable technically)

There is some more confusion here. The player would fire by clicking anywhere in the weapon panel. The aim button (far left) is only the fire mode/stats popup button.

so why make him click on that tiny button to select fire mod instead of right clicking it?  (same goes for the ammo as mentioned in the beginning of the post)


Moderator edit: I removed your links to the other soldier bars. Please, let's keep the focus on one thing at a time.

[bayo]

Well, it is already a mess to read all this thing. Forum is definitely not the right support. How to reply about something, somebody already reply. Everything is splited into little pieces of text. I am sorry, I think i already missed to read some text.

Anyway:

About http://ufoai.ninex.info/forum/index.php?action=dlattach;topic=5468.0;attach=5734;image
* I dont see the point of changing the shoot task with that. I mean spliting user action 1) select the fire mode and 2) shot something. We can talk about that only point in a separate thead cause it evilly affect the GUI result.
* This current fire mode do not easily help to select a fire mode (you must select one by one everything to compare), especialy the TU (which is, i think, the more important)
* I dont see a bar (like that) for bullets as an improvment (2 bullet instead of 3 is an important information, anyway the weapon can contain 200 bullets or not; or 100/200 is not the same as 1/2).
* I dont see this TU bar position as an help for the "understandability" (IMO TU have nothing to do near the weapon). Maybe it is the same for the inventory button.

About http://i53.tinypic.com/ndg21.png
* I think this 2 buttons + status for crouch/standup is better than what we have (cause the meaning of a click never change), size here is not a problem.
* About right click use, i would like we continue to use it as an option (i mean it can be a shortcut for something, but we should anyway allow to do the same action with another way and without right click use).

[mor2]

1. so what exactly we all have agreed on?
2. Removed by moderator: I already said focus on one thing at a time please.
3. as for additional icons for us to click,  there just  wrong and right clicks