UFO:Alien Invasion
General => Discussion => Topic started by: H-Hour on October 20, 2010, 12:24:22 pm
-
This thread is an attempt to start a slow, step-by-step process of re-evaluating the UI. The GUI Design (http://ufoai.ninex.info/forum/index.php?topic=4762.0) 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 (http://ufoai.ninex.info/forum/index.php?topic=4762.0) 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.
-
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 (http://ufoai.ninex.info/forum/index.php?topic=4762.msg39417#msg39417) and one from mor2 (http://ufoai.ninex.info/forum/index.php?topic=4762.msg43949#msg43949).
- 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.
-
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?
-
and the new gui should work with 16 soldiers, not?
-
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.
-
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.
-
> 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».
-
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.
-
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)
(http://i53.tinypic.com/ndg21.png)
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)
(http://i51.tinypic.com/29livc7.png)
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.
-
> 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.
-
(http://ufoai.ninex.info/forum/index.php?action=dlattach;topic=5468.0;attach=5727;image) (http://ufoai.ninex.info/forum/index.php?action=dlattach;topic=5468.0;attach=5726;image)
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.
(http://ufoai.ninex.info/forum/index.php?action=dlattach;topic=5468.0;attach=5735;image) (http://ufoai.ninex.info/forum/index.php?action=dlattach;topic=5468.0;attach=5734;image)
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.
-
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.
-
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.
-
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).
-
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 8)
-
I am sorry, I think i already missed to read some text.
I think you touched on the main points that needed addressing. Unfortunately, I think we disagree about most things. This may not work out very well.
* 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.
Well, firing and selecting a fire mode are not the same thing. I don't want to have to re-select a fire mode every time I shoot. The only reason I can see to force the extra click is to prevent players from accidentally using the wrong firing mode, but it's not a sufficient reason for me.
* 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 could definitely see the benefit of adding TU to the end of the name of the fire mode, so that all fire modes had TUs visable for comparison.
* 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).
Hmm, maybe tomorrow I will try and work out a compromise. Is it possible to have a vertical bar that also has a number written on top of it? I want the bars primarily for the ability to quickly scan. Not every activity involves adding up all the numbers, especially reloading, and while some math will always be involved in tight situations, I think the play experience will be smoother if it's not forced on every action. The number 10 could mean I'm almost out of bullets or it could mean I'm fully loaded. It depends on the ammo, and usually corresponds to the types of fire modes available (only weapons that use lots of bullets at once will have ammo that holds 200 bullets). So I still think the bar is a more immediate measurement of the state of my ammo supply, even if the actual number will become important as it gets close to running out.
* 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.
But with the fire mode you suggested that TU was the most important thing. I guess I would want to know first and foremost how the TU of a given firing mode compares to my available TU. But I see no reason to labor over this. If it's not desired it can easily be discarded. The inventory button: where could it possibly be more useful than next to the "hands", where most of the inventory shuffling will occur (drop weapon, hold med-kit/grenade)?
* 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).
I can definitely, fully agree with you on this point! :)
-
Attached is a revision showing some of the changes that you suggested. But the inventory button is still there and the separation of fire mode and fire is also still there.
With the fire mode / firing, you could make it so that when the user selects a fire mode it automatically sets it to fire, just like in the game. Then the player has two options: 1) Select fire mode and fire (2 clicks as it is currently implemented) or 2) fire with existing fire mode (one click).
-
ok, other try to explain. anyway. nothing really knew about ui-design :).
there are 2 different things:
- graphic (atm the worst thing)
- funktionality (more important)
graphic
Removed by moderator. Artwork will not be discussed in this thread, as mentioned in the first post.
funktionality
- should work with 16, but shoudnt show 16 icons whole time. as much icons viable as soldiers are on the battlefield and no frames or borders that show the "missing" soldiericons.
- the panel right with the floors should automatically be hidden and pop up, when mouse moves to the right.
- dobbleklick on small soldiericon opens soldiers inventory
- rightklick on soldiericon opens stats.
well.. maybe i should make a paint on the weekend, but i think that all new ideas are good and every change would be great.
-
@H-Hour, i disagree that we need to concentrate on each control, design is functionality and you cannot design without seeing the whole picture at best we are doing tiny adjustments, anyway i made a few quick changes to your revision:
(http://i52.tinypic.com/nwet0w_th.jpg) (http://i52.tinypic.com/nwet0w.jpg)
1. made buttons bigger.
2. changed buttons order, it makes more sense that fire mode selection which is more commonly used than reload, be placed closer to the center.
3. the firemode should show TU and ammo consumption as before (its the single most important thing there) the rest of the stats are mostly weapon stats (for those who didnt memorized the whole ufopedia), i also added spread.
4. since we are trying new things i put the stats under the weapon panel and made the firemode panel open up to the right, the question is where will be the rest of the controls.
i also attached the PDN file (paint.net) i worked with, so if anyone else want to give it a shoot its very simple and free program, every control has its layer so you dont have to be a graphical wiz to make something.
i support right clicks 8)
-
ok, other try to explain. anyway. nothing really knew about ui-design :).
there are 2 different things:
- graphic (atm the worst thing)
- funktionality (more important)
graphic
1. should be minimalistic (as much of battlescape visual)
2. if there is a background it should be semitransparent
3. one main color (atm green/gray. i really like the brown)
4. small borders (1px black around an icon and semitransparent background, brown, if needed, with a small border, also brown and a bit transparent.)
functionality
5. should work with 16, but shoudnt show 16 icons whole time. as much icons viable as soldiers are on the battlefield and no frames or borders that show the "missing" soldiericons.
6. the panel right with the floors should automatically be hidden and pop up, when mouse moves to the right.
7. dobbleklick on small soldiericon opens soldiers inventory
8. rightklick on soldiericon opens stats.
well.. maybe i should make a paint on the weekend, but i think that all new ideas are good and every change would be great.
personally i dislike semitransparent hud, i prefer sharp clear ones, with good color contrast and little gradients for highlights.
5. agreed.
6. good idea but you need some kind of "place holder" for it, people need to know its there, take for example the log on geo scape.
so may be we can make a panel showing the current floor and expand when you want to choose a new one?
7. possible but we are not working on the soldiers bar yet.
EDIT: correction i didnt see any double click Callback functions so onlyleft/middle/right, over and wheel.
8. this one will be very easy to do, few lines at best but see 7.
right clicks is the shit :P
-
I vote for right clicks also. ;)
(And double clicks are sh*t!)
Could reduce the number of icons whilst being intuitive (IMHO):
Weapon: Left click = fire, right = reload
Fire Mode: Left click = set fire mode, right = set FM for reaction fire
...
-
Fire Mode: Left click = set fire mode, right = set FM for reaction fire
IMO the RF and reservation is the thing need the bigger rework. I dont play a lot, but ATM i dont understand all this things... then there is a problem.
About http://i52.tinypic.com/nwet0w.jpg
* The firemode popup is not at a very good position, or the design do not help to see it at the right position.
7. possible but we are not working on the soldiers bar yet.
EDIT: correction i didnt see any double click Callback functions so onlyleft/middle/right, over and wheel.
Yes, we dont feature it, then we use it nowhere, then we should not use it somewhere.
* 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.
Well, firing and selecting a fire mode are not the same thing. I don't want to have to re-select a fire mode every time I shoot. The only reason I can see to force the extra click is to prevent players from accidentally using the wrong firing mode, but it's not a sufficient reason for me.
In my self experience, I mostly never use the same firemode, it depend a lot of the TU and movment i do. Then i dont see how separating this 2 aspects can't be a mess for players.
What we mean by "firemode" is not a weapon status but mostly the way the soldier will use the weapon (a compromise between accuracy and number of bullets we shoot). I think we can talk about that if we only separate weapon status from our "firemode" list (and maybe only in the case of changing weapon status will use some TU (cause it became an important action), or if our firemode list became very big), or if most of player dont play like i said.
In the case of a gameplay for shoting like Jagged Alliance or Fallout, i think it is good too (i mean accuracy became an independent parameter). We can change the gameplay, but it is out of my scope.
-
About http://i52.tinypic.com/nwet0w.jpg
* The firemode popup is not at a very good position, or the design do not help to see it at the right position.
its because i left space for a bottom and side bars, beside that its in perfect position, the text is out of the way and after clicking you move right to the selection.
What we mean by "firemode" is not a weapon status but mostly the way the soldier will use the weapon (a compromise between accuracy and number of bullets we shoot). I think we can talk about that if we only separate weapon status from our "firemode" list (and maybe only in the case of changing weapon status will use some TU (cause it became an important action), or if our firemode list became very big), or if most of player dont play like i said.
In the case of a gameplay for shoting like Jagged Alliance or Fallout, i think it is good too (i mean accuracy became an independent parameter). We can change the gameplay, but it is out of my scope.
i am not sure what you mean, can you sum up what you suggest that we do?
IMO the RF and reservation is the thing need the bigger rework. I dont play a lot, but ATM i dont understand all this things... then there is a problem.
i know what you want UI guy, the problem is that you dont know how much i dont want to give it to you ;D
my guess that you want to leave every as is with little adjustments to the RF/stance reservation, well here it is BUT some other changes are still include :P
-
Well, this has gotten as out of control as the other thread now. Thank you mor2 for continuing to raise new issues before we resolved the old ones, even after I asked you not to.
If I thought this was going in a productive direction I would just moderate the posts, but it seems that bayo and I do not really share much common ground on how the UI ought to function. I don't think our back and forth is getting anywhere that bayo couldn't get to himself. Unless other devs want to get involved in the decision-making process, I think my involvement will only cause more headaches for bayo and he's the one doing all the work.
I will lock this thread but bayo or another moderator is welcome to reopen it if there is something here they want to follow.
-
i am not sure what you mean, can you sum up what you suggest that we do?
I only argued why i think the proposed task for firing is not better, i can draw an image. But i dont suggest anything.
Anyway, as i already said many time, i can be wrong, It is only human thinking, and we dont have cheep way to tests solutions.
BTW the battlescape screen is the only one window everybody can easily hack, cause we can parameter the name of the window with a cvar.
* For little changes, it is easy to test it, and you dont break the current screens, cause you work on another things
* For big changes, like this firemode selection, it need to rework the protocol between (server-)client-gui, i think we can work on that, but it must aim a more generic way (i think Duke already said is somewhere). I mean, we (at least me) can help people to work on this solutions, but i dont think we will fully implement the solution.
I am not the only one working on the GUI, geever usually work more than me. Then you can find people with knowledge to do some job.
I will lock this thread
hoo... oups